Merge branch 'develop' into v1-dark-mode

legacy/src/RobotDuplicate.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import { GenericModal } from "../ui/GenericModal";
+import { TextField, Typography, Box, Button } from "@mui/material";
+import { modalStyle } from "../recorder/AddWhereCondModal";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { duplicateRecording, getStoredRecording } from '../../api/storage';
+import { WhereWhatPair } from 'maxun-core';
+import { useTranslation } from 'react-i18next';
+
+interface RobotMeta {
+    name: string;
+    id: string;
+    createdAt: string;
+    pairs: number;
+    updatedAt: string;
+    params: any[];
+}
+
+interface RobotWorkflow {
+    workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+    runEvery: number;
+    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
+    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
+    atTimeStart?: string;
+    atTimeEnd?: string;
+    timezone: string;
+    lastRunAt?: Date;
+    nextRunAt?: Date;
+    cronExpression?: string;
+}
+
+export interface RobotSettings {
+    id: string;
+    userId?: number;
+    recording_meta: RobotMeta;
+    recording: RobotWorkflow;
+    google_sheet_email?: string | null;
+    google_sheet_name?: string | null;
+    google_sheet_id?: string | null;
+    google_access_token?: string | null;
+    google_refresh_token?: string | null;
+    schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+    isOpen: boolean;
+    handleStart: (settings: RobotSettings) => void;
+    handleClose: () => void;
+    initialSettings?: RobotSettings | null;
+
+}
+
+export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
+    const { t } = useTranslation();
+    const [targetUrl, setTargetUrl] = useState<string | undefined>('');
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
+
+    useEffect(() => {
+        if (isOpen) {
+            getRobot();
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (robot) {
+            const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
+            const url = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+            setTargetUrl(url);
+        }
+    }, [robot]);
+
+    const getRobot = async () => {
+        if (recordingId) {
+            const robot = await getStoredRecording(recordingId);
+            setRobot(robot);
+        } else {
+            notify('error', t('robot_duplication.notifications.robot_not_found'));
+        }
+    }
+
+    const handleTargetUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTargetUrl(e.target.value);
+    };
+
+    const handleSave = async () => {
+        if (!robot || !targetUrl) {
+            notify('error', t('robot_duplication.notifications.url_required'));
+            return;
+        }
+
+        try {
+            const success = await duplicateRecording(robot.recording_meta.id, targetUrl);
+
+            if (success) {
+                setRerenderRobots(true);
+
+                notify('success', t('robot_duplication.notifications.duplicate_success'));
+                handleStart(robot);
+                handleClose();
+            } else {
+                notify('error', t('robot_duplication.notifications.duplicate_error'));
+            }
+        } catch (error) {
+            notify('error', t('robot_duplication.notifications.unknown_error'));
+            console.error('Error updating Target URL:', error);
+        }
+    };
+
+    return (
+        <GenericModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            modalStyle={modalStyle}
+        >
+            <>
+                <Typography variant="h5" style={{ marginBottom: '20px' }}>
+                    {t('robot_duplication.title')}
+                </Typography>
+                <Box style={{ display: 'flex', flexDirection: 'column' }}>
+                    {
+                        robot && (
+                            <>
+                                <span>
+                                    {t('robot_duplication.descriptions.purpose')}
+                                </span>
+                                <br />
+                                <span dangerouslySetInnerHTML={{
+                                    __html: t('robot_duplication.descriptions.example', {
+                                        url1: '<code>producthunt.com/topics/api</code>',
+                                        url2: '<code>producthunt.com/topics/database</code>'
+                                    })
+                                }} />
+                                <br />
+                                <span>
+                                    <b>{t('robot_duplication.descriptions.warning')}</b>
+                                </span>
+                                <TextField
+                                    label={t('robot_duplication.fields.target_url')}
+                                    key={t('robot_duplication.fields.target_url')}
+                                    value={targetUrl}
+                                    onChange={handleTargetUrlChange}
+                                    style={{ marginBottom: '20px', marginTop: '30px' }}
+                                />
+                                <Box mt={2} display="flex" justifyContent="flex-end">
+                                    <Button variant="contained" color="primary" onClick={handleSave}>
+                                        {t('robot_duplication.buttons.duplicate')}
+                                    </Button>
+                                    <Button
+                                        onClick={handleClose}
+                                        color="primary"
+                                        variant="outlined"
+                                        style={{ marginLeft: '10px' }}
+                                        sx={{
+                                            color: '#ff00c3 !important',
+                                            borderColor: '#ff00c3 !important',
+                                            backgroundColor: 'whitesmoke !important',
+                                        }} >
+                                        {t('robot_duplication.buttons.cancel')}
+                                    </Button>
+                                </Box>
+                            </>
+                        )
+                    }
+                </Box>
+            </>
+        </GenericModal>
+    );
+};

legacy/src/RobotEdit.tsx

@@ -0,0 +1,586 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GenericModal } from "../ui/GenericModal";
+import { TextField, Typography, Box, Button, IconButton, InputAdornment } from "@mui/material";
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { modalStyle } from "../recorder/AddWhereCondModal";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { getStoredRecording, updateRecording } from '../../api/storage';
+import { WhereWhatPair } from 'maxun-core';
+
+interface RobotMeta {
+    name: string;
+    id: string;
+    createdAt: string;
+    pairs: number;
+    updatedAt: string;
+    params: any[];
+}
+
+interface RobotWorkflow {
+    workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+    runEvery: number;
+    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
+    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
+    atTimeStart?: string;
+    atTimeEnd?: string;
+    timezone: string;
+    lastRunAt?: Date;
+    nextRunAt?: Date;
+    cronExpression?: string;
+}
+
+export interface RobotSettings {
+    id: string;
+    userId?: number;
+    recording_meta: RobotMeta;
+    recording: RobotWorkflow;
+    google_sheet_email?: string | null;
+    google_sheet_name?: string | null;
+    google_sheet_id?: string | null;
+    google_access_token?: string | null;
+    google_refresh_token?: string | null;
+    schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+    isOpen: boolean;
+    handleStart: (settings: RobotSettings) => void;
+    handleClose: () => void;
+    initialSettings?: RobotSettings | null;
+}
+
+interface CredentialInfo {
+    value: string;
+    type: string;
+}
+
+interface Credentials {
+    [key: string]: CredentialInfo;
+}
+
+interface CredentialVisibility {
+    [key: string]: boolean;
+}
+
+interface GroupedCredentials {
+    passwords: string[];
+    emails: string[];
+    usernames: string[];
+    others: string[];
+}
+
+interface ScrapeListLimit {
+    pairIndex: number;
+    actionIndex: number;
+    argIndex: number;
+    currentLimit: number;
+}
+
+export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
+    const { t } = useTranslation();
+    const [credentials, setCredentials] = useState<Credentials>({});
+    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
+        passwords: [],
+        emails: [],
+        usernames: [],
+        others: []
+    });
+    const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});
+    const [scrapeListLimits, setScrapeListLimits] = useState<ScrapeListLimit[]>([]);
+
+    const isEmailPattern = (value: string): boolean => {
+        return value.includes('@');
+    };
+
+    const isUsernameSelector = (selector: string): boolean => {
+        return selector.toLowerCase().includes('username') ||
+            selector.toLowerCase().includes('user') ||
+            selector.toLowerCase().includes('email');
+    };
+
+    const determineCredentialType = (selector: string, info: CredentialInfo): 'password' | 'email' | 'username' | 'other' => {
+        if (info.type === 'password' || selector.toLowerCase().includes('password')) {
+            return 'password';
+        }
+        if (isEmailPattern(info.value) || selector.toLowerCase().includes('email')) {
+            return 'email';
+        }
+        if (isUsernameSelector(selector)) {
+            return 'username';
+        }
+        return 'other';
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            getRobot();
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (robot?.recording?.workflow) {
+            const extractedCredentials = extractInitialCredentials(robot.recording.workflow);
+            setCredentials(extractedCredentials);
+            setCredentialGroups(groupCredentialsByType(extractedCredentials));
+            
+            findScrapeListLimits(robot.recording.workflow);
+        }
+    }, [robot]);
+
+    const findScrapeListLimits = (workflow: WhereWhatPair[]) => {
+        const limits: ScrapeListLimit[] = [];
+        
+        workflow.forEach((pair, pairIndex) => {
+            if (!pair.what) return;
+            
+            pair.what.forEach((action, actionIndex) => {
+                if (action.action === 'scrapeList' && action.args && action.args.length > 0) {
+                    // Check if first argument has a limit property
+                    const arg = action.args[0];
+                    if (arg && typeof arg === 'object' && 'limit' in arg) {
+                        limits.push({
+                            pairIndex,
+                            actionIndex,
+                            argIndex: 0,
+                            currentLimit: arg.limit
+                        });
+                    }
+                }
+            });
+        });
+        
+        setScrapeListLimits(limits);
+    };
+
+    function extractInitialCredentials(workflow: any[]): Credentials {
+        const credentials: Credentials = {};
+
+        const isPrintableCharacter = (char: string): boolean => {
+            return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
+        };
+
+        workflow.forEach(step => {
+            if (!step.what) return;
+
+            let currentSelector = '';
+            let currentValue = '';
+            let currentType = '';
+            let i = 0;
+
+            while (i < step.what.length) {
+                const action = step.what[i];
+
+                if (!action.action || !action.args?.[0]) {
+                    i++;
+                    continue;
+                }
+
+                const selector = action.args[0];
+
+                // Handle full word type actions first
+                if (action.action === 'type' &&
+                    action.args?.length >= 2 &&
+                    typeof action.args[1] === 'string' &&
+                    action.args[1].length > 1) {
+
+                    if (!credentials[selector]) {
+                        credentials[selector] = {
+                            value: action.args[1],
+                            type: action.args[2] || 'text'
+                        };
+                    }
+                    i++;
+                    continue;
+                }
+
+                // Handle character-by-character sequences (both type and press)
+                if ((action.action === 'type' || action.action === 'press') &&
+                    action.args?.length >= 2 &&
+                    typeof action.args[1] === 'string') {
+
+                    if (selector !== currentSelector) {
+                        if (currentSelector && currentValue) {
+                            credentials[currentSelector] = {
+                                value: currentValue,
+                                type: currentType || 'text'
+                            };
+                        }
+                        currentSelector = selector;
+                        currentValue = credentials[selector]?.value || '';
+                        currentType = action.args[2] || credentials[selector]?.type || 'text';
+                    }
+
+                    const character = action.args[1];
+
+                    if (isPrintableCharacter(character)) {
+                        currentValue += character;
+                    } else if (character === 'Backspace') {
+                        currentValue = currentValue.slice(0, -1);
+                    }
+
+                    if (!currentType && action.args[2]?.toLowerCase() === 'password') {
+                        currentType = 'password';
+                    }
+
+                    let j = i + 1;
+                    while (j < step.what.length) {
+                        const nextAction = step.what[j];
+                        if (!nextAction.action || !nextAction.args?.[0] ||
+                            nextAction.args[0] !== selector ||
+                            (nextAction.action !== 'type' && nextAction.action !== 'press')) {
+                            break;
+                        }
+                        if (nextAction.args[1] === 'Backspace') {
+                            currentValue = currentValue.slice(0, -1);
+                        } else if (isPrintableCharacter(nextAction.args[1])) {
+                            currentValue += nextAction.args[1];
+                        }
+                        j++;
+                    }
+
+                    credentials[currentSelector] = {
+                        value: currentValue,
+                        type: currentType
+                    };
+
+                    i = j;
+                } else {
+                    i++;
+                }
+            }
+
+            if (currentSelector && currentValue) {
+                credentials[currentSelector] = {
+                    value: currentValue,
+                    type: currentType || 'text'
+                };
+            }
+        });
+
+        return credentials;
+    }
+
+    const groupCredentialsByType = (credentials: Credentials): GroupedCredentials => {
+        return Object.entries(credentials).reduce((acc: GroupedCredentials, [selector, info]) => {
+            const credentialType = determineCredentialType(selector, info);
+
+            switch (credentialType) {
+                case 'password':
+                    acc.passwords.push(selector);
+                    break;
+                case 'email':
+                    acc.emails.push(selector);
+                    break;
+                case 'username':
+                    acc.usernames.push(selector);
+                    break;
+                default:
+                    acc.others.push(selector);
+            }
+
+            return acc;
+        }, { passwords: [], emails: [], usernames: [], others: [] });
+    };
+
+    const getRobot = async () => {
+        if (recordingId) {
+            const robot = await getStoredRecording(recordingId);
+            setRobot(robot);
+        } else {
+            notify('error', t('robot_edit.notifications.update_failed'));
+        }
+    };
+
+    const handleClickShowPassword = (selector: string) => {
+        setShowPasswords(prev => ({
+            ...prev,
+            [selector]: !prev[selector]
+        }));
+    };
+
+    const handleRobotNameChange = (newName: string) => {
+        setRobot((prev) =>
+            prev ? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } } : prev
+        );
+    };
+
+    const handleCredentialChange = (selector: string, value: string) => {
+        setCredentials(prev => ({
+            ...prev,
+            [selector]: {
+                ...prev[selector],
+                value
+            }
+        }));
+    };
+
+    const handleLimitChange = (pairIndex: number, actionIndex: number, argIndex: number, newLimit: number) => {
+        setRobot((prev) => {
+            if (!prev) return prev;
+
+            const updatedWorkflow = [...prev.recording.workflow];
+            if (
+                updatedWorkflow.length > pairIndex &&
+                updatedWorkflow[pairIndex]?.what &&
+                updatedWorkflow[pairIndex].what.length > actionIndex &&
+                updatedWorkflow[pairIndex].what[actionIndex].args &&
+                updatedWorkflow[pairIndex].what[actionIndex].args.length > argIndex
+            ) {
+                updatedWorkflow[pairIndex].what[actionIndex].args[argIndex].limit = newLimit;
+                
+                setScrapeListLimits(prev => {
+                    return prev.map(item => {
+                        if (item.pairIndex === pairIndex && 
+                            item.actionIndex === actionIndex && 
+                            item.argIndex === argIndex) {
+                            return { ...item, currentLimit: newLimit };
+                        }
+                        return item;
+                    });
+                });
+            }
+
+            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
+        });
+    };
+
+    const handleTargetUrlChange = (newUrl: string) => {
+        setRobot((prev) => {
+            if (!prev) return prev;
+
+            const updatedWorkflow = [...prev.recording.workflow];
+            const lastPairIndex = updatedWorkflow.length - 1;
+
+            if (lastPairIndex >= 0) {
+                const gotoAction = updatedWorkflow[lastPairIndex]?.what?.find(action => action.action === "goto");
+                if (gotoAction && gotoAction.args && gotoAction.args.length > 0) {
+                    gotoAction.args[0] = newUrl;
+                }
+            }
+
+            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
+        });
+    };
+
+    const renderAllCredentialFields = () => {
+        return (
+            <>
+                {renderCredentialFields(
+                    credentialGroups.usernames,
+                    t('Username'),
+                    'text'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.emails,
+                    t('Email'),
+                    'text'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.passwords,
+                    t('Password'),
+                    'password'
+                )}
+
+                {renderCredentialFields(
+                    credentialGroups.others,
+                    t('Other'),
+                    'text'
+                )}
+            </>
+        );
+    };
+
+    const renderCredentialFields = (selectors: string[], headerText: string, defaultType: 'text' | 'password' = 'text') => {
+        if (selectors.length === 0) return null;
+
+        return (
+            <>
+                {selectors.map((selector, index) => {
+                    const isVisible = showPasswords[selector];
+
+                    return (
+                        <TextField
+                            key={selector}
+                            type={isVisible ? 'text' : 'password'}
+                            label={headerText === 'Other' ? `${`Input`} ${index + 1}` : headerText}
+                            value={credentials[selector]?.value || ''}
+                            onChange={(e) => handleCredentialChange(selector, e.target.value)}
+                            style={{ marginBottom: '20px' }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            aria-label="Show input"
+                                            onClick={() => handleClickShowPassword(selector)}
+                                            edge="end"
+                                            disabled={!credentials[selector]?.value}
+                                        >
+                                            {isVisible ? <Visibility /> : <VisibilityOff />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                            }}
+                        />
+                    );
+                })}
+            </>
+        );
+    };
+
+    const renderScrapeListLimitFields = () => {
+        if (scrapeListLimits.length === 0) return null;
+        
+        return (
+            <>
+                <Typography variant="body1" style={{ marginBottom: '20px' }}>
+                    {t('List Limits')}
+                </Typography>
+                
+                {scrapeListLimits.map((limitInfo, index) => (
+                    <TextField
+                        key={`limit-${limitInfo.pairIndex}-${limitInfo.actionIndex}`}
+                        label={`${t('List Limit')} ${index + 1}`}
+                        type="number"
+                        value={limitInfo.currentLimit || ''}
+                        onChange={(e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (value >= 1) {
+                                handleLimitChange(
+                                    limitInfo.pairIndex,
+                                    limitInfo.actionIndex,
+                                    limitInfo.argIndex,
+                                    value
+                                );
+                            }
+                        }}
+                        inputProps={{ min: 1 }}
+                        style={{ marginBottom: '20px' }}
+                    />
+                ))}
+            </>
+        );
+    };
+
+    const handleSave = async () => {
+        if (!robot) return;
+
+        try {
+            const credentialsForPayload = Object.entries(credentials).reduce((acc, [selector, info]) => {
+                const enforceType = info.type === 'password' ? 'password' : 'text';
+
+                acc[selector] = {
+                    value: info.value,
+                    type: enforceType
+                };
+                return acc;
+            }, {} as Record<string, CredentialInfo>);
+
+            const lastPair = robot.recording.workflow[robot.recording.workflow.length - 1];
+            const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+
+            const payload = {
+                name: robot.recording_meta.name,
+                limits: scrapeListLimits.map(limit => ({
+                    pairIndex: limit.pairIndex,
+                    actionIndex: limit.actionIndex,
+                    argIndex: limit.argIndex,
+                    limit: limit.currentLimit
+                })),
+                credentials: credentialsForPayload,
+                targetUrl: targetUrl,
+            };
+
+            const success = await updateRecording(robot.recording_meta.id, payload);
+
+            if (success) {
+                setRerenderRobots(true);
+
+                notify('success', t('robot_edit.notifications.update_success'));
+                handleStart(robot);
+                handleClose();
+            } else {
+                notify('error', t('robot_edit.notifications.update_failed'));
+            }
+        } catch (error) {
+            notify('error', t('robot_edit.notifications.update_error'));
+            console.error('Error updating robot:', error);
+        }
+    };
+
+    const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
+    const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+
+    return (
+        <GenericModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            modalStyle={modalStyle}
+        >
+            <>
+                <Typography variant="h5" style={{ marginBottom: '20px' }}>
+                    {t('robot_edit.title')}
+                </Typography>
+                <Box style={{ display: 'flex', flexDirection: 'column' }}>
+                    {robot && (
+                        <>
+                            <TextField
+                                label={t('robot_edit.change_name')}
+                                key="Robot Name"
+                                type='text'
+                                value={robot.recording_meta.name}
+                                onChange={(e) => handleRobotNameChange(e.target.value)}
+                                style={{ marginBottom: '20px' }}
+                            />
+
+                            <TextField
+                                label="Robot Target URL"
+                                key="Robot Target URL"
+                                type='text'
+                                value={targetUrl || ''}
+                                onChange={(e) => handleTargetUrlChange(e.target.value)}
+                                style={{ marginBottom: '20px' }}
+                            />
+
+                            {renderScrapeListLimitFields()}
+
+                            {(Object.keys(credentials).length > 0) && (
+                                <>
+                                    <Typography variant="body1" style={{ marginBottom: '20px' }}>
+                                        {t('Input Texts')}
+                                    </Typography>
+                                    {renderAllCredentialFields()}
+                                </>
+                            )}
+
+                            <Box mt={2} display="flex" justifyContent="flex-end">
+                                <Button variant="contained" color="primary" onClick={handleSave}>
+                                    {t('robot_edit.save')}
+                                </Button>
+                                <Button
+                                    onClick={handleClose}
+                                    color="primary"
+                                    variant="outlined"
+                                    style={{ marginLeft: '10px' }}
+                                    sx={{
+                                        color: '#ff00c3 !important',
+                                        borderColor: '#ff00c3 !important',
+                                        backgroundColor: 'whitesmoke !important',
+                                    }}>
+                                    {t('robot_edit.cancel')}
+                                </Button>
+                            </Box>
+                        </>
+                    )}
+                </Box>
+            </>
+        </GenericModal>
+    );
+};

legacy/src/RobotSettings.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GenericModal } from "../ui/GenericModal";
+import { TextField, Typography, Box } from "@mui/material";
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { getStoredRecording } from '../../api/storage';
+import { WhereWhatPair } from 'maxun-core';
+import { getUserById } from "../../api/auth";
+
+interface RobotMeta {
+    name: string;
+    id: string;
+    createdAt: string;
+    pairs: number;
+    updatedAt: string;
+    params: any[];
+}
+
+interface RobotWorkflow {
+    workflow: WhereWhatPair[];
+}
+
+interface ScheduleConfig {
+    runEvery: number;
+    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
+    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
+    atTimeStart?: string;
+    atTimeEnd?: string;
+    timezone: string;
+    lastRunAt?: Date;
+    nextRunAt?: Date;
+    cronExpression?: string;
+}
+
+export interface RobotSettings {
+    id: string;
+    userId?: number;
+    recording_meta: RobotMeta;
+    recording: RobotWorkflow;
+    google_sheet_email?: string | null;
+    google_sheet_name?: string | null;
+    google_sheet_id?: string | null;
+    google_access_token?: string | null;
+    google_refresh_token?: string | null;
+    schedule?: ScheduleConfig | null;
+}
+
+interface RobotSettingsProps {
+    isOpen: boolean;
+    handleStart: (settings: RobotSettings) => void;
+    handleClose: () => void;
+    initialSettings?: RobotSettings | null;
+}
+
+export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
+    const { t } = useTranslation();
+    const [userEmail, setUserEmail] = useState<string | null>(null);
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const { recordingId, notify } = useGlobalInfoStore();
+
+    useEffect(() => {
+        if (isOpen) {
+            getRobot();
+        }
+    }, [isOpen]);
+
+    const getRobot = async () => {
+        if (recordingId) {
+            const robot = await getStoredRecording(recordingId);
+            setRobot(robot);
+        } else {
+            notify('error', t('robot_settings.errors.robot_not_found'));
+        }
+    }
+
+    const lastPair = robot?.recording.workflow[robot?.recording.workflow.length - 1];
+
+    // Find the `goto` action in `what` and retrieve its arguments
+    const targetUrl = lastPair?.what.find(action => action.action === "goto")?.args?.[0];
+
+    useEffect(() => {
+        const fetchUserEmail = async () => {
+            if (robot && robot.userId) {
+                const userData = await getUserById(robot.userId.toString());
+                if (userData && userData.user) {
+                    setUserEmail(userData.user.email);
+                }
+            }
+        };
+        fetchUserEmail();
+    }, [robot?.userId]);
+
+    return (
+        <GenericModal
+            isOpen={isOpen}
+            onClose={handleClose}
+            modalStyle={modalStyle}
+        >
+            <>
+                <Typography variant="h5" style={{ marginBottom: '20px' }}>
+                    {t('robot_settings.title')}
+                </Typography>
+                <Box style={{ display: 'flex', flexDirection: 'column' }}>
+                    {
+                        robot && (
+                            <>
+                                <TextField
+                                    label={t('robot_settings.target_url')}
+                                    key="Robot Target URL"
+                                    value={targetUrl}
+                                    InputProps={{
+                                        readOnly: true,
+                                    }}
+                                    style={{ marginBottom: '20px' }}
+                                />
+                                <TextField
+                                    label={t('robot_settings.robot_id')}
+                                    key="Robot ID"
+                                    value={robot.recording_meta.id}
+                                    InputProps={{
+                                        readOnly: true,
+                                    }}
+                                    style={{ marginBottom: '20px' }}
+                                />
+                                {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
+                                    <TextField
+                                        label={t('robot_settings.robot_limit')}
+                                        type="number"
+                                        value={robot.recording.workflow[0].what[0].args[0].limit || ''}
+                                        InputProps={{
+                                            readOnly: true,
+                                        }}
+                                        style={{ marginBottom: '20px' }}
+                                    />
+                                )}
+                                <TextField
+                                    label={t('robot_settings.created_by_user')}
+                                    key="Created By User"
+                                    value={userEmail ? userEmail : ''}
+                                    InputProps={{
+                                        readOnly: true,
+                                    }}
+                                    style={{ marginBottom: '20px' }}
+                                />
+                                <TextField
+                                    label={t('robot_settings.created_at')}
+                                    key="Robot Created At"
+                                    value={robot.recording_meta.createdAt}
+                                    InputProps={{
+                                        readOnly: true,
+                                    }}
+                                    style={{ marginBottom: '20px' }}
+                                />
+                            </>
+                        )
+                    }
+                </Box>
+            </>
+        </GenericModal>
+    );
+};
+
+export const modalStyle = {
+top: "50%",
+left: "50%",
+transform: "translate(-50%, -50%)",
+width: "30%",
+backgroundColor: "background.paper",
+p: 4,
+height: "fit-content",
+display: "block",
+padding: "20px",
+};

legacy/src/ScheduleSettings.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GenericModal } from "../ui/GenericModal";
+import { MenuItem, TextField, Typography, Box } from "@mui/material";
+import { Dropdown } from "../ui/DropdownMui";
+import Button from "@mui/material/Button";
+import { validMomentTimezones } from '../../constants/const';
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { getSchedule, deleteSchedule } from '../../api/storage';
+
+interface ScheduleSettingsProps {
+  isOpen: boolean;
+  handleStart: (settings: ScheduleSettings) => Promise<boolean>;
+  handleClose: () => void;
+  initialSettings?: ScheduleSettings | null;
+}
+
+export interface ScheduleSettings {
+  runEvery: number;
+  runEveryUnit: string;
+  startFrom: string;
+  dayOfMonth?: string;
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+}
+
+export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: ScheduleSettingsProps) => {
+  const { t } = useTranslation();
+  const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
+  const [settings, setSettings] = useState<ScheduleSettings>({
+    runEvery: 1,
+    runEveryUnit: 'HOURS',
+    startFrom: 'MONDAY',
+    dayOfMonth: '1',
+    atTimeStart: '00:00',
+    atTimeEnd: '01:00',
+    timezone: 'UTC'
+  });
+
+  useEffect(() => {
+    if (initialSettings) {
+      setSettings(initialSettings);
+    }
+  }, [initialSettings]);
+
+  const handleChange = (field: keyof ScheduleSettings, value: string | number | boolean) => {
+    setSettings(prev => ({ ...prev, [field]: value }));
+  };
+
+  const textStyle = {
+    width: '150px',
+    height: '52px',
+    marginRight: '10px',
+  };
+
+  const dropDownStyle = {
+    marginTop: '2px',
+    width: '150px',
+    height: '59px',
+    marginRight: '10px',
+  };
+
+  const units = [
+    'MINUTES',
+    'HOURS',
+    'DAYS',
+    'WEEKS',
+    'MONTHS'
+  ];
+
+  const days = [
+    'MONDAY',
+    'TUESDAY',
+    'WEDNESDAY',
+    'THURSDAY',
+    'FRIDAY',
+    'SATURDAY',
+    'SUNDAY'
+  ];
+
+  const { recordingId, notify } = useGlobalInfoStore();
+
+  const deleteRobotSchedule = () => {
+    if (recordingId) {
+      deleteSchedule(recordingId);
+      setSchedule(null);
+      notify('success', t('Schedule deleted successfully'));
+    } else {
+      console.error('No recording id provided');
+    }
+
+    setSettings({
+      runEvery: 1,
+      runEveryUnit: 'HOURS',
+      startFrom: 'MONDAY',
+      dayOfMonth: '',
+      atTimeStart: '00:00',
+      atTimeEnd: '01:00',
+      timezone: 'UTC'
+    });
+  };
+
+  const getRobotSchedule = async () => {
+    if (recordingId) {
+      const scheduleData = await getSchedule(recordingId);
+      setSchedule(scheduleData);
+    } else {
+      console.error('No recording id provided');
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      const fetchSchedule = async () => {
+        await getRobotSchedule();
+      };
+      fetchSchedule();
+    }
+  }, [isOpen]);
+
+  const getDayOrdinal = (day: string | undefined) => {
+    if (!day) return '';
+    const lastDigit = day.slice(-1);
+    const lastTwoDigits = day.slice(-2);
+
+    // Special cases for 11, 12, 13
+    if (['11', '12', '13'].includes(lastTwoDigits)) {
+      return t('schedule_settings.labels.on_day.th');
+    }
+
+    // Other cases
+    switch (lastDigit) {
+      case '1': return t('schedule_settings.labels.on_day.st');
+      case '2': return t('schedule_settings.labels.on_day.nd');
+      case '3': return t('schedule_settings.labels.on_day.rd');
+      default: return t('schedule_settings.labels.on_day.th');
+    }
+  };
+
+  return (
+    <GenericModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      modalStyle={modalStyle}
+    >
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: '20px',
+        '& > *': { marginBottom: '20px' },
+      }}>
+        <Typography variant="h6" sx={{ marginBottom: '20px' }}>{t('schedule_settings.title')}</Typography>
+        <>
+          {schedule !== null ? (
+            <>
+              <Typography>{t('schedule_settings.run_every')}: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
+              <Typography>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.start_from') : t('schedule_settings.start_from')}: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
+              {schedule.runEveryUnit === 'MONTHS' && (
+                <Typography>{t('schedule_settings.on_day')}: {schedule.dayOfMonth}{getDayOrdinal(schedule.dayOfMonth)} of the month</Typography>
+              )}
+              <Typography>{t('schedule_settings.at_around')}: {schedule.atTimeStart}, {schedule.timezone} {t('schedule_settings.timezone')}</Typography>
+              <Box mt={2} display="flex" justifyContent="space-between">
+                <Button
+                  onClick={deleteRobotSchedule}
+                  variant="outlined"
+                  color="error"
+                >
+                  {t('schedule_settings.buttons.delete_schedule')}
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.labels.run_once_every')}</Typography>
+                <TextField
+                  type="number"
+                  value={settings.runEvery}
+                  onChange={(e) => handleChange('runEvery', parseInt(e.target.value))}
+                  sx={textStyle}
+                  inputProps={{ min: 1 }}
+                />
+                <Dropdown
+                  label=""
+                  id="runEveryUnit"
+                  value={settings.runEveryUnit}
+                  handleSelect={(e) => handleChange('runEveryUnit', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {units.map((unit) => (
+                    <MenuItem key={unit} value={unit}> {unit.charAt(0).toUpperCase() + unit.slice(1).toLowerCase()}</MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>
+                  {['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.labels.start_from_label') : t('schedule_settings.labels.start_from_label')}
+                </Typography>
+                <Dropdown
+                  label=""
+                  id="startFrom"
+                  value={settings.startFrom}
+                  handleSelect={(e) => handleChange('startFrom', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {days.map((day) => (
+                    <MenuItem key={day} value={day}>
+                      {day.charAt(0).toUpperCase() + day.slice(1).toLowerCase()}
+                    </MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              {settings.runEveryUnit === 'MONTHS' && (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>{t('schedule_settings.labels.on_day_of_month')}</Typography>
+                  <TextField
+                    type="number"
+                    value={settings.dayOfMonth}
+                    onChange={(e) => handleChange('dayOfMonth', e.target.value)}
+                    sx={textStyle}
+                    inputProps={{ min: 1, max: 31 }}
+                  />
+                </Box>
+              )}
+
+              {['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Box sx={{ marginRight: '20px' }}>
+                    <Typography sx={{ marginBottom: '5px' }}>{t('schedule_settings.labels.in_between')}</Typography>
+                    <TextField
+                      type="time"
+                      value={settings.atTimeStart}
+                      onChange={(e) => handleChange('atTimeStart', e.target.value)}
+                      sx={textStyle}
+                    />
+                    <TextField
+                      type="time"
+                      value={settings.atTimeEnd}
+                      onChange={(e) => handleChange('atTimeEnd', e.target.value)}
+                      sx={textStyle}
+                    />
+                  </Box>
+                </Box>
+              ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Typography sx={{ marginBottom: '5px', marginRight: '10px' }}>{t('schedule_settings.at_around')}</Typography>
+                  <TextField
+                    type="time"
+                    value={settings.atTimeStart}
+                    onChange={(e) => handleChange('atTimeStart', e.target.value)}
+                    sx={textStyle}
+                  />
+                </Box>
+              )}
+
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.timezone')}</Typography>
+                <Dropdown
+                  label=""
+                  id="timezone"
+                  value={settings.timezone}
+                  handleSelect={(e) => handleChange('timezone', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {validMomentTimezones.map((tz) => (
+                    <MenuItem key={tz} value={tz}>{tz.charAt(0).toUpperCase() + tz.slice(1).toLowerCase()}</MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+              <Box mt={2} display="flex" justifyContent="flex-end">
+                <Button onClick={async () => {
+                  const success = await handleStart(settings);
+                  if (success) {
+                    await getRobotSchedule();
+                  }
+                }} variant="contained" color="primary">
+                  {t('schedule_settings.buttons.save_schedule')}
+                </Button>
+                <Button
+                  onClick={handleClose}
+                  color="primary"
+                  variant="outlined"
+                  style={{ marginLeft: '10px' }}
+                  sx={{
+                    color: '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
+                    backgroundColor: 'whitesmoke !important',
+                  }}>
+                  {t('schedule_settings.buttons.cancel')}
+                </Button>
+              </Box>
+            </>
+          )}
+        </>
+      </Box>
+    </GenericModal>
+  );
+};
+
+const modalStyle = {
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '40%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height: 'fit-content',
+  display: 'block',
+  padding: '20px',
+};

src/components/action/ActionDescriptionBox.tsx

@@ -102,7 +102,7 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
                     sx={{
                       color: isDarkMode ? 'white' : 'default',
                       '&.Mui-checked': {
-                        color: '#ff33cc',
+                        color: '#ff00c3',
                       },
                     }}
                   />
@@ -138,4 +138,4 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
   );
 };
 
-export default ActionDescriptionBox;
+export default ActionDescriptionBox;

src/components/dashboard/MainMenu.tsx

@@ -89,17 +89,39 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
             orientation="vertical"
             sx={{ alignItems: 'flex-start' }}
           >
-            <Tab value="robots" label={t('mainmenu.recordings')} icon={<AutoAwesome />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} onClick={handleRobotsClick} />
-            <Tab value="runs" label={t('mainmenu.runs')} icon={<FormatListBulleted />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
-            <Tab value="proxy" label={t('mainmenu.proxy')} icon={<Usb />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
-            <Tab value="apikey" label={t('mainmenu.apikey')} icon={<VpnKey />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+            <Tab
+              value="robots"
+              label={t('mainmenu.recordings')}
+              icon={<AutoAwesome />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }}
+              onClick={handleRobotsClick} />
+            <Tab value="runs"
+              label={t('mainmenu.runs')}
+              icon={<FormatListBulleted />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+            <Tab value="proxy"
+              label={t('mainmenu.proxy')}
+              icon={<Usb />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
+            <Tab value="apikey"
+              label={t('mainmenu.apikey')}
+              icon={<VpnKey />}
+              iconPosition="start"
+              disableRipple={true}
+              sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
           </Tabs>
           <Divider sx={{ borderColor: theme.palette.mode === 'dark' ? "#080808ff" : "" }} />
           <Box sx={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
             <Button
               onClick={() => setDocModalOpen(true)}
               sx={buttonStyles}
-              startIcon={<Description />}
+              startIcon={<Description sx={{ fontSize: 20 }} />}
             >
               Documentation
             </Button>
@@ -133,10 +155,10 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
               href='https://app.maxun.dev/'
               target="_blank"
               rel="noopener noreferrer"
-              sx={buttonStyles} startIcon={<CloudQueue />}>
+              sx={buttonStyles} startIcon={<CloudQueue sx={{ fontSize: 20 }} />}>
               Join Maxun Cloud
             </Button>
-            <Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite />}>
+            <Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite sx={{ fontSize: 20 }} />}>
               Sponsor Us
             </Button>
           </Box>
@@ -150,15 +172,11 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
           <Typography variant="body1" gutterBottom>
             Maxun is built by a small, full-time team. Your donations directly contribute to making it better.
             <br />
-            <br />
-            Thank you for your support! 💙
+            Thank you for your support! 🩷
           </Typography>
-          <Stack direction="row" spacing={2} mt={2}>
-            <Button href="https://checkout.dodopayments.com/buy/pdt_1Bdstszcg9VY8WYGwNBPM?quantity=1" target="_blank" rel="noopener noreferrer" variant="outlined" fullWidth>
-              Sponsor $5 One-Time
-            </Button>
-            <Button href="https://checkout.dodopayments.com/buy/pdt_HDalaYf8hEGVG7hXcfNBj?quantity=1" target="_blank" rel="noopener noreferrer" variant="outlined" fullWidth>
-              Sponsor $5 Monthly
+          <Stack direction="row" spacing={2} mt={4}>
+            <Button href="https://github.com/sponsors/amhsirak" target="_blank" rel="noopener noreferrer" variant="outlined" fullWidth>
+              Sponsor Maxun on GitHub Sponsors
             </Button>
           </Stack>
         </Box>

src/components/dashboard/NavBar.tsx

@@ -158,14 +158,11 @@ export const NavBar: React.FC<NavBarProps> = ({
   };
 
   const renderThemeToggle = () => (
-    <Tooltip title="Toggle Mode">
+    <Tooltip title="Change Mode">
       <IconButton
         onClick={toggleTheme}
         sx={{
           color: darkMode ? '#ffffff' : '#0000008A',
-          '&:hover': {
-           background: 'inherit'
-          }
         }}
       >
         {darkMode ? <LightMode /> : <DarkMode />}

src/components/recorder/DOMBrowserRenderer.tsx

@@ -908,6 +908,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
           rebuild(snapshotData.snapshot, {
             doc: iframeDoc,
             mirror: mirror,
+            hackCss: false,
             cache: { stylesWithHoverClass: new Map() },
             afterAppend: (node) => {
               if (node.nodeType === Node.TEXT_NODE && node.textContent) {

src/components/robot/pages/ScheduleSettingsPage.tsx

@@ -188,8 +188,8 @@ export const ScheduleSettingsPage = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          padding: "20px",
           "& > *": { marginBottom: "20px" },
+          marginTop: "-20px",
         }}
       >
         <>

src/helpers/clientSelectorGenerator.ts

@@ -555,38 +555,25 @@ class ClientSelectorGenerator {
    */
   private isMeaningfulElement(element: HTMLElement): boolean {
     const tagName = element.tagName.toLowerCase();
-    
-    // Fast path for common meaningful elements
-    if (["a", "img", "input", "button", "select"].includes(tagName)) {
+
+    if (tagName === "img") {
+      return element.hasAttribute("src");
+    }
+
+    if (tagName === "a" && element.hasAttribute("href")) {
       return true;
     }
 
+    if (element.children.length > 0) {
+      return false;
+    }
+
     const text = (element.textContent || "").trim();
-    const hasHref = element.hasAttribute("href");
-    const hasSrc = element.hasAttribute("src");
-    
-    // Quick checks first
-    if (text.length > 0 || hasHref || hasSrc) {
+
+    if (text.length > 0) {
       return true;
     }
 
-    const isCustomElement = tagName.includes("-");
-
-    // For custom elements, be more lenient about what's considered meaningful
-    if (isCustomElement) {
-      const hasChildren = element.children.length > 0;
-      const hasSignificantAttributes = Array.from(element.attributes).some(
-        (attr) => !["class", "style", "id"].includes(attr.name.toLowerCase())
-      );
-
-      return (
-        hasChildren ||
-        hasSignificantAttributes ||
-        element.hasAttribute("role") ||
-        element.hasAttribute("aria-label")
-      );
-    }
-
     return false;
   }
 
@@ -2561,12 +2548,9 @@ class ClientSelectorGenerator {
 
     const MAX_MEANINGFUL_ELEMENTS = 300;
     const MAX_NODES_TO_CHECK = 1200;
-    const MAX_DEPTH = 12;
+    const MAX_DEPTH = 20;
     let nodesChecked = 0;
 
-    let adjustedMaxDepth = MAX_DEPTH;
-    const elementDensityThreshold = 50;
-
     const depths: number[] = [0];
     let queueIndex = 0;
 
@@ -2576,14 +2560,10 @@ class ClientSelectorGenerator {
       queueIndex++;
       nodesChecked++;
 
-      if (currentDepth <= 3 && meaningfulDescendants.length > elementDensityThreshold) {
-        adjustedMaxDepth = Math.max(6, adjustedMaxDepth - 2);
-      }
-
       if (
         nodesChecked > MAX_NODES_TO_CHECK ||
         meaningfulDescendants.length >= MAX_MEANINGFUL_ELEMENTS ||
-        currentDepth > adjustedMaxDepth
+        currentDepth > MAX_DEPTH
       ) {
         break;
       }
@@ -2592,7 +2572,7 @@ class ClientSelectorGenerator {
         meaningfulDescendants.push(element);
       }
 
-      if (currentDepth >= adjustedMaxDepth) {
+      if (currentDepth >= MAX_DEPTH) {
         continue;
       }
 
@@ -2607,7 +2587,7 @@ class ClientSelectorGenerator {
         }
       }
 
-      if (element.shadowRoot && currentDepth < adjustedMaxDepth - 1) {
+      if (element.shadowRoot && currentDepth < MAX_DEPTH - 1) {
         const shadowChildren = element.shadowRoot.children;
         const shadowLimit = Math.min(shadowChildren.length, 20);
         for (let i = 0; i < shadowLimit; i++) {
@@ -2716,22 +2696,46 @@ class ClientSelectorGenerator {
     }
 
     if (!addPositionToAll) {
-      const meaningfulAttrs = ["role", "type", "name", "src", "aria-label"];
+      const meaningfulAttrs = ["role", "type"];
       for (const attrName of meaningfulAttrs) {
         if (element.hasAttribute(attrName)) {
           const value = element.getAttribute(attrName)!.replace(/'/g, "\\'");
-          return `${tagName}[@${attrName}='${value}']`;
+          const isCommonAttribute = this.isAttributeCommonAcrossLists(
+            element,
+            attrName,
+            value,
+            otherListElements
+          );
+          if (isCommonAttribute) {
+            return `${tagName}[@${attrName}='${value}']`;
+          }
         }
       }
     }
 
     const testId = element.getAttribute("data-testid");
     if (testId && !addPositionToAll) {
-      return `${tagName}[@data-testid='${testId}']`;
+      const isCommon = this.isAttributeCommonAcrossLists(
+        element,
+        "data-testid",
+        testId,
+        otherListElements
+      );
+      if (isCommon) {
+        return `${tagName}[@data-testid='${testId}']`;
+      }
     }
 
     if (element.id && !element.id.match(/^\d/) && !addPositionToAll) {
-      return `${tagName}[@id='${element.id}']`;
+      const isCommon = this.isAttributeCommonAcrossLists(
+        element,
+        "id",
+        element.id,
+        otherListElements
+      );
+      if (isCommon) {
+        return `${tagName}[@id='${element.id}']`;
+      }
     }
 
     if (!addPositionToAll) {
@@ -2742,7 +2746,15 @@ class ClientSelectorGenerator {
           attr.name !== "data-mx-id" &&
           attr.value
         ) {
-          return `${tagName}[@${attr.name}='${attr.value}']`;
+          const isCommon = this.isAttributeCommonAcrossLists(
+            element,
+            attr.name,
+            attr.value,
+            otherListElements
+          );
+          if (isCommon) {
+            return `${tagName}[@${attr.name}='${attr.value}']`;
+          }
         }
       }
     }
@@ -2906,12 +2918,70 @@ class ClientSelectorGenerator {
     const result = pathParts.length > 0 ? "/" + pathParts.join("/") : null;
 
     this.pathCache.set(targetElement, result);
-    
+
     return result;
   }
 
+  private isAttributeCommonAcrossLists(
+    targetElement: HTMLElement,
+    attrName: string,
+    attrValue: string,
+    otherListElements: HTMLElement[]
+  ): boolean {
+    if (otherListElements.length === 0) {
+      return true;
+    }
+
+    const targetPath = this.getElementPath(targetElement);
+
+    for (const otherListElement of otherListElements) {
+      const correspondingElement = this.findCorrespondingElement(
+        otherListElement,
+        targetPath
+      );
+      if (correspondingElement) {
+        const otherValue = correspondingElement.getAttribute(attrName);
+        if (otherValue !== attrValue) {
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  private getElementPath(element: HTMLElement): number[] {
+    const path: number[] = [];
+    let current: HTMLElement | null = element;
+
+    while (current && current.parentElement) {
+      const siblings = Array.from(current.parentElement.children);
+      path.unshift(siblings.indexOf(current));
+      current = current.parentElement;
+    }
+
+    return path;
+  }
+
+  private findCorrespondingElement(
+    rootElement: HTMLElement,
+    path: number[]
+  ): HTMLElement | null {
+    let current: HTMLElement = rootElement;
+
+    for (const index of path) {
+      const children = Array.from(current.children);
+      if (index >= children.length) {
+        return null;
+      }
+      current = children[index] as HTMLElement;
+    }
+
+    return current;
+  }
+
   private getCommonClassesAcrossLists(
-    targetElement: HTMLElement, 
+    targetElement: HTMLElement,
     otherListElements: HTMLElement[]
   ): string[] {
     if (otherListElements.length === 0) {
@@ -3919,9 +3989,48 @@ class ClientSelectorGenerator {
     );
     if (!deepestElement) return null;
 
+    if (!this.isMeaningfulElementCached(deepestElement)) {
+      const atomicChild = this.findAtomicChildAtPoint(deepestElement, x, y);
+      if (atomicChild) {
+        return atomicChild;
+      }
+    }
+
     return deepestElement;
   }
 
+  private findAtomicChildAtPoint(
+    parent: HTMLElement,
+    x: number,
+    y: number
+  ): HTMLElement | null {
+    const stack: HTMLElement[] = [parent];
+    const visited = new Set<HTMLElement>();
+
+    while (stack.length > 0) {
+      const element = stack.pop()!;
+      if (visited.has(element)) continue;
+      visited.add(element);
+
+      if (element !== parent && this.isMeaningfulElementCached(element)) {
+        const rect = element.getBoundingClientRect();
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          return element;
+        }
+      }
+
+      for (let i = element.children.length - 1; i >= 0; i--) {
+        const child = element.children[i] as HTMLElement;
+        const rect = child.getBoundingClientRect();
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          stack.push(child);
+        }
+      }
+    }
+
+    return null;
+  }
+
   /**
    * Helper methods used by the unified getDeepestElementFromPoint
    */