@runloop/rl-cli 1.7.0 → 1.8.0

package/dist/screens/BenchmarkRunListScreen.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkRunListScreen - List view for benchmark runs
+ */
+import React from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { NavigationTips } from "../components/NavigationTips.js";
+import { Table, createTextColumn, createComponentColumn, } from "../components/Table.js";
+import { ActionsPopup } from "../components/ActionsPopup.js";
+import { formatTimeAgo } from "../components/ResourceListView.js";
+import { SearchBar } from "../components/SearchBar.js";
+import { getStatusDisplay } from "../components/StatusBadge.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { useCursorPagination } from "../hooks/useCursorPagination.js";
+import { useListSearch } from "../hooks/useListSearch.js";
+import { listBenchmarkRuns } from "../services/benchmarkService.js";
+export function BenchmarkRunListScreen() {
+    const { exit: inkExit } = useApp();
+    const { navigate, goBack } = useNavigation();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
+    // Search state
+    const search = useListSearch({
+        onSearchSubmit: () => setSelectedIndex(0),
+        onSearchClear: () => setSelectedIndex(0),
+    });
+    // Calculate overhead for viewport height
+    const overhead = 13 + search.getSearchOverhead();
+    const { viewportHeight, terminalWidth } = useViewportHeight({
+        overhead,
+        minHeight: 5,
+    });
+    const PAGE_SIZE = viewportHeight;
+    // Column widths
+    const fixedWidth = 6;
+    const idWidth = 25;
+    const statusWidth = 12;
+    const timeWidth = 18;
+    const baseWidth = fixedWidth + idWidth + statusWidth + timeWidth;
+    const remainingWidth = terminalWidth - baseWidth;
+    const nameWidth = Math.min(80, Math.max(15, remainingWidth));
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        const result = await listBenchmarkRuns({
+            limit: params.limit,
+            startingAfter: params.startingAt,
+        });
+        return {
+            items: result.benchmarkRuns,
+            hasMore: result.hasMore,
+            totalCount: result.totalCount,
+        };
+    }, []);
+    // Use the shared pagination hook
+    const { items: benchmarkRuns, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, refresh, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: (run) => run.id,
+        pollInterval: 5000,
+        pollingEnabled: !showPopup && !search.searchMode,
+        deps: [PAGE_SIZE],
+    });
+    // Operations for benchmark runs
+    const operations = React.useMemo(() => [
+        {
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        },
+        {
+            key: "view_scenarios",
+            label: "View Scenario Runs",
+            color: colors.info,
+            icon: figures.arrowRight,
+        },
+    ], []);
+    // Build columns
+    const columns = React.useMemo(() => [
+        createTextColumn("id", "ID", (run) => run.id, {
+            width: idWidth + 1,
+            color: colors.idColor,
+            dimColor: false,
+            bold: false,
+        }),
+        createTextColumn("name", "Name", (run) => run.name || "", {
+            width: nameWidth,
+        }),
+        createComponentColumn("status", "Status", (run, _index, isSelected) => {
+            const statusDisplay = getStatusDisplay(run.state);
+            const text = statusDisplay.text
+                .slice(0, statusWidth)
+                .padEnd(statusWidth, " ");
+            return (_jsx(Text, { color: isSelected ? colors.text : statusDisplay.color, bold: isSelected, inverse: isSelected, children: text }));
+        }, { width: statusWidth }),
+        createTextColumn("created", "Created", (run) => run.start_time_ms ? formatTimeAgo(run.start_time_ms) : "", {
+            width: timeWidth,
+            color: colors.textDim,
+            dimColor: false,
+            bold: false,
+        }),
+    ], [idWidth, nameWidth, statusWidth, timeWidth]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (benchmarkRuns.length > 0 && selectedIndex >= benchmarkRuns.length) {
+            setSelectedIndex(Math.max(0, benchmarkRuns.length - 1));
+        }
+    }, [benchmarkRuns.length, selectedIndex]);
+    const selectedRun = benchmarkRuns[selectedIndex];
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + benchmarkRuns.length;
+    useInput((input, key) => {
+        // Handle search mode input
+        if (search.searchMode) {
+            if (key.escape) {
+                search.cancelSearch();
+            }
+            return;
+        }
+        // Handle popup navigation
+        if (showPopup) {
+            if (key.upArrow && selectedOperation > 0) {
+                setSelectedOperation(selectedOperation - 1);
+            }
+            else if (key.downArrow && selectedOperation < operations.length - 1) {
+                setSelectedOperation(selectedOperation + 1);
+            }
+            else if (key.return) {
+                setShowPopup(false);
+                const operationKey = operations[selectedOperation].key;
+                if (operationKey === "view_details") {
+                    navigate("benchmark-run-detail", {
+                        benchmarkRunId: selectedRun.id,
+                    });
+                }
+                else if (operationKey === "view_scenarios") {
+                    navigate("scenario-run-list", {
+                        benchmarkRunId: selectedRun.id,
+                    });
+                }
+            }
+            else if (input === "v" && selectedRun) {
+                setShowPopup(false);
+                navigate("benchmark-run-detail", {
+                    benchmarkRunId: selectedRun.id,
+                });
+            }
+            else if (input === "s" && selectedRun) {
+                setShowPopup(false);
+                navigate("scenario-run-list", {
+                    benchmarkRunId: selectedRun.id,
+                });
+            }
+            else if (key.escape || input === "q") {
+                setShowPopup(false);
+                setSelectedOperation(0);
+            }
+            return;
+        }
+        const pageRuns = benchmarkRuns.length;
+        // Handle list view navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageRuns - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === "n" || key.rightArrow) &&
+            !loading &&
+            !navigating &&
+            hasMore) {
+            nextPage();
+            setSelectedIndex(0);
+        }
+        else if ((input === "p" || key.leftArrow) &&
+            !loading &&
+            !navigating &&
+            hasPrev) {
+            prevPage();
+            setSelectedIndex(0);
+        }
+        else if (key.return && selectedRun) {
+            navigate("benchmark-run-detail", {
+                benchmarkRunId: selectedRun.id,
+            });
+        }
+        else if (input === "a" && selectedRun) {
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
+        else if (input === "/") {
+            search.enterSearchMode();
+        }
+        else if (key.escape) {
+            if (search.handleEscape()) {
+                return;
+            }
+            goBack();
+        }
+    });
+    // Loading state
+    if (loading && benchmarkRuns.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Runs", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading benchmark runs..." })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Runs", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to list benchmark runs", error: error })] }));
+    }
+    // Main list view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Home" },
+                    { label: "Benchmarks" },
+                    { label: "Benchmark Runs", active: true },
+                ] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search benchmark runs..." }), !showPopup && (_jsx(Table, { data: benchmarkRuns, keyExtractor: (run) => run.id, selectedIndex: selectedIndex, title: `benchmark_runs[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No benchmark runs found"] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedRun && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedRun, operations: operations.map((op) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.key === "view_details"
+                            ? "v"
+                            : op.key === "view_scenarios"
+                                ? "s"
+                                : "",
+                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: hasMore || hasPrev,
+                    },
+                    { key: "Enter", label: "Details" },
+                    { key: "a", label: "Actions" },
+                    { key: "/", label: "Search" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
+}

package/dist/screens/MenuScreen.js

@@ -14,12 +14,15 @@ export function MenuScreen() {
             case "snapshots":
                 navigate("snapshot-list");
                 break;
-            case "network-policies":
-                navigate("network-policy-list");
+            case "settings":
+                navigate("settings-menu");
                 break;
             case "objects":
                 navigate("object-list");
                 break;
+            case "benchmarks":
+                navigate("benchmark-menu");
+                break;
             default:
                 // Fallback for any other screen names
                 navigate(key);

package/dist/screens/ScenarioRunDetailScreen.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScenarioRunDetailScreen - Detail page for scenario runs
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useBenchmarkStore, } from "../store/benchmarkStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getScenarioRun } from "../services/benchmarkService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+export function ScenarioRunDetailScreen({ scenarioRunId, benchmarkRunId, }) {
+    const { goBack, navigate } = useNavigation();
+    const scenarioRuns = useBenchmarkStore((state) => state.scenarioRuns);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedRun, setFetchedRun] = React.useState(null);
+    // Find run in store first
+    const runFromStore = scenarioRuns.find((r) => r.id === scenarioRunId);
+    // Polling function
+    const pollRun = React.useCallback(async () => {
+        if (!scenarioRunId)
+            return null;
+        return getScenarioRun(scenarioRunId);
+    }, [scenarioRunId]);
+    // Fetch run from API if not in store
+    React.useEffect(() => {
+        if (scenarioRunId && !loading && !fetchedRun) {
+            setLoading(true);
+            setError(null);
+            getScenarioRun(scenarioRunId)
+                .then((run) => {
+                setFetchedRun(run);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [scenarioRunId, loading, fetchedRun]);
+    // Use fetched run for full details, fall back to store for basic display
+    const run = fetchedRun || runFromStore;
+    // Build breadcrumb items
+    const buildBreadcrumbItems = (lastLabel, active = true) => {
+        const items = [
+            { label: "Home" },
+            { label: "Benchmarks" },
+        ];
+        if (benchmarkRunId) {
+            items.push({ label: `Run: ${benchmarkRunId.substring(0, 8)}...` });
+        }
+        items.push({ label: "Scenario Runs" });
+        items.push({ label: lastLabel, active });
+        return items;
+    };
+    // Show loading state
+    if (!run && scenarioRunId && !error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: buildBreadcrumbItems("Loading...") }), _jsx(SpinnerComponent, { message: "Loading scenario run details..." })] }));
+    }
+    // Show error state
+    if (error && !run) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: buildBreadcrumbItems("Error") }), _jsx(ErrorMessage, { message: "Failed to load scenario run details", error: error })] }));
+    }
+    // Show not found error
+    if (!run) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: buildBreadcrumbItems("Not Found") }), _jsx(ErrorMessage, { message: `Scenario run ${scenarioRunId || "unknown"} not found`, error: new Error("Scenario run not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (run.start_time_ms) {
+        basicFields.push({
+            label: "Started",
+            value: formatTimestamp(run.start_time_ms),
+        });
+    }
+    const endTimeMs = run.start_time_ms && run.duration_ms
+        ? run.start_time_ms + run.duration_ms
+        : undefined;
+    if (endTimeMs) {
+        basicFields.push({
+            label: "Ended",
+            value: formatTimestamp(endTimeMs),
+        });
+    }
+    if (run.scenario_id) {
+        basicFields.push({
+            label: "Scenario ID",
+            value: _jsx(Text, { color: colors.idColor, children: run.scenario_id }),
+        });
+    }
+    if (run.benchmark_run_id) {
+        basicFields.push({
+            label: "Benchmark Run ID",
+            value: _jsx(Text, { color: colors.idColor, children: run.benchmark_run_id }),
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Results section
+    const score = run.scoring_contract_result?.score;
+    if (score !== undefined) {
+        detailSections.push({
+            title: "Results",
+            icon: figures.tick,
+            color: colors.success,
+            fields: [
+                {
+                    label: "Score",
+                    value: _jsx(Text, { color: colors.info, children: score }),
+                },
+            ],
+        });
+    }
+    // Metadata section
+    if (run.metadata && Object.keys(run.metadata).length > 0) {
+        const metadataFields = Object.entries(run.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for scenario runs
+    const operations = [];
+    if (run.benchmark_run_id) {
+        operations.push({
+            key: "view-benchmark-run",
+            label: "View Benchmark Run",
+            color: colors.info,
+            icon: figures.arrowRight,
+            shortcut: "b",
+        });
+    }
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "view-benchmark-run":
+                if (resource.benchmark_run_id) {
+                    navigate("benchmark-run-detail", {
+                        benchmarkRunId: resource.benchmark_run_id,
+                    });
+                }
+                break;
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (r) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Scenario Run Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", r.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", r.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", r.state] }, "core-status"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Scenario ID: ", r.scenario_id] }, "core-scenario"));
+        if (r.benchmark_run_id) {
+            lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Benchmark Run ID: ", r.benchmark_run_id] }, "core-benchmark-run"));
+        }
+        if (r.start_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Started: ", new Date(r.start_time_ms).toLocaleString()] }, "core-created"));
+        }
+        const detailEndTimeMs = r.start_time_ms && r.duration_ms
+            ? r.start_time_ms + r.duration_ms
+            : undefined;
+        if (detailEndTimeMs) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Ended: ", new Date(detailEndTimeMs).toLocaleString()] }, "core-ended"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Results
+        const detailScore = r.scoring_contract_result?.score;
+        if (detailScore !== undefined) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Results" }, "results-title"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Score: ", detailScore] }, "results-score"));
+            lines.push(_jsx(Text, { children: " " }, "results-space"));
+        }
+        // Metadata
+        if (r.metadata && Object.keys(r.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(r.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(r, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Check if run is still in progress for polling
+    const isRunning = run.state === "running" || run.state === "scoring";
+    // Build breadcrumb prefix
+    const breadcrumbPrefix = [{ label: "Home" }, { label: "Benchmarks" }];
+    if (benchmarkRunId) {
+        breadcrumbPrefix.push({
+            label: `Run: ${benchmarkRunId.substring(0, 8)}...`,
+        });
+    }
+    breadcrumbPrefix.push({ label: "Scenario Runs" });
+    return (_jsx(ResourceDetailPage, { resource: run, resourceType: "Scenario Runs", getDisplayName: (r) => r.name || r.id, getId: (r) => r.id, getStatus: (r) => r.state, detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, pollResource: isRunning ? pollRun : undefined, breadcrumbPrefix: breadcrumbPrefix }));
+}