@runloop/rl-cli 0.4.0 → 0.9.0

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/StateHistory.js

@@ -0,0 +1,80 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.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`;
+};
+// Format duration in a succinct way
+const formatDuration = (milliseconds) => {
+    const seconds = Math.floor(milliseconds / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ${minutes % 60}m`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ${hours % 24}h`;
+};
+// Capitalize first letter of a string
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+export const StateHistory = ({ stateTransitions }) => {
+    if (!stateTransitions ||
+        !Array.isArray(stateTransitions) ||
+        stateTransitions.length === 0) {
+        return null;
+    }
+    // Get last 3 transitions (most recent first)
+    const lastThree = stateTransitions
+        .slice(-3)
+        .reverse()
+        .map((transition, idx, arr) => {
+        const transitionTime = transition.transition_time_ms;
+        // Calculate duration: time until next transition, or until now if it's the current state
+        let duration = 0;
+        if (transitionTime) {
+            if (idx === 0) {
+                // Most recent state - duration is from transition time to now
+                duration = Date.now() - transitionTime;
+            }
+            else {
+                // Previous state - duration is from this transition to the next one
+                const nextTransition = arr[idx - 1];
+                const nextTransitionTime = nextTransition.transition_time_ms;
+                if (nextTransitionTime) {
+                    duration = nextTransitionTime - transitionTime;
+                }
+            }
+        }
+        return {
+            status: transition.status,
+            transitionTime,
+            duration,
+        };
+    })
+        .filter((state) => state.transitionTime); // Only show states with valid timestamps
+    if (lastThree.length === 0) {
+        return null;
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.info, bold: true, children: [figures.circleFilled, " State History"] }), _jsx(Box, { flexDirection: "column", children: lastThree.map((state, idx) => (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: [capitalize(state.status), state.transitionTime && (_jsxs(_Fragment, { children: [" ", "at ", new Date(state.transitionTime).toLocaleString(), " ", _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", formatTimeAgo(state.transitionTime), ")"] }), state.duration > 0 && (_jsxs(_Fragment, { children: [" ", "\u2022 Duration:", " ", _jsx(Text, { color: colors.info, children: formatDuration(state.duration) })] }))] }))] }) }, idx))) })] }));
+};

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/screens/DevboxCreateScreen.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useNavigation } from "../store/navigationStore.js";
 import { DevboxCreatePage } from "../components/DevboxCreatePage.js";
 export function DevboxCreateScreen() {
-    const { goBack } = useNavigation();
-    const handleCreate = () => {
-        // After creation, go back to list (which will refresh)
-        goBack();
+    const { goBack, navigate } = useNavigation();
+    const handleCreate = (devbox) => {
+        // After creation, navigate to the devbox detail page
+        navigate("devbox-detail", { devboxId: devbox.id });
     };
     return _jsx(DevboxCreatePage, { onBack: goBack, onCreate: handleCreate });
 }

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}`,
         },
     });
 }