@runloop/rl-cli 1.7.0 → 1.8.0

package/dist/screens/ScenarioRunListScreen.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScenarioRunListScreen - List view for scenario 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 { listScenarioRuns } from "../services/benchmarkService.js";
+export function ScenarioRunListScreen({ benchmarkRunId, }) {
+    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 scoreWidth = 8;
+    const timeWidth = 18;
+    const baseWidth = fixedWidth + idWidth + statusWidth + scoreWidth + timeWidth;
+    const remainingWidth = terminalWidth - baseWidth;
+    const nameWidth = Math.min(60, Math.max(15, remainingWidth));
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        const result = await listScenarioRuns({
+            limit: params.limit,
+            startingAfter: params.startingAt,
+            benchmarkRunId,
+        });
+        return {
+            items: result.scenarioRuns,
+            hasMore: result.hasMore,
+            totalCount: result.totalCount,
+        };
+    }, [benchmarkRunId]);
+    // Use the shared pagination hook
+    const { items: scenarioRuns, 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, benchmarkRunId],
+    });
+    // Operations for scenario runs
+    const operations = React.useMemo(() => [
+        {
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        },
+    ], []);
+    // 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("score", "Score", (run) => {
+            const score = run.scoring_contract_result?.score;
+            return score !== undefined ? String(score) : "";
+        }, {
+            width: scoreWidth,
+            color: colors.info,
+        }),
+        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, scoreWidth, timeWidth]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (scenarioRuns.length > 0 && selectedIndex >= scenarioRuns.length) {
+            setSelectedIndex(Math.max(0, scenarioRuns.length - 1));
+        }
+    }, [scenarioRuns.length, selectedIndex]);
+    const selectedRun = scenarioRuns[selectedIndex];
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + scenarioRuns.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("scenario-run-detail", {
+                        scenarioRunId: selectedRun.id,
+                        benchmarkRunId,
+                    });
+                }
+            }
+            else if (input === "v" && selectedRun) {
+                setShowPopup(false);
+                navigate("scenario-run-detail", {
+                    scenarioRunId: selectedRun.id,
+                    benchmarkRunId,
+                });
+            }
+            else if (key.escape || input === "q") {
+                setShowPopup(false);
+                setSelectedOperation(0);
+            }
+            return;
+        }
+        const pageRuns = scenarioRuns.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("scenario-run-detail", {
+                scenarioRunId: selectedRun.id,
+                benchmarkRunId,
+            });
+        }
+        else if (input === "a" && selectedRun) {
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
+        else if (input === "/") {
+            search.enterSearchMode();
+        }
+        else if (key.escape) {
+            if (search.handleEscape()) {
+                return;
+            }
+            goBack();
+        }
+    });
+    // Build breadcrumb items
+    const breadcrumbItems = [
+        { label: "Home" },
+        { label: "Benchmarks" },
+    ];
+    if (benchmarkRunId) {
+        breadcrumbItems.push({
+            label: `Run: ${benchmarkRunId.substring(0, 8)}...`,
+        });
+    }
+    breadcrumbItems.push({ label: "Scenario Runs", active: true });
+    // Loading state
+    if (loading && scenarioRuns.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(SpinnerComponent, { message: "Loading scenario runs..." })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(ErrorMessage, { message: "Failed to list scenario runs", error: error })] }));
+    }
+    // Main list view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search scenario runs..." }), !showPopup && (_jsx(Table, { data: scenarioRuns, keyExtractor: (run) => run.id, selectedIndex: selectedIndex, title: `scenario_runs[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No scenario 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] }), benchmarkRunId && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.info, children: ["Run: ", benchmarkRunId.substring(0, 8), "..."] })] }))] })), 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" : "",
+                    })), 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/SecretCreateScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { SecretCreatePage } from "../components/SecretCreatePage.js";
+export function SecretCreateScreen() {
+    const { goBack, navigate } = useNavigation();
+    return (_jsx(SecretCreatePage, { onBack: goBack, onCreate: (secret) => navigate("secret-detail", { secretId: secret.id }) }));
+}

package/dist/screens/SecretDetailScreen.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SecretDetailScreen - Detail page for secrets
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getClient } from "../utils/client.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { colors } from "../utils/theme.js";
+export function SecretDetailScreen({ secretId }) {
+    const { goBack } = useNavigation();
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [secret, setSecret] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Fetch secret from API
+    React.useEffect(() => {
+        if (secretId && !loading && !secret) {
+            setLoading(true);
+            setError(null);
+            const client = getClient();
+            // Secrets API doesn't have a direct get by ID, so we list all and find
+            client.secrets
+                .list({ limit: 5000 })
+                .then((result) => {
+                const found = result.secrets?.find((s) => s.id === secretId || s.name === secretId);
+                if (found) {
+                    setSecret(found);
+                }
+                else {
+                    setError(new Error("Secret not found"));
+                }
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [secretId, loading, secret]);
+    // Show loading state while fetching or before fetch starts
+    if (!secret && secretId && !error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading secret details..." })] }));
+    }
+    // Show error state if fetch failed
+    if (error && !secret) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load secret details", error: error })] }));
+    }
+    // Show error if no secret found
+    if (!secret) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Secret ${secretId || "unknown"} not found`, error: new Error("Secret not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    basicFields.push({
+        label: "Name",
+        value: secret.name,
+    });
+    if (secret.create_time_ms) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(secret.create_time_ms),
+        });
+    }
+    if (secret.update_time_ms) {
+        basicFields.push({
+            label: "Last Updated",
+            value: formatTimestamp(secret.update_time_ms),
+        });
+    }
+    detailSections.push({
+        title: "Details",
+        icon: figures.squareSmallFilled,
+        color: colors.warning,
+        fields: basicFields,
+    });
+    // Security notice section
+    detailSections.push({
+        title: "Security",
+        icon: figures.warning,
+        color: colors.info,
+        fields: [
+            {
+                label: "Value",
+                value: (_jsx(Text, { color: colors.textDim, dimColor: true, children: "Secret values are never displayed for security reasons" })),
+            },
+        ],
+    });
+    // Operations available for secrets (only delete - secrets are immutable)
+    const operations = [
+        {
+            key: "delete",
+            label: "Delete Secret",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, _resource) => {
+        switch (operation) {
+            case "delete":
+                // Show confirmation dialog
+                setShowDeleteConfirm(true);
+                break;
+        }
+    };
+    // Execute delete after confirmation
+    const executeDelete = async () => {
+        if (!secret)
+            return;
+        setShowDeleteConfirm(false);
+        setDeleting(true);
+        try {
+            const client = getClient();
+            await client.secrets.delete(secret.name);
+            goBack();
+        }
+        catch (err) {
+            setError(err);
+            setDeleting(false);
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (s) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Secret Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", s.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", s.name] }, "core-name"));
+        if (s.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(s.create_time_ms).toLocaleString()] }, "core-created"));
+        }
+        if (s.update_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Last Updated: ", new Date(s.update_time_ms).toLocaleString()] }, "core-updated"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Security Notice
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Security Notice" }, "security-title"));
+        lines.push(_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "Secret values are write-only and cannot be retrieved."] }, "security-notice"));
+        lines.push(_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "To change a secret, delete it and create a new one with the same name."] }, "security-notice2"));
+        lines.push(_jsx(Text, { children: " " }, "security-space"));
+        // Raw JSON (without value)
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonObj = {
+            id: s.id,
+            name: s.name,
+            create_time_ms: s.create_time_ms,
+            update_time_ms: s.update_time_ms,
+        };
+        const jsonLines = JSON.stringify(jsonObj, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Show delete confirmation
+    if (showDeleteConfirm && secret) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Secret", message: `Are you sure you want to delete "${secret.name}"?`, details: "This action cannot be undone. Any devboxes using this secret will no longer have access to it.", breadcrumbItems: [
+                { label: "Settings" },
+                { label: "Secrets" },
+                { label: secret.name || secret.id },
+                { label: "Delete", active: true },
+            ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
+    }
+    // Show deleting state
+    if (deleting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: secret.name || secret.id },
+                        { label: "Deleting...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting secret..." })] }));
+    }
+    return (_jsx(ResourceDetailPage, { resource: secret, resourceType: "Secrets", breadcrumbPrefix: [{ label: "Settings" }], getDisplayName: (s) => s.name || s.id, getId: (s) => s.id, getStatus: () => "active", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines }));
+}

package/dist/screens/SecretListScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { ListSecretsUI } from "../commands/secret/list.js";
+export function SecretListScreen() {
+    const { goBack } = useNavigation();
+    return _jsx(ListSecretsUI, { onBack: goBack });
+}

package/dist/screens/SettingsMenuScreen.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { SettingsMenu } from "../components/SettingsMenu.js";
+export function SettingsMenuScreen() {
+    const { navigate, goBack } = useNavigation();
+    const handleSelect = (key) => {
+        switch (key) {
+            case "network-policies":
+                navigate("network-policy-list");
+                break;
+            case "secrets":
+                navigate("secret-list");
+                break;
+            default:
+                // Fallback for any other screen names
+                navigate(key);
+        }
+    };
+    const handleBack = () => {
+        goBack();
+    };
+    return _jsx(SettingsMenu, { onSelect: handleSelect, onBack: handleBack });
+}

package/dist/services/benchmarkService.js

@@ -0,0 +1,73 @@
+/**
+ * Benchmark Service - Handles all benchmark-related API calls
+ */
+import { getClient } from "../utils/client.js";
+/**
+ * List benchmark runs with pagination
+ */
+export async function listBenchmarkRuns(options) {
+    const client = getClient();
+    const queryParams = {
+        limit: options.limit,
+    };
+    if (options.startingAfter) {
+        queryParams.starting_after = options.startingAfter;
+    }
+    const page = await client.benchmarkRuns.list(queryParams);
+    const benchmarkRuns = page.runs || [];
+    return {
+        benchmarkRuns,
+        totalCount: page.total_count || benchmarkRuns.length,
+        hasMore: page.has_more || false,
+    };
+}
+/**
+ * Get benchmark run by ID
+ */
+export async function getBenchmarkRun(id) {
+    const client = getClient();
+    return client.benchmarkRuns.retrieve(id);
+}
+/**
+ * List scenario runs with pagination
+ */
+export async function listScenarioRuns(options) {
+    const client = getClient();
+    // If we have a benchmark run ID, use the dedicated endpoint
+    if (options.benchmarkRunId) {
+        const queryParams = {
+            limit: options.limit,
+        };
+        if (options.startingAfter) {
+            queryParams.starting_after = options.startingAfter;
+        }
+        const page = await client.benchmarkRuns.listScenarioRuns(options.benchmarkRunId, queryParams);
+        const scenarioRuns = page.runs || [];
+        return {
+            scenarioRuns,
+            totalCount: page.total_count || scenarioRuns.length,
+            hasMore: page.has_more || false,
+        };
+    }
+    // Otherwise, list all scenario runs
+    const queryParams = {
+        limit: options.limit,
+    };
+    if (options.startingAfter) {
+        queryParams.starting_after = options.startingAfter;
+    }
+    const page = await client.scenarios.runs.list(queryParams);
+    const scenarioRuns = page.runs || [];
+    return {
+        scenarioRuns,
+        totalCount: page.total_count || scenarioRuns.length,
+        hasMore: page.has_more || false,
+    };
+}
+/**
+ * Get scenario run by ID
+ */
+export async function getScenarioRun(id) {
+    const client = getClient();
+    return client.scenarios.runs.retrieve(id);
+}

package/dist/store/benchmarkStore.js

@@ -0,0 +1,120 @@
+/**
+ * Benchmark Store - Manages benchmark run and scenario run state
+ */
+import { create } from "zustand";
+const MAX_CACHE_SIZE = 10;
+export const useBenchmarkStore = create((set, get) => ({
+    // Initial benchmark run state
+    benchmarkRuns: [],
+    benchmarkRunsLoading: false,
+    benchmarkRunsError: null,
+    benchmarkRunsTotalCount: 0,
+    benchmarkRunsHasMore: false,
+    benchmarkRunsCurrentPage: 0,
+    // Initial scenario run state
+    scenarioRuns: [],
+    scenarioRunsLoading: false,
+    scenarioRunsError: null,
+    scenarioRunsTotalCount: 0,
+    scenarioRunsHasMore: false,
+    scenarioRunsCurrentPage: 0,
+    // Filters
+    benchmarkRunIdFilter: undefined,
+    // Selection
+    selectedBenchmarkRunIndex: 0,
+    selectedScenarioRunIndex: 0,
+    // Caches
+    benchmarkRunPageCache: new Map(),
+    scenarioRunPageCache: new Map(),
+    // Benchmark Run Actions
+    setBenchmarkRuns: (runs) => set({ benchmarkRuns: runs }),
+    setBenchmarkRunsLoading: (loading) => set({ benchmarkRunsLoading: loading }),
+    setBenchmarkRunsError: (error) => set({ benchmarkRunsError: error }),
+    setBenchmarkRunsTotalCount: (count) => set({ benchmarkRunsTotalCount: count }),
+    setBenchmarkRunsHasMore: (hasMore) => set({ benchmarkRunsHasMore: hasMore }),
+    setBenchmarkRunsCurrentPage: (page) => set({ benchmarkRunsCurrentPage: page }),
+    setSelectedBenchmarkRunIndex: (index) => set({ selectedBenchmarkRunIndex: index }),
+    // Scenario Run Actions
+    setScenarioRuns: (runs) => set({ scenarioRuns: runs }),
+    setScenarioRunsLoading: (loading) => set({ scenarioRunsLoading: loading }),
+    setScenarioRunsError: (error) => set({ scenarioRunsError: error }),
+    setScenarioRunsTotalCount: (count) => set({ scenarioRunsTotalCount: count }),
+    setScenarioRunsHasMore: (hasMore) => set({ scenarioRunsHasMore: hasMore }),
+    setScenarioRunsCurrentPage: (page) => set({ scenarioRunsCurrentPage: page }),
+    setSelectedScenarioRunIndex: (index) => set({ selectedScenarioRunIndex: index }),
+    setBenchmarkRunIdFilter: (id) => set({ benchmarkRunIdFilter: id }),
+    // Cache management
+    cacheBenchmarkRunPage: (page, data) => {
+        const state = get();
+        const cache = state.benchmarkRunPageCache;
+        if (cache.size >= MAX_CACHE_SIZE) {
+            const oldestKey = cache.keys().next().value;
+            if (oldestKey !== undefined) {
+                cache.delete(oldestKey);
+            }
+        }
+        const plainData = data.map((d) => JSON.parse(JSON.stringify(d)));
+        cache.set(page, plainData);
+        set({});
+    },
+    getCachedBenchmarkRunPage: (page) => {
+        return get().benchmarkRunPageCache.get(page);
+    },
+    cacheScenarioRunPage: (page, data) => {
+        const state = get();
+        const cache = state.scenarioRunPageCache;
+        if (cache.size >= MAX_CACHE_SIZE) {
+            const oldestKey = cache.keys().next().value;
+            if (oldestKey !== undefined) {
+                cache.delete(oldestKey);
+            }
+        }
+        const plainData = data.map((d) => JSON.parse(JSON.stringify(d)));
+        cache.set(page, plainData);
+        set({});
+    },
+    getCachedScenarioRunPage: (page) => {
+        return get().scenarioRunPageCache.get(page);
+    },
+    clearCache: () => {
+        const state = get();
+        state.benchmarkRunPageCache.clear();
+        state.scenarioRunPageCache.clear();
+        set({
+            benchmarkRunPageCache: new Map(),
+            scenarioRunPageCache: new Map(),
+        });
+    },
+    clearAll: () => {
+        const state = get();
+        state.benchmarkRunPageCache.clear();
+        state.scenarioRunPageCache.clear();
+        set({
+            benchmarkRuns: [],
+            benchmarkRunsLoading: false,
+            benchmarkRunsError: null,
+            benchmarkRunsTotalCount: 0,
+            benchmarkRunsHasMore: false,
+            benchmarkRunsCurrentPage: 0,
+            scenarioRuns: [],
+            scenarioRunsLoading: false,
+            scenarioRunsError: null,
+            scenarioRunsTotalCount: 0,
+            scenarioRunsHasMore: false,
+            scenarioRunsCurrentPage: 0,
+            benchmarkRunIdFilter: undefined,
+            selectedBenchmarkRunIndex: 0,
+            selectedScenarioRunIndex: 0,
+            benchmarkRunPageCache: new Map(),
+            scenarioRunPageCache: new Map(),
+        });
+    },
+    getSelectedBenchmarkRun: () => {
+        const state = get();
+        return state.benchmarkRuns[state.selectedBenchmarkRunIndex];
+    },
+    getSelectedScenarioRun: () => {
+        const state = get();
+        return state.scenarioRuns[state.selectedScenarioRunIndex];
+    },
+}));