@runloop/rl-cli 1.6.0 → 1.7.1

package/dist/components/StreamingLogsViewer.js

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StreamingLogsViewer - Live streaming logs viewer with auto-refresh
+ * Polls for new logs periodically and auto-scrolls when at bottom
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { parseAnyLogEntry } from "../utils/logFormatter.js";
+import { getDevboxLogs } from "../services/devboxService.js";
+// Color maps - defined outside component to avoid recreation on every render
+const levelColorMap = {
+    red: colors.error,
+    yellow: colors.warning,
+    blue: colors.primary,
+    gray: colors.textDim,
+};
+const sourceColorMap = {
+    magenta: "#d33682",
+    cyan: colors.info,
+    green: colors.success,
+    yellow: colors.warning,
+    gray: colors.textDim,
+    white: colors.text,
+};
+export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Logs", active: true }], onBack, }) => {
+    const [logs, setLogs] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
+    const [logsScroll, setLogsScroll] = React.useState(0);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    const [autoScroll, setAutoScroll] = React.useState(true);
+    const [isPolling, setIsPolling] = React.useState(true);
+    // Refs for cleanup
+    const pollIntervalRef = React.useRef(null);
+    // Calculate viewport - overhead increased to reduce overdraw/flashing
+    const logsViewport = useViewportHeight({ overhead: 11, minHeight: 10 });
+    // Handle Ctrl+C
+    useExitOnCtrlC();
+    // Fetch logs function - only update state if logs actually changed
+    const fetchLogs = React.useCallback(async () => {
+        try {
+            const newLogs = await getDevboxLogs(devboxId);
+            // Only update logs state if the logs have actually changed
+            // This prevents unnecessary re-renders that cause flashing in non-tmux terminals
+            setLogs((prevLogs) => {
+                // Quick length check first
+                if (prevLogs.length !== newLogs.length) {
+                    return newLogs;
+                }
+                // If same length, check if last log entry is different (most common case for streaming)
+                if (newLogs.length > 0) {
+                    const prevLast = prevLogs[prevLogs.length - 1];
+                    const newLast = newLogs[newLogs.length - 1];
+                    // Compare by timestamp and message for efficiency
+                    if (prevLast &&
+                        newLast &&
+                        "timestamp" in prevLast &&
+                        "timestamp" in newLast &&
+                        "message" in prevLast &&
+                        "message" in newLast &&
+                        prevLast.timestamp === newLast.timestamp &&
+                        prevLast.message === newLast.message) {
+                        // Logs haven't changed, return previous state to avoid re-render
+                        return prevLogs;
+                    }
+                }
+                return newLogs;
+            });
+            setError(null);
+            if (loading)
+                setLoading(false);
+        }
+        catch (err) {
+            setError(err.message);
+            if (loading)
+                setLoading(false);
+        }
+    }, [devboxId, loading]);
+    // Start polling on mount
+    React.useEffect(() => {
+        // Initial fetch
+        fetchLogs();
+        // Poll every 2 seconds
+        pollIntervalRef.current = setInterval(() => {
+            if (isPolling) {
+                fetchLogs();
+            }
+        }, 2000);
+        return () => {
+            if (pollIntervalRef.current) {
+                clearInterval(pollIntervalRef.current);
+            }
+        };
+    }, [fetchLogs, isPolling]);
+    // Calculate max scroll position
+    const getMaxScroll = () => {
+        if (logsWrapMode) {
+            return Math.max(0, logs.length - 1);
+        }
+        else {
+            return Math.max(0, logs.length - logsViewport.viewportHeight);
+        }
+    };
+    // Auto-scroll effect
+    React.useEffect(() => {
+        if (autoScroll && logs.length > 0) {
+            const maxScroll = getMaxScroll();
+            setLogsScroll(maxScroll);
+        }
+    }, [logs.length, autoScroll, logsViewport.viewportHeight]);
+    // Handle input
+    useInput((input, key) => {
+        const maxScroll = getMaxScroll();
+        if (key.upArrow || input === "k") {
+            setLogsScroll(Math.max(0, logsScroll - 1));
+            setAutoScroll(false);
+        }
+        else if (key.downArrow || input === "j") {
+            const newScroll = Math.min(maxScroll, logsScroll + 1);
+            setLogsScroll(newScroll);
+            // Re-enable auto-scroll if we scroll to bottom
+            if (newScroll >= maxScroll) {
+                setAutoScroll(true);
+            }
+        }
+        else if (key.pageUp) {
+            setLogsScroll(Math.max(0, logsScroll - 10));
+            setAutoScroll(false);
+        }
+        else if (key.pageDown) {
+            const newScroll = Math.min(maxScroll, logsScroll + 10);
+            setLogsScroll(newScroll);
+            if (newScroll >= maxScroll) {
+                setAutoScroll(true);
+            }
+        }
+        else if (input === "g") {
+            setLogsScroll(0);
+            setAutoScroll(false);
+        }
+        else if (input === "G") {
+            setLogsScroll(maxScroll);
+            setAutoScroll(true);
+        }
+        else if (input === "w") {
+            setLogsWrapMode(!logsWrapMode);
+        }
+        else if (input === "p") {
+            // Toggle polling
+            setIsPolling(!isPolling);
+        }
+        else if (input === "c" && !key.ctrl) {
+            // Copy logs to clipboard (ignore if Ctrl+C for quit)
+            const logsText = logs
+                .map((log) => {
+                const parts = parseAnyLogEntry(log);
+                const cmd = parts.cmd ? `$ ${parts.cmd} ` : "";
+                const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                const shell = parts.shellName ? `(${parts.shellName}) ` : "";
+                return `${parts.timestamp} ${parts.level} [${parts.source}] ${shell}${cmd}${parts.message} ${exitCode}`.trim();
+            })
+                .join("\n");
+            const copyToClipboard = async (text) => {
+                const { spawn } = await import("child_process");
+                const platform = process.platform;
+                let command;
+                let args;
+                if (platform === "darwin") {
+                    command = "pbcopy";
+                    args = [];
+                }
+                else if (platform === "win32") {
+                    command = "clip";
+                    args = [];
+                }
+                else {
+                    command = "xclip";
+                    args = ["-selection", "clipboard"];
+                }
+                const proc = spawn(command, args);
+                proc.stdin.write(text);
+                proc.stdin.end();
+                proc.on("exit", (code) => {
+                    if (code === 0) {
+                        setCopyStatus("Copied!");
+                        setTimeout(() => setCopyStatus(null), 2000);
+                    }
+                    else {
+                        setCopyStatus("Failed");
+                        setTimeout(() => setCopyStatus(null), 2000);
+                    }
+                });
+                proc.on("error", () => {
+                    setCopyStatus("Not supported");
+                    setTimeout(() => setCopyStatus(null), 2000);
+                });
+            };
+            copyToClipboard(logsText);
+        }
+        else if (input === "q" || key.escape || key.return) {
+            onBack();
+        }
+    });
+    const viewportHeight = Math.max(1, logsViewport.viewportHeight);
+    const terminalWidth = logsViewport.terminalWidth;
+    const boxChrome = 8;
+    const contentWidth = Math.max(40, terminalWidth - boxChrome);
+    // Helper to sanitize log message
+    const sanitizeMessage = (message) => {
+        const strippedAnsi = message.replace(
+        // eslint-disable-next-line no-control-regex
+        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        return (strippedAnsi
+            .replace(/\r\n/g, " ")
+            .replace(/\n/g, " ")
+            .replace(/\r/g, " ")
+            .replace(/\t/g, " ")
+            // eslint-disable-next-line no-control-regex
+            .replace(/[\x00-\x1F]/g, ""));
+    };
+    // Calculate visible logs
+    let visibleLogs;
+    let actualScroll;
+    if (logsWrapMode) {
+        actualScroll = Math.min(logsScroll, Math.max(0, logs.length - 1));
+        visibleLogs = [];
+        let lineCount = 0;
+        for (let i = actualScroll; i < logs.length; i++) {
+            const parts = parseAnyLogEntry(logs[i]);
+            const sanitized = sanitizeMessage(parts.message);
+            const totalLength = parts.timestamp.length +
+                parts.level.length +
+                parts.source.length +
+                sanitized.length +
+                10;
+            const entryLines = Math.ceil(totalLength / contentWidth);
+            if (lineCount + entryLines > viewportHeight && visibleLogs.length > 0) {
+                break;
+            }
+            visibleLogs.push(logs[i]);
+            lineCount += entryLines;
+        }
+    }
+    else {
+        const maxScroll = Math.max(0, logs.length - viewportHeight);
+        actualScroll = Math.min(logsScroll, maxScroll);
+        visibleLogs = logs.slice(actualScroll, actualScroll + viewportHeight);
+    }
+    const hasMore = actualScroll + visibleLogs.length < logs.length;
+    const hasLess = actualScroll > 0;
+    // Build lines array - always render exactly viewportHeight lines for stable structure
+    // This prevents Ink from doing structural redraws that cause flashing
+    const renderLines = React.useMemo(() => {
+        const lines = [];
+        if (loading) {
+            // First line shows loading message
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsx(Text, { color: colors.textDim, children: "\u25CF Loading logs..." }) }, "loading"));
+        }
+        else if (error) {
+            // First line shows error
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { color: colors.error, children: [figures.cross, " Error: ", error] }) }, "error"));
+        }
+        else if (logs.length === 0) {
+            // First line shows waiting message
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { color: colors.textDim, children: [isPolling ? "● " : "", "Waiting for logs..."] }) }, "waiting"));
+        }
+        else {
+            // Render visible log entries
+            for (let i = 0; i < visibleLogs.length; i++) {
+                const log = visibleLogs[i];
+                const parts = parseAnyLogEntry(log);
+                const sanitizedMessage = sanitizeMessage(parts.message);
+                const MAX_MESSAGE_LENGTH = 1000;
+                const fullMessage = sanitizedMessage.length > MAX_MESSAGE_LENGTH
+                    ? sanitizedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
+                    : sanitizedMessage;
+                const cmd = parts.cmd
+                    ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
+                    : "";
+                const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                const levelColor = levelColorMap[parts.levelColor] || colors.textDim;
+                const sourceColor = sourceColorMap[parts.sourceColor] || colors.textDim;
+                if (logsWrapMode) {
+                    lines.push(_jsx(Box, { width: contentWidth, flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: fullMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, i));
+                }
+                else {
+                    const shellPart = parts.shellName ? `(${parts.shellName}) ` : "";
+                    const exitPart = exitCode ? ` ${exitCode}` : "";
+                    const prefix = `${parts.timestamp} ${parts.level} [${parts.source}] ${shellPart}${cmd}`;
+                    const suffix = exitPart;
+                    const availableForMessage = contentWidth - prefix.length - suffix.length;
+                    let displayMessage;
+                    if (availableForMessage <= 3) {
+                        displayMessage = "";
+                    }
+                    else if (fullMessage.length <= availableForMessage) {
+                        displayMessage = fullMessage;
+                    }
+                    else {
+                        displayMessage =
+                            fullMessage.substring(0, availableForMessage - 3) + "...";
+                    }
+                    lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: displayMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, i));
+                }
+            }
+        }
+        // Pad with empty lines to maintain consistent structure
+        // This prevents Ink from doing structural redraws
+        while (lines.length < viewportHeight) {
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsx(Text, { children: " " }) }, `pad-${lines.length}`));
+        }
+        return lines;
+    }, [
+        loading,
+        error,
+        logs.length,
+        visibleLogs,
+        isPolling,
+        logsWrapMode,
+        contentWidth,
+        viewportHeight,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, height: viewportHeight + 2, children: renderLines }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "logs"] }), logs.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [actualScroll + 1, "-", Math.min(actualScroll + visibleLogs.length, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), isPolling ? (_jsx(Text, { color: colors.success, children: "\u25CF Live" })) : (_jsx(Text, { color: colors.textDim, children: "\u25CB Paused" })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "g/G", label: "Top/Bottom" },
+                    { key: "p", label: isPolling ? "Pause" : "Resume" },
+                    { key: "w", label: "Wrap" },
+                    { key: "c", label: "Copy" },
+                    { key: "q/esc", label: "Back" },
+                ] })] }));
+};

package/dist/router/Router.js

@@ -16,6 +16,7 @@ import { MenuScreen } from "../screens/MenuScreen.js";
 import { DevboxListScreen } from "../screens/DevboxListScreen.js";
 import { DevboxDetailScreen } from "../screens/DevboxDetailScreen.js";
 import { DevboxActionsScreen } from "../screens/DevboxActionsScreen.js";
+import { DevboxExecScreen } from "../screens/DevboxExecScreen.js";
 import { DevboxCreateScreen } from "../screens/DevboxCreateScreen.js";
 import { BlueprintListScreen } from "../screens/BlueprintListScreen.js";
 import { BlueprintDetailScreen } from "../screens/BlueprintDetailScreen.js";
@@ -47,6 +48,7 @@ export function Router() {
                 case "devbox-list":
                 case "devbox-detail":
                 case "devbox-actions":
+                case "devbox-exec":
                 case "devbox-create":
                     // Clear devbox data when leaving devbox screens
                     // Keep cache if we're still in devbox context
@@ -88,5 +90,5 @@ export function Router() {
     // and mount new component, preventing race conditions during screen transitions.
     // The key ensures React treats this as a completely new component tree.
     // Wrap in ErrorBoundary to catch any Yoga WASM errors gracefully.
-    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintDetailScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-list" && (_jsx(NetworkPolicyListScreen, { ...params }, currentScreen)), currentScreen === "network-policy-detail" && (_jsx(NetworkPolicyDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-create" && (_jsx(NetworkPolicyCreateScreen, { ...params }, currentScreen)), currentScreen === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
+    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-exec" && (_jsx(DevboxExecScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintDetailScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-list" && (_jsx(NetworkPolicyListScreen, { ...params }, currentScreen)), currentScreen === "network-policy-detail" && (_jsx(NetworkPolicyDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-create" && (_jsx(NetworkPolicyCreateScreen, { ...params }, currentScreen)), currentScreen === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
 }

package/dist/screens/DevboxExecScreen.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DevboxExecScreen - Dedicated screen for command execution
+ * Route-based state ensures stability across terminal resizes
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useDevboxStore } from "../store/devboxStore.js";
+import { ExecViewer } from "../components/ExecViewer.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+export function DevboxExecScreen({ devboxId, execCommand, executionId, devboxName, returnScreen, returnParams, }) {
+    const { goBack, replace, params } = useNavigation();
+    const devboxes = useDevboxStore((state) => state.devboxes);
+    // Find devbox in store for display name
+    const devbox = devboxes.find((d) => d.id === devboxId);
+    const displayName = devboxName || devbox?.name || devboxId || "devbox";
+    // Validate required params
+    if (!devboxId || !execCommand) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Exec", active: true }] }), _jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsxs(Text, { color: colors.error, children: [figures.cross, " Missing execution parameters. Returning..."] }) })] }));
+    }
+    // Build breadcrumbs
+    const breadcrumbItems = [
+        { label: "Devboxes" },
+        { label: displayName },
+        { label: "Execute", active: true },
+    ];
+    // Handle execution ID update - store in route params for persistence
+    const handleExecutionStart = React.useCallback((newExecutionId) => {
+        // Update route params to persist execution ID across re-renders
+        replace("devbox-exec", {
+            ...params,
+            executionId: newExecutionId,
+        });
+    }, [replace, params]);
+    // Handle back navigation
+    const handleBack = React.useCallback(() => {
+        goBack();
+    }, [goBack]);
+    // Handle run another command - navigate to actions menu with exec pre-selected
+    const handleRunAnother = React.useCallback(() => {
+        // Replace current screen with actions menu, exec operation pre-selected
+        replace("devbox-actions", {
+            devboxId: devboxId,
+            operation: "exec",
+        });
+    }, [replace, devboxId]);
+    return (_jsx(ExecViewer, { devboxId: devboxId, command: execCommand, breadcrumbItems: breadcrumbItems, onBack: handleBack, onRunAnother: handleRunAnother, existingExecutionId: executionId, onExecutionStart: handleExecutionStart }));
+}

package/dist/screens/SnapshotDetailScreen.js

@@ -96,6 +96,20 @@ export function SnapshotDetailScreen({ snapshotId, }) {
             fields: basicFields,
         });
     }
+    // Commit message section (if present)
+    if (snapshot.commit_message) {
+        detailSections.push({
+            title: "Commit Message",
+            icon: figures.info,
+            color: colors.info,
+            fields: [
+                {
+                    label: "",
+                    value: snapshot.commit_message,
+                },
+            ],
+        });
+    }
     // Metadata section
     if (snapshot.metadata && Object.keys(snapshot.metadata).length > 0) {
         const metadataFields = Object.entries(snapshot.metadata).map(([key, value]) => ({
@@ -172,6 +186,12 @@ export function SnapshotDetailScreen({ snapshotId, }) {
             lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Disk Size: ", sizeGB, " GB"] }, "core-size"));
         }
         lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Commit Message
+        if (snap.commit_message) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Commit Message" }, "commit-title"));
+            lines.push(_jsxs(Text, { color: colors.info, children: [" ", snap.commit_message] }, "commit-msg"));
+            lines.push(_jsx(Text, { children: " " }, "commit-space"));
+        }
         // Metadata
         if (snap.metadata && Object.keys(snap.metadata).length > 0) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));

package/dist/services/devboxService.js

@@ -146,12 +146,19 @@ export async function uploadFile(id, filepath, remotePath) {
         path: remotePath,
     });
 }
-/**
- * Create snapshot of devbox
- */
-export async function createSnapshot(id, name) {
+export async function createSnapshot(id, options) {
     const client = getClient();
-    const snapshot = await client.devboxes.snapshotDisk(id, { name });
+    const params = {};
+    if (options?.name) {
+        params.name = options.name;
+    }
+    if (options?.metadata && Object.keys(options.metadata).length > 0) {
+        params.metadata = options.metadata;
+    }
+    if (options?.commit_message) {
+        params.commit_message = options.commit_message;
+    }
+    const snapshot = await client.devboxes.snapshotDisk(id, params);
     return {
         id: String(snapshot.id || "").substring(0, 100),
         name: snapshot.name ? String(snapshot.name).substring(0, 200) : undefined,
@@ -213,3 +220,33 @@ export async function getDevboxLogs(id) {
     // Return the logs array directly - formatting is handled by logFormatter
     return response.logs || [];
 }
+/**
+ * Execute command asynchronously in devbox
+ * Used for both sync and async modes to enable kill/leave-early functionality
+ */
+export async function execCommandAsync(id, command) {
+    const client = getClient();
+    const result = await client.devboxes.executions.executeAsync(id, { command });
+    // Extract execution ID from result
+    const executionId = result.execution_id || result.id || String(result);
+    return {
+        executionId: String(executionId).substring(0, 100),
+        status: result.status || "running",
+    };
+}
+/**
+ * Get execution status and output
+ * Used for polling in sync mode and checking status
+ */
+export async function getExecution(devboxId, executionId) {
+    const client = getClient();
+    return client.devboxes.executions.retrieve(devboxId, executionId);
+}
+/**
+ * Kill a running execution
+ * Available in both sync and async modes
+ */
+export async function killExecution(devboxId, executionId) {
+    const client = getClient();
+    await client.devboxes.executions.kill(devboxId, executionId);
+}

package/dist/services/snapshotService.js

@@ -26,6 +26,7 @@ export async function listSnapshots(options) {
             const MAX_ID_LENGTH = 100;
             const MAX_NAME_LENGTH = 200;
             const MAX_STATUS_LENGTH = 50;
+            const MAX_COMMIT_MSG_LENGTH = 1000;
             // Status is constructed/available in API response but not in type definition
             const snapshotView = s;
             snapshots.push({
@@ -33,6 +34,9 @@ export async function listSnapshots(options) {
                 name: snapshotView.name
                     ? String(snapshotView.name).substring(0, MAX_NAME_LENGTH)
                     : undefined,
+                commit_message: snapshotView.commit_message
+                    ? String(snapshotView.commit_message).substring(0, MAX_COMMIT_MSG_LENGTH)
+                    : undefined,
                 create_time_ms: snapshotView.create_time_ms,
                 metadata: snapshotView.metadata || {},
                 source_devbox_id: String(snapshotView.source_devbox_id || "").substring(0, MAX_ID_LENGTH),
@@ -81,6 +85,7 @@ export async function getSnapshot(id) {
     return {
         id: snapshot.id,
         name: snapshot.name || undefined,
+        commit_message: snapshot.commit_message || undefined,
         create_time_ms: snapshot.create_time_ms,
         metadata: snapshot.metadata || {},
         source_devbox_id: snapshot.source_devbox_id || "",
@@ -92,11 +97,19 @@ export async function getSnapshot(id) {
 /**
  * Create a snapshot
  */
-export async function createSnapshot(devboxId, name) {
+export async function createSnapshot(devboxId, options) {
     const client = getClient();
-    const snapshot = await client.devboxes.snapshotDisk(devboxId, {
-        name,
-    });
+    const params = {};
+    if (options?.name) {
+        params.name = options.name;
+    }
+    if (options?.commit_message) {
+        params.commit_message = options.commit_message;
+    }
+    if (options?.metadata && Object.keys(options.metadata).length > 0) {
+        params.metadata = options.metadata;
+    }
+    const snapshot = await client.devboxes.snapshotDisk(devboxId, params);
     return {
         id: snapshot.id,
         name: snapshot.name || undefined,

package/dist/utils/commands.js

@@ -32,6 +32,7 @@ export function createProgram() {
         .option("--entrypoint <command>", "Entrypoint command to run")
         .option("--launch-commands <commands...>", "Initialization commands to run on startup")
         .option("--env-vars <vars...>", "Environment variables (format: KEY=value)")
+        .option("--secrets <secrets...>", "Secrets to inject as environment variables (format: ENV_VAR=SECRET_NAME)")
         .option("--code-mounts <mounts...>", "Code mount configurations (JSON format)")
         .option("--idle-time <seconds>", "Idle time in seconds before idle action")
         .option("--idle-action <action>", "Action on idle (shutdown, suspend)")
@@ -136,6 +137,7 @@ export function createProgram() {
     devbox
         .command("tunnel <id> <ports>")
         .description("Create a port-forwarding tunnel to a devbox")
+        .option("--open", "Open the tunnel URL in browser automatically")
         .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
         .action(async (id, ports, options) => {
         const { createTunnel } = await import("../commands/devbox/tunnel.js");

package/package.json

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