@runloop/rl-cli 1.8.0 → 1.9.0

package/dist/screens/BenchmarkJobCreateScreen.js

@@ -0,0 +1,524 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BenchmarkJobCreateScreen - Create a new benchmark job
+ * Uses benchmark definition spec type with multi-select benchmarks and agent picker
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { SuccessMessage } from "../components/SuccessMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { NavigationTips } from "../components/NavigationTips.js";
+import { ResourcePicker } from "../components/ResourcePicker.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { listBenchmarks, getBenchmark } from "../services/benchmarkService.js";
+import { listScenarios, getScenario, } from "../services/scenarioService.js";
+import { listAgents } from "../services/agentService.js";
+import { createBenchmarkJob, } from "../services/benchmarkJobService.js";
+/**
+ * Success screen component with input handling
+ */
+function SuccessScreen({ job, onViewDetails, onGoToList, onBack, }) {
+    useInput((input, key) => {
+        if (input === "v") {
+            onViewDetails();
+        }
+        else if (input === "l") {
+            onGoToList();
+        }
+        else if (key.escape) {
+            onBack();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Home" },
+                    { label: "Benchmarks" },
+                    { label: "Jobs" },
+                    { label: "Created", active: true },
+                ] }), _jsx(SuccessMessage, { message: "Benchmark job created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: job.id })] }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name:", " "] }), _jsx(Text, { children: job.name })] }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["State:", " "] }), _jsx(Text, { children: job.state })] })] }), _jsx(NavigationTips, { tips: [
+                    { key: "v", label: "View Details" },
+                    { key: "l", label: "Jobs List" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
+}
+export function BenchmarkJobCreateScreen({ initialBenchmarkIds, initialScenarioIds, cloneFromJobId, cloneJobName, cloneSourceType, cloneAgentConfigs, cloneOrchestratorConfig, cloneAgentIds, cloneAgentNames, cloneAgentTimeout, cloneConcurrentTrials, }) {
+    const { navigate, goBack } = useNavigation();
+    // Determine initial source type and field
+    const initialSourceType = cloneSourceType || (initialScenarioIds ? "scenarios" : "benchmark");
+    const initialField = initialBenchmarkIds || initialScenarioIds ? "agents" : "source_type";
+    const [screenState, setScreenState] = React.useState("form");
+    const [currentField, setCurrentField] = React.useState(initialField);
+    const [formData, setFormData] = React.useState({
+        sourceType: initialSourceType,
+        benchmarkId: initialBenchmarkIds || "",
+        benchmarkName: "",
+        scenarioIds: initialScenarioIds ? initialScenarioIds.split(",") : [],
+        scenarioNames: [],
+        agentIds: cloneAgentIds ? cloneAgentIds.split(",") : [],
+        agentNames: cloneAgentNames ? cloneAgentNames.split(",") : [],
+        name: cloneJobName ? `${cloneJobName} (clone)` : "",
+        agentTimeout: cloneAgentTimeout || "",
+        concurrentTrials: cloneConcurrentTrials || "1",
+    });
+    const [createdJob, setCreatedJob] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Fetch benchmark name if we have an ID (from clone or initial selection)
+    React.useEffect(() => {
+        if (initialBenchmarkIds && !formData.benchmarkName) {
+            getBenchmark(initialBenchmarkIds)
+                .then((benchmark) => {
+                setFormData((prev) => ({
+                    ...prev,
+                    benchmarkName: benchmark.name || benchmark.id,
+                }));
+            })
+                .catch((err) => {
+                // Silently fail - user can re-select if needed
+                console.error("Failed to fetch benchmark name:", err);
+            });
+        }
+    }, [initialBenchmarkIds, formData.benchmarkName]);
+    // Fetch scenario names if we have IDs (from clone or initial selection)
+    React.useEffect(() => {
+        if (initialScenarioIds &&
+            formData.scenarioIds.length > 0 &&
+            formData.scenarioNames.length === 0) {
+            // Fetch all scenarios to get their names
+            Promise.all(formData.scenarioIds.map((id) => getScenario(id).catch((err) => {
+                console.error(`Failed to fetch scenario ${id}:`, err);
+                return { id, name: id };
+            }))).then((scenarios) => {
+                setFormData((prev) => ({
+                    ...prev,
+                    scenarioNames: scenarios.map((s) => s.name || s.id),
+                }));
+            });
+        }
+    }, [initialScenarioIds, formData.scenarioIds, formData.scenarioNames]);
+    // Field definitions - conditionally include benchmark or scenarios based on source type
+    const fields = [
+        {
+            key: "source_type",
+            label: "Source Type",
+            type: "toggle",
+            required: true,
+            description: "Choose between benchmark or scenarios",
+        },
+        formData.sourceType === "benchmark"
+            ? {
+                key: "benchmark",
+                label: "Benchmark",
+                type: "picker",
+                required: true,
+                description: "Select a benchmark definition to run",
+            }
+            : {
+                key: "scenarios",
+                label: "Scenarios",
+                type: "picker",
+                required: true,
+                description: "Select one or more scenario definitions to run",
+            },
+        {
+            key: "agents",
+            label: "Agents",
+            type: "picker",
+            required: true,
+            description: "Select one or more agents to run",
+        },
+        {
+            key: "name",
+            label: "Job Name",
+            type: "text",
+            placeholder: "my-benchmark-job",
+            description: "Optional name for this job",
+        },
+        {
+            key: "agent_timeout",
+            label: "Agent Timeout (s)",
+            type: "text",
+            placeholder: "300",
+            description: "Optional timeout in seconds",
+        },
+        {
+            key: "concurrent_trials",
+            label: "Concurrent Trials",
+            type: "text",
+            placeholder: "1",
+            description: "Number of concurrent trials (default: 1)",
+        },
+        {
+            key: "create",
+            label: "Create Benchmark Job",
+            type: "action",
+        },
+    ];
+    const fieldKeys = fields.map((f) => f.key);
+    const currentFieldIndex = fieldKeys.indexOf(currentField);
+    const currentFieldDef = fields.find((f) => f.key === currentField);
+    // Check if form is valid
+    const isFormValid = ((formData.sourceType === "benchmark" && formData.benchmarkId !== "") ||
+        (formData.sourceType === "scenarios" &&
+            formData.scenarioIds.length > 0)) &&
+        formData.agentIds.length > 0;
+    // Memoize the fetchBenchmarksPage function
+    const fetchBenchmarksPage = React.useCallback(async (params) => {
+        const result = await listBenchmarks({
+            limit: params.limit,
+            startingAfter: params.startingAt,
+            search: params.search,
+        });
+        return {
+            items: result.benchmarks,
+            hasMore: result.hasMore,
+            totalCount: result.totalCount,
+        };
+    }, []);
+    // Memoize the fetchAgentsPage function - fetches all agents
+    const fetchAgentsPage = React.useCallback(async (params) => {
+        const result = await listAgents({
+            limit: params.limit,
+            startingAfter: params.startingAt,
+        });
+        // Apply search filter if provided
+        let filteredAgents = result.agents;
+        if (params.search) {
+            const searchLower = params.search.toLowerCase();
+            filteredAgents = result.agents.filter((agent) => agent.name.toLowerCase().includes(searchLower) ||
+                agent.id.toLowerCase().includes(searchLower));
+        }
+        return {
+            items: filteredAgents,
+            hasMore: result.hasMore,
+            totalCount: filteredAgents.length,
+        };
+    }, []);
+    // Memoize the fetchScenariosPage function
+    const fetchScenariosPage = React.useCallback(async (params) => {
+        const result = await listScenarios({
+            limit: params.limit,
+            startingAfter: params.startingAt,
+            search: params.search,
+        });
+        return {
+            items: result.scenarios,
+            hasMore: result.hasMore,
+            totalCount: result.totalCount,
+        };
+    }, []);
+    // Memoize benchmark picker config (single-select)
+    const benchmarkPickerConfig = React.useMemo(() => ({
+        title: "Select Benchmark",
+        fetchPage: fetchBenchmarksPage,
+        getItemId: (benchmark) => benchmark.id,
+        getItemLabel: (benchmark) => benchmark.name || benchmark.id,
+        getItemStatus: (benchmark) => benchmark.status,
+        mode: "single",
+        minSelection: 1,
+        emptyMessage: "No benchmarks found",
+        searchPlaceholder: "Search benchmarks...",
+        breadcrumbItems: [
+            { label: "Home" },
+            { label: "Benchmarks" },
+            { label: "Jobs" },
+            { label: "Create" },
+            { label: "Select Benchmark", active: true },
+        ],
+    }), [fetchBenchmarksPage]);
+    // Memoize scenario picker config (multi-select)
+    const scenarioPickerConfig = React.useMemo(() => ({
+        title: "Select Scenarios",
+        fetchPage: fetchScenariosPage,
+        getItemId: (scenario) => scenario.id,
+        getItemLabel: (scenario) => scenario.name || scenario.id,
+        getItemStatus: (scenario) => scenario.is_public ? "public" : "private",
+        mode: "multi",
+        minSelection: 1,
+        emptyMessage: "No scenarios found",
+        searchPlaceholder: "Search scenarios...",
+        breadcrumbItems: [
+            { label: "Home" },
+            { label: "Benchmarks" },
+            { label: "Jobs" },
+            { label: "Create" },
+            { label: "Select Scenarios", active: true },
+        ],
+    }), [fetchScenariosPage]);
+    // Memoize agent picker config (multi-select)
+    const agentPickerConfig = React.useMemo(() => ({
+        title: "Select Agents",
+        fetchPage: fetchAgentsPage,
+        getItemId: (agent) => agent.id,
+        getItemLabel: (agent) => agent.name,
+        getItemStatus: (agent) => (agent.is_public ? "public" : "private"),
+        mode: "multi",
+        minSelection: 1,
+        emptyMessage: "No agents found",
+        searchPlaceholder: "Search agents...",
+        breadcrumbItems: [
+            { label: "Home" },
+            { label: "Benchmarks" },
+            { label: "Jobs" },
+            { label: "Create" },
+            { label: "Select Agents", active: true },
+        ],
+    }), [fetchAgentsPage]);
+    // Handle benchmark selection (single)
+    const handleBenchmarkSelect = React.useCallback((items) => {
+        if (items.length > 0) {
+            const benchmark = items[0];
+            setFormData((prev) => ({
+                ...prev,
+                benchmarkId: benchmark.id,
+                benchmarkName: benchmark.name || benchmark.id,
+            }));
+        }
+        setScreenState("form");
+    }, []);
+    // Handle scenario selection (multi)
+    const handleScenarioSelect = React.useCallback((items) => {
+        setFormData((prev) => ({
+            ...prev,
+            scenarioIds: items.map((s) => s.id),
+            scenarioNames: items.map((s) => s.name || s.id),
+        }));
+        setScreenState("form");
+    }, []);
+    // Handle agent selection (multi)
+    const handleAgentSelect = React.useCallback((items) => {
+        setFormData((prev) => ({
+            ...prev,
+            agentIds: items.map((a) => a.id),
+            agentNames: items.map((a) => a.name),
+        }));
+        setScreenState("form");
+    }, []);
+    // Handle create
+    const handleCreate = React.useCallback(async () => {
+        if (!isFormValid)
+            return;
+        setScreenState("creating");
+        setError(null);
+        try {
+            // Use cloned agent configs if available, otherwise build from form
+            let agentConfigs;
+            if (cloneAgentConfigs) {
+                // Use the full cloned configs
+                agentConfigs = JSON.parse(cloneAgentConfigs);
+            }
+            else {
+                // Build agent configs from form data (backward compatibility)
+                agentConfigs = formData.agentIds.map((agentId, index) => {
+                    const config = {
+                        name: formData.agentNames[index],
+                        agentId: agentId,
+                    };
+                    if (formData.agentTimeout) {
+                        const timeout = parseInt(formData.agentTimeout, 10);
+                        if (!isNaN(timeout) && timeout > 0) {
+                            config.timeoutSeconds = timeout;
+                        }
+                    }
+                    return config;
+                });
+            }
+            // Use cloned orchestrator config if available, otherwise build from form
+            let orchestratorConfig;
+            if (cloneOrchestratorConfig) {
+                orchestratorConfig = JSON.parse(cloneOrchestratorConfig);
+            }
+            else if (formData.concurrentTrials) {
+                orchestratorConfig = {
+                    nConcurrentTrials: parseInt(formData.concurrentTrials, 10) || 1,
+                };
+            }
+            const job = await createBenchmarkJob({
+                name: formData.name || undefined,
+                benchmarkId: formData.sourceType === "benchmark"
+                    ? formData.benchmarkId
+                    : undefined,
+                scenarioIds: formData.sourceType === "scenarios"
+                    ? formData.scenarioIds
+                    : undefined,
+                agentConfigs,
+                orchestratorConfig,
+            });
+            setCreatedJob(job);
+            setScreenState("success");
+        }
+        catch (err) {
+            setError(err);
+            setScreenState("error");
+        }
+    }, [formData, isFormValid, cloneAgentConfigs, cloneOrchestratorConfig]);
+    // Handle input
+    useInput((input, key) => {
+        if (screenState !== "form")
+            return;
+        // Handle source type toggle with left/right arrows
+        if (currentField === "source_type" && (key.leftArrow || key.rightArrow)) {
+            setFormData((prev) => ({
+                ...prev,
+                sourceType: prev.sourceType === "benchmark" ? "scenarios" : "benchmark",
+                // Clear the other source when switching
+                benchmarkId: prev.sourceType === "scenarios" ? "" : prev.benchmarkId,
+                benchmarkName: prev.sourceType === "scenarios" ? "" : prev.benchmarkName,
+                scenarioIds: prev.sourceType === "benchmark" ? [] : prev.scenarioIds,
+                scenarioNames: prev.sourceType === "benchmark" ? [] : prev.scenarioNames,
+            }));
+            return;
+        }
+        // Navigate between fields
+        if (key.upArrow && currentFieldIndex > 0) {
+            setCurrentField(fieldKeys[currentFieldIndex - 1]);
+        }
+        else if (key.downArrow && currentFieldIndex < fieldKeys.length - 1) {
+            setCurrentField(fieldKeys[currentFieldIndex + 1]);
+        }
+        else if (key.escape) {
+            goBack();
+        }
+        else if (key.return) {
+            if (currentFieldDef?.type === "picker" && currentField === "benchmark") {
+                setScreenState("picking_benchmark");
+            }
+            else if (currentFieldDef?.type === "picker" &&
+                currentField === "scenarios") {
+                setScreenState("picking_scenarios");
+            }
+            else if (currentFieldDef?.type === "picker" &&
+                currentField === "agents") {
+                setScreenState("picking_agents");
+            }
+            else if (currentFieldDef?.type === "action" &&
+                currentField === "create") {
+                handleCreate();
+            }
+            else if (currentFieldIndex < fieldKeys.length - 1) {
+                // Move to next field on Enter for text inputs
+                setCurrentField(fieldKeys[currentFieldIndex + 1]);
+            }
+        }
+    });
+    // Show benchmark picker (single-select)
+    if (screenState === "picking_benchmark") {
+        return (_jsx(ResourcePicker, { config: benchmarkPickerConfig, onSelect: handleBenchmarkSelect, onCancel: () => setScreenState("form"), initialSelected: formData.benchmarkId ? [formData.benchmarkId] : [] }));
+    }
+    // Show scenario picker (multi-select)
+    if (screenState === "picking_scenarios") {
+        return (_jsx(ResourcePicker, { config: scenarioPickerConfig, onSelect: handleScenarioSelect, onCancel: () => setScreenState("form"), initialSelected: formData.scenarioIds }));
+    }
+    // Show agent picker (multi-select)
+    if (screenState === "picking_agents") {
+        return (_jsx(ResourcePicker, { config: agentPickerConfig, onSelect: handleAgentSelect, onCancel: () => setScreenState("form"), initialSelected: formData.agentIds }));
+    }
+    // Show creating state
+    if (screenState === "creating") {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Jobs" },
+                        { label: "Create", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Creating benchmark job..." })] }));
+    }
+    // Show success state
+    if (screenState === "success" && createdJob) {
+        return (_jsx(SuccessScreen, { job: createdJob, onViewDetails: () => navigate("benchmark-job-detail", { benchmarkJobId: createdJob.id }), onGoToList: () => navigate("benchmark-job-list"), onBack: goBack }));
+    }
+    // Show error state
+    if (screenState === "error") {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Jobs" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to create benchmark job", error: error || new Error("Unknown error") }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, children: ["Press ", _jsx(Text, { color: colors.primary, children: "r" }), " to retry or", " ", _jsx(Text, { color: colors.primary, children: "Esc" }), " to go back"] }) }), _jsx(NavigationTips, { tips: [
+                        { key: "r", label: "Retry" },
+                        { key: "Esc", label: "Back" },
+                    ] })] }));
+    }
+    // Helper to get display value for a field
+    const getFieldValue = (fieldKey) => {
+        switch (fieldKey) {
+            case "source_type":
+                return formData.sourceType === "benchmark" ? "Benchmark" : "Scenarios";
+            case "benchmark":
+                return formData.benchmarkName;
+            case "scenarios":
+                // Show count based on IDs even if names aren't loaded yet
+                if (formData.scenarioIds.length === 0)
+                    return "";
+                if (formData.scenarioIds.length === 1) {
+                    return formData.scenarioNames[0] || formData.scenarioIds[0];
+                }
+                // If we have names, show the first name + count, otherwise show count
+                if (formData.scenarioNames.length > 0) {
+                    return `${formData.scenarioNames.length} scenarios selected`;
+                }
+                return `${formData.scenarioIds.length} scenarios selected`;
+            case "agents":
+                if (formData.agentNames.length === 0)
+                    return "";
+                if (formData.agentNames.length === 1)
+                    return formData.agentNames[0];
+                return `${formData.agentNames.length} agents selected`;
+            case "name":
+                return formData.name;
+            case "agent_timeout":
+                return formData.agentTimeout;
+            case "concurrent_trials":
+                return formData.concurrentTrials;
+            default:
+                return "";
+        }
+    };
+    // Main form view
+    const isCloning = !!cloneFromJobId;
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Home" },
+                    { label: "Benchmarks" },
+                    { label: "Jobs" },
+                    { label: isCloning ? "Clone Job" : "Create", active: true },
+                ] }), _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " ", isCloning ? "Clone Benchmark Job" : "Create Benchmark Job"] }) }), fields.map((field) => {
+                        const isSelected = currentField === field.key;
+                        const value = getFieldValue(field.key);
+                        return (_jsxs(Box, { marginBottom: field.type === "action" ? 1 : 0, children: [_jsx(Box, { width: 4, children: _jsx(Text, { color: isSelected ? colors.primary : colors.textDim, children: isSelected ? figures.pointer : " " }) }), field.type === "toggle" ? (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [field.label, field.required && _jsx(Text, { color: colors.error, children: "*" }), ":", " "] }), _jsxs(Text, { color: isSelected ? colors.text : colors.textDim, children: [isSelected ? figures.arrowLeft : "", " "] }), _jsx(Text, { color: formData.sourceType === "benchmark"
+                                                ? colors.primary
+                                                : colors.textDim, bold: formData.sourceType === "benchmark", children: "Benchmark" }), _jsx(Text, { color: colors.textDim, children: " / " }), _jsx(Text, { color: formData.sourceType === "scenarios"
+                                                ? colors.primary
+                                                : colors.textDim, bold: formData.sourceType === "scenarios", children: "Scenarios" }), _jsxs(Text, { color: isSelected ? colors.text : colors.textDim, children: [" ", isSelected ? figures.arrowRight : ""] })] })) : field.type === "action" ? (_jsx(Box, { children: _jsxs(Text, { color: isFormValid ? colors.success : colors.textDim, bold: isSelected, inverse: isSelected, children: [" ", figures.play, " ", field.label, " ", !isFormValid && "(select benchmark/scenarios and agents)"] }) })) : field.type === "picker" ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [field.label, field.required && _jsx(Text, { color: colors.error, children: "*" }), ":", " "] }), value ? (_jsx(Text, { color: colors.idColor, children: value })) : (_jsx(Text, { color: colors.textDim, dimColor: true, children: "(none selected)" }))] }), isSelected && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press Enter to select" }) }))] })) : (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [field.label, field.required && _jsx(Text, { color: colors.error, children: "*" }), ":", " "] }), isSelected ? (_jsx(TextInput, { value: value, onChange: (val) => {
+                                                if (field.key === "name") {
+                                                    setFormData((prev) => ({ ...prev, name: val }));
+                                                }
+                                                else if (field.key === "agent_timeout") {
+                                                    setFormData((prev) => ({
+                                                        ...prev,
+                                                        agentTimeout: val,
+                                                    }));
+                                                }
+                                                else if (field.key === "concurrent_trials") {
+                                                    setFormData((prev) => ({
+                                                        ...prev,
+                                                        concurrentTrials: val,
+                                                    }));
+                                                }
+                                            }, placeholder: field.placeholder })) : (_jsx(Text, { color: value ? colors.text : colors.textDim, children: value || field.placeholder || "(empty)" }))] }))] }, field.key));
+                    }), currentFieldDef?.description && (_jsx(Box, { marginTop: 1, marginLeft: 4, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.info, " ", currentFieldDef.description] }) }))] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        key: "Enter",
+                        label: currentFieldDef?.type === "picker"
+                            ? "Select"
+                            : currentFieldDef?.type === "action"
+                                ? "Create"
+                                : "Next",
+                    },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
+}