@runloop/rl-cli 1.9.0 → 1.10.0

package/dist/components/DevboxCreatePage.js

@@ -20,6 +20,8 @@ import { listBlueprints } from "../services/blueprintService.js";
 import { listSnapshots } from "../services/snapshotService.js";
 import { listNetworkPolicies } from "../services/networkPolicyService.js";
 import { listGatewayConfigs } from "../services/gatewayConfigService.js";
+import { SecretCreatePage } from "./SecretCreatePage.js";
+import { GatewayConfigCreatePage } from "./GatewayConfigCreatePage.js";
 const sourceTypes = ["blueprint", "snapshot"];
 const architectures = ["arm64", "x86_64"];
 const resourceSizes = [
@@ -31,6 +33,7 @@ const resourceSizes = [
     "XX_LARGE",
     "CUSTOM_SIZE",
 ];
+const tunnelAuthModes = ["none", "open", "authenticated"];
 export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initialSnapshotId, }) => {
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
@@ -45,6 +48,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         blueprint_id: initialBlueprintId || "",
         snapshot_id: initialSnapshotId || "",
         network_policy_id: "",
+        tunnel_auth_mode: "none",
         gateways: [],
     });
     const [metadataKey, setMetadataKey] = React.useState("");
@@ -68,9 +72,16 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     const [showSecretPicker, setShowSecretPicker] = React.useState(false);
     const [inGatewaySection, setInGatewaySection] = React.useState(false);
     const [gatewayEnvPrefix, setGatewayEnvPrefix] = React.useState("");
-    const [gatewayInputMode, setGatewayInputMode] = React.useState(null);
     const [selectedGatewayIndex, setSelectedGatewayIndex] = React.useState(0);
     const [pendingGateway, setPendingGateway] = React.useState(null);
+    const [pendingSecret, setPendingSecret] = React.useState(null);
+    const [showInlineSecretCreate, setShowInlineSecretCreate] = React.useState(false);
+    const [showInlineGatewayConfigCreate, setShowInlineGatewayConfigCreate] = React.useState(false);
+    // Gateway attach form: when active, shows a mini-form to configure a gateway
+    const [gatewayFormActive, setGatewayFormActive] = React.useState(false);
+    const [gatewayFormField, setGatewayFormField] = React.useState("attach");
+    const gatewayFormFields = ["attach", "gateway", "envName", "secret"];
+    const gatewayFormFieldIndex = gatewayFormFields.indexOf(gatewayFormField);
     const baseFields = [
         { key: "create", label: "Devbox Create", type: "action" },
         { key: "name", label: "Name", type: "text", placeholder: "my-devbox" },
@@ -119,9 +130,15 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             type: "picker",
             placeholder: "Select a network policy...",
         },
+        {
+            key: "tunnel_auth_mode",
+            label: "Tunnel (optional)",
+            type: "select",
+            placeholder: "none",
+        },
         {
             key: "gateways",
-            label: "Gateways (optional)",
+            label: "AI Gateway Configs (optional)",
             type: "gateways",
             placeholder: "Configure API credential proxying...",
         },
@@ -134,6 +151,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");
+    const handleTunnelNav = useFormSelectNavigation(formData.tunnel_auth_mode, tunnelAuthModes, (value) => setFormData({ ...formData, tunnel_auth_mode: value }), currentField === "tunnel_auth_mode");
     const handleSourceTypeNav = useFormSelectNavigation(sourceTypeToggle, sourceTypes, (value) => setSourceTypeToggle(value), currentField === "source");
     // Main form input handler - active when not in metadata section
     useInput((input, key) => {
@@ -228,6 +246,8 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             return;
         if (handleResourceSizeNav(input, key))
             return;
+        if (handleTunnelNav(input, key))
+            return;
         if (handleSourceTypeNav(input, key))
             return;
         // Navigation (up/down arrows and tab/shift+tab)
@@ -247,7 +267,9 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             !showSnapshotPicker &&
             !showNetworkPolicyPicker &&
             !showGatewayPicker &&
-            !showSecretPicker,
+            !showSecretPicker &&
+            !showInlineSecretCreate &&
+            !showInlineGatewayConfigCreate,
     });
     // Handle blueprint selection
     const handleBlueprintSelect = React.useCallback((blueprints) => {
@@ -290,10 +312,21 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     const handleGatewaySelect = React.useCallback((configs) => {
         if (configs.length > 0) {
             const config = configs[0];
-            setPendingGateway({ id: config.id, name: config.name || config.id });
+            const configName = config.name || config.id;
+            setPendingGateway({
+                id: config.id,
+                name: configName,
+                endpoint: config.endpoint || "",
+            });
+            // Auto-fill ENV name from config name (uppercase, underscores, no GWS_ prefix)
+            const autoEnvName = configName
+                .toUpperCase()
+                .replace(/[^A-Z0-9]+/g, "_")
+                .replace(/^_|_$/g, "");
+            setGatewayEnvPrefix(autoEnvName);
             setShowGatewayPicker(false);
-            // Now show secret picker
-            setShowSecretPicker(true);
+            // Move to env name field in the form
+            setGatewayFormField("envName");
         }
         else {
             setShowGatewayPicker(false);
@@ -301,26 +334,38 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     }, []);
     // Handle secret selection for gateway
     const handleSecretSelect = React.useCallback((secrets) => {
-        if (secrets.length > 0 && pendingGateway && gatewayEnvPrefix) {
+        if (secrets.length > 0) {
             const secret = secrets[0];
-            const newGateway = {
-                envPrefix: gatewayEnvPrefix,
-                gateway: pendingGateway.id,
-                gatewayName: pendingGateway.name,
-                secret: secret.id,
-                secretName: secret.name || secret.id,
-            };
-            setFormData((prev) => ({
-                ...prev,
-                gateways: [...prev.gateways, newGateway],
-            }));
+            setPendingSecret({ id: secret.id, name: secret.name || secret.id });
         }
         setShowSecretPicker(false);
+        // Return to the form at the attach button
+        setGatewayFormField("attach");
+    }, []);
+    // Attach the configured gateway to the devbox
+    const handleAttachGateway = React.useCallback(() => {
+        if (!pendingGateway || !pendingSecret || !gatewayEnvPrefix.trim())
+            return;
+        const newGateway = {
+            envPrefix: gatewayEnvPrefix.trim(),
+            gateway: pendingGateway.id,
+            gatewayName: pendingGateway.name,
+            gatewayEndpoint: pendingGateway.endpoint,
+            secret: pendingSecret.id,
+            secretName: pendingSecret.name,
+        };
+        setFormData((prev) => ({
+            ...prev,
+            gateways: [...prev.gateways, newGateway],
+        }));
+        // Reset form
         setPendingGateway(null);
+        setPendingSecret(null);
         setGatewayEnvPrefix("");
-        setGatewayInputMode(null);
+        setGatewayFormActive(false);
+        setGatewayFormField("attach");
         setSelectedGatewayIndex(0);
-    }, [pendingGateway, gatewayEnvPrefix]);
+    }, [pendingGateway, pendingSecret, gatewayEnvPrefix]);
     // Handle clearing source
     const handleClearSource = React.useCallback(() => {
         setFormData((prev) => ({ ...prev, blueprint_id: "", snapshot_id: "" }));
@@ -418,24 +463,70 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     }, { isActive: inMetadataSection });
     // Gateway section input handler - active when in gateway section
     useInput((input, key) => {
-        const gatewayCount = formData.gateways.length;
-        const maxIndex = gatewayCount + 1; // Add new + existing items + Done
-        // Handle input mode (typing env prefix)
-        if (gatewayInputMode === "envPrefix") {
-            if (key.return && gatewayEnvPrefix.trim()) {
-                // Open gateway picker
-                setGatewayInputMode(null);
-                setShowGatewayPicker(true);
+        // === Gateway attach form mode ===
+        if (gatewayFormActive) {
+            // envName field is a text input - only handle navigation keys
+            if (gatewayFormField === "envName") {
+                if (key.upArrow || (key.tab && key.shift)) {
+                    setGatewayFormField("gateway");
+                    return;
+                }
+                if (key.downArrow || (key.tab && !key.shift)) {
+                    setGatewayFormField("secret");
+                    return;
+                }
+                if (key.escape) {
+                    // Cancel the form
+                    setPendingGateway(null);
+                    setPendingSecret(null);
+                    setGatewayEnvPrefix("");
+                    setGatewayFormActive(false);
+                    setGatewayFormField("attach");
+                    return;
+                }
+                // Let TextInput handle other keys
                 return;
             }
-            else if (key.escape) {
+            // Navigation between form fields
+            if (key.upArrow || (key.tab && key.shift)) {
+                const prevIdx = Math.max(0, gatewayFormFieldIndex - 1);
+                setGatewayFormField(gatewayFormFields[prevIdx]);
+                return;
+            }
+            if (key.downArrow || (key.tab && !key.shift)) {
+                const nextIdx = Math.min(gatewayFormFields.length - 1, gatewayFormFieldIndex + 1);
+                setGatewayFormField(gatewayFormFields[nextIdx]);
+                return;
+            }
+            // Enter on specific fields
+            if (key.return) {
+                if (gatewayFormField === "gateway") {
+                    setShowGatewayPicker(true);
+                    return;
+                }
+                if (gatewayFormField === "secret") {
+                    setShowSecretPicker(true);
+                    return;
+                }
+                if (gatewayFormField === "attach") {
+                    handleAttachGateway();
+                    return;
+                }
+            }
+            if (key.escape || input === "q") {
+                // Cancel the form
+                setPendingGateway(null);
+                setPendingSecret(null);
                 setGatewayEnvPrefix("");
-                setGatewayInputMode(null);
+                setGatewayFormActive(false);
+                setGatewayFormField("attach");
                 return;
             }
             return;
         }
-        // Navigation mode in gateway section
+        // === List navigation mode (existing gateways + attach/done) ===
+        const gatewayCount = formData.gateways.length;
+        const maxIndex = gatewayCount + 1; // Attach + existing items + Done
         if (key.upArrow && selectedGatewayIndex > 0) {
             setSelectedGatewayIndex(selectedGatewayIndex - 1);
         }
@@ -444,22 +535,23 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         }
         else if (key.return) {
             if (selectedGatewayIndex === 0) {
-                // Add new gateway - start with env prefix input
+                // Open the attach form
+                setPendingGateway(null);
+                setPendingSecret(null);
                 setGatewayEnvPrefix("");
-                setGatewayInputMode("envPrefix");
+                setGatewayFormActive(true);
+                setGatewayFormField("gateway");
             }
             else if (selectedGatewayIndex === maxIndex) {
                 // Done
                 setInGatewaySection(false);
                 setSelectedGatewayIndex(0);
-                setGatewayEnvPrefix("");
-                setGatewayInputMode(null);
             }
         }
         else if ((input === "d" || key.delete) &&
             selectedGatewayIndex >= 1 &&
             selectedGatewayIndex <= gatewayCount) {
-            // Delete gateway at index
+            // Remove gateway at index
             const indexToDelete = selectedGatewayIndex - 1;
             const newGateways = [...formData.gateways];
             newGateways.splice(indexToDelete, 1);
@@ -472,10 +564,14 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         else if (key.escape || input === "q") {
             setInGatewaySection(false);
             setSelectedGatewayIndex(0);
-            setGatewayEnvPrefix("");
-            setGatewayInputMode(null);
         }
-    }, { isActive: inGatewaySection && !showGatewayPicker && !showSecretPicker });
+    }, {
+        isActive: inGatewaySection &&
+            !showGatewayPicker &&
+            !showSecretPicker &&
+            !showInlineSecretCreate &&
+            !showInlineGatewayConfigCreate,
+    });
     // Validate custom resource configuration
     const validateCustomResources = () => {
         if (formData.resource_size !== "CUSTOM_SIZE") {
@@ -564,6 +660,12 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 }
                 createParams.gateways = gateways;
             }
+            // Add tunnel configuration if not "none"
+            if (formData.tunnel_auth_mode !== "none") {
+                createParams.tunnel = {
+                    auth_mode: formData.tunnel_auth_mode,
+                };
+            }
             const devbox = await client.devboxes.create(createParams);
             setResult(devbox);
         }
@@ -698,15 +800,23 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 return "Deny All";
             return `Custom (${egress.allowed_hostnames?.length || 0})`;
         };
-        const networkPolicyColumns = [
-            createTextColumn("id", "ID", (policy) => policy.id, {
-                width: 25,
-                color: colors.idColor,
-            }),
-            createTextColumn("name", "Name", (policy) => policy.name || "", { width: 25 }),
-            createTextColumn("egress", "Egress", (policy) => getEgressLabel(policy.egress), { width: 15 }),
-            createTextColumn("created", "Created", (policy) => policy.create_time_ms ? formatTimeAgo(policy.create_time_ms) : "", { width: 18, color: colors.textDim }),
-        ];
+        const buildNetworkPolicyColumns = (tw) => {
+            const fixedWidth = 6;
+            const idWidth = 25;
+            const egressWidth = 15;
+            const timeWidth = 18;
+            const baseWidth = fixedWidth + idWidth + egressWidth + timeWidth;
+            const nameWidth = Math.min(80, Math.max(15, tw - baseWidth));
+            return [
+                createTextColumn("id", "ID", (policy) => policy.id, {
+                    width: idWidth + 1,
+                    color: colors.idColor,
+                }),
+                createTextColumn("name", "Name", (policy) => policy.name || "", { width: nameWidth }),
+                createTextColumn("egress", "Egress", (policy) => getEgressLabel(policy.egress), { width: egressWidth }),
+                createTextColumn("created", "Created", (policy) => policy.create_time_ms ? formatTimeAgo(policy.create_time_ms) : "", { width: timeWidth, color: colors.textDim }),
+            ];
+        };
         return (_jsx(ResourcePicker, { config: {
                 title: "Select Network Policy",
                 fetchPage: async (params) => {
@@ -723,7 +833,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 },
                 getItemId: (policy) => policy.id,
                 getItemLabel: (policy) => policy.name || policy.id,
-                columns: networkPolicyColumns,
+                columns: buildNetworkPolicyColumns,
                 mode: "single",
                 emptyMessage: "No network policies found",
                 searchPlaceholder: "Search network policies...",
@@ -734,19 +844,57 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 ],
             }, onSelect: handleNetworkPolicySelect, onCancel: () => setShowNetworkPolicyPicker(false), initialSelected: formData.network_policy_id ? [formData.network_policy_id] : [] }));
     }
+    // Inline gateway config creation screen (from gateway attach flow)
+    if (showInlineGatewayConfigCreate) {
+        return (_jsx(GatewayConfigCreatePage, { onBack: () => {
+                setShowInlineGatewayConfigCreate(false);
+                // Return to gateway picker
+                setShowGatewayPicker(true);
+            }, onCreate: (config) => {
+                setShowInlineGatewayConfigCreate(false);
+                // Auto-select the newly created gateway config
+                const configName = config.name || config.id;
+                setPendingGateway({
+                    id: config.id,
+                    name: configName,
+                    endpoint: config.endpoint || "",
+                });
+                const autoEnvName = configName
+                    .toUpperCase()
+                    .replace(/[^A-Z0-9]+/g, "_")
+                    .replace(/^_|_$/g, "");
+                setGatewayEnvPrefix(autoEnvName);
+                setShowGatewayPicker(false);
+                setGatewayFormField("envName");
+            } }));
+    }
     // Gateway config picker screen
     if (showGatewayPicker) {
-        const gatewayColumns = [
-            createTextColumn("id", "ID", (config) => config.id, {
-                width: 25,
-                color: colors.idColor,
-            }),
-            createTextColumn("name", "Name", (config) => config.name || "", { width: 25 }),
-            createTextColumn("endpoint", "Endpoint", (config) => config.endpoint || "", { width: 30, color: colors.textDim }),
-            createTextColumn("created", "Created", (config) => config.create_time_ms ? formatTimeAgo(config.create_time_ms) : "", { width: 18, color: colors.textDim }),
-        ];
+        const buildGatewayColumns = (tw) => {
+            const fixedWidth = 6;
+            const idWidth = 25;
+            const timeWidth = 20;
+            const showEndpoint = tw >= 100;
+            const endpointWidth = Math.max(20, tw >= 140 ? 40 : 25);
+            const baseWidth = fixedWidth + idWidth + timeWidth;
+            const optionalWidth = showEndpoint ? endpointWidth : 0;
+            const nameWidth = Math.min(80, Math.max(15, tw - baseWidth - optionalWidth));
+            return [
+                createTextColumn("id", "ID", (config) => config.id, {
+                    width: idWidth + 1,
+                    color: colors.idColor,
+                }),
+                createTextColumn("name", "Name", (config) => config.name || "", { width: nameWidth }),
+                ...(showEndpoint
+                    ? [
+                        createTextColumn("endpoint", "Endpoint", (config) => config.endpoint || "", { width: endpointWidth, color: colors.textDim }),
+                    ]
+                    : []),
+                createTextColumn("created", "Created", (config) => config.create_time_ms ? formatTimeAgo(config.create_time_ms) : "", { width: timeWidth, color: colors.textDim }),
+            ];
+        };
         return (_jsx(ResourcePicker, { config: {
-                title: "Select Gateway Config",
+                title: "Select AI Gateway Config",
                 fetchPage: async (params) => {
                     const result = await listGatewayConfigs({
                         limit: params.limit,
@@ -761,66 +909,111 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                 },
                 getItemId: (config) => config.id,
                 getItemLabel: (config) => config.name || config.id,
-                columns: gatewayColumns,
+                columns: buildGatewayColumns,
                 mode: "single",
-                emptyMessage: "No gateway configs found",
-                searchPlaceholder: "Search gateway configs...",
+                emptyMessage: "No AI gateway configs found",
+                searchPlaceholder: "Search AI gateway configs...",
                 breadcrumbItems: [
                     { label: "Devboxes" },
                     { label: "Create" },
-                    { label: `Gateway: ${gatewayEnvPrefix}`, active: true },
+                    { label: "Attach AI Gateway Config" },
+                    { label: "Select Config", active: true },
                 ],
+                onCreateNew: () => {
+                    setShowGatewayPicker(false);
+                    setShowInlineGatewayConfigCreate(true);
+                },
+                createNewLabel: "Create AI gateway config",
             }, onSelect: handleGatewaySelect, onCancel: () => {
                 setShowGatewayPicker(false);
-                setGatewayEnvPrefix("");
-                setGatewayInputMode(null);
+                // Return to the form at the gateway field
+                setGatewayFormField("gateway");
             }, initialSelected: [] }, "gateway-config-picker"));
     }
+    // Inline secret creation screen (from gateway flow)
+    if (showInlineSecretCreate) {
+        return (_jsx(SecretCreatePage, { onBack: () => {
+                setShowInlineSecretCreate(false);
+                // Return to secret picker
+                setShowSecretPicker(true);
+            }, onCreate: (secret) => {
+                setShowInlineSecretCreate(false);
+                // Store as pending secret and return to the attach form
+                setPendingSecret({
+                    id: secret.id,
+                    name: secret.name || secret.id,
+                });
+                setShowSecretPicker(false);
+                setGatewayFormField("attach");
+            } }));
+    }
     // Secret picker screen (for gateway)
     if (showSecretPicker) {
-        const secretColumns = [
-            createTextColumn("id", "ID", (secret) => secret.id, {
-                width: 25,
-                color: colors.idColor,
-            }),
-            createTextColumn("name", "Name", (secret) => secret.name || "", { width: 30 }),
-            createTextColumn("created", "Created", (secret) => secret.create_time_ms ? formatTimeAgo(secret.create_time_ms) : "", { width: 18, color: colors.textDim }),
-        ];
+        const buildSecretColumns = (tw) => {
+            const fixedWidth = 6;
+            const idWidth = 30;
+            const timeWidth = 20;
+            const baseWidth = fixedWidth + idWidth + timeWidth;
+            const nameWidth = Math.min(80, Math.max(15, tw - baseWidth));
+            return [
+                createTextColumn("id", "ID", (secret) => secret.id, {
+                    width: idWidth + 1,
+                    color: colors.idColor,
+                }),
+                createTextColumn("name", "Name", (secret) => secret.name || "", { width: nameWidth }),
+                createTextColumn("created", "Created", (secret) => secret.create_time_ms ? formatTimeAgo(secret.create_time_ms) : "", { width: timeWidth, color: colors.textDim }),
+            ];
+        };
         return (_jsx(ResourcePicker, { config: {
                 title: "Select Secret for Gateway",
                 fetchPage: async (params) => {
                     const client = getClient();
-                    // Secrets API doesn't support cursor pagination, just limit
+                    // Secrets API doesn't support cursor pagination, so we fetch all
+                    // and do client-side pagination by slicing to the requested page
                     const page = await client.secrets.list({
-                        limit: params.limit,
+                        limit: 1000,
                     });
+                    const allSecrets = (page.secrets || []).map((s) => ({
+                        id: s.id,
+                        name: s.name,
+                        create_time_ms: s.create_time_ms,
+                    }));
+                    // Client-side cursor pagination
+                    let startIdx = 0;
+                    if (params.startingAt) {
+                        const cursorIdx = allSecrets.findIndex((s) => s.id === params.startingAt);
+                        if (cursorIdx >= 0) {
+                            startIdx = cursorIdx + 1;
+                        }
+                    }
+                    const sliced = allSecrets.slice(startIdx, startIdx + params.limit);
                     return {
-                        items: (page.secrets || []).map((s) => ({
-                            id: s.id,
-                            name: s.name,
-                            create_time_ms: s.create_time_ms,
-                        })),
-                        hasMore: false, // Secrets API doesn't support pagination
-                        totalCount: page.total_count || 0,
+                        items: sliced,
+                        hasMore: startIdx + params.limit < allSecrets.length,
+                        totalCount: allSecrets.length,
                     };
                 },
                 getItemId: (secret) => secret.id,
                 getItemLabel: (secret) => secret.name || secret.id,
-                columns: secretColumns,
+                columns: buildSecretColumns,
                 mode: "single",
                 emptyMessage: "No secrets found",
                 searchPlaceholder: "Search secrets...",
                 breadcrumbItems: [
                     { label: "Devboxes" },
                     { label: "Create" },
-                    { label: `Gateway: ${gatewayEnvPrefix}` },
+                    { label: "Attach AI Gateway Config" },
                     { label: "Select Secret", active: true },
                 ],
+                onCreateNew: () => {
+                    setShowSecretPicker(false);
+                    setShowInlineSecretCreate(true);
+                },
+                createNewLabel: "Create secret",
             }, onSelect: handleSecretSelect, onCancel: () => {
                 setShowSecretPicker(false);
-                setPendingGateway(null);
-                setGatewayEnvPrefix("");
-                setGatewayInputMode(null);
+                // Return to the form at the secret field
+                setGatewayFormField("secret");
             }, initialSelected: [] }, "secret-picker"));
     }
     // Form screen
@@ -835,7 +1028,20 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                     }
                     if (field.type === "select") {
                         const value = fieldData;
-                        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));
+                        let options;
+                        if (field.key === "architecture") {
+                            options = architectures;
+                        }
+                        else if (field.key === "resource_size") {
+                            options = resourceSizes;
+                        }
+                        else if (field.key === "tunnel_auth_mode") {
+                            options = tunnelAuthModes;
+                        }
+                        else {
+                            options = [];
+                        }
+                        return (_jsx(FormSelect, { label: field.label, value: value || "", options: options, onChange: (newValue) => setFormData({ ...formData, [field.key]: newValue }), isActive: isActive }, field.key));
                     }
                     if (field.type === "source") {
                         // Check if either blueprint or snapshot is selected
@@ -902,34 +1108,59 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                     if (field.type === "gateways") {
                         if (!inGatewaySection) {
                             // Collapsed view
-                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.text, children: [formData.gateways.length, " gateway(s)"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), formData.gateways.length > 0 && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: formData.gateways.map((gw, idx) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointer, " ", gw.envPrefix, ": ", gw.gatewayName, " \u2192", " ", gw.secretName] }, idx))) }))] }, field.key));
+                            return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.text, children: [formData.gateways.length, " configured"] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), formData.gateways.length > 0 && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: formData.gateways.map((gw, idx) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointer, " ENV: ", gw.envPrefix, " | Config:", " ", gw.gatewayName, " (", gw.gatewayEndpoint, ") | Secret:", " ", gw.secretName] }, idx))) }))] }, field.key));
                         }
                         // Expanded gateway section view
                         const gatewayCount = formData.gateways.length;
                         const maxGatewayIndex = gatewayCount + 1;
-                        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " Manage Gateway Configurations"] }), gatewayInputMode === "envPrefix" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: colors.success, paddingX: 1, children: [_jsx(Text, { color: colors.success, bold: true, children: "Adding New Gateway" }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.primary, children: ["Env Prefix (e.g., GWS_ANTHROPIC):", " "] }), _jsx(TextInput, { value: gatewayEnvPrefix || "", onChange: setGatewayEnvPrefix, placeholder: "GWS_ANTHROPIC" })] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press Enter to select gateway config" })] })), !gatewayInputMode && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedGatewayIndex === 0
+                        const canAttach = !!pendingGateway && !!pendingSecret && !!gatewayEnvPrefix.trim();
+                        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " Configure AI Gateway Configs for Devbox"] }), gatewayFormActive && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: colors.success, paddingX: 1, children: [_jsx(Text, { color: colors.success, bold: true, children: "Attach AI Gateway Config" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: gatewayFormField === "attach"
+                                                        ? canAttach
+                                                            ? colors.success
+                                                            : colors.primary
+                                                        : colors.textDim, children: [gatewayFormField === "attach"
+                                                            ? figures.pointer
+                                                            : " ", " "] }), _jsx(Text, { color: gatewayFormField === "attach"
+                                                        ? canAttach
+                                                            ? colors.success
+                                                            : colors.primary
+                                                        : colors.textDim, bold: gatewayFormField === "attach", children: canAttach
+                                                        ? `${figures.tick} Attach Gateway`
+                                                        : `${figures.ellipsis} Attach Gateway (fill fields below)` })] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: gatewayFormField === "gateway"
+                                                        ? colors.primary
+                                                        : colors.textDim, children: [gatewayFormField === "gateway" ? figures.pointer : " ", " ", "AI Gateway Config:", " "] }), pendingGateway ? (_jsxs(Text, { color: colors.success, children: [pendingGateway.name, " ", _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", pendingGateway.endpoint, ")"] })] })) : (_jsx(Text, { color: colors.textDim, dimColor: true, children: "(none selected)" })), gatewayFormField === "gateway" && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to select]"] }))] }), _jsxs(Box, { children: [_jsxs(Text, { color: gatewayFormField === "envName"
+                                                        ? colors.primary
+                                                        : colors.textDim, children: [gatewayFormField === "envName" ? figures.pointer : " ", " ", "ENV Name:", " "] }), gatewayFormField === "envName" ? (_jsx(TextInput, { value: gatewayEnvPrefix || "", onChange: setGatewayEnvPrefix, placeholder: "ANTHROPIC" })) : (_jsx(Text, { color: gatewayEnvPrefix ? colors.text : colors.textDim, dimColor: !gatewayEnvPrefix, children: gatewayEnvPrefix || "(auto-filled from config)" }))] }), _jsxs(Box, { children: [_jsxs(Text, { color: gatewayFormField === "secret"
+                                                        ? colors.primary
+                                                        : colors.textDim, children: [gatewayFormField === "secret" ? figures.pointer : " ", " ", "Secret:", " "] }), pendingSecret ? (_jsx(Text, { color: colors.success, children: pendingSecret.name })) : (_jsx(Text, { color: colors.textDim, dimColor: true, children: "(none selected)" })), gatewayFormField === "secret" && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to select]"] }))] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: gatewayFormField === "envName"
+                                                    ? `Type to edit • ${figures.arrowUp}${figures.arrowDown} Navigate • [esc] Cancel`
+                                                    : gatewayFormField === "attach"
+                                                        ? canAttach
+                                                            ? `[Enter] Attach • ${figures.arrowUp}${figures.arrowDown} Navigate • [esc] Cancel`
+                                                            : `${figures.arrowUp}${figures.arrowDown} Navigate • [esc] Cancel`
+                                                        : `[Enter] Select • ${figures.arrowUp}${figures.arrowDown} Navigate • [esc] Cancel` }) })] })), !gatewayFormActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedGatewayIndex === 0
                                                         ? colors.primary
                                                         : colors.textDim, children: [selectedGatewayIndex === 0
                                                             ? figures.pointer
                                                             : " ", " "] }), _jsx(Text, { color: selectedGatewayIndex === 0
                                                         ? colors.success
-                                                        : colors.textDim, bold: selectedGatewayIndex === 0, children: "+ Add new gateway" })] }), gatewayCount > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: formData.gateways.map((gw, index) => {
+                                                        : colors.textDim, bold: selectedGatewayIndex === 0, children: "+ Attach AI gateway config" })] }), gatewayCount > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: formData.gateways.map((gw, index) => {
                                                 const itemIndex = index + 1;
                                                 const isGatewaySelected = selectedGatewayIndex === itemIndex;
-                                                return (_jsxs(Box, { children: [_jsxs(Text, { color: isGatewaySelected
-                                                                ? colors.primary
-                                                                : colors.textDim, children: [isGatewaySelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isGatewaySelected
-                                                                ? colors.primary
-                                                                : colors.textDim, bold: isGatewaySelected, children: [gw.envPrefix, ": ", gw.gatewayName, " \u2192", " ", gw.secretName] })] }, gw.envPrefix));
+                                                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: isGatewaySelected
+                                                                        ? colors.primary
+                                                                        : colors.textDim, children: [isGatewaySelected
+                                                                            ? figures.pointer
+                                                                            : " ", " "] }), _jsxs(Text, { color: isGatewaySelected
+                                                                        ? colors.primary
+                                                                        : colors.textDim, bold: isGatewaySelected, children: ["ENV: ", gw.envPrefix] })] }), _jsxs(Box, { marginLeft: 3, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Gateway Config: ", gw.gatewayName, " (", gw.gateway, ")"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Endpoint: ", gw.gatewayEndpoint] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Secret: ", gw.secretName, " (", gw.secret, ")"] })] })] }, gw.envPrefix));
                                             }) })), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedGatewayIndex === maxGatewayIndex
                                                         ? colors.primary
                                                         : colors.textDim, children: [selectedGatewayIndex === maxGatewayIndex
                                                             ? figures.pointer
                                                             : " ", " "] }), _jsxs(Text, { color: selectedGatewayIndex === maxGatewayIndex
                                                         ? colors.success
-                                                        : colors.textDim, bold: selectedGatewayIndex === maxGatewayIndex, children: [figures.tick, " Done"] })] })] })), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: gatewayInputMode
-                                            ? `[Enter] Select gateway • [esc] Cancel`
-                                            : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedGatewayIndex === 0 ? "Add" : selectedGatewayIndex === maxGatewayIndex ? "Done" : "Select"} • [d] Delete • [esc] Back` }) })] }, field.key));
+                                                        : colors.textDim, bold: selectedGatewayIndex === maxGatewayIndex, children: [figures.tick, " Done"] })] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedGatewayIndex === 0 ? "Attach" : selectedGatewayIndex === maxGatewayIndex ? "Done" : "Select"} • [d] Remove • [esc] Back` }) })] }))] }, field.key));
                     }
                     return null;
                 }) }), formData.resource_size === "CUSTOM_SIZE" &&