@runloop/rl-cli 1.7.1 → 1.9.0

package/dist/components/DevboxCreatePage.js

@@ -10,9 +10,17 @@ import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { NavigationTips } from "./NavigationTips.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
+import { ResourcePicker, createTextColumn } from "./ResourcePicker.js";
+import { formatTimeAgo } from "./ResourceListView.js";
+import { getStatusDisplay } from "./StatusBadge.js";
 import { FormTextInput, FormSelect, FormActionButton, useFormSelectNavigation, } from "./form/index.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { listBlueprints } from "../services/blueprintService.js";
+import { listSnapshots } from "../services/snapshotService.js";
+import { listNetworkPolicies } from "../services/networkPolicyService.js";
+import { listGatewayConfigs } from "../services/gatewayConfigService.js";
+const sourceTypes = ["blueprint", "snapshot"];
 const architectures = ["arm64", "x86_64"];
 const resourceSizes = [
     "X_SMALL",
@@ -37,6 +45,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
         blueprint_id: initialBlueprintId || "",
         snapshot_id: initialSnapshotId || "",
         network_policy_id: "",
+        gateways: [],
     });
     const [metadataKey, setMetadataKey] = React.useState("");
     const [metadataValue, setMetadataValue] = React.useState("");
@@ -46,6 +55,22 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     const [creating, setCreating] = React.useState(false);
     const [result, setResult] = React.useState(null);
     const [error, setError] = React.useState(null);
+    // Source picker states (toggle between blueprint/snapshot)
+    const [sourceTypeToggle, setSourceTypeToggle] = React.useState(initialSnapshotId ? "snapshot" : "blueprint");
+    const [showBlueprintPicker, setShowBlueprintPicker] = React.useState(false);
+    const [showSnapshotPicker, setShowSnapshotPicker] = React.useState(false);
+    const [showNetworkPolicyPicker, setShowNetworkPolicyPicker] = React.useState(false);
+    const [selectedBlueprintName, setSelectedBlueprintName] = React.useState("");
+    const [selectedSnapshotName, setSelectedSnapshotName] = React.useState("");
+    const [selectedNetworkPolicyName, setSelectedNetworkPolicyName] = React.useState("");
+    // Gateway picker states
+    const [showGatewayPicker, setShowGatewayPicker] = React.useState(false);
+    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 baseFields = [
         { key: "create", label: "Devbox Create", type: "action" },
         { key: "name", label: "Name", type: "text", placeholder: "my-devbox" },
@@ -83,22 +108,22 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             placeholder: "3600",
         },
         {
-            key: "blueprint_id",
-            label: "Blueprint ID (optional)",
-            type: "text",
-            placeholder: "bpt_xxx",
+            key: "source",
+            label: "Source (optional)",
+            type: "source",
+            placeholder: "Select Blueprint or Snapshot...",
         },
         {
-            key: "snapshot_id",
-            label: "Snapshot ID (optional)",
-            type: "text",
-            placeholder: "snp_xxx",
+            key: "network_policy_id",
+            label: "Network Policy (optional)",
+            type: "picker",
+            placeholder: "Select a network policy...",
         },
         {
-            key: "network_policy_id",
-            label: "Network Policy ID (optional)",
-            type: "text",
-            placeholder: "np_xxx",
+            key: "gateways",
+            label: "Gateways (optional)",
+            type: "gateways",
+            placeholder: "Configure API credential proxying...",
         },
         { key: "metadata", label: "Metadata (optional)", type: "metadata" },
     ];
@@ -109,6 +134,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 handleSourceTypeNav = useFormSelectNavigation(sourceTypeToggle, sourceTypes, (value) => setSourceTypeToggle(value), currentField === "source");
     // Main form input handler - active when not in metadata section
     useInput((input, key) => {
         // Handle result screen
@@ -155,6 +181,43 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setSelectedMetadataIndex(0);
             return;
         }
+        // Enter key on gateways field to enter gateway section
+        if (currentField === "gateways" && key.return) {
+            setInGatewaySection(true);
+            setSelectedGatewayIndex(0);
+            return;
+        }
+        // Enter key on source field to open the appropriate picker
+        if (currentField === "source" && key.return) {
+            // If something is already selected, open that type's picker to change it
+            const hasBlueprint = !!(selectedBlueprintName || formData.blueprint_id);
+            const hasSnapshot = !!(selectedSnapshotName || formData.snapshot_id);
+            if (hasBlueprint) {
+                setShowBlueprintPicker(true);
+            }
+            else if (hasSnapshot) {
+                setShowSnapshotPicker(true);
+            }
+            else {
+                // Nothing selected, use the toggle value
+                if (sourceTypeToggle === "blueprint") {
+                    setShowBlueprintPicker(true);
+                }
+                else {
+                    setShowSnapshotPicker(true);
+                }
+            }
+            return;
+        }
+        // Delete key on source field to clear selection
+        if (currentField === "source" && (input === "d" || key.delete)) {
+            handleClearSource();
+            return;
+        }
+        if (currentField === "network_policy_id" && key.return) {
+            setShowNetworkPolicyPicker(true);
+            return;
+        }
         // Handle Enter on any field to submit
         if (key.return) {
             handleCreate();
@@ -165,6 +228,8 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             return;
         if (handleResourceSizeNav(input, key))
             return;
+        if (handleSourceTypeNav(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);
@@ -175,7 +240,93 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setCurrentField(fields[currentFieldIndex + 1].key);
             return;
         }
-    }, { isActive: !inMetadataSection });
+    }, {
+        isActive: !inMetadataSection &&
+            !inGatewaySection &&
+            !showBlueprintPicker &&
+            !showSnapshotPicker &&
+            !showNetworkPolicyPicker &&
+            !showGatewayPicker &&
+            !showSecretPicker,
+    });
+    // Handle blueprint selection
+    const handleBlueprintSelect = React.useCallback((blueprints) => {
+        if (blueprints.length > 0) {
+            const blueprint = blueprints[0];
+            setFormData((prev) => ({
+                ...prev,
+                blueprint_id: blueprint.id,
+                snapshot_id: "",
+            }));
+            setSelectedBlueprintName(blueprint.name || blueprint.id);
+            setSelectedSnapshotName("");
+        }
+        setShowBlueprintPicker(false);
+    }, []);
+    // Handle snapshot selection
+    const handleSnapshotSelect = React.useCallback((snapshots) => {
+        if (snapshots.length > 0) {
+            const snapshot = snapshots[0];
+            setFormData((prev) => ({
+                ...prev,
+                snapshot_id: snapshot.id,
+                blueprint_id: "",
+            }));
+            setSelectedSnapshotName(snapshot.name || snapshot.id);
+            setSelectedBlueprintName("");
+        }
+        setShowSnapshotPicker(false);
+    }, []);
+    // Handle network policy selection
+    const handleNetworkPolicySelect = React.useCallback((policies) => {
+        if (policies.length > 0) {
+            const policy = policies[0];
+            setFormData((prev) => ({ ...prev, network_policy_id: policy.id }));
+            setSelectedNetworkPolicyName(policy.name || policy.id);
+        }
+        setShowNetworkPolicyPicker(false);
+    }, []);
+    // Handle gateway config selection
+    const handleGatewaySelect = React.useCallback((configs) => {
+        if (configs.length > 0) {
+            const config = configs[0];
+            setPendingGateway({ id: config.id, name: config.name || config.id });
+            setShowGatewayPicker(false);
+            // Now show secret picker
+            setShowSecretPicker(true);
+        }
+        else {
+            setShowGatewayPicker(false);
+        }
+    }, []);
+    // Handle secret selection for gateway
+    const handleSecretSelect = React.useCallback((secrets) => {
+        if (secrets.length > 0 && pendingGateway && gatewayEnvPrefix) {
+            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],
+            }));
+        }
+        setShowSecretPicker(false);
+        setPendingGateway(null);
+        setGatewayEnvPrefix("");
+        setGatewayInputMode(null);
+        setSelectedGatewayIndex(0);
+    }, [pendingGateway, gatewayEnvPrefix]);
+    // Handle clearing source
+    const handleClearSource = React.useCallback(() => {
+        setFormData((prev) => ({ ...prev, blueprint_id: "", snapshot_id: "" }));
+        setSelectedBlueprintName("");
+        setSelectedSnapshotName("");
+    }, []);
     // Metadata section input handler - active when in metadata section
     useInput((input, key) => {
         const metadataKeys = Object.keys(formData.metadata);
@@ -265,6 +416,66 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setMetadataInputMode(null);
         }
     }, { 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);
+                return;
+            }
+            else if (key.escape) {
+                setGatewayEnvPrefix("");
+                setGatewayInputMode(null);
+                return;
+            }
+            return;
+        }
+        // Navigation mode in gateway section
+        if (key.upArrow && selectedGatewayIndex > 0) {
+            setSelectedGatewayIndex(selectedGatewayIndex - 1);
+        }
+        else if (key.downArrow && selectedGatewayIndex < maxIndex) {
+            setSelectedGatewayIndex(selectedGatewayIndex + 1);
+        }
+        else if (key.return) {
+            if (selectedGatewayIndex === 0) {
+                // Add new gateway - start with env prefix input
+                setGatewayEnvPrefix("");
+                setGatewayInputMode("envPrefix");
+            }
+            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
+            const indexToDelete = selectedGatewayIndex - 1;
+            const newGateways = [...formData.gateways];
+            newGateways.splice(indexToDelete, 1);
+            setFormData({ ...formData, gateways: newGateways });
+            const newLength = newGateways.length;
+            if (selectedGatewayIndex > newLength) {
+                setSelectedGatewayIndex(Math.max(0, newLength));
+            }
+        }
+        else if (key.escape || input === "q") {
+            setInGatewaySection(false);
+            setSelectedGatewayIndex(0);
+            setGatewayEnvPrefix("");
+            setGatewayInputMode(null);
+        }
+    }, { isActive: inGatewaySection && !showGatewayPicker && !showSecretPicker });
     // Validate custom resource configuration
     const validateCustomResources = () => {
         if (formData.resource_size !== "CUSTOM_SIZE") {
@@ -342,6 +553,17 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             if (Object.keys(launchParameters).length > 0) {
                 createParams.launch_parameters = launchParameters;
             }
+            // Add gateway specifications
+            if (formData.gateways.length > 0) {
+                const gateways = {};
+                for (const gw of formData.gateways) {
+                    gateways[gw.envPrefix] = {
+                        gateway: gw.gateway,
+                        secret: gw.secret,
+                    };
+                }
+                createParams.gateways = gateways;
+            }
             const devbox = await client.devboxes.create(createParams);
             setResult(devbox);
         }
@@ -367,6 +589,240 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
     if (creating) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
     }
+    // Blueprint picker screen
+    if (showBlueprintPicker) {
+        const blueprintColumns = [
+            {
+                key: "statusIcon",
+                label: "",
+                width: 2,
+                render: (blueprint, _index, isSelected) => {
+                    const statusDisplay = getStatusDisplay(blueprint.status || "");
+                    return (_jsxs(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                },
+            },
+            createTextColumn("id", "ID", (blueprint) => blueprint.id, {
+                width: 25,
+                color: colors.idColor,
+            }),
+            createTextColumn("name", "Name", (blueprint) => blueprint.name || "", { width: 30 }),
+            {
+                key: "status",
+                label: "Status",
+                width: 12,
+                render: (blueprint, _index, isSelected) => {
+                    const statusDisplay = getStatusDisplay(blueprint.status || "");
+                    const padded = statusDisplay.text.slice(0, 12).padEnd(12, " ");
+                    return (_jsx(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: padded }));
+                },
+            },
+            createTextColumn("created", "Created", (blueprint) => blueprint.create_time_ms
+                ? formatTimeAgo(blueprint.create_time_ms)
+                : "", { width: 18, color: colors.textDim }),
+        ];
+        // Filter out failed blueprints
+        const failedStatuses = ["failure", "build_failed", "failed"];
+        return (_jsx(ResourcePicker, { config: {
+                title: "Select Blueprint",
+                fetchPage: async (params) => {
+                    const result = await listBlueprints({
+                        limit: params.limit,
+                        startingAfter: params.startingAt,
+                        search: params.search,
+                    });
+                    // Filter out failed blueprints
+                    const validBlueprints = result.blueprints.filter((bp) => !failedStatuses.includes(bp.status || ""));
+                    return {
+                        items: validBlueprints,
+                        hasMore: result.hasMore,
+                        totalCount: validBlueprints.length,
+                    };
+                },
+                getItemId: (blueprint) => blueprint.id,
+                getItemLabel: (blueprint) => blueprint.name || blueprint.id,
+                columns: blueprintColumns,
+                mode: "single",
+                emptyMessage: "No blueprints found (failed blueprints are hidden)",
+                searchPlaceholder: "Search blueprints...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: "Select Blueprint", active: true },
+                ],
+            }, onSelect: handleBlueprintSelect, onCancel: () => setShowBlueprintPicker(false), initialSelected: formData.blueprint_id ? [formData.blueprint_id] : [] }));
+    }
+    // Snapshot picker screen
+    if (showSnapshotPicker) {
+        const snapshotColumns = [
+            createTextColumn("id", "ID", (snapshot) => snapshot.id, {
+                width: 25,
+                color: colors.idColor,
+            }),
+            createTextColumn("name", "Name", (snapshot) => snapshot.name || "", { width: 30 }),
+            createTextColumn("status", "Status", (snapshot) => snapshot.status || "", { width: 12 }),
+            createTextColumn("created", "Created", (snapshot) => snapshot.create_time_ms ? formatTimeAgo(snapshot.create_time_ms) : "", { width: 18, color: colors.textDim }),
+        ];
+        return (_jsx(ResourcePicker, { config: {
+                title: "Select Snapshot",
+                fetchPage: async (params) => {
+                    const result = await listSnapshots({
+                        limit: params.limit,
+                        startingAfter: params.startingAt,
+                    });
+                    return {
+                        items: result.snapshots,
+                        hasMore: result.hasMore,
+                        totalCount: result.totalCount,
+                    };
+                },
+                getItemId: (snapshot) => snapshot.id,
+                getItemLabel: (snapshot) => snapshot.name || snapshot.id,
+                columns: snapshotColumns,
+                mode: "single",
+                emptyMessage: "No snapshots found",
+                searchPlaceholder: "Search snapshots...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: "Select Snapshot", active: true },
+                ],
+            }, onSelect: handleSnapshotSelect, onCancel: () => setShowSnapshotPicker(false), initialSelected: formData.snapshot_id ? [formData.snapshot_id] : [] }));
+    }
+    // Network policy picker screen
+    if (showNetworkPolicyPicker) {
+        // Helper to get egress type label
+        const getEgressLabel = (egress) => {
+            if (egress.allow_all)
+                return "Allow All";
+            if (egress.allowed_hostnames?.length === 0)
+                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 }),
+        ];
+        return (_jsx(ResourcePicker, { config: {
+                title: "Select Network Policy",
+                fetchPage: async (params) => {
+                    const result = await listNetworkPolicies({
+                        limit: params.limit,
+                        startingAfter: params.startingAt,
+                        search: params.search,
+                    });
+                    return {
+                        items: result.networkPolicies,
+                        hasMore: result.hasMore,
+                        totalCount: result.totalCount,
+                    };
+                },
+                getItemId: (policy) => policy.id,
+                getItemLabel: (policy) => policy.name || policy.id,
+                columns: networkPolicyColumns,
+                mode: "single",
+                emptyMessage: "No network policies found",
+                searchPlaceholder: "Search network policies...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: "Select Network Policy", active: true },
+                ],
+            }, onSelect: handleNetworkPolicySelect, onCancel: () => setShowNetworkPolicyPicker(false), initialSelected: formData.network_policy_id ? [formData.network_policy_id] : [] }));
+    }
+    // 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 }),
+        ];
+        return (_jsx(ResourcePicker, { config: {
+                title: "Select Gateway Config",
+                fetchPage: async (params) => {
+                    const result = await listGatewayConfigs({
+                        limit: params.limit,
+                        startingAfter: params.startingAt,
+                        search: params.search,
+                    });
+                    return {
+                        items: result.gatewayConfigs,
+                        hasMore: result.hasMore,
+                        totalCount: result.totalCount,
+                    };
+                },
+                getItemId: (config) => config.id,
+                getItemLabel: (config) => config.name || config.id,
+                columns: gatewayColumns,
+                mode: "single",
+                emptyMessage: "No gateway configs found",
+                searchPlaceholder: "Search gateway configs...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: `Gateway: ${gatewayEnvPrefix}`, active: true },
+                ],
+            }, onSelect: handleGatewaySelect, onCancel: () => {
+                setShowGatewayPicker(false);
+                setGatewayEnvPrefix("");
+                setGatewayInputMode(null);
+            }, initialSelected: [] }, "gateway-config-picker"));
+    }
+    // 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 }),
+        ];
+        return (_jsx(ResourcePicker, { config: {
+                title: "Select Secret for Gateway",
+                fetchPage: async (params) => {
+                    const client = getClient();
+                    // Secrets API doesn't support cursor pagination, just limit
+                    const page = await client.secrets.list({
+                        limit: 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,
+                    };
+                },
+                getItemId: (secret) => secret.id,
+                getItemLabel: (secret) => secret.name || secret.id,
+                columns: secretColumns,
+                mode: "single",
+                emptyMessage: "No secrets found",
+                searchPlaceholder: "Search secrets...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: `Gateway: ${gatewayEnvPrefix}` },
+                    { label: "Select Secret", active: true },
+                ],
+            }, onSelect: handleSecretSelect, onCancel: () => {
+                setShowSecretPicker(false);
+                setPendingGateway(null);
+                setGatewayEnvPrefix("");
+                setGatewayInputMode(null);
+            }, initialSelected: [] }, "secret-picker"));
+    }
     // Form screen
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
                     const isActive = currentField === field.key;
@@ -381,6 +837,35 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                         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));
                     }
+                    if (field.type === "source") {
+                        // Check if either blueprint or snapshot is selected
+                        const selectedBlueprintValue = selectedBlueprintName || formData.blueprint_id;
+                        const selectedSnapshotValue = selectedSnapshotName || formData.snapshot_id;
+                        const hasBlueprint = !!selectedBlueprintValue;
+                        const hasSnapshot = !!selectedSnapshotValue;
+                        const hasSelection = hasBlueprint || hasSnapshot;
+                        // If something is selected, show it clearly with its type
+                        if (hasSelection) {
+                            const selectedType = hasBlueprint ? "Blueprint" : "Snapshot";
+                            const selectedValue = hasBlueprint
+                                ? selectedBlueprintValue
+                                : selectedSnapshotValue;
+                            return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), _jsxs(Text, { color: colors.success, children: [selectedType, ": "] }), _jsx(Text, { color: colors.idColor, children: selectedValue }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to change, d to clear]"] }))] }, field.key));
+                        }
+                        // Nothing selected - show toggle to choose type
+                        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.text : colors.textDim, children: [isActive ? figures.arrowLeft : "", " "] }), _jsx(Text, { color: sourceTypeToggle === "blueprint"
+                                        ? colors.primary
+                                        : colors.textDim, bold: sourceTypeToggle === "blueprint", children: "Blueprint" }), _jsx(Text, { color: colors.textDim, children: " / " }), _jsx(Text, { color: sourceTypeToggle === "snapshot"
+                                        ? colors.primary
+                                        : colors.textDim, bold: sourceTypeToggle === "snapshot", children: "Snapshot" }), _jsxs(Text, { color: isActive ? colors.text : colors.textDim, children: [" ", isActive ? figures.arrowRight : ""] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to select]"] }))] }, field.key));
+                    }
+                    if (field.type === "picker") {
+                        const value = fieldData;
+                        const displayName = field.key === "network_policy_id"
+                            ? selectedNetworkPolicyName || value
+                            : value;
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", field.label, ":", " "] }), displayName ? (_jsx(Text, { color: colors.idColor, children: displayName })) : (_jsx(Text, { color: colors.textDim, dimColor: true, children: field.placeholder || "(none)" })), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to ", displayName ? "change" : "select", "]"] }))] }, field.key));
+                    }
                     if (field.type === "metadata") {
                         if (!inMetadataSection) {
                             // Collapsed view
@@ -414,9 +899,41 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
                                             ? `[Tab] Switch field • [Enter] ${metadataInputMode === "key" ? "Next" : "Save"} • [esc] Cancel`
                                             : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedMetadataIndex === 0 ? "Add" : selectedMetadataIndex === maxIndex ? "Done" : "Edit"} • [d] Delete • [esc] Back` }) })] }, field.key));
                     }
+                    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));
+                        }
+                        // 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
+                                                        ? 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) => {
+                                                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));
+                                            }) })), _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));
+                    }
                     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(NavigationTips, { showArrows: true, tips: [
+                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 && !inGatewaySection && (_jsx(NavigationTips, { showArrows: true, tips: [
                     { key: "Enter", label: "Create" },
                     { key: "q", label: "Cancel" },
                 ] }))] }));