@runloop/rl-cli 1.3.0 → 1.4.0

package/README.md

@@ -118,6 +118,7 @@ rli blueprint create                     # Create a new blueprint
 rli blueprint get <name-or-id>           # Get blueprint details by name or ID (...
 rli blueprint logs <name-or-id>          # Get blueprint build logs by name or I...
 rli blueprint prune <name>               # Delete old blueprint builds, keeping ...
+rli blueprint from-dockerfile            # Create a blueprint from a Dockerfile ...
 ```
 
 ### Object Commands (alias: `obj`)

package/dist/commands/blueprint/from-dockerfile.js

@@ -0,0 +1,182 @@
+/**
+ * Create blueprint from Dockerfile command
+ *
+ * Manually handles each step with progress feedback:
+ * 1. Upload build context as tarball
+ * 2. Create blueprint
+ * 3. Poll for build completion
+ */
+import { readFile, stat } from "fs/promises";
+import { resolve, join } from "path";
+import { getClient } from "../../utils/client.js";
+import { output, outputError } from "../../utils/output.js";
+import { StorageObject } from "@runloop/api-client/sdk";
+// Helper to check if we should show progress
+function shouldShowProgress(options) {
+    return !options.output || options.output === "text";
+}
+// Helper to log progress (to stderr so it doesn't interfere with JSON output)
+function logProgress(message, options) {
+    if (shouldShowProgress(options)) {
+        console.error(message);
+    }
+}
+// Helper to format elapsed time
+function formatElapsed(startTime) {
+    const elapsed = Math.round((Date.now() - startTime) / 1000);
+    if (elapsed < 60) {
+        return `${elapsed}s`;
+    }
+    const minutes = Math.floor(elapsed / 60);
+    const seconds = elapsed % 60;
+    return `${minutes}m ${seconds}s`;
+}
+export async function createBlueprintFromDockerfile(options) {
+    const startTime = Date.now();
+    try {
+        const client = getClient();
+        // Resolve build context path (defaults to current directory)
+        const buildContextPath = resolve(options.buildContext || ".");
+        // Verify build context exists and is a directory
+        try {
+            const stats = await stat(buildContextPath);
+            if (!stats.isDirectory()) {
+                outputError(`Build context path is not a directory: ${buildContextPath}`);
+            }
+        }
+        catch {
+            outputError(`Build context path does not exist: ${buildContextPath}`);
+        }
+        // Resolve Dockerfile path
+        const dockerfilePath = options.dockerfile
+            ? resolve(options.dockerfile)
+            : join(buildContextPath, "Dockerfile");
+        // Verify Dockerfile exists
+        try {
+            const stats = await stat(dockerfilePath);
+            if (!stats.isFile()) {
+                outputError(`Dockerfile path is not a file: ${dockerfilePath}`);
+            }
+        }
+        catch {
+            outputError(`Dockerfile not found: ${dockerfilePath}`);
+        }
+        // Log initial info
+        logProgress(`\n📦 Creating blueprint "${options.name}" from Dockerfile`, options);
+        logProgress(`   Build context: ${buildContextPath}`, options);
+        logProgress(`   Dockerfile: ${dockerfilePath}\n`, options);
+        // Read the Dockerfile contents
+        const dockerfileContents = await readFile(dockerfilePath, "utf-8");
+        // Parse user parameters
+        let userParameters = undefined;
+        if (options.user && options.root) {
+            outputError("Only one of --user or --root can be specified");
+        }
+        else if (options.user) {
+            const [username, uid] = options.user.split(":");
+            if (!username || !uid) {
+                outputError("User must be in format 'username:uid'");
+            }
+            userParameters = { username, uid: parseInt(uid) };
+        }
+        else if (options.root) {
+            userParameters = { username: "root", uid: 0 };
+        }
+        // Build launch parameters
+        const launchParameters = {};
+        if (options.resources) {
+            launchParameters.resource_size_request = options.resources;
+        }
+        if (options.architecture) {
+            launchParameters.architecture = options.architecture;
+        }
+        if (options.availablePorts) {
+            launchParameters.available_ports = options.availablePorts.map((port) => parseInt(port, 10));
+        }
+        if (userParameters) {
+            launchParameters.user_parameters = userParameters;
+        }
+        // Parse TTL (default: 1 hour = 3600000ms)
+        const ttlMs = options.ttl ? parseInt(options.ttl) * 1000 : 3600000;
+        // Step 1: Upload build context
+        logProgress(`⏳ [1/3] Creating and uploading build context tarball...`, options);
+        const uploadStart = Date.now();
+        const storageObject = await StorageObject.uploadFromDir(client, buildContextPath, {
+            name: `build-context-${options.name}`,
+            ttl_ms: ttlMs,
+        });
+        logProgress(`✅ [1/3] Build context uploaded (${formatElapsed(uploadStart)})`, options);
+        logProgress(`   Object ID: ${storageObject.id}`, options);
+        // Step 2: Create the blueprint
+        logProgress(`\n⏳ [2/3] Creating blueprint...`, options);
+        const createStart = Date.now();
+        const createParams = {
+            name: options.name,
+            dockerfile: dockerfileContents,
+            system_setup_commands: options.systemSetupCommands,
+            launch_parameters: launchParameters,
+            build_context: {
+                type: "object",
+                object_id: storageObject.id,
+            },
+        };
+        const blueprintResponse = await client.blueprints.create(createParams);
+        logProgress(`✅ [2/3] Blueprint created (${formatElapsed(createStart)})`, options);
+        logProgress(`   Blueprint ID: ${blueprintResponse.id}`, options);
+        // Step 3: Wait for build to complete (unless --no-wait)
+        if (options.noWait) {
+            logProgress(`\n⏩ Skipping build wait (--no-wait specified)`, options);
+            logProgress(`   Check status with: rli blueprint get ${blueprintResponse.id}`, options);
+            logProgress(`   View logs with: rli blueprint logs ${blueprintResponse.id}\n`, options);
+            output(blueprintResponse, {
+                format: options.output,
+                defaultFormat: "json",
+            });
+            return;
+        }
+        logProgress(`\n⏳ [3/3] Waiting for build to complete...`, options);
+        const buildStart = Date.now();
+        let lastStatus = "";
+        let pollCount = 0;
+        // Poll for completion
+        while (true) {
+            const blueprint = await client.blueprints.retrieve(blueprintResponse.id);
+            const currentStatus = blueprint.status || "unknown";
+            // Log status changes
+            if (currentStatus !== lastStatus) {
+                const elapsed = formatElapsed(buildStart);
+                logProgress(`   Status: ${currentStatus} (${elapsed})`, options);
+                lastStatus = currentStatus;
+            }
+            else if (pollCount % 10 === 0 && pollCount > 0) {
+                // Log periodic updates even without status change (every ~30s)
+                const elapsed = formatElapsed(buildStart);
+                logProgress(`   Still ${currentStatus}... (${elapsed})`, options);
+            }
+            // Check for terminal states
+            if (blueprint.status === "build_complete") {
+                logProgress(`\n✅ [3/3] Build completed successfully! (${formatElapsed(buildStart)})`, options);
+                logProgress(`\n🎉 Blueprint "${options.name}" is ready!`, options);
+                logProgress(`   Total time: ${formatElapsed(startTime)}`, options);
+                logProgress(`   Blueprint ID: ${blueprint.id}\n`, options);
+                output(blueprint, { format: options.output, defaultFormat: "json" });
+                return;
+            }
+            if (blueprint.status === "failed") {
+                logProgress(`\n❌ [3/3] Build failed (${formatElapsed(buildStart)})`, options);
+                if (blueprint.failure_reason) {
+                    logProgress(`   Reason: ${blueprint.failure_reason}`, options);
+                }
+                logProgress(`   View logs with: rli blueprint logs ${blueprint.id}\n`, options);
+                outputError(`Blueprint build failed. Status: ${blueprint.status}`);
+            }
+            // Wait before next poll (3 seconds)
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+            pollCount++;
+        }
+    }
+    catch (error) {
+        logProgress(`\n❌ Failed after ${formatElapsed(startTime)}`, options);
+        outputError("Failed to create blueprint from Dockerfile", error);
+    }
+}

package/dist/components/DevboxCreatePage.js

@@ -109,6 +109,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     // Select navigation handlers using shared hook
     const handleArchitectureNav = useFormSelectNavigation(formData.architecture, architectures, (value) => setFormData({ ...formData, architecture: value }), currentField === "architecture");
     const handleResourceSizeNav = useFormSelectNavigation(formData.resource_size || "SMALL", resourceSizes, (value) => setFormData({ ...formData, resource_size: value }), currentField === "resource_size");
+    // Main form input handler - active when not in metadata section
     useInput((input, key) => {
         // Handle result screen
         if (result) {
@@ -116,7 +117,9 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 if (onCreate) {
                     onCreate(result);
                 }
-                onBack();
+                else {
+                    onBack();
+                }
             }
             return;
         }
@@ -136,118 +139,24 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         if (creating) {
             return;
         }
-        // Handle metadata section FIRST (before general escape handler)
-        if (inMetadataSection) {
-            const metadataKeys = Object.keys(formData.metadata);
-            // Selection model: 0 = "Add new", 1..n = Existing items, n+1 = "Done"
-            const maxIndex = metadataKeys.length + 1;
-            // Handle input mode (typing key or value)
-            if (metadataInputMode) {
-                if (metadataInputMode === "key" && key.return && metadataKey.trim()) {
-                    setMetadataInputMode("value");
-                    return;
-                }
-                else if (metadataInputMode === "value" && key.return) {
-                    if (metadataKey.trim() && metadataValue.trim()) {
-                        setFormData({
-                            ...formData,
-                            metadata: {
-                                ...formData.metadata,
-                                [metadataKey.trim()]: metadataValue.trim(),
-                            },
-                        });
-                    }
-                    setMetadataKey("");
-                    setMetadataValue("");
-                    setMetadataInputMode(null);
-                    setSelectedMetadataIndex(0); // Back to "add new" row
-                    return;
-                }
-                else if (key.escape) {
-                    // Cancel input
-                    setMetadataKey("");
-                    setMetadataValue("");
-                    setMetadataInputMode(null);
-                    return;
-                }
-                else if (key.tab) {
-                    // Tab between key and value
-                    setMetadataInputMode(metadataInputMode === "key" ? "value" : "key");
-                    return;
-                }
-                return; // Don't process other keys while in input mode
-            }
-            // Navigation mode
-            if (key.upArrow && selectedMetadataIndex > 0) {
-                setSelectedMetadataIndex(selectedMetadataIndex - 1);
-            }
-            else if (key.downArrow && selectedMetadataIndex < maxIndex) {
-                setSelectedMetadataIndex(selectedMetadataIndex + 1);
-            }
-            else if (key.return) {
-                if (selectedMetadataIndex === 0) {
-                    // Add new
-                    setMetadataKey("");
-                    setMetadataValue("");
-                    setMetadataInputMode("key");
-                }
-                else if (selectedMetadataIndex === maxIndex) {
-                    // Done - exit metadata section
-                    setInMetadataSection(false);
-                    setSelectedMetadataIndex(0);
-                    setMetadataKey("");
-                    setMetadataValue("");
-                    setMetadataInputMode(null);
-                }
-                else if (selectedMetadataIndex >= 1 &&
-                    selectedMetadataIndex <= metadataKeys.length) {
-                    // Edit existing (selectedMetadataIndex - 1 gives array index)
-                    const keyToEdit = metadataKeys[selectedMetadataIndex - 1];
-                    setMetadataKey(keyToEdit || "");
-                    setMetadataValue(formData.metadata[keyToEdit] || "");
-                    // Remove old entry
-                    const newMetadata = { ...formData.metadata };
-                    delete newMetadata[keyToEdit];
-                    setFormData({ ...formData, metadata: newMetadata });
-                    setMetadataInputMode("key");
-                }
-            }
-            else if ((input === "d" || key.delete) &&
-                selectedMetadataIndex >= 1 &&
-                selectedMetadataIndex <= metadataKeys.length) {
-                // Delete selected item (selectedMetadataIndex - 1 gives array index)
-                const keyToDelete = metadataKeys[selectedMetadataIndex - 1];
-                const newMetadata = { ...formData.metadata };
-                delete newMetadata[keyToDelete];
-                setFormData({ ...formData, metadata: newMetadata });
-                // Stay at same position or move to add new if we deleted the last item
-                const newLength = Object.keys(newMetadata).length;
-                if (selectedMetadataIndex > newLength) {
-                    setSelectedMetadataIndex(Math.max(0, newLength));
-                }
-            }
-            else if (key.escape || input === "q") {
-                // Exit metadata section
-                setInMetadataSection(false);
-                setSelectedMetadataIndex(0);
-                setMetadataKey("");
-                setMetadataValue("");
-                setMetadataInputMode(null);
-            }
-            return;
-        }
-        // Back to list (only when not in metadata section)
+        // Back to list
         if (input === "q" || key.escape) {
             onBack();
             return;
         }
-        // Submit form
+        // Submit form with Ctrl+S
         if (input === "s" && key.ctrl) {
             handleCreate();
             return;
         }
-        // Handle Enter on create field
-        if (currentField === "create" && key.return) {
+        // Enter key on metadata field to enter metadata section
+        if (currentField === "metadata" && key.return) {
+            setInMetadataSection(true);
+            setSelectedMetadataIndex(0);
+            return;
+        }
+        // Handle Enter on any field to submit
+        if (key.return) {
             handleCreate();
             return;
         }
@@ -266,13 +175,96 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setCurrentField(fields[currentFieldIndex + 1].key);
             return;
         }
-        // Enter key on metadata field to enter metadata section
-        if (currentField === "metadata" && key.return) {
-            setInMetadataSection(true);
-            setSelectedMetadataIndex(0); // Start at "add new" row
+    }, { isActive: !inMetadataSection });
+    // Metadata section input handler - active when in metadata section
+    useInput((input, key) => {
+        const metadataKeys = Object.keys(formData.metadata);
+        const maxIndex = metadataKeys.length + 1;
+        // Handle input mode (typing key or value)
+        if (metadataInputMode) {
+            if (metadataInputMode === "key" && key.return && metadataKey.trim()) {
+                setMetadataInputMode("value");
+                return;
+            }
+            else if (metadataInputMode === "value" && key.return) {
+                if (metadataKey.trim() && metadataValue.trim()) {
+                    setFormData({
+                        ...formData,
+                        metadata: {
+                            ...formData.metadata,
+                            [metadataKey.trim()]: metadataValue.trim(),
+                        },
+                    });
+                }
+                setMetadataKey("");
+                setMetadataValue("");
+                setMetadataInputMode(null);
+                setSelectedMetadataIndex(0);
+                return;
+            }
+            else if (key.escape) {
+                setMetadataKey("");
+                setMetadataValue("");
+                setMetadataInputMode(null);
+                return;
+            }
+            else if (key.tab) {
+                setMetadataInputMode(metadataInputMode === "key" ? "value" : "key");
+                return;
+            }
             return;
         }
-    });
+        // Navigation mode in metadata section
+        if (key.upArrow && selectedMetadataIndex > 0) {
+            setSelectedMetadataIndex(selectedMetadataIndex - 1);
+        }
+        else if (key.downArrow && selectedMetadataIndex < maxIndex) {
+            setSelectedMetadataIndex(selectedMetadataIndex + 1);
+        }
+        else if (key.return) {
+            if (selectedMetadataIndex === 0) {
+                setMetadataKey("");
+                setMetadataValue("");
+                setMetadataInputMode("key");
+            }
+            else if (selectedMetadataIndex === maxIndex) {
+                setInMetadataSection(false);
+                setSelectedMetadataIndex(0);
+                setMetadataKey("");
+                setMetadataValue("");
+                setMetadataInputMode(null);
+            }
+            else if (selectedMetadataIndex >= 1 &&
+                selectedMetadataIndex <= metadataKeys.length) {
+                const keyToEdit = metadataKeys[selectedMetadataIndex - 1];
+                setMetadataKey(keyToEdit || "");
+                setMetadataValue(formData.metadata[keyToEdit] || "");
+                const newMetadata = { ...formData.metadata };
+                delete newMetadata[keyToEdit];
+                setFormData({ ...formData, metadata: newMetadata });
+                setMetadataInputMode("key");
+            }
+        }
+        else if ((input === "d" || key.delete) &&
+            selectedMetadataIndex >= 1 &&
+            selectedMetadataIndex <= metadataKeys.length) {
+            const keyToDelete = metadataKeys[selectedMetadataIndex - 1];
+            const newMetadata = { ...formData.metadata };
+            delete newMetadata[keyToDelete];
+            setFormData({ ...formData, metadata: newMetadata });
+            const newLength = Object.keys(newMetadata).length;
+            if (selectedMetadataIndex > newLength) {
+                setSelectedMetadataIndex(Math.max(0, newLength));
+            }
+        }
+        else if (key.escape || input === "q") {
+            setInMetadataSection(false);
+            setSelectedMetadataIndex(0);
+            setMetadataKey("");
+            setMetadataValue("");
+            setMetadataInputMode(null);
+        }
+    }, { isActive: inMetadataSection });
     // Validate custom resource configuration
     const validateCustomResources = () => {
         if (formData.resource_size !== "CUSTOM_SIZE") {
@@ -383,7 +375,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                         return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: "[Enter to create]" }, field.key));
                     }
                     if (field.type === "text") {
-                        return (_jsx(FormTextInput, { label: field.label, value: String(fieldData || ""), onChange: (value) => setFormData({ ...formData, [field.key]: value }), isActive: isActive, placeholder: field.placeholder }, field.key));
+                        return (_jsx(FormTextInput, { label: field.label, value: String(fieldData || ""), onChange: (value) => setFormData({ ...formData, [field.key]: value }), onSubmit: handleCreate, isActive: isActive, placeholder: field.placeholder }, field.key));
                     }
                     if (field.type === "select") {
                         const value = fieldData;

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/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/package.json

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