@runloop/rl-cli 0.4.0 → 0.9.0

package/dist/cli.js

@@ -1,13 +1,8 @@
 #!/usr/bin/env node
-import { Command } from "commander";
-import { createDevbox } from "./commands/devbox/create.js";
-import { listDevboxes } from "./commands/devbox/list.js";
-import { deleteDevbox } from "./commands/devbox/delete.js";
-import { execCommand } from "./commands/devbox/exec.js";
-import { uploadFile } from "./commands/devbox/upload.js";
-import { VERSION } from "./version.js";
 import { exitAlternateScreenBuffer } from "./utils/screen.js";
 import { processUtils } from "./utils/processUtils.js";
+import { createProgram } from "./utils/commands.js";
+import { getApiKeyErrorMessage } from "./utils/config.js";
 // Global Ctrl+C handler to ensure it always exits
 processUtils.on("SIGINT", () => {
     // Force exit immediately, clearing alternate screen buffer
@@ -15,400 +10,7 @@ processUtils.on("SIGINT", () => {
     processUtils.stdout.write("\n");
     processUtils.exit(130); // Standard exit code for SIGINT
 });
-const program = new Command();
-program
-    .name("rli")
-    .description("Beautiful CLI for Runloop devbox management")
-    .version(VERSION);
-// Devbox commands
-const devbox = program
-    .command("devbox")
-    .description("Manage devboxes")
-    .alias("d");
-devbox
-    .command("create")
-    .description("Create a new devbox")
-    .option("-n, --name <name>", "Devbox name")
-    .option("-t, --template <template>", "Snapshot ID to use (alias: --snapshot)")
-    .option("-s, --snapshot <snapshot>", "Snapshot ID to use")
-    .option("--blueprint <blueprint>", "Blueprint name or ID to use")
-    .option("--resources <size>", "Resource size (X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE)")
-    .option("--architecture <arch>", "Architecture (arm64, x86_64)")
-    .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("--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)")
-    .option("--available-ports <ports...>", "Available ports")
-    .option("--root", "Run as root")
-    .option("--user <user:uid>", "Run as this user (format: username:uid)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(createDevbox);
-devbox
-    .command("list")
-    .description("List all devboxes")
-    .option("-s, --status <status>", "Filter by status (initializing, running, suspending, suspended, resuming, failure, shutdown)")
-    .option("-l, --limit <n>", "Max results", "20")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (options) => {
-    await listDevboxes(options);
-});
-devbox
-    .command("delete <id>")
-    .description("Shutdown a devbox")
-    .alias("rm")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(deleteDevbox);
-devbox
-    .command("exec <id> <command...>")
-    .description("Execute a command in a devbox")
-    .option("--shell-name <name>", "Shell name to use (optional)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, command, options) => {
-    await execCommand(id, command, options);
-});
-devbox
-    .command("upload <id> <file>")
-    .description("Upload a file to a devbox")
-    .option("-p, --path <path>", "Target path in devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(uploadFile);
-// Additional devbox commands
-devbox
-    .command("get <id>")
-    .description("Get devbox details")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (id, options) => {
-    const { getDevbox } = await import("./commands/devbox/get.js");
-    await getDevbox(id, options);
-});
-devbox
-    .command("suspend <id>")
-    .description("Suspend a devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { suspendDevbox } = await import("./commands/devbox/suspend.js");
-    await suspendDevbox(id, options);
-});
-devbox
-    .command("resume <id>")
-    .description("Resume a suspended devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { resumeDevbox } = await import("./commands/devbox/resume.js");
-    await resumeDevbox(id, options);
-});
-devbox
-    .command("shutdown <id>")
-    .description("Shutdown a devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { shutdownDevbox } = await import("./commands/devbox/shutdown.js");
-    await shutdownDevbox(id, options);
-});
-devbox
-    .command("ssh <id>")
-    .description("SSH into a devbox")
-    .option("--config-only", "Print SSH config only")
-    .option("--no-wait", "Do not wait for devbox to be ready")
-    .option("--timeout <seconds>", "Timeout in seconds to wait for readiness", "180")
-    .option("--poll-interval <seconds>", "Polling interval in seconds while waiting", "3")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { sshDevbox } = await import("./commands/devbox/ssh.js");
-    await sshDevbox(id, options);
-});
-devbox
-    .command("scp <id> <src> <dst>")
-    .description("Copy files to/from a devbox using scp")
-    .option("--scp-options <options>", "Additional scp options (quoted)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, src, dst, options) => {
-    const { scpFiles } = await import("./commands/devbox/scp.js");
-    await scpFiles(id, { src, dst, ...options });
-});
-devbox
-    .command("rsync <id> <src> <dst>")
-    .description("Sync files to/from a devbox using rsync")
-    .option("--rsync-options <options>", "Additional rsync options (quoted)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, src, dst, options) => {
-    const { rsyncFiles } = await import("./commands/devbox/rsync.js");
-    await rsyncFiles(id, { src, dst, ...options });
-});
-devbox
-    .command("tunnel <id> <ports>")
-    .description("Create a port-forwarding tunnel to a devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, ports, options) => {
-    const { createTunnel } = await import("./commands/devbox/tunnel.js");
-    await createTunnel(id, { ports, ...options });
-});
-devbox
-    .command("read <id>")
-    .description("Read a file from a devbox using the API")
-    .option("--remote <path>", "Remote file path to read from the devbox")
-    .option("--output-path <path>", "Local file path to write the contents to")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { readFile } = await import("./commands/devbox/read.js");
-    await readFile(id, options);
-});
-devbox
-    .command("write <id>")
-    .description("Write a file to a devbox using the API")
-    .option("--input <path>", "Local file path to read contents from")
-    .option("--remote <path>", "Remote file path to write to on the devbox")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { writeFile } = await import("./commands/devbox/write.js");
-    await writeFile(id, options);
-});
-devbox
-    .command("download <id>")
-    .description("Download a file from a devbox")
-    .option("--file-path <path>", "Path to the file in the devbox")
-    .option("--output-path <path>", "Local path where to save the downloaded file")
-    .option("-o, --output-format [format]", "Output format: text|json|yaml (default: interactive)")
-    .action(async (id, options) => {
-    const { downloadFile } = await import("./commands/devbox/download.js");
-    await downloadFile(id, options);
-});
-devbox
-    .command("exec-async <id> <command...>")
-    .description("Execute a command asynchronously on a devbox")
-    .option("--shell-name <name>", "Shell name to use (optional)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, command, options) => {
-    const { execAsync } = await import("./commands/devbox/execAsync.js");
-    await execAsync(id, { command: command.join(" "), ...options });
-});
-devbox
-    .command("get-async <id> <execution-id>")
-    .description("Get status of an async execution")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, executionId, options) => {
-    const { getAsync } = await import("./commands/devbox/getAsync.js");
-    await getAsync(id, { executionId, ...options });
-});
-devbox
-    .command("send-stdin <id> <execution-id>")
-    .description("Send stdin to a running async execution")
-    .option("--text <text>", "Text content to send to stdin")
-    .option("--signal <signal>", "Signal to send (EOF, INTERRUPT)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, executionId, options) => {
-    const { sendStdin } = await import("./commands/devbox/sendStdin.js");
-    await sendStdin(id, executionId, options);
-});
-devbox
-    .command("logs <id>")
-    .description("View devbox logs")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { getLogs } = await import("./commands/devbox/logs.js");
-    await getLogs(id, options);
-});
-// Snapshot commands
-const snapshot = program
-    .command("snapshot")
-    .description("Manage devbox snapshots")
-    .alias("snap");
-snapshot
-    .command("list")
-    .description("List all snapshots")
-    .option("-d, --devbox <id>", "Filter by devbox ID")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (options) => {
-    const { listSnapshots } = await import("./commands/snapshot/list.js");
-    await listSnapshots(options);
-});
-snapshot
-    .command("create <devbox-id>")
-    .description("Create a snapshot of a devbox")
-    .option("-n, --name <name>", "Snapshot name")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (devboxId, options) => {
-    const { createSnapshot } = await import("./commands/snapshot/create.js");
-    createSnapshot(devboxId, options);
-});
-snapshot
-    .command("delete <id>")
-    .description("Delete a snapshot")
-    .alias("rm")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { deleteSnapshot } = await import("./commands/snapshot/delete.js");
-    deleteSnapshot(id, options);
-});
-snapshot
-    .command("get <id>")
-    .description("Get snapshot details")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (id, options) => {
-    const { getSnapshot } = await import("./commands/snapshot/get.js");
-    await getSnapshot({ id, ...options });
-});
-snapshot
-    .command("status <snapshot-id>")
-    .description("Get snapshot operation status")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (snapshotId, options) => {
-    const { getSnapshotStatus } = await import("./commands/snapshot/status.js");
-    await getSnapshotStatus({ snapshotId, ...options });
-});
-// Blueprint commands
-const blueprint = program
-    .command("blueprint")
-    .description("Manage blueprints")
-    .alias("bp");
-blueprint
-    .command("list")
-    .description("List all blueprints")
-    .option("-n, --name <name>", "Filter by blueprint name")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (options) => {
-    const { listBlueprints } = await import("./commands/blueprint/list.js");
-    await listBlueprints(options);
-});
-blueprint
-    .command("create")
-    .description("Create a new blueprint")
-    .requiredOption("--name <name>", "Blueprint name (required)")
-    .option("--dockerfile <content>", "Dockerfile contents")
-    .option("--dockerfile-path <path>", "Dockerfile path")
-    .option("--system-setup-commands <commands...>", "System setup commands")
-    .option("--resources <size>", "Resource size (X_SMALL, SMALL, MEDIUM, LARGE, X_LARGE, XX_LARGE)")
-    .option("--architecture <arch>", "Architecture (arm64, x86_64)")
-    .option("--available-ports <ports...>", "Available ports")
-    .option("--root", "Run as root")
-    .option("--user <user:uid>", "Run as this user (format: username:uid)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (options) => {
-    const { createBlueprint } = await import("./commands/blueprint/create.js");
-    await createBlueprint(options);
-});
-blueprint
-    .command("get <name-or-id>")
-    .description("Get blueprint details by name or ID (IDs start with bpt_)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (id, options) => {
-    const { getBlueprint } = await import("./commands/blueprint/get.js");
-    await getBlueprint({ id, ...options });
-});
-blueprint
-    .command("logs <name-or-id>")
-    .description("Get blueprint build logs by name or ID (IDs start with bpt_)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { getBlueprintLogs } = await import("./commands/blueprint/logs.js");
-    await getBlueprintLogs({ id, ...options });
-});
-// Object storage commands
-const object = program
-    .command("object")
-    .description("Manage object storage")
-    .alias("obj");
-object
-    .command("list")
-    .description("List objects")
-    .option("--limit <n>", "Max results", "20")
-    .option("--starting-after <id>", "Starting point for pagination")
-    .option("--name <name>", "Filter by name (partial match supported)")
-    .option("--content-type <type>", "Filter by content type")
-    .option("--state <state>", "Filter by state (UPLOADING, READ_ONLY, DELETED)")
-    .option("--search <query>", "Search by object ID or name")
-    .option("--public", "List public objects only")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
-    .action(async (options) => {
-    const { listObjects } = await import("./commands/object/list.js");
-    await listObjects(options);
-});
-object
-    .command("get <id>")
-    .description("Get object details")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { getObject } = await import("./commands/object/get.js");
-    await getObject({ id, ...options });
-});
-object
-    .command("download <id> <path>")
-    .description("Download object to local file")
-    .option("--extract", "Extract downloaded archive after download")
-    .option("--duration-seconds <seconds>", "Duration in seconds for the presigned URL validity", "3600")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, path, options) => {
-    const { downloadObject } = await import("./commands/object/download.js");
-    await downloadObject({ id, path, ...options });
-});
-object
-    .command("upload <path>")
-    .description("Upload a file as an object")
-    .option("--name <name>", "Object name (required)")
-    .option("--content-type <type>", "Content type: unspecified|text|binary|gzip|tar|tgz")
-    .option("--public", "Make object publicly accessible")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (path, options) => {
-    const { uploadObject } = await import("./commands/object/upload.js");
-    if (!options.output) {
-        const { runInteractiveCommand } = await import("./utils/interactiveCommand.js");
-        await runInteractiveCommand(() => uploadObject({ path, ...options }));
-    }
-    else {
-        await uploadObject({ path, ...options });
-    }
-});
-object
-    .command("delete <id>")
-    .description("Delete an object (irreversible)")
-    .option("-o, --output [format]", "Output format: text|json|yaml (default: text)")
-    .action(async (id, options) => {
-    const { deleteObject } = await import("./commands/object/delete.js");
-    await deleteObject({ id, ...options });
-});
-// MCP server commands
-const mcp = program
-    .command("mcp")
-    .description("Model Context Protocol (MCP) server commands");
-mcp
-    .command("start")
-    .description("Start the MCP server")
-    .option("--http", "Use HTTP/SSE transport instead of stdio")
-    .option("-p, --port <port>", "Port to listen on for HTTP mode (default: 3000)", parseInt)
-    .action(async (options) => {
-    if (options.http) {
-        const { startMcpHttpServer } = await import("./commands/mcp-http.js");
-        await startMcpHttpServer(options.port);
-    }
-    else {
-        const { startMcpServer } = await import("./commands/mcp.js");
-        await startMcpServer();
-    }
-});
-mcp
-    .command("install")
-    .description("Install Runloop MCP server configuration in Claude Desktop")
-    .action(async () => {
-    const { installMcpConfig } = await import("./commands/mcp-install.js");
-    await installMcpConfig();
-});
-// Hidden command: 'rli mcp' without subcommand starts the server (for Claude Desktop config compatibility)
-program
-    .command("mcp-server", { hidden: true })
-    .option("--http", "Use HTTP/SSE transport instead of stdio")
-    .option("-p, --port <port>", "Port to listen on for HTTP mode (default: 3000)", parseInt)
-    .action(async (options) => {
-    if (options.http) {
-        const { startMcpHttpServer } = await import("./commands/mcp-http.js");
-        await startMcpHttpServer(options.port);
-    }
-    else {
-        const { startMcpServer } = await import("./commands/mcp.js");
-        await startMcpServer();
-    }
-});
+const program = createProgram();
 // Main CLI entry point
 (async () => {
     // Initialize theme system early (before any UI rendering)
@@ -417,21 +19,7 @@ program
     // Check if API key is configured (except for mcp commands)
     const args = process.argv.slice(2);
     if (!process.env.RUNLOOP_API_KEY) {
-        console.error(`
-❌ API key not configured.
-
-To get started:
-1. Go to https://platform.runloop.ai/settings and create an API key
-2. Set the environment variable:
-
-   export RUNLOOP_API_KEY=your_api_key_here
-
-To make it permanent, add this line to your shell config:
-   • For zsh:  echo 'export RUNLOOP_API_KEY=your_api_key_here' >> ~/.zshrc
-   • For bash: echo 'export RUNLOOP_API_KEY=your_api_key_here' >> ~/.bashrc
-
-Then restart your terminal or run: source ~/.zshrc (or ~/.bashrc)
-`);
+        console.error(getApiKeyErrorMessage());
         processUtils.exit(1);
         return; // Ensure execution stops
     }

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/devbox/list.js

@@ -452,8 +452,12 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
     if (showCreate) {
         return (_jsx(DevboxCreatePage, { onBack: () => {
                 setShowCreate(false);
-            }, onCreate: () => {
+            }, onCreate: (devbox) => {
                 setShowCreate(false);
+                // Navigate to the newly created devbox's detail page
+                if (onNavigateToDetail) {
+                    onNavigateToDetail(devbox.id);
+                }
             } }));
     }
     // Actions view

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

@@ -7,6 +7,7 @@ import { StatusBadge } from "./StatusBadge.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
+import { StateHistory } from "./StateHistory.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
@@ -433,7 +434,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
                         lp?.architecture) && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.warning, bold: true, children: [figures.squareSmallFilled, " Resources"] }), _jsxs(Text, { dimColor: true, children: [lp?.resource_size_request && `${lp.resource_size_request}`, lp?.architecture && ` • ${lp.architecture}`, lp?.custom_cpu_cores && ` • ${lp.custom_cpu_cores}VCPU`, lp?.custom_gb_memory && ` • ${lp.custom_gb_memory}GB RAM`, lp?.custom_disk_size && ` • ${lp.custom_disk_size}GB DISC`] })] })), hasCapabilities && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.info, bold: true, children: [figures.tick, " Capabilities"] }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities
                                     .filter((c) => c !== "unknown")
                                     .join(", ") })] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.secondary, bold: true, children: [figures.circleFilled, " Source"] }), selectedDevbox.blueprint_id && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "BP: " }), _jsx(Text, { color: colors.idColor, children: selectedDevbox.blueprint_id })] })), selectedDevbox.snapshot_id && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Snap: " }), _jsx(Text, { color: colors.idColor, children: selectedDevbox.snapshot_id })] }))] }))] }), selectedDevbox.metadata &&
-                Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: colors.error, dimColor: true, children: selectedDevbox.failure_reason })] })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+                Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: colors.error, dimColor: true, children: selectedDevbox.failure_reason })] })), _jsx(StateHistory, { stateTransitions: selectedDevbox.state_transitions }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
                             const isSelected = index === selectedOperation;
                             return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", op.shortcut, "]"] })] }, op.key));
                         }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Execute \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));