Save and load scripts
This commit is contained in:
@@ -73,6 +73,13 @@ export default function Playground() {
|
||||
const [bulkRounds, setBulkRounds] = useState(1000);
|
||||
const [selectedAgent, setSelectedAgent] = useState("Random");
|
||||
const [isHelpOpen, setIsHelpOpen] = useState(false);
|
||||
const [scriptName, setScriptName] = useState("");
|
||||
const [saveSecret, setSaveSecret] = useState("");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [availableAgents, setAvailableAgents] = useState<string[]>([]);
|
||||
const [savedScripts, setSavedScripts] = useState<Record<string, string>>(
|
||||
{}
|
||||
);
|
||||
|
||||
const editorRef = useRef<any>(null);
|
||||
const resultRef = useRef<HTMLTextAreaElement>(null);
|
||||
@@ -81,6 +88,65 @@ export default function Playground() {
|
||||
const runDisabled = isScriptRunning || !isEditorReady;
|
||||
const stopDisabled = !isScriptRunning;
|
||||
|
||||
// Fetch saved scripts and update available agents
|
||||
const loadSavedScripts = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/list-scripts");
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
const scripts = data.scripts || [];
|
||||
const scriptContents: Record<string, string> = {};
|
||||
|
||||
// Fetch content for each saved script
|
||||
await Promise.all(
|
||||
scripts.map(async (scriptName: string) => {
|
||||
try {
|
||||
const scriptResponse = await fetch(
|
||||
`/api/get-script?name=${encodeURIComponent(
|
||||
scriptName
|
||||
)}`
|
||||
);
|
||||
const scriptData = await scriptResponse.json();
|
||||
|
||||
if (scriptResponse.ok) {
|
||||
scriptContents[scriptName] = scriptData.content;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`Failed to load script ${scriptName}:`,
|
||||
error
|
||||
);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
setSavedScripts(scriptContents);
|
||||
|
||||
// Combine hardcoded agents with saved scripts, ensuring Self and Random are first
|
||||
const combinedAgents = [
|
||||
"Self",
|
||||
"Random",
|
||||
...Object.keys(AGENTS).filter(
|
||||
(key) => key !== "Self" && key !== "Random"
|
||||
),
|
||||
...scripts,
|
||||
];
|
||||
|
||||
setAvailableAgents(combinedAgents);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load saved scripts:", error);
|
||||
// Fallback to hardcoded agents only
|
||||
setAvailableAgents(Object.keys(AGENTS));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Load saved scripts on component mount
|
||||
useEffect(() => {
|
||||
loadSavedScripts();
|
||||
}, [loadSavedScripts]);
|
||||
|
||||
const runHuman = useCallback(async () => {
|
||||
if (resultRef.current) {
|
||||
resultRef.current.value = "";
|
||||
@@ -141,11 +207,15 @@ export default function Playground() {
|
||||
terminalRef.current?.clear();
|
||||
terminalRef.current?.focus();
|
||||
|
||||
const agentCode = AGENTS[selectedAgent as keyof typeof AGENTS];
|
||||
// Get script content from either hardcoded agents or saved scripts
|
||||
const hardcodedAgent = AGENTS[selectedAgent as keyof typeof AGENTS];
|
||||
const savedScript = savedScripts[selectedAgent];
|
||||
|
||||
const agentScript = hardcodedAgent || savedScript;
|
||||
const blueScript =
|
||||
agentCode || (editorRef.current?.getValue() ?? "");
|
||||
agentScript || (editorRef.current?.getValue() ?? "");
|
||||
const redScript = editorRef.current?.getValue() ?? "";
|
||||
const opponentName = agentCode ? selectedAgent : "script";
|
||||
const opponentName = agentScript ? selectedAgent : "script";
|
||||
|
||||
await startScriptBulk(
|
||||
redScript,
|
||||
@@ -182,12 +252,87 @@ export default function Playground() {
|
||||
}
|
||||
|
||||
setIsScriptRunning(false);
|
||||
}, [runDisabled, bulkRounds, selectedAgent]);
|
||||
}, [runDisabled, bulkRounds, selectedAgent, savedScripts]);
|
||||
|
||||
const stopScriptHandler = useCallback(() => {
|
||||
stopScript();
|
||||
}, []);
|
||||
|
||||
const saveScript = useCallback(async () => {
|
||||
if (!scriptName.trim()) {
|
||||
alert("Please enter a script name");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!saveSecret.trim()) {
|
||||
alert("Please enter the save secret");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editorRef.current) {
|
||||
alert("No script content to save");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/save-script", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: scriptName.trim(),
|
||||
content: editorRef.current.getValue(),
|
||||
secret: saveSecret.trim(),
|
||||
}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(result.message);
|
||||
setScriptName("");
|
||||
// Reload saved scripts to include the new one
|
||||
loadSavedScripts();
|
||||
} else {
|
||||
alert(result.error || "Failed to save script");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Save error:", error);
|
||||
alert("Network error: Failed to save script");
|
||||
}
|
||||
|
||||
setIsSaving(false);
|
||||
}, [scriptName, saveSecret, loadSavedScripts]);
|
||||
|
||||
const copyScriptToEditor = useCallback(() => {
|
||||
if (!selectedAgent || selectedAgent === "Self") {
|
||||
alert("Please select a script to copy to the editor");
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the script content
|
||||
const hardcodedAgent = AGENTS[selectedAgent as keyof typeof AGENTS];
|
||||
const savedScript = savedScripts[selectedAgent];
|
||||
const scriptContent = hardcodedAgent || savedScript;
|
||||
|
||||
if (!scriptContent) {
|
||||
alert("No script content available for the selected agent");
|
||||
return;
|
||||
}
|
||||
|
||||
// Warn user about losing current content
|
||||
const confirmed = confirm(
|
||||
`This will replace your current script with "${selectedAgent}". Your current work will be lost. Continue?`
|
||||
);
|
||||
|
||||
if (confirmed && editorRef.current) {
|
||||
editorRef.current.setValue(scriptContent);
|
||||
}
|
||||
}, [selectedAgent, savedScripts]);
|
||||
|
||||
return (
|
||||
<div className={styles.playgroundRoot}>
|
||||
<header className={styles.header}>
|
||||
@@ -250,12 +395,69 @@ export default function Playground() {
|
||||
<div className={styles.configField}>
|
||||
<label>Bulk opponent</label>
|
||||
<AgentSelector
|
||||
agents={Object.keys(AGENTS)}
|
||||
agents={availableAgents}
|
||||
selectedAgent={selectedAgent}
|
||||
onSelect={setSelectedAgent}
|
||||
placeholder="Select an agent..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.configField}>
|
||||
<Button
|
||||
variant="info"
|
||||
onClick={copyScriptToEditor}
|
||||
disabled={
|
||||
!selectedAgent ||
|
||||
selectedAgent === "Self"
|
||||
}
|
||||
>
|
||||
Copy to Editor
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.saveSection}>
|
||||
<div className={styles.configField}>
|
||||
<label>Script name</label>
|
||||
<input
|
||||
type="text"
|
||||
className={styles.saveInput}
|
||||
placeholder="Enter script name..."
|
||||
value={scriptName}
|
||||
onChange={(e) =>
|
||||
setScriptName(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
maxLength={32}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.configField}>
|
||||
<label>Save secret</label>
|
||||
<input
|
||||
type="password"
|
||||
className={styles.saveInput}
|
||||
placeholder="Enter save secret..."
|
||||
value={saveSecret}
|
||||
onChange={(e) =>
|
||||
setSaveSecret(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.configField}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={saveScript}
|
||||
loading={isSaving}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Save Script
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user