@runloop/rl-cli 0.5.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/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/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"] }) })] }));

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