@runloop/rl-cli 1.2.0 → 1.3.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,79 @@ 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");
     useInput((input, key) => {
         // Handle result screen
         if (result) {
@@ -98,22 +136,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         if (creating) {
             return;
         }
-        // Back to list
-        if (input === "q" || key.escape) {
-            onBack();
-            return;
-        }
-        // Submit form
-        if (input === "s" && key.ctrl) {
-            handleCreate();
-            return;
-        }
-        // Handle Enter on create field
-        if (currentField === "create" && key.return) {
-            handleCreate();
-            return;
-        }
-        // Handle metadata section
+        // 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"
@@ -213,14 +236,33 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             }
             return;
         }
-        // Now safe to get field from list
-        const field = fields[currentFieldIndex];
-        // Navigation
-        if (key.upArrow && currentFieldIndex > 0) {
+        // Back to list (only when not in metadata section)
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Submit form
+        if (input === "s" && key.ctrl) {
+            handleCreate();
+            return;
+        }
+        // Handle Enter on create field
+        if (currentField === "create" && key.return) {
+            handleCreate();
+            return;
+        }
+        // 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 && currentFieldIndex < fields.length - 1) {
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
             setCurrentField(fields[currentFieldIndex + 1].key);
             return;
         }
@@ -230,33 +272,6 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setSelectedMetadataIndex(0); // Start at "add new" row
             return;
         }
-        // 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 (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],
-                });
-            }
-            return;
-        }
     });
     // Validate custom resource configuration
     const validateCustomResources = () => {
@@ -329,6 +344,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 +362,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 +380,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 }), 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 +424,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" },
+                ] }))] }));
 };