@runloop/rl-cli 0.4.0 → 0.5.0

package/dist/commands/blueprint/list.js

@@ -444,9 +444,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
         return (_jsx(DevboxCreatePage, { onBack: () => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
-            }, onCreate: () => {
+            }, onCreate: (devbox) => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
+                navigate("devbox-detail", { devboxId: devbox.id });
             }, initialBlueprintId: selectedBlueprint.id }));
     }
     // Loading state

package/dist/commands/snapshot/list.js

@@ -16,9 +16,12 @@ 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 { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
+import { useNavigation } from "../../store/navigationStore.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListSnapshotsUI = ({ devboxId, 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);
@@ -28,6 +31,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
     const [operationLoading, setOperationLoading] = React.useState(false);
+    const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
     // Calculate overhead for viewport height
     const overhead = 13;
     const { viewportHeight, terminalWidth } = useViewportHeight({
@@ -82,11 +86,17 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         pageSize: PAGE_SIZE,
         getItemId: (snapshot) => snapshot.id,
         pollInterval: 2000,
-        pollingEnabled: !showPopup && !executingOperation,
+        pollingEnabled: !showPopup && !executingOperation && !showCreateDevbox,
         deps: [devboxId, PAGE_SIZE],
     });
     // Operations for snapshots
     const operations = React.useMemo(() => [
+        {
+            key: "create_devbox",
+            label: "Create Devbox from Snapshot",
+            color: colors.success,
+            icon: figures.play,
+        },
         {
             key: "delete",
             label: "Delete Snapshot",
@@ -164,6 +174,10 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             }
             return;
         }
+        // Handle create devbox view
+        if (showCreateDevbox) {
+            return;
+        }
         // Handle popup navigation
         if (showPopup) {
             if (key.upArrow && selectedOperation > 0) {
@@ -175,15 +189,27 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             else if (key.return) {
                 setShowPopup(false);
                 const operationKey = operations[selectedOperation].key;
-                setSelectedSnapshot(selectedSnapshotItem);
-                setExecutingOperation(operationKey);
-                // Execute immediately after state update
-                setTimeout(() => executeOperation(), 0);
+                if (operationKey === "create_devbox") {
+                    setSelectedSnapshot(selectedSnapshotItem);
+                    setShowCreateDevbox(true);
+                }
+                else {
+                    setSelectedSnapshot(selectedSnapshotItem);
+                    setExecutingOperation(operationKey);
+                    // Execute immediately after state update
+                    setTimeout(() => executeOperation(), 0);
+                }
             }
             else if (key.escape || input === "q") {
                 setShowPopup(false);
                 setSelectedOperation(0);
             }
+            else if (input === "c") {
+                // Create devbox hotkey
+                setShowPopup(false);
+                setSelectedSnapshot(selectedSnapshotItem);
+                setShowCreateDevbox(true);
+            }
             else if (input === "d") {
                 // Delete hotkey
                 setShowPopup(false);
@@ -256,6 +282,17 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                         { label: operationLabel, active: true },
                     ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
     }
+    // Create devbox screen
+    if (showCreateDevbox && selectedSnapshot) {
+        return (_jsx(DevboxCreatePage, { onBack: () => {
+                setShowCreateDevbox(false);
+                setSelectedSnapshot(null);
+            }, onCreate: (devbox) => {
+                setShowCreateDevbox(false);
+                setSelectedSnapshot(null);
+                navigate("devbox-detail", { devboxId: devbox.id });
+            }, initialSnapshotId: selectedSnapshot.id }));
+    }
     // Loading state
     if (loading && snapshots.length === 0) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
@@ -292,7 +329,11 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                         label: op.label,
                         color: op.color,
                         icon: op.icon,
-                        shortcut: op.key === "delete" ? "d" : "",
+                        shortcut: op.key === "create_devbox"
+                            ? "c"
+                            : op.key === "delete"
+                                ? "d"
+                                : "",
                     })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 };
 // Export the UI component for use in the main menu

package/dist/components/Breadcrumb.js

@@ -6,12 +6,12 @@ import { UpdateNotification } from "./UpdateNotification.js";
 export const Breadcrumb = ({ items, showVersionCheck = false, }) => {
     const env = process.env.RUNLOOP_ENV?.toLowerCase();
     const isDevEnvironment = env === "dev";
-    return (_jsxs(Box, { marginBottom: 1, paddingX: 0, paddingY: 0, children: [_jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
-                        // Limit label length to prevent Yoga layout engine errors
-                        const MAX_LABEL_LENGTH = 80;
-                        const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
-                            ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
-                            : item.label;
-                        return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
-                    })] }), showVersionCheck && (_jsx(Box, { paddingX: 2, marginTop: 0, children: _jsx(UpdateNotification, {}) }))] }));
+    return (_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, paddingX: 0, paddingY: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
+                            // Limit label length to prevent Yoga layout engine errors
+                            const MAX_LABEL_LENGTH = 80;
+                            const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
+                                ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
+                                : item.label;
+                            return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
+                        })] }) }), showVersionCheck && _jsx(UpdateNotification, {})] }));
 };

package/dist/components/DevboxCreatePage.js

@@ -11,7 +11,7 @@ import { Breadcrumb } from "./Breadcrumb.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
+export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initialSnapshotId, }) => {
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
         name: "",
@@ -23,7 +23,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
         keep_alive: "3600",
         metadata: {},
         blueprint_id: initialBlueprintId || "",
-        snapshot_id: "",
+        snapshot_id: initialSnapshotId || "",
     });
     const [metadataKey, setMetadataKey] = React.useState("");
     const [metadataValue, setMetadataValue] = React.useState("");

package/dist/components/MainMenu.js

@@ -6,8 +6,10 @@ import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
+import { execCommand } from "../utils/exec.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 const menuItems = [
     {
         key: "devboxes",
@@ -36,6 +38,8 @@ export const MainMenu = ({ onSelect }) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     // Use centralized viewport hook for consistent layout
     const { terminalHeight } = useViewportHeight({ overhead: 0 });
+    // Check for updates
+    const { updateAvailable } = useUpdateCheck();
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
     useInput((input, key) => {
@@ -60,6 +64,13 @@ export const MainMenu = ({ onSelect }) => {
         else if (input === "s" || input === "3") {
             onSelect("snapshots");
         }
+        else if (input === "u" && updateAvailable) {
+            // Release terminal and exec into update command (never returns)
+            execCommand("sh", [
+                "-c",
+                "npm install -g @runloop/rl-cli@latest && exec rli",
+            ]);
+        }
     });
     // Use compact layout if terminal height is less than 20 lines (memoized)
     const useCompactLayout = terminalHeight < 20;
@@ -67,10 +78,10 @@ export const MainMenu = ({ onSelect }) => {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Cloud development environments \u2022 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 }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
-                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
+                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) })] }));
     }
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), 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));
-                    })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));
+                    })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) }) })] }));
 };

package/dist/components/UpdateNotification.js

@@ -1,56 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Box, Text } from "ink";
 import { colors } from "../utils/theme.js";
-import { VERSION } from "../version.js";
+import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 /**
  * Version check component that checks npm for updates and displays a notification
  * Restored from git history and enhanced with better visual styling
  */
 export const UpdateNotification = () => {
-    const [updateAvailable, setUpdateAvailable] = React.useState(null);
-    const [isChecking, setIsChecking] = React.useState(true);
-    React.useEffect(() => {
-        const checkForUpdates = async () => {
-            try {
-                const currentVersion = VERSION;
-                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
-                if (response.ok) {
-                    const data = (await response.json());
-                    const latestVersion = data.version;
-                    if (latestVersion && latestVersion !== currentVersion) {
-                        // Check if current version is older than latest
-                        const compareVersions = (version1, version2) => {
-                            const v1parts = version1.split(".").map(Number);
-                            const v2parts = version2.split(".").map(Number);
-                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
-                                const v1part = v1parts[i] || 0;
-                                const v2part = v2parts[i] || 0;
-                                if (v1part > v2part)
-                                    return 1;
-                                if (v1part < v2part)
-                                    return -1;
-                            }
-                            return 0;
-                        };
-                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
-                        if (isUpdateAvailable) {
-                            setUpdateAvailable(latestVersion);
-                        }
-                    }
-                }
-            }
-            catch {
-                // Silently fail
-            }
-            finally {
-                setIsChecking(false);
-            }
-        };
-        checkForUpdates();
-    }, []);
+    const { isChecking, updateAvailable, currentVersion } = useUpdateCheck();
     if (isChecking || !updateAvailable) {
         return null;
     }
-    return (_jsxs(Box, { borderStyle: "round", borderColor: colors.warning, paddingX: 1, paddingY: 0, marginTop: 0, children: [_jsx(Text, { color: colors.warning, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.warning, bold: true, children: VERSION }), _jsxs(Text, { color: colors.primary, bold: true, children: [" ", "\u2192", " "] }), _jsx(Text, { color: colors.success, bold: true, children: updateAvailable }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
+    return (_jsx(Box, { children: _jsxs(Box, { borderStyle: "arrow", borderColor: colors.warning, paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: colors.warning, children: "\u2728" }), _jsx(Text, { color: colors.text, children: " Update available: " }), _jsx(Text, { color: colors.warning, children: currentVersion }), _jsx(Text, { color: colors.primary, children: " \u2192 " }), _jsx(Text, { color: colors.success, children: updateAvailable }), _jsx(Text, { color: colors.textDim, children: " \u2022 Press " }), _jsx(Text, { color: colors.primary, bold: true, children: "[u]" }), _jsx(Text, { color: colors.textDim, children: " to run: " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "npm i -g @runloop/rl-cli@latest" })] }) }));
 };

package/dist/hooks/useUpdateCheck.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { VERSION } from "../version.js";
+/**
+ * Hook to check for CLI updates from npm registry
+ * Returns the latest version if an update is available
+ */
+export function useUpdateCheck() {
+    const [updateAvailable, setUpdateAvailable] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
+    React.useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const currentVersion = VERSION;
+                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
+                if (response.ok) {
+                    const data = (await response.json());
+                    const latestVersion = data.version;
+                    if (latestVersion && latestVersion !== currentVersion) {
+                        // Check if current version is older than latest
+                        const compareVersions = (version1, version2) => {
+                            const v1parts = version1.split(".").map(Number);
+                            const v2parts = version2.split(".").map(Number);
+                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
+                                const v1part = v1parts[i] || 0;
+                                const v2part = v2parts[i] || 0;
+                                if (v1part > v2part)
+                                    return 1;
+                                if (v1part < v2part)
+                                    return -1;
+                            }
+                            return 0;
+                        };
+                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
+                        if (isUpdateAvailable) {
+                            setUpdateAvailable(latestVersion);
+                        }
+                    }
+                }
+            }
+            catch {
+                // Silently fail
+            }
+            finally {
+                setIsChecking(false);
+            }
+        };
+        checkForUpdates();
+    }, []);
+    return {
+        isChecking,
+        updateAvailable,
+        currentVersion: VERSION,
+    };
+}

package/dist/mcp/server.js

@@ -54,7 +54,7 @@ function getClient() {
         timeout: 10000, // 10 seconds instead of default 30 seconds
         maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
         defaultHeaders: {
-            "User-Agent": `Runloop/JS ${VERSION} - CLI MCP`,
+            "User-Agent": `Runloop/JS - CLI MCP ${VERSION}`,
         },
     });
 }

package/dist/utils/client.js

@@ -26,7 +26,7 @@ export function getClient() {
         bearerToken: config.apiKey,
         baseURL,
         defaultHeaders: {
-            "User-Agent": `Runloop/JS ${VERSION} - CLI`,
+            "User-Agent": `Runloop/JS - CLI ${VERSION}`,
         },
     });
 }

package/dist/utils/exec.js

@@ -0,0 +1,22 @@
+import { spawnSync } from "child_process";
+import { showCursor } from "./screen.js";
+import { processUtils } from "./processUtils.js";
+/**
+ * Release terminal from Ink and exec into a new command (one-way, no return)
+ * This function never returns - it runs the command synchronously and exits.
+ */
+export function execCommand(command, args) {
+    // Release terminal from Ink's control
+    process.stdin.pause();
+    if (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.stdin.setRawMode(false);
+    }
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("\x1b[0m"); // SGR reset
+    }
+    showCursor();
+    // Run the command synchronously - this blocks until complete
+    const result = spawnSync(command, args, { stdio: "inherit" });
+    // Exit with the command's exit code
+    process.exit(result.status ?? 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Beautiful CLI for the Runloop platform",
   "type": "module",
   "bin": {