@runloop/rl-cli 0.9.0 → 1.0.0

package/README.md

@@ -4,7 +4,13 @@
 [![CI](https://github.com/runloopai/rl-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/runloopai/rl-cli/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-A beautiful CLI for managing Runloop built with Ink and TypeScript. Use it as an **interactive command-line application** with rich UI components, or as a **traditional CLI** for scripting and automation.
+An interactive CLI for interacting with the [Runloop.ai](https://runloop.ai) platform. Use it as an **interactive command-line application** with rich UI components, or as a **traditional CLI** for scripting and automation.
+
+📖 **[Full Documentation](https://docs.runloop.ai/docs/tools/cli)**
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/runloopai/rl-cli/main/misc/demo.gif" alt="Runloop CLI Demo" width="800">
+</p>
 
 ## Quick Example
 
@@ -23,8 +29,8 @@ rli devbox delete <devbox-id>
 
 - ⚡ Fast and responsive with pagination
 - 📦 Manage devboxes, snapshots, and blueprints
-- 🚀 Execute commands in devboxes
-- 🎯 Organized command structure with aliases
+- 🚀 Execute commands, ssh, view logs in devboxes
+- 🎯 Traditional CLI with text, json, and yaml output modes.
 - 🤖 **Model Context Protocol (MCP) server for AI integration**
 
 ## Installation

package/dist/commands/devbox/list.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, useInput, useApp } from "ink";
 import TextInput from "ink-text-input";
@@ -149,8 +149,21 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
         const ABSOLUTE_MAX_NAME = 80;
         const ABSOLUTE_MAX_ID = 50;
         const columns = [
+            // Status icon column - visual indicator for quick scanning
+            {
+                key: "statusIcon",
+                label: "",
+                width: statusIconWidth,
+                render: (devbox, _index, isSelected) => {
+                    const statusDisplay = getStatusDisplay(devbox?.status);
+                    const statusColor = statusDisplay.color === colors.textDim
+                        ? colors.info
+                        : statusDisplay.color;
+                    return (_jsxs(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                },
+            },
             createTextColumn("name", "Name", (devbox) => {
-                const name = String(devbox?.name || devbox?.id || "");
+                const name = String(devbox?.name || "");
                 const safeMax = Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME);
                 return name.length > safeMax
                     ? name.substring(0, Math.max(1, safeMax - 3)) + "..."
@@ -171,14 +184,22 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 dimColor: false,
                 bold: false,
             }),
-            createTextColumn("status", "Status", (devbox) => {
-                const statusDisplay = getStatusDisplay(devbox?.status);
-                const text = String(statusDisplay?.text || "-");
-                return text.length > 20 ? text.substring(0, 17) + "..." : text;
-            }, {
+            // Status text column with color matching the icon
+            {
+                key: "status",
+                label: "Status",
                 width: statusTextWidth,
-                dimColor: false,
-            }),
+                render: (devbox, _index, isSelected) => {
+                    const statusDisplay = getStatusDisplay(devbox?.status);
+                    const statusColor = statusDisplay.color === colors.textDim
+                        ? colors.info
+                        : statusDisplay.color;
+                    const safeWidth = Math.max(1, statusTextWidth);
+                    const truncated = statusDisplay.text.slice(0, safeWidth);
+                    const padded = truncated.padEnd(safeWidth, " ");
+                    return (_jsx(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
+                },
+            },
             createTextColumn("created", "Created", (devbox) => {
                 const time = formatTimeAgo(devbox?.create_time_ms || Date.now());
                 const text = String(time || "-");
@@ -217,6 +238,7 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
         }
         return columns;
     }, [
+        statusIconWidth,
         nameWidth,
         idWidth,
         statusTextWidth,

package/dist/components/DevboxCreatePage.js

@@ -15,12 +15,12 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
         name: "",
-        architecture: "arm64",
+        architecture: "x86_64",
         resource_size: "SMALL",
         custom_cpu: "",
         custom_memory: "",
         custom_disk: "",
-        keep_alive: "3600",
+        keep_alive: "3600", // 1 hour
         metadata: {},
         blueprint_id: initialBlueprintId || "",
         snapshot_id: initialSnapshotId || "",
@@ -381,7 +381,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                     if (field.type === "metadata") {
                         if (!inMetadataSection) {
                             // Collapsed view
-                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.text, children: [Object.keys(formData.metadata).length, " item(s)"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), Object.keys(formData.metadata).length > 0 && (_jsx(Box, { marginLeft: 2, children: _jsx(MetadataDisplay, { metadata: formData.metadata, showBorder: false }) }))] }, field.key));
+                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.text, children: [Object.keys(formData.metadata).length, " item(s)"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), Object.keys(formData.metadata).length > 0 && (_jsx(Box, { marginLeft: 2, children: _jsx(MetadataDisplay, { metadata: formData.metadata, title: "", showBorder: false, compact: true }) }))] }, field.key));
                         }
                         // Expanded metadata section view
                         const metadataKeys = Object.keys(formData.metadata);

package/dist/components/DevboxDetailPage.js

@@ -4,7 +4,6 @@ import { Box, Text, useInput } from "ink";
 import figures from "figures";
 import { Header } from "./Header.js";
 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";
@@ -33,6 +32,12 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
+// Truncate long strings to prevent layout issues
+const truncateString = (str, maxLength) => {
+    if (str.length <= maxLength)
+        return str;
+    return str.substring(0, maxLength - 3) + "...";
+};
 export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     const isMounted = React.useRef(true);
     // Track mounted state
@@ -360,7 +365,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
                 lines.push(_jsxs(Text, { color: colors.error, dimColor: true, children: [" ", "Failure Reason: ", selectedDevbox.failure_reason] }, "status-fail"));
             }
             if (selectedDevbox.shutdown_reason) {
-                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Shutdown Reason: ", selectedDevbox.shutdown_reason] }, "status-shut"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Shutdown Initiator: ", selectedDevbox.shutdown_reason] }, "status-shut"));
             }
             lines.push(_jsx(Text, { children: " " }, "status-space"));
         }
@@ -425,16 +430,61 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: "Devboxes" },
                     { label: selectedDevbox.name || selectedDevbox.id, active: true },
-                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: colors.idColor, children: [" \u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Box, { children: [_jsxs(Text, { color: colors.success, dimColor: true, children: ["Uptime:", " ", uptime < 60
+                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", children: [_jsx(Text, { color: colors.primary, bold: true, children: truncateString(selectedDevbox.name || selectedDevbox.id, Math.max(20, detailViewport.terminalWidth - 35)) }), selectedDevbox.name && (_jsxs(Text, { color: colors.idColor, children: [" \u2022 ", selectedDevbox.id] }))] }), _jsxs(Box, { children: [_jsx(StatusBadge, { status: selectedDevbox.status, fullText: true }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Text, { color: colors.success, dimColor: true, children: [" ", "\u2022 Uptime:", " ", uptime < 60
                                         ? `${uptime}m`
-                                        : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] }), lp?.keep_alive_time_seconds && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Keep-alive: ", Math.floor(lp.keep_alive_time_seconds / 60), "m"] }))] }))] }), _jsxs(Box, { flexDirection: "row", gap: 1, marginBottom: 1, children: [(lp?.resource_size_request ||
-                        lp?.custom_cpu_cores ||
-                        lp?.custom_gb_memory ||
-                        lp?.custom_disk_size ||
-                        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 })] })), _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) => {
+                                        : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] })), selectedDevbox.status !== "running" &&
+                                selectedDevbox.create_time_ms &&
+                                selectedDevbox.end_time_ms && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Ran for:", " ", (() => {
+                                        const runtime = Math.floor((selectedDevbox.end_time_ms -
+                                            selectedDevbox.create_time_ms) /
+                                            1000);
+                                        if (runtime < 60)
+                                            return `${runtime}s`;
+                                        const mins = Math.floor(runtime / 60);
+                                        if (mins < 60)
+                                            return `${mins}m ${runtime % 60}s`;
+                                        const hours = Math.floor(mins / 60);
+                                        return `${hours}h ${mins % 60}m`;
+                                    })()] }))] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.warning, bold: true, children: [figures.squareSmallFilled, " Details"] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [selectedDevbox.create_time_ms && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Created " }), _jsx(Text, { dimColor: true, children: formattedCreateTime }), selectedDevbox.end_time_ms ? (_jsxs(Text, { dimColor: true, children: [" ", figures.arrowRight, " ", new Date(selectedDevbox.end_time_ms).toLocaleString()] })) : (_jsxs(Text, { dimColor: true, children: [" (", createTimeAgo, ")"] }))] })), (lp?.resource_size_request ||
+                                lp?.custom_cpu_cores ||
+                                lp?.custom_gb_memory ||
+                                lp?.custom_disk_size ||
+                                lp?.architecture) && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Resources " }), _jsx(Text, { dimColor: true, children: [
+                                            lp?.resource_size_request,
+                                            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`,
+                                        ]
+                                            .filter(Boolean)
+                                            .join(" • ") })] })), (lp?.keep_alive_time_seconds || lp?.user_parameters) && (_jsxs(Box, { children: [lp?.keep_alive_time_seconds && (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.textDim, children: "Lifetime " }), _jsx(Text, { dimColor: true, children: lp.keep_alive_time_seconds < 3600
+                                                    ? `${Math.floor(lp.keep_alive_time_seconds / 60)}m`
+                                                    : `${Math.floor(lp.keep_alive_time_seconds / 3600)}h ${Math.floor((lp.keep_alive_time_seconds % 3600) / 60)}m` }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Text, { children: [" ", "\u2022", " ", (() => {
+                                                        const maxLifetimeMinutes = Math.floor(lp.keep_alive_time_seconds / 60);
+                                                        const remainingMinutes = maxLifetimeMinutes - uptime;
+                                                        if (remainingMinutes <= 0) {
+                                                            return _jsx(Text, { color: colors.error, children: "Expired" });
+                                                        }
+                                                        else if (remainingMinutes < 5) {
+                                                            return (_jsxs(Text, { color: colors.error, children: [remainingMinutes, "m remaining"] }));
+                                                        }
+                                                        else if (remainingMinutes < 15) {
+                                                            return (_jsxs(Text, { color: colors.warning, children: [remainingMinutes, "m remaining"] }));
+                                                        }
+                                                        else if (remainingMinutes < 60) {
+                                                            return (_jsxs(Text, { color: colors.success, children: [remainingMinutes, "m remaining"] }));
+                                                        }
+                                                        else {
+                                                            const hours = Math.floor(remainingMinutes / 60);
+                                                            const mins = remainingMinutes % 60;
+                                                            return (_jsxs(Text, { color: colors.success, children: [hours, "h ", mins, "m remaining"] }));
+                                                        }
+                                                    })()] })), lp?.user_parameters && (_jsx(Text, { color: colors.textDim, children: " \u2022 " }))] })), lp?.user_parameters && (_jsxs(_Fragment, { children: [!lp?.keep_alive_time_seconds && (_jsx(Text, { color: colors.textDim, children: "User " })), _jsx(Text, { color: colors.textDim, children: "User: " }), _jsxs(Text, { dimColor: true, children: [lp.user_parameters.username || "default", lp.user_parameters.uid != null &&
+                                                        lp.user_parameters.uid !== 0 &&
+                                                        ` (UID: ${lp.user_parameters.uid})`] })] }))] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Source " }), _jsx(Text, { color: colors.success, children: selectedDevbox.blueprint_id || selectedDevbox.snapshot_id })] })), selectedDevbox.initiator_id && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Initiator " }), _jsx(Text, { color: colors.secondary, children: selectedDevbox.initiator_id })] })), hasCapabilities && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Capabilities " }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities
+                                            .filter((c) => c !== "unknown")
+                                            .join(", ") })] }))] })] }), selectedDevbox.metadata &&
+                Object.keys(selectedDevbox.metadata).length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.secondary, bold: true, children: [figures.identical, " Metadata"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: Object.entries(selectedDevbox.metadata).map(([key, value]) => (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: key }), _jsx(Text, { color: colors.textDim, children: ": " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: value })] }, key))) })] })), selectedDevbox.failure_reason && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " Error"] }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: colors.error, children: selectedDevbox.failure_reason }) })] })), _jsx(StateHistory, { stateTransitions: selectedDevbox.state_transitions, shutdownReason: selectedDevbox.shutdown_reason ?? undefined }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, 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/MetadataDisplay.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
 import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
-const renderKeyValueBadge = (keyText, value, color) => (_jsxs(Box, { borderStyle: "round", borderColor: color, paddingX: 1, marginRight: 1, children: [_jsx(Text, { color: color, bold: true, children: keyText }), _jsx(Text, { color: color, children: ": " }), _jsx(Text, { color: color, children: value })] }));
+const renderKeyValueBadge = (keyText, value, color) => (_jsxs(Box, { borderStyle: "round", borderColor: color, paddingX: 1, marginRight: 1, children: [_jsx(Text, { color: color, bold: true, children: keyText }), _jsx(Text, { color: color, children: "= " }), _jsx(Text, { color: color, children: value })] }));
+const renderCompactKeyValue = (keyText, value, color, isLast) => (_jsxs(Text, { children: [_jsx(Text, { color: color, bold: true, children: keyText }), _jsx(Text, { color: colors.textDim, children: "=" }), _jsx(Text, { color: color, children: value }), !isLast && _jsx(Text, { color: colors.textDim, children: " \u00B7 " })] }));
 // Generate color for each key based on hash
 const getColorForKey = (key, index) => {
     const colorList = [
@@ -15,11 +17,19 @@ const getColorForKey = (key, index) => {
     ];
     return colorList[index % colorList.length];
 };
-export const MetadataDisplay = ({ metadata, title = "Metadata", showBorder = false, selectedKey, }) => {
+export const MetadataDisplay = ({ metadata, title = "Metadata", showBorder = false, selectedKey, compact = false, }) => {
     const entries = Object.entries(metadata);
     if (entries.length === 0) {
         return null;
     }
+    if (compact) {
+        return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.identical, " ", title] })), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: entries.map(([key, value], index) => {
+                        const color = getColorForKey(key, index);
+                        const isSelected = selectedKey === key;
+                        const isLast = index === entries.length - 1;
+                        return (_jsxs(React.Fragment, { children: [isSelected && (_jsx(Text, { color: colors.primary, bold: true, children: figures.pointer })), renderCompactKeyValue(key, value, isSelected ? colors.primary : color, isLast)] }, key));
+                    }) })] }));
+    }
     const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 1, children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.identical, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
                 const color = getColorForKey(key, index);
                 const isSelected = selectedKey === key;

package/dist/components/ResourceListView.js

@@ -10,25 +10,38 @@ import { Table } from "./Table.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-// Format time ago in a succinct way
+// Format time ago - concise with ISO-style date for older items
 export const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    const date = new Date(timestamp);
+    const now = new Date();
+    // Format time as HH:MM:SS (24h)
+    const time = date.toTimeString().slice(0, 8);
+    // Less than 1 minute
     if (seconds < 60)
-        return `${seconds}s ago`;
+        return `${time} (${seconds}s ago)`;
     const minutes = Math.floor(seconds / 60);
+    // Less than 1 hour
     if (minutes < 60)
-        return `${minutes}m ago`;
+        return `${time} (${minutes}m ago)`;
     const hours = Math.floor(minutes / 60);
+    // Less than 24 hours - show time + relative
     if (hours < 24)
-        return `${hours}h ago`;
+        return `${time} (${hours}hr 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`;
+    const sameYear = date.getFullYear() === now.getFullYear();
+    // Format date parts
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const year = date.getFullYear();
+    // Date format: MM-DD or YYYY-MM-DD if different year
+    const dateStr = `${month}-${day}`;
+    // 1-7 days - show date + time + relative
+    if (days <= 7) {
+        return `${dateStr} ${time} (${days}d)`;
+    }
+    // More than 7 days - just date + time, no relative
+    return `${dateStr} ${time}`;
 };
 export function ResourceListView({ config }) {
     const { exit: inkExit } = useApp();

package/dist/components/StateHistory.js

@@ -2,6 +2,37 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
+import { getStatusDisplay } from "./StatusBadge.js";
+// Format shutdown reason into human-readable text
+const formatShutdownReason = (reason) => {
+    switch (reason) {
+        case "api_shutdown":
+            return "API call";
+        case "idle_timeout":
+            return "Idle timeout";
+        case "keep_alive_timeout":
+            return "Max lifetime expired";
+        case "max_lifetime":
+        case "max_lifetime_exceeded":
+            return "Max lifetime exceeded";
+        case "user_initiated":
+            return "User initiated";
+        case "system_maintenance":
+            return "System maintenance";
+        case "resource_limit":
+            return "Resource limits";
+        case "entrypoint_exit":
+            return "Entrypoint exited";
+        case "idle":
+            return "Idle";
+        case "error":
+        case "failure":
+            return "Error";
+        default:
+            // Convert snake_case to readable text
+            return reason.replace(/_/g, " ");
+    }
+};
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -38,28 +69,30 @@ const formatDuration = (milliseconds) => {
 };
 // 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) {
+// Terminal states that don't need duration shown (no new state coming)
+const TERMINAL_STATES = ["shutdown", "failure"];
+export const StateHistory = ({ stateTransitions, shutdownReason, }) => {
+    if (!stateTransitions || stateTransitions.length === 0) {
         return null;
     }
-    // Get last 3 transitions (most recent first)
-    const lastThree = stateTransitions
-        .slice(-3)
-        .reverse()
+    // Check if there are more than 5 transitions
+    const totalTransitions = stateTransitions.length;
+    const hasMore = totalTransitions > 5;
+    // Get last 5 transitions (oldest first - chronological order)
+    const lastFive = stateTransitions
+        .slice(-5)
         .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
+        // Calculate duration: time until next transition, or until now if it's the last state
         let duration = 0;
         if (transitionTime) {
-            if (idx === 0) {
+            if (idx === arr.length - 1) {
                 // 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];
+                // Earlier 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;
@@ -73,8 +106,15 @@ export const StateHistory = ({ stateTransitions }) => {
         };
     })
         .filter((state) => state.transitionTime); // Only show states with valid timestamps
-    if (lastThree.length === 0) {
+    if (lastFive.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))) })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.success, bold: true, children: [figures.info, " State History", hasMore && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", totalTransitions - 5, " earlier)"] }))] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: lastFive.map((state, idx) => {
+                    const statusDisplay = getStatusDisplay(state.status || "");
+                    const isLastState = idx === lastFive.length - 1;
+                    const isTerminalState = TERMINAL_STATES.includes(state.status);
+                    const showDuration = state.duration > 0 && !(isLastState && isTerminalState);
+                    const isShutdownState = state.status === "shutdown";
+                    return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: statusDisplay.color, children: [statusDisplay.icon, " "] }), _jsx(Text, { color: isLastState ? statusDisplay.color : colors.textDim, bold: isLastState, children: capitalize(state.status || "unknown") }), state.transitionTime && (_jsxs(_Fragment, { children: [_jsxs(Text, { dimColor: true, children: [" ", "at ", new Date(state.transitionTime).toLocaleString(), " ", _jsxs(Text, { color: colors.textDim, children: ["(", formatTimeAgo(state.transitionTime), ")"] }), showDuration && (_jsxs(_Fragment, { children: [" ", "\u2022 Duration:", " ", _jsx(Text, { color: colors.secondary, children: formatDuration(state.duration) })] }))] }), isShutdownState && shutdownReason && (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.textDim, children: " due to " }), _jsx(Text, { color: colors.warning, children: formatShutdownReason(shutdownReason) })] }))] }))] }, idx));
+                }) })] }));
 };

package/dist/components/StatusBadge.js

@@ -8,87 +8,118 @@ export const getStatusDisplay = (status) => {
             icon: figures.questionMarkPrefix,
             color: colors.textDim,
             text: "UNKNOWN   ",
+            label: "Unknown",
         };
     }
     switch (status) {
+        // === ACTIVE STATE ===
         case "running":
             return {
                 icon: figures.circleFilled,
                 color: colors.success,
                 text: "RUNNING   ",
+                label: "Running",
             };
+        // === STARTING UP (transitioning to active) ===
         case "provisioning":
             return {
-                icon: figures.ellipsis,
+                icon: figures.arrowUp,
                 color: colors.warning,
                 text: "PROVISION ",
+                label: "Provisioning",
             };
         case "initializing":
             return {
-                icon: figures.ellipsis,
+                icon: figures.arrowUp,
                 color: colors.primary,
                 text: "INITIALIZE",
+                label: "Initializing",
             };
+        case "resuming":
+            return {
+                icon: figures.arrowUp,
+                color: colors.primary,
+                text: "RESUMING  ",
+                label: "Resuming",
+            };
+        // === SHUTTING DOWN (transitioning to inactive) ===
+        case "suspending":
+            return {
+                icon: figures.arrowDown,
+                color: colors.warning,
+                text: "SUSPENDING",
+                label: "Suspending",
+            };
+        // === INACTIVE STATES ===
         case "suspended":
             return {
                 icon: figures.circleDotted,
                 color: colors.warning,
                 text: "SUSPENDED ",
+                label: "Suspended",
             };
-        case "failure":
-            return { icon: figures.cross, color: colors.error, text: "FAILED    " };
         case "shutdown":
             return {
                 icon: figures.circle,
                 color: colors.textDim,
                 text: "SHUTDOWN  ",
+                label: "Shutdown",
             };
-        case "resuming":
+        // === ERROR STATES ===
+        case "failure":
             return {
-                icon: figures.ellipsis,
-                color: colors.primary,
-                text: "RESUMING  ",
+                icon: figures.cross,
+                color: colors.error,
+                text: "FAILED    ",
+                label: "Failed",
             };
-        case "suspending":
+        case "build_failed":
+        case "failed":
             return {
-                icon: figures.ellipsis,
-                color: colors.warning,
-                text: "SUSPENDING",
+                icon: figures.cross,
+                color: colors.error,
+                text: "FAILED    ",
+                label: "Failed",
             };
+        // === BUILD STATES (for blueprints) ===
         case "ready":
             return {
-                icon: figures.bullet,
+                icon: figures.tick,
                 color: colors.success,
                 text: "READY     ",
+                label: "Ready",
             };
         case "build_complete":
         case "building_complete":
             return {
-                icon: figures.bullet,
+                icon: figures.tick,
                 color: colors.success,
                 text: "COMPLETE  ",
+                label: "Build Complete",
             };
         case "building":
             return {
-                icon: figures.ellipsis,
+                icon: figures.arrowUp,
                 color: colors.warning,
                 text: "BUILDING  ",
+                label: "Building: In Progress",
             };
-        case "build_failed":
-        case "failed":
-            return { icon: figures.cross, color: colors.error, text: "FAILED    " };
         default:
             // Truncate and pad any unknown status to 10 chars to match column width
             const truncated = status.toUpperCase().slice(0, 10);
             const padded = truncated.padEnd(10, " ");
+            // Capitalize first letter for label
+            const label = status.charAt(0).toUpperCase() + status.slice(1);
             return {
                 icon: figures.questionMarkPrefix,
                 color: colors.textDim,
                 text: padded,
+                label: label,
             };
     }
 };
-export const StatusBadge = ({ status, showText = true }) => {
+export const StatusBadge = ({ status, showText = true, fullText = false, }) => {
     const statusDisplay = getStatusDisplay(status);
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), showText && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: statusDisplay.color, children: statusDisplay.text })] }))] }));
+    const displayText = fullText ? statusDisplay.label : statusDisplay.text;
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), showText && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: statusDisplay.color, children: displayText })] }))] }));
 };

package/package.json

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