@runloop/rl-cli 1.7.1 → 1.9.0

package/dist/components/DevboxDetailPage.js

@@ -12,26 +12,7 @@ import { ResourceDetailPage, } from "./ResourceDetailPage.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { getDevbox } from "../services/devboxService.js";
-// 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`;
-};
+import { formatTimeAgo } from "../utils/time.js";
 export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     const [showActions, setShowActions] = React.useState(false);
     const [selectedOperationKey, setSelectedOperationKey] = React.useState(null);
@@ -210,10 +191,28 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             });
         }
         // Source
-        if (devbox.blueprint_id || devbox.snapshot_id) {
+        if (devbox.blueprint_id) {
+            detailFields.push({
+                label: "Source",
+                value: _jsx(Text, { color: colors.success, children: devbox.blueprint_id }),
+                action: {
+                    type: "navigate",
+                    screen: "blueprint-detail",
+                    params: { blueprintId: devbox.blueprint_id },
+                    hint: "View Blueprint",
+                },
+            });
+        }
+        else if (devbox.snapshot_id) {
             detailFields.push({
                 label: "Source",
-                value: (_jsx(Text, { color: colors.success, children: devbox.blueprint_id || devbox.snapshot_id })),
+                value: _jsx(Text, { color: colors.success, children: devbox.snapshot_id }),
+                action: {
+                    type: "navigate",
+                    screen: "snapshot-detail",
+                    params: { snapshotId: devbox.snapshot_id },
+                    hint: "View Snapshot",
+                },
             });
         }
         // Network Policy
@@ -221,6 +220,12 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             detailFields.push({
                 label: "Network Policy",
                 value: _jsx(Text, { color: colors.info, children: lp.network_policy_id }),
+                action: {
+                    type: "navigate",
+                    screen: "network-policy-detail",
+                    params: { networkPolicyId: lp.network_policy_id },
+                    hint: "View Policy",
+                },
             });
         }
         // Initiator

package/dist/components/GatewayConfigCreatePage.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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, FormSelect, FormActionButton, useFormSelectNavigation, } from "./form/index.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const authTypes = ["bearer", "header"];
+export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) => {
+    const isEditing = !!initialConfig?.id;
+    const [currentField, setCurrentField] = React.useState("create");
+    // Normalize auth type from API to match our options (lowercase)
+    const normalizeAuthType = (type) => {
+        const normalized = (type || "").toLowerCase();
+        if (normalized === "header" || normalized === "bearer") {
+            return normalized;
+        }
+        return "bearer"; // default
+    };
+    const [formData, setFormData] = React.useState({
+        name: initialConfig?.name || "",
+        endpoint: initialConfig?.endpoint || "",
+        auth_type: normalizeAuthType(initialConfig?.auth_mechanism?.type),
+        auth_key: initialConfig?.auth_mechanism?.key || "",
+        description: initialConfig?.description || "",
+    });
+    const [creating, setCreating] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const fields = [
+        {
+            key: "create",
+            label: isEditing ? "Update Gateway Config" : "Create Gateway Config",
+            type: "action",
+        },
+        { key: "name", label: "Name", type: "text", placeholder: "my-gateway" },
+        {
+            key: "endpoint",
+            label: "Endpoint URL",
+            type: "text",
+            placeholder: "https://api.example.com",
+        },
+        { key: "auth_type", label: "Auth Type", type: "select" },
+        {
+            key: "auth_key",
+            label: "Auth Header Key (for header type)",
+            type: "text",
+            placeholder: "x-api-key",
+        },
+        {
+            key: "description",
+            label: "Description (optional)",
+            type: "text",
+            placeholder: "Gateway for...",
+        },
+    ];
+    const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Select navigation handlers using shared hook
+    const handleAuthTypeNav = useFormSelectNavigation(formData.auth_type, authTypes, (value) => {
+        setFormData({
+            ...formData,
+            auth_type: value,
+            // Clear auth_key if switching from header to bearer
+            auth_key: value !== "header" ? "" : formData.auth_key,
+        });
+        // If switching away from header and currently on auth_key field, move to next field
+        if (value !== "header" && currentField === "auth_key") {
+            setCurrentField("description");
+        }
+    }, currentField === "auth_type");
+    // 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 creating state
+        if (creating) {
+            return;
+        }
+        // Back to list
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Submit form with Ctrl+S
+        if (input === "s" && key.ctrl) {
+            handleCreate();
+            return;
+        }
+        // Handle Enter on any field to submit
+        if (key.return) {
+            handleCreate();
+            return;
+        }
+        // Handle select field navigation using shared hooks
+        if (handleAuthTypeNav(input, key))
+            return;
+        // Navigation (up/down arrows and tab/shift+tab)
+        // Skip auth_key field if auth_type is not "header"
+        const getNextField = (direction) => {
+            let nextIndex = direction === "up" ? currentFieldIndex - 1 : currentFieldIndex + 1;
+            while (nextIndex >= 0 && nextIndex < fields.length) {
+                const nextField = fields[nextIndex].key;
+                // Skip auth_key if auth_type is not header
+                if (nextField === "auth_key" && formData.auth_type !== "header") {
+                    nextIndex = direction === "up" ? nextIndex - 1 : nextIndex + 1;
+                    continue;
+                }
+                return nextField;
+            }
+            return null;
+        };
+        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
+            const nextField = getNextField("up");
+            if (nextField) {
+                setCurrentField(nextField);
+            }
+            return;
+        }
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
+            const nextField = getNextField("down");
+            if (nextField) {
+                setCurrentField(nextField);
+            }
+            return;
+        }
+    }, { isActive: true });
+    const handleCreate = async () => {
+        // Validate required fields
+        if (!formData.name.trim()) {
+            setError(new Error("Name is required"));
+            return;
+        }
+        if (!formData.endpoint.trim()) {
+            setError(new Error("Endpoint URL is required"));
+            return;
+        }
+        if (formData.auth_type === "header" && !formData.auth_key.trim()) {
+            setError(new Error("Auth header key is required for header auth type"));
+            return;
+        }
+        setCreating(true);
+        setError(null);
+        try {
+            const client = getClient();
+            const authMechanism = {
+                type: formData.auth_type,
+            };
+            if (formData.auth_type === "header" && formData.auth_key.trim()) {
+                authMechanism.key = formData.auth_key.trim();
+            }
+            let config;
+            if (isEditing && initialConfig?.id) {
+                // Update existing config
+                config = await client.gatewayConfigs.update(initialConfig.id, {
+                    name: formData.name.trim(),
+                    endpoint: formData.endpoint.trim(),
+                    auth_mechanism: authMechanism,
+                    description: formData.description.trim() || undefined,
+                });
+            }
+            else {
+                // Create new config
+                config = await client.gatewayConfigs.create({
+                    name: formData.name.trim(),
+                    endpoint: formData.endpoint.trim(),
+                    auth_mechanism: authMechanism,
+                    description: formData.description.trim() || undefined,
+                });
+            }
+            setResult(config);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setCreating(false);
+        }
+    };
+    // Result screen
+    if (result) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(SuccessMessage, { message: `Gateway config ${isEditing ? "updated" : "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 || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Endpoint: ", result.endpoint] }) })] }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Return to list" }] })] }));
+    }
+    // Error screen
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isEditing ? "update" : "create"} gateway config`, error: error }), _jsx(NavigationTips, { tips: [
+                        { key: "Enter/r", label: "Retry" },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
+    }
+    // Creating screen
+    if (creating) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `${isEditing ? "Updating" : "Creating"} gateway config...` })] }));
+    }
+    // Form screen
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Gateway Configs" },
+                    { label: isEditing ? "Update" : "Create", active: true },
+                ] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
+                    const isActive = currentField === field.key;
+                    const fieldData = formData[field.key];
+                    if (field.type === "action") {
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: `[Enter to ${isEditing ? "update" : "create"}]` }, field.key));
+                    }
+                    if (field.type === "text") {
+                        // Skip auth_key field if auth type is bearer
+                        if (field.key === "auth_key" && formData.auth_type !== "header") {
+                            return null;
+                        }
+                        return (_jsx(FormTextInput, { label: field.label, value: String(fieldData || ""), onChange: (value) => setFormData({ ...formData, [field.key]: value }), onSubmit: handleCreate, isActive: isActive, placeholder: field.placeholder }, field.key));
+                    }
+                    if (field.type === "select") {
+                        const value = fieldData;
+                        return (_jsx(FormSelect, { label: field.label, value: value || "", options: authTypes, onChange: (newValue) => setFormData({
+                                ...formData,
+                                [field.key]: newValue,
+                                // Clear auth_key if switching from header to bearer
+                                auth_key: newValue !== "header" ? "" : formData.auth_key,
+                            }), isActive: isActive }, field.key));
+                    }
+                    return null;
+                }) }), _jsx(Box, { marginLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.info, " Auth Types:"] }) }), _jsxs(Box, { marginLeft: 4, flexDirection: "column", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: "\u2022 bearer: Uses Bearer token authentication" }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "\u2022 header: Uses custom header (specify header key)" })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: isEditing ? "Update" : "Create" },
+                    { key: "q", label: "Cancel" },
+                ] })] }));
+};

package/dist/components/LogsViewer.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";
@@ -71,42 +72,10 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
                 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 to clipboard!");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                    else {
-                        setCopyStatus("Failed to copy");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                });
-                proc.on("error", () => {
-                    setCopyStatus("Copy 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();
@@ -121,9 +90,7 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
     // Helper to sanitize log message
     const sanitizeMessage = (message) => {
         // Strip ANSI escape sequences (colors, cursor movement, etc.)
-        const strippedAnsi = message.replace(
-        // eslint-disable-next-line no-control-regex
-        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        const strippedAnsi = message.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
         // Replace control characters with spaces
         return (strippedAnsi
             .replace(/\r\n/g, " ")
@@ -131,7 +98,6 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
             .replace(/\r/g, " ")
             .replace(/\t/g, " ")
             // Remove any other control characters (ASCII 0-31 except space)
-            // eslint-disable-next-line no-control-regex
             .replace(/[\x00-\x1F]/g, ""));
     };
     // Helper to calculate how many lines a log entry will take when wrapped

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] }));
 };