@runloop/rl-cli 1.7.0 → 1.8.0

package/dist/commands/menu.js

@@ -4,13 +4,14 @@ import { enterAlternateScreenBuffer, exitAlternateScreenBuffer, clearScreen, } f
 import { processUtils } from "../utils/processUtils.js";
 import { Router } from "../router/Router.js";
 import { NavigationProvider } from "../store/navigationStore.js";
+import { BetaFeatureProvider } from "../store/betaFeatureStore.js";
 function AppInner() {
     // NavigationProvider already handles initialScreen and initialParams
     // No need for useEffect here - provider sets state on mount
     return _jsx(Router, {});
 }
 function App({ initialScreen = "menu", focusDevboxId, }) {
-    return (_jsx(NavigationProvider, { initialScreen: initialScreen, initialParams: focusDevboxId ? { focusDevboxId } : {}, children: _jsx(AppInner, {}) }));
+    return (_jsx(BetaFeatureProvider, { children: _jsx(NavigationProvider, { initialScreen: initialScreen, initialParams: focusDevboxId ? { focusDevboxId } : {}, children: _jsx(AppInner, {}) }) }));
 }
 export async function runMainMenu(initialScreen = "menu", focusDevboxId) {
     enterAlternateScreenBuffer();

package/dist/commands/secret/list.js

@@ -1,9 +1,384 @@
-/**
- * List secrets command
- */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import figures from "figures";
 import { getClient } from "../../utils/client.js";
+import { Header } from "../../components/Header.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 { Table, createTextColumn } from "../../components/Table.js";
+import { ActionsPopup } from "../../components/ActionsPopup.js";
+import { formatTimeAgo } from "../../components/ResourceListView.js";
+import { SearchBar } from "../../components/SearchBar.js";
 import { output, outputError } from "../../utils/output.js";
-const DEFAULT_PAGE_SIZE = 20;
+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 { useNavigation } from "../../store/navigationStore.js";
+import { ConfirmationPrompt } from "../../components/ConfirmationPrompt.js";
+const DEFAULT_PAGE_SIZE = 10;
+const ListSecretsUI = ({ onBack, onExit, }) => {
+    const { exit: inkExit } = useApp();
+    const { navigate } = useNavigation();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
+    const [selectedSecret, setSelectedSecret] = React.useState(null);
+    const [executingOperation, setExecutingOperation] = React.useState(null);
+    const [operationResult, setOperationResult] = React.useState(null);
+    const [operationError, setOperationError] = React.useState(null);
+    const [operationLoading, setOperationLoading] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // 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;
+    // All width constants
+    const fixedWidth = 6; // border + padding
+    const idWidth = 30;
+    const timeWidth = 20;
+    // Name width uses remaining space after fixed columns
+    const baseWidth = fixedWidth + idWidth + 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 client = getClient();
+        const pageSecrets = [];
+        // Secrets API doesn't support cursor pagination, fetch all and paginate client-side
+        const result = await client.secrets.list({ limit: 5000 });
+        // Extract data and filter by search if needed
+        if (result.secrets && Array.isArray(result.secrets)) {
+            let filtered = result.secrets;
+            // Client-side search filtering
+            if (search.submittedSearchQuery) {
+                const query = search.submittedSearchQuery.toLowerCase();
+                filtered = filtered.filter((s) => s.name?.toLowerCase().includes(query) ||
+                    s.id?.toLowerCase().includes(query));
+            }
+            // Client-side pagination
+            const startIdx = params.startingAt
+                ? filtered.findIndex((s) => s.id === params.startingAt) + 1
+                : 0;
+            const pageItems = filtered.slice(startIdx, startIdx + params.limit);
+            pageItems.forEach((s) => {
+                pageSecrets.push({
+                    id: s.id,
+                    name: s.name,
+                    create_time_ms: s.create_time_ms,
+                    update_time_ms: s.update_time_ms,
+                });
+            });
+            return {
+                items: pageSecrets,
+                hasMore: startIdx + params.limit < filtered.length,
+                totalCount: filtered.length,
+            };
+        }
+        return {
+            items: pageSecrets,
+            hasMore: false,
+            totalCount: 0,
+        };
+    }, [search.submittedSearchQuery]);
+    // Use the shared pagination hook
+    const { items: secrets, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, refresh, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: (secret) => secret.id,
+        pollInterval: 10000,
+        pollingEnabled: !showPopup &&
+            !executingOperation &&
+            !showDeleteConfirm &&
+            !search.searchMode,
+        deps: [PAGE_SIZE, search.submittedSearchQuery],
+    });
+    // Operations for a specific secret (shown in popup)
+    const operations = React.useMemo(() => [
+        {
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        },
+        {
+            key: "delete",
+            label: "Delete Secret",
+            color: colors.error,
+            icon: figures.cross,
+        },
+    ], []);
+    // Build columns
+    const columns = React.useMemo(() => [
+        createTextColumn("id", "ID", (secret) => secret.id, {
+            width: idWidth + 1,
+            color: colors.idColor,
+            dimColor: false,
+            bold: false,
+        }),
+        createTextColumn("name", "Name", (secret) => secret.name || "", {
+            width: nameWidth,
+        }),
+        createTextColumn("created", "Created", (secret) => secret.create_time_ms ? formatTimeAgo(secret.create_time_ms) : "-", {
+            width: timeWidth,
+            color: colors.textDim,
+            dimColor: false,
+            bold: false,
+        }),
+    ], [idWidth, nameWidth, timeWidth]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (secrets.length > 0 && selectedIndex >= secrets.length) {
+            setSelectedIndex(Math.max(0, secrets.length - 1));
+        }
+    }, [secrets.length, selectedIndex]);
+    const selectedSecretItem = secrets[selectedIndex];
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + secrets.length;
+    const executeOperation = async (secret, operationKey) => {
+        const client = getClient();
+        if (!secret)
+            return;
+        try {
+            setOperationLoading(true);
+            switch (operationKey) {
+                case "delete":
+                    await client.secrets.delete(secret.name);
+                    setOperationResult(`Secret "${secret.name}" deleted successfully`);
+                    break;
+            }
+        }
+        catch (err) {
+            setOperationError(err);
+        }
+        finally {
+            setOperationLoading(false);
+        }
+    };
+    useInput((input, key) => {
+        // Handle search mode input
+        if (search.searchMode) {
+            if (key.escape) {
+                search.cancelSearch();
+            }
+            return;
+        }
+        // Handle operation result display
+        if (operationResult || operationError) {
+            if (input === "q" || key.escape || key.return) {
+                const wasDelete = executingOperation === "delete";
+                const hadError = operationError !== null;
+                setOperationResult(null);
+                setOperationError(null);
+                setExecutingOperation(null);
+                setSelectedSecret(null);
+                // Refresh the list after delete to show updated data
+                if (wasDelete && !hadError) {
+                    setTimeout(() => refresh(), 0);
+                }
+            }
+            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("secret-detail", {
+                        secretId: selectedSecretItem.id,
+                    });
+                }
+                else if (operationKey === "delete") {
+                    // Show delete confirmation
+                    setSelectedSecret(selectedSecretItem);
+                    setShowDeleteConfirm(true);
+                }
+                else {
+                    setSelectedSecret(selectedSecretItem);
+                    setExecutingOperation(operationKey);
+                    // Execute immediately with values passed directly
+                    executeOperation(selectedSecretItem, operationKey);
+                }
+            }
+            else if (input === "c") {
+                // Create hotkey
+                setShowPopup(false);
+                navigate("secret-create");
+            }
+            else if (input === "v" && selectedSecretItem) {
+                // View details hotkey
+                setShowPopup(false);
+                navigate("secret-detail", {
+                    secretId: selectedSecretItem.id,
+                });
+            }
+            else if (key.escape || input === "q") {
+                setShowPopup(false);
+                setSelectedOperation(0);
+            }
+            else if (input === "d") {
+                // Delete hotkey - show confirmation
+                setShowPopup(false);
+                setSelectedSecret(selectedSecretItem);
+                setShowDeleteConfirm(true);
+            }
+            return;
+        }
+        const pageSecrets = secrets.length;
+        // Handle list view navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageSecrets - 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 && selectedSecretItem) {
+            // Enter key navigates to detail view
+            navigate("secret-detail", {
+                secretId: selectedSecretItem.id,
+            });
+        }
+        else if (input === "a") {
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
+        else if (input === "c") {
+            // Create shortcut
+            navigate("secret-create");
+        }
+        else if (input === "/") {
+            search.enterSearchMode();
+        }
+        else if (key.escape) {
+            if (search.handleEscape()) {
+                return;
+            }
+            if (onBack) {
+                onBack();
+            }
+            else if (onExit) {
+                onExit();
+            }
+            else {
+                inkExit();
+            }
+        }
+    });
+    // Delete confirmation
+    if (showDeleteConfirm && selectedSecret) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Secret", message: `Are you sure you want to delete "${selectedSecret.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: selectedSecret.name || selectedSecret.id },
+                { label: "Delete", active: true },
+            ], onConfirm: () => {
+                setShowDeleteConfirm(false);
+                setExecutingOperation("delete");
+                executeOperation(selectedSecret, "delete");
+            }, onCancel: () => {
+                setShowDeleteConfirm(false);
+                setSelectedSecret(null);
+            } }));
+    }
+    // Operation result display
+    if (operationResult || operationError) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        {
+                            label: selectedSecret?.name || selectedSecret?.id || "Secret",
+                        },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Continue" }] })] }));
+    }
+    // Operation loading state
+    if (operationLoading && selectedSecret) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
+        const messages = {
+            delete: "Deleting secret...",
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: selectedSecret.name || selectedSecret.id },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
+    }
+    // Loading state
+    if (loading && secrets.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Settings" }, { label: "Secrets", active: true }] }), _jsx(SpinnerComponent, { message: "Loading secrets..." })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Settings" }, { label: "Secrets", active: true }] }), _jsx(ErrorMessage, { message: "Failed to list secrets", error: error })] }));
+    }
+    // Main list view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Settings" }, { label: "Secrets", active: true }] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search secrets..." }), !showPopup && (_jsx(Table, { data: secrets, keyExtractor: (secret) => secret.id, selectedIndex: selectedIndex, title: `secrets[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No secrets found. Press [c] to create one."] }) })), !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] }), search.submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", search.submittedSearchQuery, "\""] })] }))] })), showPopup && selectedSecretItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedSecretItem, operations: operations.map((op) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.key === "view_details"
+                            ? "v"
+                            : op.key === "delete"
+                                ? "d"
+                                : "",
+                    })), 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: "c", label: "Create" },
+                    { key: "a", label: "Actions" },
+                    { key: "/", label: "Search" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
+};
+// Export the UI component for use in the main menu
+export { ListSecretsUI };
 export async function listSecrets(options = {}) {
     try {
         const client = getClient();

package/dist/components/BenchmarkMenu.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkMenu - Sub-menu for benchmark-related resources
+ */
+import React from "react";
+import { Box, Text, useInput, useApp, useStdout } from "ink";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const benchmarkMenuItems = [
+    {
+        key: "benchmark-runs",
+        label: "Benchmark Runs",
+        description: "View and manage benchmark executions",
+        icon: "▶",
+        color: colors.success,
+    },
+    {
+        key: "scenario-runs",
+        label: "Scenario Runs",
+        description: "View individual scenario results",
+        icon: "◈",
+        color: colors.info,
+    },
+];
+export const BenchmarkMenu = ({ onSelect, onBack }) => {
+    const { exit } = useApp();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const { stdout } = useStdout();
+    // Get terminal dimensions for responsive layout
+    const getTerminalDimensions = React.useCallback(() => {
+        return {
+            height: stdout?.rows && stdout.rows > 0 ? stdout.rows : 20,
+            width: stdout?.columns && stdout.columns > 0 ? stdout.columns : 80,
+        };
+    }, [stdout]);
+    const [terminalDimensions, setTerminalDimensions] = React.useState(getTerminalDimensions);
+    React.useEffect(() => {
+        setTerminalDimensions(getTerminalDimensions());
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setTerminalDimensions(getTerminalDimensions());
+        };
+        stdout.on("resize", handleResize);
+        return () => {
+            stdout.off("resize", handleResize);
+        };
+    }, [stdout, getTerminalDimensions]);
+    const terminalWidth = terminalDimensions.width;
+    const isNarrow = terminalWidth < 70;
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    useInput((input, key) => {
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < benchmarkMenuItems.length - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            onSelect(benchmarkMenuItems[selectedIndex].key);
+        }
+        else if (key.escape) {
+            onBack();
+        }
+        else if (input === "b" || input === "1") {
+            onSelect("benchmark-runs");
+        }
+        else if (input === "s" || input === "2") {
+            onSelect("scenario-runs");
+        }
+        else if (input === "q") {
+            exit();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home" }, { label: "Benchmarks", active: true }] }), _jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "Benchmarks" }), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow ? "" : " • Performance testing and evaluation" })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: benchmarkMenuItems.map((item, index) => {
+                    const isSelected = index === selectedIndex;
+                    return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " }), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), !isNarrow && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                }) }), _jsx(NavigationTips, { showArrows: true, paddingX: 2, tips: [
+                    { key: "1-2", label: "Quick select" },
+                    { key: "Enter", label: "Select" },
+                    { key: "Esc", label: "Back" },
+                    { key: "q", label: "Quit" },
+                ] })] }));
+};