@runloop/rl-cli 1.3.0 → 1.4.1

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/Banner.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import BigText from "ink-big-text";
 import Gradient from "ink-gradient";
 import { isLightMode } from "../utils/theme.js";
-import { useViewportHeight } from "../hooks/useViewportHeight.js";
 // Dramatic shades of green shimmer - wide range
 const DARK_SHIMMER_COLORS = [
     "#024A38", // Very very dark emerald
@@ -83,15 +82,38 @@ const DARK_FRAMES = precomputeFrames(DARK_SHIMMER_COLORS.filter((_, i) => i % 2
 const LIGHT_FRAMES = precomputeFrames(LIGHT_SHIMMER_COLORS.filter((_, i) => i % 2 === 0));
 // Minimum width to show the full BigText banner (simple3d font needs ~80 chars for "RUNLOOP.ai")
 const MIN_WIDTH_FOR_BIG_BANNER = 90;
+// Minimum height to show the full BigText banner - require generous room (40 lines)
+const MIN_HEIGHT_FOR_BIG_BANNER = 40;
 // Animation interval in ms
 const SHIMMER_INTERVAL = 400;
 export const Banner = React.memo(() => {
     const [frameIndex, setFrameIndex] = useState(0);
     const frames = isLightMode() ? LIGHT_FRAMES : DARK_FRAMES;
-    const { terminalWidth } = useViewportHeight();
+    const { stdout } = useStdout();
     const timeoutRef = useRef(null);
-    // Determine if we should show compact mode
-    const isCompact = terminalWidth < MIN_WIDTH_FOR_BIG_BANNER;
+    // Get raw terminal dimensions, responding to resize events
+    // Default to conservative values if we can't detect (triggers compact mode)
+    const getDimensions = React.useCallback(() => ({
+        width: stdout?.columns && stdout.columns > 0 ? stdout.columns : 80,
+        height: stdout?.rows && stdout.rows > 0 ? stdout.rows : 20,
+    }), [stdout]);
+    const [dimensions, setDimensions] = useState(getDimensions);
+    useEffect(() => {
+        // Update immediately on mount and when stdout changes
+        setDimensions(getDimensions());
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setDimensions(getDimensions());
+        };
+        stdout.on("resize", handleResize);
+        return () => {
+            stdout.off("resize", handleResize);
+        };
+    }, [stdout, getDimensions]);
+    // Determine if we should show compact mode (not enough width OR height)
+    const isCompact = dimensions.width < MIN_WIDTH_FOR_BIG_BANNER ||
+        dimensions.height < MIN_HEIGHT_FOR_BIG_BANNER;
     useEffect(() => {
         const tick = () => {
             setFrameIndex((prev) => (prev + 1) % frames.length);

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;