@runloop/rl-cli 1.7.0 → 1.8.0

package/dist/components/MainMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, useInput, useApp, useStdout } from "ink";
 import figures from "figures";
@@ -10,7 +10,8 @@ import { colors } from "../utils/theme.js";
 import { execCommand } from "../utils/exec.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
-const menuItems = [
+import { useBetaFeatures } from "../store/betaFeatureStore.js";
+const allMenuItems = [
     {
         key: "devboxes",
         label: "Devboxes",
@@ -40,10 +41,18 @@ const menuItems = [
         color: colors.secondary,
     },
     {
-        key: "network-policies",
-        label: "Network Policies",
-        description: "Manage egress network access rules",
-        icon: "◇",
+        key: "benchmarks",
+        label: "Benchmarks",
+        description: "Performance testing and evaluation",
+        icon: "▶",
+        color: colors.success,
+        betaFeature: "benchmarks",
+    },
+    {
+        key: "settings",
+        label: "Settings",
+        description: "Network policies, secrets, and more",
+        icon: "⚙",
         color: colors.info,
     },
 ];
@@ -56,10 +65,22 @@ function getLayoutMode(height) {
         return "compact"; // No banner + simple items + short descriptions
     return "minimal"; // No banner + labels only
 }
+// Helper component for rendering beta badge
+const BetaBadge = () => (_jsxs(Text, { color: colors.warning, bold: true, children: [" ", "[BETA]"] }));
 export const MainMenu = ({ onSelect }) => {
     const { exit } = useApp();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const { stdout } = useStdout();
+    const { isFeatureEnabled } = useBetaFeatures();
+    // Filter menu items based on beta feature flags
+    const menuItems = React.useMemo(() => {
+        return allMenuItems.filter((item) => {
+            if (item.betaFeature) {
+                return isFeatureEnabled(item.betaFeature);
+            }
+            return true;
+        });
+    }, [isFeatureEnabled]);
     // Get raw terminal dimensions, responding to resize events
     // Default to 20 rows / 80 cols if we can't detect
     const getTerminalDimensions = React.useCallback(() => {
@@ -89,6 +110,19 @@ export const MainMenu = ({ onSelect }) => {
     const { updateAvailable } = useUpdateCheck();
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
+    // Helper to select menu item by key (if available in filtered list)
+    const selectByKey = React.useCallback((key) => {
+        if (menuItems.some((item) => item.key === key)) {
+            onSelect(key);
+        }
+    }, [menuItems, onSelect]);
+    // Helper to select menu item by number (1-indexed, based on filtered list)
+    const selectByNumber = React.useCallback((num) => {
+        const index = num - 1;
+        if (index >= 0 && index < menuItems.length) {
+            onSelect(menuItems[index].key);
+        }
+    }, [menuItems, onSelect]);
     useInput((input, key) => {
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
@@ -102,20 +136,26 @@ export const MainMenu = ({ onSelect }) => {
         else if (key.escape) {
             exit();
         }
-        else if (input === "d" || input === "1") {
-            onSelect("devboxes");
+        else if (input === "d") {
+            selectByKey("devboxes");
+        }
+        else if (input === "b") {
+            selectByKey("blueprints");
+        }
+        else if (input === "s") {
+            selectByKey("snapshots");
         }
-        else if (input === "b" || input === "2") {
-            onSelect("blueprints");
+        else if (input === "o") {
+            selectByKey("objects");
         }
-        else if (input === "s" || input === "3") {
-            onSelect("snapshots");
+        else if (input === "e") {
+            selectByKey("benchmarks");
         }
-        else if (input === "o" || input === "4") {
-            onSelect("objects");
+        else if (input === "n") {
+            selectByKey("settings");
         }
-        else if (input === "n" || input === "5") {
-            onSelect("network-policies");
+        else if (input >= "1" && input <= "9") {
+            selectByNumber(parseInt(input, 10));
         }
         else if (input === "u" && updateAvailable) {
             // Release terminal and exec into update command (never returns)
@@ -127,8 +167,9 @@ export const MainMenu = ({ onSelect }) => {
     });
     const layoutMode = getLayoutMode(terminalHeight);
     // Navigation tips for all layouts
+    const quickSelectRange = `1-${menuItems.length}`;
     const navTips = (_jsx(NavigationTips, { showArrows: true, paddingX: 2, tips: [
-            { key: "1-5", label: "Quick select" },
+            { key: quickSelectRange, label: "Quick select" },
             { key: "Enter", label: "Select" },
             { key: "Esc", label: "Quit" },
             { key: "u", label: "Update", condition: !!updateAvailable },
@@ -137,14 +178,14 @@ export const MainMenu = ({ onSelect }) => {
     if (layoutMode === "minimal") {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
-                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), item.betaFeature && _jsx(BetaBadge, {}), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
                     }) }), navTips] }));
     }
     // Compact layout - no banner, simple items with descriptions (or no descriptions if narrow)
     if (layoutMode === "compact") {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
-                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), item.betaFeature && _jsx(BetaBadge, {}), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow
                                         ? ` [${index + 1}]`
                                         : ` - ${item.description} [${index + 1}]` })] }, item.key));
                     }) }), navTips] }));
@@ -155,7 +196,7 @@ export const MainMenu = ({ onSelect }) => {
                                 ? ` • v${VERSION}`
                                 : ` • Cloud development environments • v${VERSION}` })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.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));
+                        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 }), item.betaFeature && _jsx(BetaBadge, {}), !isNarrow && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
                     }) }), navTips] }));
     }
     // Full layout - big banner, bordered items (or simple items if narrow)
@@ -163,11 +204,11 @@ export const MainMenu = ({ onSelect }) => {
                     // Narrow layout - no borders, compact items
                     _jsx(Box, { flexDirection: "column", marginTop: 1, children: menuItems.map((item, index) => {
                             const isSelected = index === selectedIndex;
-                            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), item.betaFeature && _jsx(BetaBadge, {}), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
                         }) })) : (
                     // Wide layout - bordered items with descriptions
                     menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
-                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: 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 }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
+                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: 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 }), item.betaFeature && _jsx(BetaBadge, {}), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
                     }))] }), navTips] }));
 };

package/dist/components/SecretCreatePage.js

@@ -0,0 +1,185 @@
+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";
+                        // Display masked value when not active
+                        const maskedValue = "*".repeat(value.length);
+                        return (_jsx(FormTextInput, { label: field.label, value: isActive ? value : maskedValue, onChange: (newValue) => {
+                                setFormData({ ...formData, [field.key]: newValue });
+                                if (validationError) {
+                                    setValidationError(null);
+                                }
+                            }, onSubmit: handleSubmit, isActive: isActive, placeholder: "Enter secret value", error: hasError ? validationError : undefined }, 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,85 @@
+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: "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 === "s" || input === "2") {
+            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-2", label: "Quick select" },
+                    { key: "Enter", label: "Select" },
+                    { key: "Esc", label: "Back" },
+                    { key: "q", label: "Quit" },
+                ] })] }));
+};

package/dist/components/StatusBadge.js

@@ -104,6 +104,79 @@ export const getStatusDisplay = (status) => {
                 text: "BUILDING  ",
                 label: "Building: In Progress",
             };
+        // === BENCHMARK/SCENARIO STATES ===
+        case "completed":
+            return {
+                icon: figures.tick,
+                color: colors.success,
+                text: "COMPLETED ",
+                label: "Completed",
+            };
+        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);