@runloop/rl-cli 1.2.0 → 1.4.0

package/dist/components/DevboxCreatePage.js

@@ -8,9 +8,21 @@ import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
+import { FormTextInput, FormSelect, FormActionButton, useFormSelectNavigation, } from "./form/index.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const architectures = ["arm64", "x86_64"];
+const resourceSizes = [
+    "X_SMALL",
+    "SMALL",
+    "MEDIUM",
+    "LARGE",
+    "X_LARGE",
+    "XX_LARGE",
+    "CUSTOM_SIZE",
+];
 export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initialSnapshotId, }) => {
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
@@ -24,53 +36,80 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         metadata: {},
         blueprint_id: initialBlueprintId || "",
         snapshot_id: initialSnapshotId || "",
+        network_policy_id: "",
     });
     const [metadataKey, setMetadataKey] = React.useState("");
     const [metadataValue, setMetadataValue] = React.useState("");
     const [inMetadataSection, setInMetadataSection] = React.useState(false);
     const [metadataInputMode, setMetadataInputMode] = React.useState(null);
-    const [selectedMetadataIndex, setSelectedMetadataIndex] = React.useState(-1); // -1 means "add new" row
+    const [selectedMetadataIndex, setSelectedMetadataIndex] = React.useState(0);
     const [creating, setCreating] = React.useState(false);
     const [result, setResult] = React.useState(null);
     const [error, setError] = React.useState(null);
     const baseFields = [
         { key: "create", label: "Devbox Create", type: "action" },
-        { key: "name", label: "Name", type: "text" },
+        { key: "name", label: "Name", type: "text", placeholder: "my-devbox" },
         { key: "architecture", label: "Architecture", type: "select" },
         { key: "resource_size", label: "Resource Size", type: "select" },
     ];
     // Add custom resource fields if CUSTOM_SIZE is selected
     const customFields = formData.resource_size === "CUSTOM_SIZE"
         ? [
-            { key: "custom_cpu", label: "CPU Cores (2-16, even)", type: "text" },
+            {
+                key: "custom_cpu",
+                label: "CPU Cores (2-16, even)",
+                type: "text",
+                placeholder: "4",
+            },
             {
                 key: "custom_memory",
                 label: "Memory GB (2-64, even)",
                 type: "text",
+                placeholder: "8",
+            },
+            {
+                key: "custom_disk",
+                label: "Disk GB (2-64, even)",
+                type: "text",
+                placeholder: "16",
             },
-            { key: "custom_disk", label: "Disk GB (2-64, even)", type: "text" },
         ]
         : [];
     const remainingFields = [
-        { key: "keep_alive", label: "Keep Alive (seconds)", type: "text" },
-        { key: "blueprint_id", label: "Blueprint ID (optional)", type: "text" },
-        { key: "snapshot_id", label: "Snapshot ID (optional)", type: "text" },
+        {
+            key: "keep_alive",
+            label: "Keep Alive (seconds)",
+            type: "text",
+            placeholder: "3600",
+        },
+        {
+            key: "blueprint_id",
+            label: "Blueprint ID (optional)",
+            type: "text",
+            placeholder: "bpt_xxx",
+        },
+        {
+            key: "snapshot_id",
+            label: "Snapshot ID (optional)",
+            type: "text",
+            placeholder: "snp_xxx",
+        },
+        {
+            key: "network_policy_id",
+            label: "Network Policy ID (optional)",
+            type: "text",
+            placeholder: "np_xxx",
+        },
         { key: "metadata", label: "Metadata (optional)", type: "metadata" },
     ];
     const fields = [...baseFields, ...customFields, ...remainingFields];
-    const architectures = ["arm64", "x86_64"];
-    const resourceSizes = [
-        "X_SMALL",
-        "SMALL",
-        "MEDIUM",
-        "LARGE",
-        "X_LARGE",
-        "XX_LARGE",
-        "CUSTOM_SIZE",
-    ];
     const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
+    // 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) {
@@ -78,7 +117,9 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 if (onCreate) {
                     onCreate(result);
                 }
-                onBack();
+                else {
+                    onBack();
+                }
             }
             return;
         }
@@ -103,161 +144,127 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             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;
         }
-        // Handle metadata section
-        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");
-                }
+        // Handle select field navigation using shared hooks
+        if (handleArchitectureNav(input, key))
+            return;
+        if (handleResourceSizeNav(input, key))
+            return;
+        // Navigation (up/down arrows and tab/shift+tab)
+        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
+            setCurrentField(fields[currentFieldIndex - 1].key);
+            return;
+        }
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
+            setCurrentField(fields[currentFieldIndex + 1].key);
+            return;
+        }
+    }, { 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 ((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 (metadataInputMode === "value" && key.return) {
+                if (metadataKey.trim() && metadataValue.trim()) {
+                    setFormData({
+                        ...formData,
+                        metadata: {
+                            ...formData.metadata,
+                            [metadataKey.trim()]: metadataValue.trim(),
+                        },
+                    });
                 }
-            }
-            else if (key.escape || input === "q") {
-                // Exit metadata section
-                setInMetadataSection(false);
+                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;
         }
-        // Now safe to get field from list
-        const field = fields[currentFieldIndex];
-        // Navigation
-        if (key.upArrow && currentFieldIndex > 0) {
-            setCurrentField(fields[currentFieldIndex - 1].key);
-            return;
-        }
-        if (key.downArrow && currentFieldIndex < fields.length - 1) {
-            setCurrentField(fields[currentFieldIndex + 1].key);
-            return;
+        // Navigation mode in metadata section
+        if (key.upArrow && selectedMetadataIndex > 0) {
+            setSelectedMetadataIndex(selectedMetadataIndex - 1);
         }
-        // Enter key on metadata field to enter metadata section
-        if (currentField === "metadata" && key.return) {
-            setInMetadataSection(true);
-            setSelectedMetadataIndex(0); // Start at "add new" row
-            return;
+        else if (key.downArrow && selectedMetadataIndex < maxIndex) {
+            setSelectedMetadataIndex(selectedMetadataIndex + 1);
         }
-        // Handle select fields
-        if (field && field.type === "select" && (key.leftArrow || key.rightArrow)) {
-            if (currentField === "architecture") {
-                const currentIndex = architectures.indexOf(formData.architecture);
-                const newIndex = key.leftArrow
-                    ? Math.max(0, currentIndex - 1)
-                    : Math.min(architectures.length - 1, currentIndex + 1);
-                setFormData({
-                    ...formData,
-                    architecture: architectures[newIndex],
-                });
+        else if (key.return) {
+            if (selectedMetadataIndex === 0) {
+                setMetadataKey("");
+                setMetadataValue("");
+                setMetadataInputMode("key");
             }
-            else if (currentField === "resource_size") {
-                // Find current index, defaulting to 0 if not found (e.g., empty string)
-                const currentSize = formData.resource_size || "SMALL";
-                const currentIndex = resourceSizes.indexOf(currentSize);
-                const safeIndex = currentIndex === -1 ? 0 : currentIndex;
-                const newIndex = key.leftArrow
-                    ? Math.max(0, safeIndex - 1)
-                    : Math.min(resourceSizes.length - 1, safeIndex + 1);
-                setFormData({
-                    ...formData,
-                    resource_size: resourceSizes[newIndex],
-                });
+            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");
             }
-            return;
         }
-    });
+        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") {
@@ -329,6 +336,9 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             if (formData.snapshot_id) {
                 createParams.snapshot_id = formData.snapshot_id;
             }
+            if (formData.network_policy_id) {
+                launchParameters.network_policy_id = formData.network_policy_id;
+            }
             if (Object.keys(launchParameters).length > 0) {
                 createParams.launch_parameters = launchParameters;
             }
@@ -344,11 +354,14 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     };
     // Result screen
     if (result) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SuccessMessage, { message: "Devbox created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Status: ", result.status] }) })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SuccessMessage, { message: "Devbox created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Status: ", result.status] }) })] }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Return to list" }] })] }));
     }
     // Error screen
     if (error) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] or [r] to retry \u2022 [q] or [esc] to cancel" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(NavigationTips, { tips: [
+                        { key: "Enter/r", label: "Retry" },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
     }
     // Creating screen
     if (creating) {
@@ -359,24 +372,14 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                     const isActive = currentField === field.key;
                     const fieldData = formData[field.key];
                     if (field.type === "action") {
-                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.success : colors.textDim, bold: isActive, children: [isActive ? figures.pointer : " ", " ", field.label] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to create]"] }))] }, field.key));
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: "[Enter to create]" }, field.key));
                     }
                     if (field.type === "text") {
-                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), isActive ? (_jsx(TextInput, { value: String(fieldData || ""), onChange: (value) => {
-                                        setFormData({ ...formData, [field.key]: value });
-                                    }, placeholder: field.key === "name"
-                                        ? "my-devbox"
-                                        : field.key === "keep_alive"
-                                            ? "3600"
-                                            : field.key === "blueprint_id"
-                                                ? "bp_xxx"
-                                                : field.key === "snapshot_id"
-                                                    ? "snap_xxx"
-                                                    : "" })) : (_jsx(Text, { color: colors.text, children: String(fieldData || "(empty)") }))] }, 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;
-                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":"] }), _jsxs(Text, { color: isActive ? colors.primary : colors.text, bold: isActive, children: [" ", value || "(none)"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", figures.arrowLeft, figures.arrowRight, " to change]"] }))] }, field.key));
+                        return (_jsx(FormSelect, { label: field.label, value: value || "", options: field.key === "architecture" ? architectures : resourceSizes, onChange: (newValue) => setFormData({ ...formData, [field.key]: newValue }), isActive: isActive }, field.key));
                     }
                     if (field.type === "metadata") {
                         if (!inMetadataSection) {
@@ -413,5 +416,8 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                     }
                     return null;
                 }) }), formData.resource_size === "CUSTOM_SIZE" &&
-                validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: colors.error, paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: colors.error, dimColor: true, children: validateCustomResources() })] })), !inMetadataSection && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Create \u2022 [q] Cancel"] }) }))] }));
+                validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: colors.error, paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: colors.error, dimColor: true, children: validateCustomResources() })] })), !inMetadataSection && (_jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: "Create" },
+                    { key: "q", label: "Cancel" },
+                ] }))] }));
 };