@runloop/rl-cli 0.5.0 → 0.10.0

package/dist/components/DevboxDetailPage.js

@@ -4,9 +4,9 @@ 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";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
@@ -32,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
@@ -359,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"));
         }
@@ -424,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 })] })), _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

@@ -0,0 +1,120 @@
+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";
+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);
+    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);
+// 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;
+    }
+    // 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 last state
+        let duration = 0;
+        if (transitionTime) {
+            if (idx === arr.length - 1) {
+                // Most recent state - duration is from transition time to now
+                duration = Date.now() - transitionTime;
+            }
+            else {
+                // 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;
+                }
+            }
+        }
+        return {
+            status: transition.status,
+            transitionTime,
+            duration,
+        };
+    })
+        .filter((state) => state.transitionTime); // Only show states with valid timestamps
+    if (lastFive.length === 0) {
+        return null;
+    }
+    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/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 });
 }