@runloop/rl-cli 1.7.1 → 1.9.0

package/dist/components/SecretCreatePage.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SecretCreatePage - Form for creating a new secret
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { getClient } from "../utils/client.js";
+import { SpinnerComponent } from "./Spinner.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { SuccessMessage } from "./SuccessMessage.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { FormTextInput, FormActionButton } from "./form/index.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+export const SecretCreatePage = ({ onBack, onCreate, }) => {
+    const [currentField, setCurrentField] = React.useState("submit");
+    const [formData, setFormData] = React.useState({
+        name: "",
+        value: "",
+    });
+    const [submitting, setSubmitting] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [validationError, setValidationError] = React.useState(null);
+    const fields = [
+        { key: "submit", label: "Create Secret", type: "action" },
+        { key: "name", label: "Name (required)", type: "text" },
+        { key: "value", label: "Value (required)", type: "password" },
+    ];
+    const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Main form input handler
+    useInput((input, key) => {
+        // Handle result screen
+        if (result) {
+            if (input === "q" || key.escape || key.return) {
+                if (onCreate) {
+                    onCreate(result);
+                }
+                else {
+                    onBack();
+                }
+            }
+            return;
+        }
+        // Handle error screen
+        if (error) {
+            if (input === "r" || key.return) {
+                // Retry - clear error and return to form
+                setError(null);
+            }
+            else if (input === "q" || key.escape) {
+                // Quit - go back to list
+                onBack();
+            }
+            return;
+        }
+        // Handle submitting state
+        if (submitting) {
+            return;
+        }
+        // Back to list
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Submit form with Ctrl+S
+        if (input === "s" && key.ctrl) {
+            handleSubmit();
+            return;
+        }
+        // Handle Enter on any field to submit
+        if (key.return) {
+            handleSubmit();
+            return;
+        }
+        // Navigation between fields (up/down arrows and tab/shift+tab)
+        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
+            setCurrentField(fields[currentFieldIndex - 1].key);
+            return;
+        }
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
+            setCurrentField(fields[currentFieldIndex + 1].key);
+            return;
+        }
+    });
+    const handleSubmit = async () => {
+        // Validate required fields
+        if (!formData.name.trim()) {
+            setValidationError("Name is required");
+            setCurrentField("name");
+            return;
+        }
+        if (!formData.value) {
+            setValidationError("Value is required");
+            setCurrentField("value");
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        setValidationError(null);
+        try {
+            const client = getClient();
+            const secret = await client.secrets.create({
+                name: formData.name.trim(),
+                value: formData.value,
+            });
+            setResult(secret);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    // Result screen
+    if (result) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Create", active: true },
+                    ] }), _jsx(SuccessMessage, { message: "Secret created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name] }) })] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { color: colors.info, children: [figures.info, " The secret value has been securely stored and cannot be retrieved."] }) }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "View secret details" }] })] }));
+    }
+    // Error screen
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Create", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to create secret", error: error }), _jsx(NavigationTips, { tips: [
+                        { key: "Enter/r", label: "Retry" },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
+    }
+    // Submitting screen
+    if (submitting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Settings" },
+                        { label: "Secrets" },
+                        { label: "Create", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Creating secret..." })] }));
+    }
+    // Form screen
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Settings" },
+                    { label: "Secrets" },
+                    { label: "Create", active: true },
+                ] }), _jsx(Box, { borderStyle: "round", borderColor: colors.info, paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Text, { color: colors.info, children: [figures.info, " ", _jsx(Text, { bold: true, children: "Note:" }), " Secret values are", " ", _jsx(Text, { bold: true, children: "write-only" }), ". Once created, the value cannot be retrieved or viewed. To change a secret, delete it and create a new one."] }) }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
+                    const isActive = currentField === field.key;
+                    if (field.type === "action") {
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: "[Enter to create]" }, field.key));
+                    }
+                    if (field.type === "text") {
+                        const value = formData[field.key];
+                        const hasError = field.key === "name" && validationError === "Name is required";
+                        return (_jsx(FormTextInput, { label: field.label, value: value, onChange: (newValue) => {
+                                setFormData({ ...formData, [field.key]: newValue });
+                                if (validationError) {
+                                    setValidationError(null);
+                                }
+                            }, onSubmit: handleSubmit, isActive: isActive, placeholder: "my-secret-name", error: hasError ? validationError : undefined }, field.key));
+                    }
+                    if (field.type === "password") {
+                        const value = formData[field.key];
+                        const hasError = field.key === "value" && validationError === "Value is required";
+                        return (_jsx(FormTextInput, { label: field.label, value: value, onChange: (newValue) => {
+                                setFormData({ ...formData, [field.key]: newValue });
+                                if (validationError) {
+                                    setValidationError(null);
+                                }
+                            }, onSubmit: handleSubmit, isActive: isActive, placeholder: "Enter secret value", error: hasError ? validationError : undefined, mask: "*" }, field.key));
+                    }
+                    return null;
+                }) }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: "Create" },
+                    { key: "q", label: "Cancel" },
+                ] })] }));
+};

package/dist/components/SettingsMenu.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 settingsMenuItems = [
+    {
+        key: "network-policies",
+        label: "Network Policies",
+        description: "Manage egress network access rules",
+        icon: "◇",
+        color: colors.info,
+    },
+    {
+        key: "gateway-configs",
+        label: "Gateway Configs",
+        description: "Configure API credential proxying",
+        icon: "⬡",
+        color: colors.success,
+    },
+    {
+        key: "secrets",
+        label: "Secrets",
+        description: "Manage sensitive values and credentials",
+        icon: "◆",
+        color: colors.warning,
+    },
+];
+export const SettingsMenu = ({ 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 < settingsMenuItems.length - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            onSelect(settingsMenuItems[selectedIndex].key);
+        }
+        else if (key.escape) {
+            onBack();
+        }
+        else if (input === "n" || input === "1") {
+            onSelect("network-policies");
+        }
+        else if (input === "g" || input === "2") {
+            onSelect("gateway-configs");
+        }
+        else if (input === "s" || input === "3") {
+            onSelect("secrets");
+        }
+        else if (input === "q") {
+            exit();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home" }, { label: "Settings", active: true }] }), _jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "Settings" }), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow ? "" : " • Configure your environment" })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: settingsMenuItems.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-3", label: "Quick select" },
+                    { key: "Enter", label: "Select" },
+                    { key: "Esc", label: "Back" },
+                    { key: "q", label: "Quit" },
+                ] })] }));
+};

package/dist/components/StateHistory.js

@@ -3,6 +3,7 @@ import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
 import { getStatusDisplay } from "./StatusBadge.js";
+import { formatTimeAgo } from "../utils/time.js";
 // Format shutdown reason into human-readable text
 const formatShutdownReason = (reason) => {
     switch (reason) {
@@ -33,26 +34,6 @@ const formatShutdownReason = (reason) => {
             return reason.replace(/_/g, " ");
     }
 };
-// Format time ago in a succinct way
-const formatTimeAgo = (timestamp) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24)
-        return `${hours}h ago`;
-    const days = Math.floor(hours / 24);
-    if (days < 30)
-        return `${days}d ago`;
-    const months = Math.floor(days / 30);
-    if (months < 12)
-        return `${months}mo ago`;
-    const years = Math.floor(months / 12);
-    return `${years}y ago`;
-};
 // Format duration in a succinct way
 const formatDuration = (milliseconds) => {
     const seconds = Math.floor(milliseconds / 1000);

package/dist/components/StatusBadge.js

@@ -82,6 +82,13 @@ export const getStatusDisplay = (status) => {
                 label: "Failed",
             };
         // === BUILD STATES (for blueprints) ===
+        case "queued":
+            return {
+                icon: figures.ellipsis,
+                color: colors.warning,
+                text: "QUEUED    ",
+                label: "Queued",
+            };
         case "ready":
             return {
                 icon: figures.tick,
@@ -104,6 +111,79 @@ export const getStatusDisplay = (status) => {
                 text: "BUILDING  ",
                 label: "Building: In Progress",
             };
+        // === BENCHMARK/SCENARIO STATES ===
+        case "completed":
+            return {
+                icon: figures.tick,
+                color: colors.success,
+                text: "COMPLETE  ",
+                label: "Complete",
+            };
+        case "canceled":
+            return {
+                icon: figures.cross,
+                color: colors.textDim,
+                text: "CANCELED  ",
+                label: "Canceled",
+            };
+        case "scoring":
+            return {
+                icon: figures.arrowUp,
+                color: colors.warning,
+                text: "SCORING   ",
+                label: "Scoring",
+            };
+        case "scored":
+            return {
+                icon: figures.tick,
+                color: colors.info,
+                text: "SCORED    ",
+                label: "Scored",
+            };
+        case "timeout":
+            return {
+                icon: figures.warning,
+                color: colors.error,
+                text: "TIMEOUT   ",
+                label: "Timeout",
+            };
+        // === GENERIC STATES ===
+        case "active":
+            return {
+                icon: figures.tick,
+                color: colors.success,
+                text: "ACTIVE    ",
+                label: "Active",
+            };
+        // === STORAGE OBJECT STATES ===
+        case "UPLOADING":
+            return {
+                icon: figures.arrowUp,
+                color: colors.warning,
+                text: "UPLOADING ",
+                label: "Uploading",
+            };
+        case "READ_ONLY":
+            return {
+                icon: figures.tick,
+                color: colors.success,
+                text: "READ_ONLY ",
+                label: "Read Only",
+            };
+        case "DELETED":
+            return {
+                icon: figures.cross,
+                color: colors.textDim,
+                text: "DELETED   ",
+                label: "Deleted",
+            };
+        case "ERROR":
+            return {
+                icon: figures.warning,
+                color: colors.error,
+                text: "ERROR     ",
+                label: "Error",
+            };
         default:
             // Truncate and pad any unknown status to 10 chars to match column width
             const truncated = status.toUpperCase().slice(0, 10);

package/dist/components/StreamingLogsViewer.js

@@ -9,6 +9,7 @@ import figures from "figures";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { NavigationTips } from "./NavigationTips.js";
 import { colors } from "../utils/theme.js";
+import { copyToClipboard } from "../utils/clipboard.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { parseAnyLogEntry } from "../utils/logFormatter.js";
@@ -167,42 +168,10 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
                 return `${parts.timestamp} ${parts.level} [${parts.source}] ${shell}${cmd}${parts.message} ${exitCode}`.trim();
             })
                 .join("\n");
-            const copyToClipboard = async (text) => {
-                const { spawn } = await import("child_process");
-                const platform = process.platform;
-                let command;
-                let args;
-                if (platform === "darwin") {
-                    command = "pbcopy";
-                    args = [];
-                }
-                else if (platform === "win32") {
-                    command = "clip";
-                    args = [];
-                }
-                else {
-                    command = "xclip";
-                    args = ["-selection", "clipboard"];
-                }
-                const proc = spawn(command, args);
-                proc.stdin.write(text);
-                proc.stdin.end();
-                proc.on("exit", (code) => {
-                    if (code === 0) {
-                        setCopyStatus("Copied!");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                    else {
-                        setCopyStatus("Failed");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                });
-                proc.on("error", () => {
-                    setCopyStatus("Not supported");
-                    setTimeout(() => setCopyStatus(null), 2000);
-                });
-            };
-            copyToClipboard(logsText);
+            copyToClipboard(logsText).then((status) => {
+                setCopyStatus(status);
+                setTimeout(() => setCopyStatus(null), 2000);
+            });
         }
         else if (input === "q" || key.escape || key.return) {
             onBack();
@@ -214,16 +183,13 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
     const contentWidth = Math.max(40, terminalWidth - boxChrome);
     // Helper to sanitize log message
     const sanitizeMessage = (message) => {
-        const strippedAnsi = message.replace(
-        // eslint-disable-next-line no-control-regex
-        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
-        return (strippedAnsi
+        const strippedAnsi = message.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        return strippedAnsi
             .replace(/\r\n/g, " ")
             .replace(/\n/g, " ")
             .replace(/\r/g, " ")
             .replace(/\t/g, " ")
-            // eslint-disable-next-line no-control-regex
-            .replace(/[\x00-\x1F]/g, ""));
+            .replace(/[\x00-\x1F]/g, "");
     };
     // Calculate visible logs
     let visibleLogs;

package/dist/components/form/FormTextInput.js

@@ -3,6 +3,8 @@ import { Text } from "ink";
 import TextInput from "ink-text-input";
 import { FormField } from "./FormField.js";
 import { colors } from "../../utils/theme.js";
-export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, }) => {
-    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: value || "(empty)" })) }));
+export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, mask, }) => {
+    // Display value: use mask character if provided
+    const displayValue = mask && value ? mask.repeat(value.length) : value;
+    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit, mask: mask })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: displayValue || "(empty)" })) }));
 };

package/dist/components/resourceDetailTypes.js

@@ -0,0 +1,18 @@
+/**
+ * Walk all sections and collect fields that have an action defined.
+ * Returns a flat list of references preserving section/field indices
+ * so the component can map selections back to the right field.
+ */
+export function collectActionableFields(sections) {
+    const refs = [];
+    sections.forEach((section, sectionIndex) => {
+        section.fields
+            .filter((field) => field.value !== undefined && field.value !== null)
+            .forEach((field, fieldIndex) => {
+            if (field.action) {
+                refs.push({ sectionIndex, fieldIndex, action: field.action });
+            }
+        });
+    });
+    return refs;
+}

package/dist/hooks/useInputHandler.js

@@ -0,0 +1,103 @@
+/**
+ * useInputHandler - Declarative, mode-based input handling for Ink components.
+ *
+ * Replaces long imperative if/else chains in useInput callbacks with a
+ * structured system of ordered modes, each with a key-binding map.
+ * The first active mode wins; bindings are looked up by canonical key name.
+ */
+import { useInput } from "ink";
+// ---------------------------------------------------------------------------
+// Key resolution
+// ---------------------------------------------------------------------------
+/**
+ * Normalise Ink's (input, key) pair into a single canonical key name.
+ *
+ * Priority order (first match wins):
+ *  1. Special keys (arrows, enter, escape, etc.)
+ *  2. Ctrl+<char> combinations
+ *  3. The raw `input` string (printable character)
+ */
+export function resolveKeyName(input, key) {
+    // Special keys
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    if (key.leftArrow)
+        return "left";
+    if (key.rightArrow)
+        return "right";
+    if (key.return)
+        return "enter";
+    if (key.escape)
+        return "escape";
+    if (key.tab)
+        return "tab";
+    if (key.backspace)
+        return "backspace";
+    if (key.delete)
+        return "delete";
+    if (key.pageUp)
+        return "pageUp";
+    if (key.pageDown)
+        return "pageDown";
+    // Ctrl combinations (e.g. ctrl+c)
+    if (key.ctrl && input)
+        return `ctrl+${input}`;
+    // Printable character
+    return input;
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * Declarative input handler.
+ *
+ * @param modes  Ordered array of input modes. The first mode whose `active()`
+ *               returns `true` gets to handle the key event.
+ * @param options  Optional settings forwarded to Ink's useInput.
+ */
+export function useInputHandler(modes, options) {
+    useInput((input, key) => {
+        const keyName = resolveKeyName(input, key);
+        for (const mode of modes) {
+            if (!mode.active())
+                continue;
+            // Try an exact binding match
+            const handler = mode.bindings[keyName];
+            if (handler) {
+                handler();
+                return;
+            }
+            // No binding matched — try the dynamic fallback
+            if (mode.onUnmatched) {
+                mode.onUnmatched(input, key);
+                return;
+            }
+            // captureAll: swallow the event silently
+            if (mode.captureAll)
+                return;
+            // Default: first active mode consumes the event even if nothing matched
+            return;
+        }
+    }, { isActive: options?.isActive ?? true });
+}
+// ---------------------------------------------------------------------------
+// Preset binding helpers
+// ---------------------------------------------------------------------------
+/**
+ * Common scroll bindings (j/k, arrows, page up/down).
+ * Spread into a mode's `bindings` to get standard scrolling behaviour.
+ */
+export function scrollBindings(getScroll, setScroll) {
+    return {
+        down: () => setScroll(getScroll() + 1),
+        up: () => setScroll(Math.max(0, getScroll() - 1)),
+        j: () => setScroll(getScroll() + 1),
+        k: () => setScroll(Math.max(0, getScroll() - 1)),
+        s: () => setScroll(getScroll() + 1),
+        w: () => setScroll(Math.max(0, getScroll() - 1)),
+        pageDown: () => setScroll(getScroll() + 10),
+        pageUp: () => setScroll(Math.max(0, getScroll() - 10)),
+    };
+}