@runloop/rl-cli 1.7.1 → 1.9.0

package/dist/commands/gateway-config/list.js

@@ -0,0 +1,493 @@
+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";
+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 { GatewayConfigCreatePage } from "../../components/GatewayConfigCreatePage.js";
+import { ConfirmationPrompt } from "../../components/ConfirmationPrompt.js";
+const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Get a display label for the auth mechanism type
+ */
+function getAuthTypeLabel(authMechanism) {
+    if (authMechanism.type === "bearer") {
+        return "Bearer";
+    }
+    if (authMechanism.type === "header") {
+        return authMechanism.key ? `Header: ${authMechanism.key}` : "Header";
+    }
+    return authMechanism.type;
+}
+const ListGatewayConfigsUI = ({ 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 [selectedConfig, setSelectedConfig] = 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 [showCreateConfig, setShowCreateConfig] = React.useState(false);
+    const [showEditConfig, setShowEditConfig] = React.useState(false);
+    const [editingConfig, setEditingConfig] = React.useState(null);
+    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 = 25;
+    const authWidth = 15;
+    const timeWidth = 20;
+    const showEndpoint = terminalWidth >= 100;
+    const endpointWidth = Math.max(20, terminalWidth >= 140 ? 40 : 25);
+    // Name width uses remaining space after fixed columns
+    const baseWidth = fixedWidth + idWidth + authWidth + timeWidth;
+    const optionalWidth = showEndpoint ? endpointWidth : 0;
+    const remainingWidth = terminalWidth - baseWidth - optionalWidth;
+    const nameWidth = Math.min(80, Math.max(15, remainingWidth));
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        const client = getClient();
+        const pageConfigs = [];
+        // Build query params
+        const queryParams = {
+            limit: params.limit,
+        };
+        if (params.startingAt) {
+            queryParams.starting_after = params.startingAt;
+        }
+        if (search.submittedSearchQuery) {
+            queryParams.name = search.submittedSearchQuery;
+        }
+        // Fetch ONE page only
+        const page = (await client.gatewayConfigs.list(queryParams));
+        // Extract data and create defensive copies
+        if (page.gateway_configs && Array.isArray(page.gateway_configs)) {
+            page.gateway_configs.forEach((g) => {
+                pageConfigs.push({
+                    id: g.id,
+                    name: g.name,
+                    description: g.description,
+                    endpoint: g.endpoint,
+                    create_time_ms: g.create_time_ms,
+                    auth_mechanism: {
+                        type: g.auth_mechanism.type,
+                        key: g.auth_mechanism.key,
+                    },
+                    account_id: g.account_id,
+                });
+            });
+        }
+        const result = {
+            items: pageConfigs,
+            hasMore: page.has_more || false,
+            totalCount: page.total_count || pageConfigs.length,
+        };
+        return result;
+    }, [search.submittedSearchQuery]);
+    // Use the shared pagination hook
+    const { items: configs, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, refresh, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: (config) => config.id,
+        pollInterval: 5000,
+        pollingEnabled: !showPopup &&
+            !executingOperation &&
+            !showCreateConfig &&
+            !showEditConfig &&
+            !showDeleteConfirm &&
+            !search.searchMode,
+        deps: [PAGE_SIZE, search.submittedSearchQuery],
+    });
+    // Operations for a specific gateway config (shown in popup)
+    const operations = React.useMemo(() => [
+        {
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        },
+        {
+            key: "edit",
+            label: "Edit Gateway Config",
+            color: colors.warning,
+            icon: figures.pointer,
+        },
+        {
+            key: "delete",
+            label: "Delete Gateway Config",
+            color: colors.error,
+            icon: figures.cross,
+        },
+    ], []);
+    // Build columns
+    const columns = React.useMemo(() => [
+        createTextColumn("id", "ID", (config) => config.id, {
+            width: idWidth + 1,
+            color: colors.idColor,
+            dimColor: false,
+            bold: false,
+        }),
+        createTextColumn("name", "Name", (config) => config.name || "", {
+            width: nameWidth,
+        }),
+        ...(showEndpoint
+            ? [
+                createTextColumn("endpoint", "Endpoint", (config) => config.endpoint || "", {
+                    width: endpointWidth,
+                    color: colors.textDim,
+                    dimColor: false,
+                    bold: false,
+                }),
+            ]
+            : []),
+        createTextColumn("auth", "Auth", (config) => getAuthTypeLabel(config.auth_mechanism), {
+            width: authWidth,
+            color: colors.info,
+            dimColor: false,
+            bold: false,
+        }),
+        createTextColumn("created", "Created", (config) => config.create_time_ms ? formatTimeAgo(config.create_time_ms) : "", {
+            width: timeWidth,
+            color: colors.textDim,
+            dimColor: false,
+            bold: false,
+        }),
+    ], [idWidth, nameWidth, endpointWidth, authWidth, timeWidth, showEndpoint]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (configs.length > 0 && selectedIndex >= configs.length) {
+            setSelectedIndex(Math.max(0, configs.length - 1));
+        }
+    }, [configs.length, selectedIndex]);
+    const selectedConfigItem = configs[selectedIndex];
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + configs.length;
+    const executeOperation = async (config, operationKey) => {
+        const client = getClient();
+        if (!config)
+            return;
+        try {
+            setOperationLoading(true);
+            switch (operationKey) {
+                case "delete":
+                    await client.gatewayConfigs.delete(config.id);
+                    setOperationResult(`Gateway config "${config.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);
+                setSelectedConfig(null);
+                // Refresh the list after delete to show updated data
+                if (wasDelete && !hadError) {
+                    setTimeout(() => refresh(), 0);
+                }
+            }
+            return;
+        }
+        // Handle create config screen
+        if (showCreateConfig) {
+            return;
+        }
+        // Handle edit config screen
+        if (showEditConfig) {
+            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 === "create") {
+                    setShowCreateConfig(true);
+                }
+                else if (operationKey === "view_details") {
+                    navigate("gateway-config-detail", {
+                        gatewayConfigId: selectedConfigItem.id,
+                    });
+                }
+                else if (operationKey === "edit") {
+                    // Show edit form
+                    setEditingConfig(selectedConfigItem);
+                    setShowEditConfig(true);
+                }
+                else if (operationKey === "delete") {
+                    // Show delete confirmation
+                    setSelectedConfig(selectedConfigItem);
+                    setShowDeleteConfirm(true);
+                }
+                else {
+                    setSelectedConfig(selectedConfigItem);
+                    setExecutingOperation(operationKey);
+                    // Execute immediately with values passed directly
+                    executeOperation(selectedConfigItem, operationKey);
+                }
+            }
+            else if (input === "c") {
+                // Create hotkey
+                setShowPopup(false);
+                setShowCreateConfig(true);
+            }
+            else if (input === "v" && selectedConfigItem) {
+                // View details hotkey
+                setShowPopup(false);
+                navigate("gateway-config-detail", {
+                    gatewayConfigId: selectedConfigItem.id,
+                });
+            }
+            else if (input === "e" && selectedConfigItem) {
+                // Edit hotkey
+                setShowPopup(false);
+                setEditingConfig(selectedConfigItem);
+                setShowEditConfig(true);
+            }
+            else if (key.escape || input === "q") {
+                setShowPopup(false);
+                setSelectedOperation(0);
+            }
+            else if (input === "d") {
+                // Delete hotkey - show confirmation
+                setShowPopup(false);
+                setSelectedConfig(selectedConfigItem);
+                setShowDeleteConfirm(true);
+            }
+            return;
+        }
+        const pageConfigs = configs.length;
+        // Handle list view navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageConfigs - 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 && selectedConfigItem) {
+            // Enter key navigates to detail view
+            navigate("gateway-config-detail", {
+                gatewayConfigId: selectedConfigItem.id,
+            });
+        }
+        else if (input === "a") {
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
+        else if (input === "c") {
+            // Create shortcut
+            setShowCreateConfig(true);
+        }
+        else if (input === "e" && selectedConfigItem) {
+            // Edit shortcut
+            setEditingConfig(selectedConfigItem);
+            setShowEditConfig(true);
+        }
+        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 && selectedConfig) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Gateway Config", message: `Are you sure you want to delete "${selectedConfig.name}"?`, details: "This action cannot be undone. Any devboxes using this gateway config will no longer have access to it.", breadcrumbItems: [
+                { label: "Gateway Configs" },
+                { label: selectedConfig.name || selectedConfig.id },
+                { label: "Delete", active: true },
+            ], onConfirm: () => {
+                setShowDeleteConfirm(false);
+                setExecutingOperation("delete");
+                executeOperation(selectedConfig, "delete");
+            }, onCancel: () => {
+                setShowDeleteConfirm(false);
+                setSelectedConfig(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: "Gateway Configs" },
+                        {
+                            label: selectedConfig?.name || selectedConfig?.id || "Config",
+                        },
+                        { 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 && selectedConfig) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
+        const messages = {
+            delete: "Deleting gateway config...",
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Gateway Configs" },
+                        { label: selectedConfig.name || selectedConfig.id },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
+    }
+    // Create config screen
+    if (showCreateConfig) {
+        return (_jsx(GatewayConfigCreatePage, { onBack: () => setShowCreateConfig(false), onCreate: (config) => {
+                setShowCreateConfig(false);
+                navigate("gateway-config-detail", { gatewayConfigId: config.id });
+            } }));
+    }
+    // Edit config screen
+    if (showEditConfig && editingConfig) {
+        return (_jsx(GatewayConfigCreatePage, { onBack: () => {
+                setShowEditConfig(false);
+                setEditingConfig(null);
+            }, onCreate: () => {
+                setShowEditConfig(false);
+                setEditingConfig(null);
+                // Refresh the list to show updated data
+                setTimeout(() => refresh(), 0);
+            }, initialConfig: editingConfig }));
+    }
+    // Loading state
+    if (loading && configs.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(SpinnerComponent, { message: "Loading gateway configs..." })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(ErrorMessage, { message: "Failed to list gateway configs", error: error })] }));
+    }
+    // Main list view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Gateway Configs", active: true }] }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: "Search gateway configs..." }), !showPopup && (_jsx(Table, { data: configs, keyExtractor: (config) => config.id, selectedIndex: selectedIndex, title: `gateway_configs[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No gateway configs 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 && selectedConfigItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedConfigItem, operations: operations.map((op) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.key === "create"
+                            ? "c"
+                            : op.key === "view_details"
+                                ? "v"
+                                : op.key === "edit"
+                                    ? "e"
+                                    : 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: "e", label: "Edit" },
+                    { key: "a", label: "Actions" },
+                    { key: "/", label: "Search" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
+};
+// Export the UI component for use in the main menu
+export { ListGatewayConfigsUI };
+export async function listGatewayConfigs(options = {}) {
+    try {
+        const client = getClient();
+        // Build query params
+        const queryParams = {
+            limit: DEFAULT_PAGE_SIZE,
+        };
+        if (options.name) {
+            queryParams.name = options.name;
+        }
+        // Fetch gateway configs
+        const page = (await client.gatewayConfigs.list(queryParams));
+        // Extract gateway configs array
+        const gatewayConfigs = page.gateway_configs || [];
+        output(gatewayConfigs, { format: options.output, defaultFormat: "json" });
+    }
+    catch (error) {
+        outputError("Failed to list gateway configs", error);
+    }
+}

package/dist/commands/gateway-config/update.js

@@ -0,0 +1,60 @@
+/**
+ * Update gateway config command
+ */
+import { getClient } from "../../utils/client.js";
+import { output, outputError } from "../../utils/output.js";
+export async function updateGatewayConfig(options) {
+    try {
+        const client = getClient();
+        // Build update params - only include fields that are provided
+        const updateParams = {};
+        if (options.name) {
+            updateParams.name = options.name;
+        }
+        if (options.endpoint) {
+            updateParams.endpoint = options.endpoint;
+        }
+        if (options.description !== undefined) {
+            updateParams.description = options.description;
+        }
+        // Handle auth mechanism update
+        if (options.authType) {
+            const authType = options.authType.toLowerCase();
+            if (authType !== "bearer" && authType !== "header") {
+                outputError("Invalid auth type. Must be 'bearer' or 'header'");
+                return;
+            }
+            const authMechanism = {
+                type: authType,
+            };
+            if (authType === "header") {
+                if (!options.authKey) {
+                    outputError("--auth-key is required when auth-type is 'header'");
+                    return;
+                }
+                authMechanism.key = options.authKey;
+            }
+            updateParams.auth_mechanism = authMechanism;
+        }
+        else if (options.authKey) {
+            // If only auth key is provided without auth type, we need the type
+            outputError("--auth-type is required when updating --auth-key");
+            return;
+        }
+        if (Object.keys(updateParams).length === 0) {
+            outputError("No update options provided. Use --name, --endpoint, --auth-type, --auth-key, or --description");
+            return;
+        }
+        const config = await client.gatewayConfigs.update(options.id, updateParams);
+        // Default: just output the ID for easy scripting
+        if (!options.output || options.output === "text") {
+            console.log(config.id);
+        }
+        else {
+            output(config, { format: options.output, defaultFormat: "json" });
+        }
+    }
+    catch (error) {
+        outputError("Failed to update gateway config", error);
+    }
+}

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();