@runloop/rl-cli 1.3.0 → 1.4.1

package/dist/components/NetworkPolicyCreatePage.js

@@ -76,6 +76,7 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
         }
     }, currentField === "allow_all");
     const handleDevboxNav = useFormSelectNavigation(formData.allow_devbox_to_devbox, BOOLEAN_OPTIONS, (value) => setFormData({ ...formData, allow_devbox_to_devbox: value }), currentField === "allow_devbox_to_devbox");
+    // Main form input handler - active when not in hostnames expanded mode
     useInput((input, key) => {
         // Handle result screen
         if (result) {
@@ -83,7 +84,9 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
                 if (onCreate) {
                     onCreate(result);
                 }
-                onBack();
+                else {
+                    onBack();
+                }
             }
             return;
         }
@@ -103,10 +106,6 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
         if (submitting) {
             return;
         }
-        // Handle hostnames expanded mode - let FormListManager handle input
-        if (hostnamesExpanded) {
-            return;
-        }
         // Back to list
         if (input === "q" || key.escape) {
             onBack();
@@ -117,16 +116,16 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
             handleSubmit();
             return;
         }
-        // Handle Enter on submit field
-        if (currentField === "submit" && key.return) {
-            handleSubmit();
-            return;
-        }
         // Handle Enter on hostnames field to expand
         if (currentField === "allowed_hostnames" && key.return) {
             setHostnamesExpanded(true);
             return;
         }
+        // Handle Enter on any field to submit (including text/select fields)
+        if (key.return) {
+            handleSubmit();
+            return;
+        }
         // Handle select field navigation
         if (handleAllowAllNav(input, key))
             return;
@@ -142,7 +141,7 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
             setCurrentField(fields[currentFieldIndex + 1].key);
             return;
         }
-    });
+    }, { isActive: !hostnamesExpanded });
     const handleSubmit = async () => {
         // Validate required fields
         if (!formData.name.trim()) {
@@ -243,7 +242,7 @@ export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) =>
                                 if (field.key === "name" && validationError) {
                                     setValidationError(null);
                                 }
-                            }, isActive: isActive, placeholder: field.key === "name"
+                            }, onSubmit: handleSubmit, isActive: isActive, placeholder: field.key === "name"
                                 ? "my-network-policy"
                                 : field.key === "description"
                                     ? "Policy description"

package/dist/components/ResourceDetailPage.js

@@ -50,6 +50,43 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
     }, []);
     // Local state for resource data (updated by polling)
     const [currentResource, setCurrentResource] = React.useState(initialResource);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    // Copy to clipboard helper
+    const copyToClipboard = React.useCallback(async (text) => {
+        const { spawn } = await import("child_process");
+        const platform = process.platform;
+        let command;
+        let args;
+        if (platform === "darwin") {
+            command = "pbcopy";
+            args = [];
+        }
+        else if (platform === "win32") {
+            command = "clip";
+            args = [];
+        }
+        else {
+            command = "xclip";
+            args = ["-selection", "clipboard"];
+        }
+        const proc = spawn(command, args);
+        proc.stdin.write(text);
+        proc.stdin.end();
+        proc.on("exit", (code) => {
+            if (code === 0) {
+                setCopyStatus("Copied ID to clipboard!");
+                setTimeout(() => setCopyStatus(null), 2000);
+            }
+            else {
+                setCopyStatus("Failed to copy");
+                setTimeout(() => setCopyStatus(null), 2000);
+            }
+        });
+        proc.on("error", () => {
+            setCopyStatus("Copy not supported");
+            setTimeout(() => setCopyStatus(null), 2000);
+        });
+    }, []);
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
@@ -106,6 +143,10 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
         if (input === "q" || key.escape) {
             onBack();
         }
+        else if (input === "c") {
+            // Copy resource ID to clipboard
+            copyToClipboard(getId(currentResource));
+        }
         else if (input === "i" && buildDetailLines) {
             setShowDetailedInfo(true);
             setDetailScroll(0);
@@ -176,11 +217,12 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
                             .map((field, fieldIndex) => (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [field.label, " "] }), typeof field.value === "string" ? (_jsx(Text, { color: field.color, dimColor: !field.color, children: field.value })) : (field.value)] }, fieldIndex))) })] }, sectionIndex))), additionalContent, operations.length > 0 && (_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(NavigationTips, { showArrows: true, tips: [
+                        }) })] })), copyStatus && (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.success, bold: true, children: copyStatus }) })), _jsx(NavigationTips, { showArrows: true, tips: [
                     { key: "Enter", label: "Execute" },
+                    { key: "c", label: "Copy ID" },
                     { key: "i", label: "Full Details", condition: !!buildDetailLines },
                     { key: "o", label: "Browser", condition: !!getUrl },
-                    { key: "q", label: "Back" },
+                    { key: "q/Ctrl+C", label: "Back/Quit" },
                 ] })] }));
 }
 // Helper to format timestamp as "time (ago)"

package/dist/components/form/FormTextInput.js

@@ -3,6 +3,6 @@ import { Text } from "ink";
 import TextInput from "ink-text-input";
 import { FormField } from "./FormField.js";
 import { colors } from "../../utils/theme.js";
-export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, }) => {
-    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: value || "(empty)" })) }));
+export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, }) => {
+    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: value || "(empty)" })) }));
 };

package/dist/screens/BlueprintDetailScreen.js

@@ -51,8 +51,8 @@ export function BlueprintDetailScreen({ blueprintId, }) {
     }, [blueprintId, loading, fetchedBlueprint]);
     // Use fetched blueprint for full details, fall back to store for basic display
     const blueprint = fetchedBlueprint || blueprintFromStore;
-    // Show loading state while fetching
-    if (loading && !blueprint) {
+    // Show loading state while fetching or before fetch starts
+    if (!blueprint && blueprintId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Blueprints" },
                         { label: "Loading...", active: true },
@@ -183,6 +183,21 @@ export function BlueprintDetailScreen({ blueprintId, }) {
             });
         }
     }
+    // Error section - show failure reason if present
+    if (blueprint.failure_reason) {
+        detailSections.push({
+            title: "Error",
+            icon: figures.cross,
+            color: colors.error,
+            fields: [
+                {
+                    label: "Failure Reason",
+                    value: blueprint.failure_reason,
+                    color: colors.error,
+                },
+            ],
+        });
+    }
     // Operations available for blueprints
     const operations = [
         {
@@ -262,6 +277,9 @@ export function BlueprintDetailScreen({ blueprintId, }) {
         lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", bp.id] }, "core-id"));
         lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", bp.name || "(none)"] }, "core-name"));
         lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", bp.status] }, "core-status"));
+        if (bp.failure_reason) {
+            lines.push(_jsxs(Text, { color: colors.error, children: [" ", "Failure Reason: ", bp.failure_reason] }, "core-failure"));
+        }
         if (bp.create_time_ms) {
             lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(bp.create_time_ms).toLocaleString()] }, "core-created"));
         }

package/dist/screens/DevboxDetailScreen.js

@@ -40,16 +40,16 @@ export function DevboxDetailScreen({ devboxId }) {
     }, [devboxFromStore, devboxId, loading, fetchedDevbox, setDevboxesInStore]);
     // Use devbox from store or fetched devbox
     const devbox = devboxFromStore || fetchedDevbox;
-    // Show loading state while fetching
-    if (loading) {
+    // Show loading state while fetching or before fetch starts
+    if (!devbox && devboxId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Loading...", active: true }] }), _jsx(SpinnerComponent, { message: "Loading devbox details..." })] }));
     }
     // Show error state if fetch failed
     if (error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Error", active: true }] }), _jsx(ErrorMessage, { message: "Failed to load devbox details", error: error })] }));
     }
-    // Show error if no devbox found and not loading
-    if (!devbox && !loading) {
+    // Show error if no devbox found
+    if (!devbox) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Not Found", active: true }] }), _jsx(ErrorMessage, { message: `Devbox ${devboxId || "unknown"} not found`, error: new Error("Devbox not found in cache and could not be fetched") })] }));
     }
     // At this point devbox is guaranteed to exist (loading check above handles the null case)

package/dist/screens/NetworkPolicyDetailScreen.js

@@ -58,8 +58,8 @@ export function NetworkPolicyDetailScreen({ networkPolicyId, }) {
     }, [networkPolicyId, loading, fetchedPolicy]);
     // Use fetched policy for full details, fall back to store for basic display
     const policy = fetchedPolicy || policyFromStore;
-    // Show loading state while fetching
-    if (loading && !policy) {
+    // Show loading state while fetching or before fetch starts
+    if (!policy && networkPolicyId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Network Policies" },
                         { label: "Loading...", active: true },

package/dist/screens/ObjectDetailScreen.js

@@ -111,8 +111,8 @@ export function ObjectDetailScreen({ objectId }) {
             return;
         }
     }, { isActive: showDownloadPrompt || !!downloadResult || !!downloadError });
-    // Show loading state while fetching
-    if (loading && !storageObject) {
+    // Show loading state while fetching or before fetch starts
+    if (!storageObject && objectId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Storage Objects" },
                         { label: "Loading...", active: true },

package/dist/screens/SnapshotDetailScreen.js

@@ -50,8 +50,8 @@ export function SnapshotDetailScreen({ snapshotId, }) {
     }, [snapshotId, loading, fetchedSnapshot]);
     // Use fetched snapshot for full details, fall back to store for basic display
     const snapshot = fetchedSnapshot || snapshotFromStore;
-    // Show loading state while fetching
-    if (loading && !snapshot) {
+    // Show loading state while fetching or before fetch starts
+    if (!snapshot && snapshotId && !error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: "Snapshots" },
                         { label: "Loading...", active: true },

package/dist/utils/commands.js

@@ -312,6 +312,24 @@ export function createProgram() {
         const { pruneBlueprints } = await import("../commands/blueprint/prune.js");
         await pruneBlueprints(name, options);
     });
+    blueprint
+        .command("from-dockerfile")
+        .description("Create a blueprint from a Dockerfile with build context support")
+        .requiredOption("--name <name>", "Blueprint name (required)")
+        .option("--build-context <path>", "Build context directory (default: current directory)")
+        .option("--dockerfile <path>", "Dockerfile path (default: Dockerfile in build context)")
+        .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("--ttl <seconds>", "TTL in seconds for the build context object (default: 3600)")
+        .option("-o, --output [format]", "Output format: text|json|yaml (default: json)")
+        .action(async (options) => {
+        const { createBlueprintFromDockerfile } = await import("../commands/blueprint/from-dockerfile.js");
+        await createBlueprintFromDockerfile(options);
+    });
     // Object storage commands
     const object = program
         .command("object")

package/dist/utils/logFormatter.js

@@ -13,36 +13,35 @@ const SOURCE_CONFIG = {
 const SOURCE_WIDTH = 5;
 /**
  * Format timestamp based on how recent the log is
+ * Always returns a fixed-width string for consistent alignment
  */
 export function formatTimestamp(timestampMs) {
     const date = new Date(timestampMs);
     const now = new Date();
     const isToday = date.toDateString() === now.toDateString();
     const isThisYear = date.getFullYear() === now.getFullYear();
-    const time = date.toLocaleTimeString("en-US", {
-        hour12: false,
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-    });
+    // Build time components manually for consistent formatting
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const seconds = date.getSeconds().toString().padStart(2, "0");
     const ms = date.getMilliseconds().toString().padStart(3, "0");
+    const time = `${hours}:${minutes}:${seconds}`;
     if (isToday) {
+        // Format: "HH:MM:SS.mmm" (12 chars)
         return `${time}.${ms}`;
     }
     else if (isThisYear) {
-        const monthDay = date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-        });
-        return `${monthDay} ${time}`;
+        // Format: "Mon DD HH:MM:SS" (15 chars, pad day to 2)
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const day = date.getDate().toString().padStart(2, " ");
+        return `${month} ${day} ${time}`;
     }
     else {
-        const fullDate = date.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-        });
-        return `${fullDate} ${time}`;
+        // Format: "YYYY Mon DD HH:MM:SS" (20 chars)
+        const year = date.getFullYear();
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const day = date.getDate().toString().padStart(2, " ");
+        return `${year} ${month} ${day} ${time}`;
     }
 }
 /**

package/package.json

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