- {/* step type */}
-
- Step Type: {" "}
- {isEditing ? (
- handleInputChange("type", e.target.value)}
- className="ml-1 rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- >
- Navigation
- Click
- Select Change
- Input
-
- ) : (
- toTitleCase(stepData.type)
- )}
-
-
- {/* tab id */}
- {stepData.tabId !== null && !isEditing && (
-
- Tab ID: {stepData.tabId}
-
- )}
-
- {/* URL (only for first node) */}
- {(stepData.url || isEditing) && node.id === "0" && (
-
- )}
-
- {/* CSS selectors */}
- {(stepData.cssSelector || isEditing) && (
-
-
CSS Selectors:
- {isEditing ? (
-
- {/* chips */}
-
- {cssSelectors.map((sel, idx) => (
-
- 65 ? sel : undefined}
- className="mr-1 whitespace-nowrap text-xs"
- >
- {sel.length > 65 ? `${sel.slice(0, 62)}...` : sel}
-
- handleRemoveSelector(idx)}
- className="px-1 text-lg text-gray-400 hover:text-red-400"
- >
- ×
-
-
- ))}
-
-
- {/* add new */}
-
- setNewSelector(e.target.value)}
- className="flex-1 rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- placeholder="Add selector..."
- />
-
- +
-
-
-
- ) : (
-
- {stepData.cssSelector?.split(" ").map((sel, idx) => (
- 65 ? sel : undefined}
- className="rounded bg-gray-700 px-2 py-0.5 text-xs"
- >
- {sel.length > 65 ? `${sel.slice(0, 62)}...` : sel}
-
- ))}
-
- )}
-
- )}
-
- {/* XPath */}
- {(stepData.xpath || isEditing) && (
-
- XPath:
- {isEditing ? (
- handleInputChange("xpath", e.target.value)}
- className="mt-1 w-full rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- />
- ) : (
-
- {stepData.xpath && stepData.xpath.length > 40
- ? `${stepData.xpath.slice(0, 37)}...`
- : stepData.xpath}
-
- )}
-
- )}
-
- {/* Element tag */}
- {(stepData.elementTag || isEditing) && (
-
- Element Tag: {" "}
- {isEditing ? (
-
- handleInputChange("elementTag", e.target.value)
- }
- className="mt-1 rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- />
- ) : (
- {`<${stepData.elementTag}>`}
- )}
-
- )}
-
- {/* Element text */}
- {(stepData.elementText || isEditing) && (
-
-
Element Text:
- {isEditing ? (
-
- handleInputChange("elementText", e.target.value)
- }
- className="mt-1 w-full rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- />
- ) : (
-
{stepData.elementText}
- )}
-
- )}
-
- {/* Selected text */}
- {(stepData.selectedText || isEditing) && (
-
-
Selected Text:
- {isEditing ? (
-
- handleInputChange("selectedText", e.target.value)
- }
- className="mt-1 w-full rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- />
- ) : (
-
{stepData.selectedText}
- )}
-
- )}
-
- {/* Value */}
- {(stepData.value || isEditing) && (
-
-
Value:
- {isEditing ? (
-
handleInputChange("value", e.target.value)}
- className="mt-1 w-full rounded border border-gray-600 bg-[#333] px-2 py-1 text-sm"
- />
- ) : (
-
{stepData.value}
- )}
-
- )}
-
- {/* output */}
- {stepData.output && (
-
-
Output:
-
- {JSON.stringify(stepData.output, null, 2)}
-
-
- )}
-
- {/* action buttons */}
-
- {isEditing ? (
- <>
-
- {isSubmitting ? "Saving…" : "Save"}
-
-
- Cancel
-
- >
- ) : (
- setIsEditing(true)}
- className="rounded bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600"
- >
- Edit
-
- )}
-
-
- {/* messages */}
- {success && (
-
- Changes saved successfully!
-
- )}
- {error && (
-
- {error}
-
- )}
-