@runloop/rl-cli 1.8.0 → 1.10.0

package/dist/components/DevboxCreatePage.js

@@ -10,9 +10,19 @@ 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";
+import { SecretCreatePage } from "./SecretCreatePage.js";
+import { GatewayConfigCreatePage } from "./GatewayConfigCreatePage.js";
+const sourceTypes = ["blueprint", "snapshot"];
 const architectures = ["arm64", "x86_64"];
 const resourceSizes = [
     "X_SMALL",
@@ -23,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({
@@ -37,6 +48,8 @@ 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("");
     const [metadataValue, setMetadataValue] = React.useState("");
@@ -46,6 +59,29 @@ 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 [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" },
@@ -83,22 +119,28 @@ 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: "tunnel_auth_mode",
+            label: "Tunnel (optional)",
+            type: "select",
+            placeholder: "none",
+        },
+        {
+            key: "gateways",
+            label: "AI Gateway Configs (optional)",
+            type: "gateways",
+            placeholder: "Configure API credential proxying...",
         },
         { key: "metadata", label: "Metadata (optional)", type: "metadata" },
     ];
@@ -109,6 +151,8 @@ 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) => {
         // Handle result screen
@@ -155,6 +199,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 +246,10 @@ 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)
         if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
             setCurrentField(fields[currentFieldIndex - 1].key);
@@ -175,7 +260,118 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setCurrentField(fields[currentFieldIndex + 1].key);
             return;
         }
-    }, { isActive: !inMetadataSection });
+    }, {
+        isActive: !inMetadataSection &&
+            !inGatewaySection &&
+            !showBlueprintPicker &&
+            !showSnapshotPicker &&
+            !showNetworkPolicyPicker &&
+            !showGatewayPicker &&
+            !showSecretPicker &&
+            !showInlineSecretCreate &&
+            !showInlineGatewayConfigCreate,
+    });
+    // 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];
+            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);
+            // Move to env name field in the form
+            setGatewayFormField("envName");
+        }
+        else {
+            setShowGatewayPicker(false);
+        }
+    }, []);
+    // Handle secret selection for gateway
+    const handleSecretSelect = React.useCallback((secrets) => {
+        if (secrets.length > 0) {
+            const secret = secrets[0];
+            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("");
+        setGatewayFormActive(false);
+        setGatewayFormField("attach");
+        setSelectedGatewayIndex(0);
+    }, [pendingGateway, pendingSecret, 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 +461,117 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initial
             setMetadataInputMode(null);
         }
     }, { isActive: inMetadataSection });
+    // Gateway section input handler - active when in gateway section
+    useInput((input, key) => {
+        // === 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;
+            }
+            // 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("");
+                setGatewayFormActive(false);
+                setGatewayFormField("attach");
+                return;
+            }
+            return;
+        }
+        // === 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);
+        }
+        else if (key.downArrow && selectedGatewayIndex < maxIndex) {
+            setSelectedGatewayIndex(selectedGatewayIndex + 1);
+        }
+        else if (key.return) {
+            if (selectedGatewayIndex === 0) {
+                // Open the attach form
+                setPendingGateway(null);
+                setPendingSecret(null);
+                setGatewayEnvPrefix("");
+                setGatewayFormActive(true);
+                setGatewayFormField("gateway");
+            }
+            else if (selectedGatewayIndex === maxIndex) {
+                // Done
+                setInGatewaySection(false);
+                setSelectedGatewayIndex(0);
+            }
+        }
+        else if ((input === "d" || key.delete) &&
+            selectedGatewayIndex >= 1 &&
+            selectedGatewayIndex <= gatewayCount) {
+            // Remove 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);
+        }
+    }, {
+        isActive: inGatewaySection &&
+            !showGatewayPicker &&
+            !showSecretPicker &&
+            !showInlineSecretCreate &&
+            !showInlineGatewayConfigCreate,
+    });
     // Validate custom resource configuration
     const validateCustomResources = () => {
         if (formData.resource_size !== "CUSTOM_SIZE") {
@@ -342,6 +649,23 @@ 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;
+            }
+            // 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);
         }
@@ -367,6 +691,331 @@ 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 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) => {
+                    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: buildNetworkPolicyColumns,
+                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] : [] }));
+    }
+    // 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 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 AI 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: buildGatewayColumns,
+                mode: "single",
+                emptyMessage: "No AI gateway configs found",
+                searchPlaceholder: "Search AI gateway configs...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { 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);
+                // 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 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, so we fetch all
+                    // and do client-side pagination by slicing to the requested page
+                    const page = await client.secrets.list({
+                        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: sliced,
+                        hasMore: startIdx + params.limit < allSecrets.length,
+                        totalCount: allSecrets.length,
+                    };
+                },
+                getItemId: (secret) => secret.id,
+                getItemLabel: (secret) => secret.name || secret.id,
+                columns: buildSecretColumns,
+                mode: "single",
+                emptyMessage: "No secrets found",
+                searchPlaceholder: "Search secrets...",
+                breadcrumbItems: [
+                    { label: "Devboxes" },
+                    { label: "Create" },
+                    { label: "Attach AI Gateway Config" },
+                    { label: "Select Secret", active: true },
+                ],
+                onCreateNew: () => {
+                    setShowSecretPicker(false);
+                    setShowInlineSecretCreate(true);
+                },
+                createNewLabel: "Create secret",
+            }, onSelect: handleSecretSelect, onCancel: () => {
+                setShowSecretPicker(false);
+                // Return to the form at the secret field
+                setGatewayFormField("secret");
+            }, 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;
@@ -379,7 +1028,49 @@ 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
+                        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) {
@@ -414,9 +1105,66 @@ 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, " 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;
+                        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: "+ 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, { 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: `${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" &&
-                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" },
                 ] }))] }));