@runloop/rl-cli 1.2.0 → 1.3.0

package/dist/screens/BlueprintDetailScreen.js

@@ -0,0 +1,337 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BlueprintDetailScreen - Detail page for blueprints
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useBlueprintStore } from "../store/blueprintStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getBlueprint } from "../services/blueprintService.js";
+import { getClient } from "../utils/client.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { colors } from "../utils/theme.js";
+export function BlueprintDetailScreen({ blueprintId, }) {
+    const { goBack, navigate } = useNavigation();
+    const blueprints = useBlueprintStore((state) => state.blueprints);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedBlueprint, setFetchedBlueprint] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    // Find blueprint in store first
+    const blueprintFromStore = blueprints.find((b) => b.id === blueprintId);
+    // Polling function - must be defined before any early returns (Rules of Hooks)
+    const pollBlueprint = React.useCallback(async () => {
+        if (!blueprintId)
+            return null;
+        return getBlueprint(blueprintId);
+    }, [blueprintId]);
+    // Fetch blueprint from API if not in store or missing full details
+    React.useEffect(() => {
+        if (blueprintId && !loading && !fetchedBlueprint) {
+            // Always fetch full details since store may only have basic info
+            setLoading(true);
+            setError(null);
+            getBlueprint(blueprintId)
+                .then((blueprint) => {
+                setFetchedBlueprint(blueprint);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [blueprintId, loading, fetchedBlueprint]);
+    // Use fetched blueprint for full details, fall back to store for basic display
+    const blueprint = fetchedBlueprint || blueprintFromStore;
+    // Show loading state while fetching
+    if (loading && !blueprint) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Blueprints" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading blueprint details..." })] }));
+    }
+    // Show error state if fetch failed
+    if (error && !blueprint) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints" }, { label: "Error", active: true }] }), _jsx(ErrorMessage, { message: "Failed to load blueprint details", error: error })] }));
+    }
+    // Show error if no blueprint found
+    if (!blueprint) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Blueprints" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Blueprint ${blueprintId || "unknown"} not found`, error: new Error("Blueprint not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (blueprint.create_time_ms) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(blueprint.create_time_ms),
+        });
+    }
+    if (blueprint.architecture) {
+        basicFields.push({
+            label: "Architecture",
+            value: blueprint.architecture,
+        });
+    }
+    if (blueprint.resources) {
+        basicFields.push({
+            label: "Resources",
+            value: blueprint.resources,
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Launch parameters section
+    const lp = blueprint.parameters?.launch_parameters;
+    if (lp) {
+        const lpFields = [];
+        if (lp.custom_cpu_cores) {
+            lpFields.push({
+                label: "CPU Cores",
+                value: String(lp.custom_cpu_cores),
+            });
+        }
+        if (lp.custom_gb_memory) {
+            lpFields.push({
+                label: "Memory",
+                value: `${lp.custom_gb_memory}GB`,
+            });
+        }
+        if (lp.custom_disk_size) {
+            lpFields.push({
+                label: "Disk Size",
+                value: `${lp.custom_disk_size}GB`,
+            });
+        }
+        if (lp.keep_alive_time_seconds) {
+            const minutes = Math.floor(lp.keep_alive_time_seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            lpFields.push({
+                label: "Keep Alive",
+                value: hours > 0 ? `${hours}h ${minutes % 60}m` : `${minutes}m`,
+            });
+        }
+        if (lp.available_ports && lp.available_ports.length > 0) {
+            lpFields.push({
+                label: "Available Ports",
+                value: lp.available_ports.join(", "),
+            });
+        }
+        if (lp.required_services && lp.required_services.length > 0) {
+            lpFields.push({
+                label: "Required Services",
+                value: lp.required_services.join(", "),
+            });
+        }
+        if (lpFields.length > 0) {
+            detailSections.push({
+                title: "Launch Parameters",
+                icon: figures.arrowRight,
+                color: colors.secondary,
+                fields: lpFields,
+            });
+        }
+    }
+    // Setup section
+    const params = blueprint.parameters;
+    if (params) {
+        const setupFields = [];
+        if (params.dockerfile) {
+            const lineCount = params.dockerfile.split("\n").length;
+            setupFields.push({
+                label: "Dockerfile",
+                value: _jsxs(Text, { dimColor: true, children: [lineCount, " lines"] }),
+            });
+        }
+        if (params.system_setup_commands &&
+            params.system_setup_commands.length > 0) {
+            setupFields.push({
+                label: "Setup Commands",
+                value: `${params.system_setup_commands.length} commands`,
+            });
+        }
+        if (params.file_mounts && Object.keys(params.file_mounts).length > 0) {
+            setupFields.push({
+                label: "File Mounts",
+                value: `${Object.keys(params.file_mounts).length} mounts`,
+            });
+        }
+        if (setupFields.length > 0) {
+            detailSections.push({
+                title: "Build Configuration",
+                icon: figures.hamburger,
+                color: colors.info,
+                fields: setupFields,
+            });
+        }
+    }
+    // Operations available for blueprints
+    const operations = [
+        {
+            key: "logs",
+            label: "View Build Logs",
+            color: colors.info,
+            icon: figures.info,
+            shortcut: "l",
+        },
+        {
+            key: "create-devbox",
+            label: "Create Devbox from Blueprint",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "c",
+        },
+        {
+            key: "delete",
+            label: "Delete Blueprint",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "logs":
+                navigate("blueprint-logs", { blueprintId: resource.id });
+                break;
+            case "create-devbox":
+                navigate("devbox-create", { blueprintId: resource.id });
+                break;
+            case "delete":
+                // Show confirmation dialog
+                setShowDeleteConfirm(true);
+                break;
+        }
+    };
+    // Execute delete after confirmation
+    const executeDelete = async () => {
+        if (!blueprint)
+            return;
+        setShowDeleteConfirm(false);
+        setDeleting(true);
+        try {
+            const client = getClient();
+            await client.blueprints.delete(blueprint.id);
+            goBack();
+        }
+        catch (err) {
+            setError(err);
+            setDeleting(false);
+        }
+    };
+    // Show delete confirmation
+    if (showDeleteConfirm && blueprint) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Blueprint", message: `Are you sure you want to delete "${blueprint.name || blueprint.id}"?`, details: "This action cannot be undone.", breadcrumbItems: [
+                { label: "Blueprints" },
+                { label: blueprint.name || blueprint.id },
+                { label: "Delete", active: true },
+            ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
+    }
+    // Show deleting state
+    if (deleting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Blueprints" },
+                        { label: blueprint?.name || blueprint?.id || "Blueprint" },
+                        { label: "Deleting...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting blueprint..." })] }));
+    }
+    // Build detailed info lines for full details view
+    const buildDetailLines = (bp) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Blueprint Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", bp.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", bp.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", bp.status] }, "core-status"));
+        if (bp.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(bp.create_time_ms).toLocaleString()] }, "core-created"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Launch Parameters
+        const lp = bp.parameters?.launch_parameters;
+        if (lp) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Launch Parameters" }, "lp-title"));
+            if (lp.architecture) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Architecture: ", lp.architecture] }, "lp-arch"));
+            }
+            if (lp.resource_size_request) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Resource Size: ", lp.resource_size_request] }, "lp-resources"));
+            }
+            if (lp.custom_cpu_cores) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "CPU Cores: ", lp.custom_cpu_cores] }, "lp-cpu"));
+            }
+            if (lp.custom_gb_memory) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Memory: ", lp.custom_gb_memory, "GB"] }, "lp-memory"));
+            }
+            if (lp.custom_disk_size) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Disk Size: ", lp.custom_disk_size, "GB"] }, "lp-disk"));
+            }
+            if (lp.keep_alive_time_seconds) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Keep Alive: ", lp.keep_alive_time_seconds, "s"] }, "lp-keepalive"));
+            }
+            if (lp.available_ports && lp.available_ports.length > 0) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Available Ports: ", lp.available_ports.join(", ")] }, "lp-ports"));
+            }
+            if (lp.launch_commands && lp.launch_commands.length > 0) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Launch Commands:"] }, "lp-launch-cmds"));
+                lp.launch_commands.forEach((cmd, idx) => {
+                    lines.push(_jsxs(Text, { dimColor: true, children: ["   ", figures.pointer, " ", cmd] }, `lp-cmd-${idx}`));
+                });
+            }
+            lines.push(_jsx(Text, { children: " " }, "lp-space"));
+        }
+        // Build Configuration
+        const params = bp.parameters;
+        if (params) {
+            if (params.dockerfile) {
+                lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Dockerfile" }, "dockerfile-title"));
+                params.dockerfile.split("\n").forEach((line, idx) => {
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `dockerfile-${idx}`));
+                });
+                lines.push(_jsx(Text, { children: " " }, "dockerfile-space"));
+            }
+            if (params.system_setup_commands &&
+                params.system_setup_commands.length > 0) {
+                lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "System Setup Commands" }, "setup-title"));
+                params.system_setup_commands.forEach((cmd, idx) => {
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", idx + 1, ". ", cmd] }, `setup-${idx}`));
+                });
+                lines.push(_jsx(Text, { children: " " }, "setup-space"));
+            }
+            if (params.file_mounts && Object.keys(params.file_mounts).length > 0) {
+                lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "File Mounts" }, "mounts-title"));
+                Object.entries(params.file_mounts).forEach(([path, _content], idx) => {
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", path] }, `mount-${idx}`));
+                });
+                lines.push(_jsx(Text, { children: " " }, "mounts-space"));
+            }
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(bp, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    return (_jsx(ResourceDetailPage, { resource: blueprint, resourceType: "Blueprints", getDisplayName: (bp) => bp.name || bp.id, getId: (bp) => bp.id, getStatus: (bp) => bp.status, detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, pollResource: blueprint.status === "building" ? pollBlueprint : undefined }));
+}

package/dist/screens/MenuScreen.js

@@ -14,6 +14,12 @@ export function MenuScreen() {
             case "snapshots":
                 navigate("snapshot-list");
                 break;
+            case "network-policies":
+                navigate("network-policy-list");
+                break;
+            case "objects":
+                navigate("object-list");
+                break;
             default:
                 // Fallback for any other screen names
                 navigate(key);

package/dist/screens/NetworkPolicyCreateScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { NetworkPolicyCreatePage } from "../components/NetworkPolicyCreatePage.js";
+export function NetworkPolicyCreateScreen() {
+    const { goBack, navigate } = useNavigation();
+    return (_jsx(NetworkPolicyCreatePage, { onBack: goBack, onCreate: (policy) => navigate("network-policy-detail", { networkPolicyId: policy.id }) }));
+}

package/dist/screens/NetworkPolicyDetailScreen.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * NetworkPolicyDetailScreen - Detail page for network policies
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useNetworkPolicyStore, } from "../store/networkPolicyStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getNetworkPolicy, deleteNetworkPolicy, } from "../services/networkPolicyService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { ConfirmationPrompt } from "../components/ConfirmationPrompt.js";
+import { NetworkPolicyCreatePage } from "../components/NetworkPolicyCreatePage.js";
+import { colors } from "../utils/theme.js";
+/**
+ * Get a display label for the egress policy type
+ */
+function getEgressTypeLabel(egress) {
+    if (egress.allow_all) {
+        return "Allow All";
+    }
+    if (egress.allowed_hostnames.length === 0) {
+        return "Deny All";
+    }
+    return "Custom";
+}
+export function NetworkPolicyDetailScreen({ networkPolicyId, }) {
+    const { goBack } = useNavigation();
+    const networkPolicies = useNetworkPolicyStore((state) => state.networkPolicies);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedPolicy, setFetchedPolicy] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
+    const [showEditForm, setShowEditForm] = React.useState(false);
+    // Find policy in store first
+    const policyFromStore = networkPolicies.find((p) => p.id === networkPolicyId);
+    // Fetch policy from API if not in store or missing full details
+    React.useEffect(() => {
+        if (networkPolicyId && !loading && !fetchedPolicy) {
+            // Always fetch full details since store may only have basic info
+            setLoading(true);
+            setError(null);
+            getNetworkPolicy(networkPolicyId)
+                .then((policy) => {
+                setFetchedPolicy(policy);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [networkPolicyId, loading, fetchedPolicy]);
+    // Use fetched policy for full details, fall back to store for basic display
+    const policy = fetchedPolicy || policyFromStore;
+    // Show loading state while fetching
+    if (loading && !policy) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading network policy details..." })] }));
+    }
+    // Show error state if fetch failed
+    if (error && !policy) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load network policy details", error: error })] }));
+    }
+    // Show error if no policy found
+    if (!policy) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Network policy ${networkPolicyId || "unknown"} not found`, error: new Error("Network policy not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (policy.description) {
+        basicFields.push({
+            label: "Description",
+            value: policy.description,
+        });
+    }
+    if (policy.create_time_ms) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(policy.create_time_ms),
+        });
+    }
+    if (policy.update_time_ms) {
+        basicFields.push({
+            label: "Last Updated",
+            value: formatTimestamp(policy.update_time_ms),
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Egress rules section
+    const egressFields = [];
+    egressFields.push({
+        label: "Policy Type",
+        value: (_jsx(Text, { color: policy.egress.allow_all
+                ? colors.success
+                : policy.egress.allowed_hostnames.length === 0
+                    ? colors.error
+                    : colors.warning, bold: true, children: getEgressTypeLabel(policy.egress) })),
+    });
+    egressFields.push({
+        label: "Allow Devbox-to-Devbox",
+        value: policy.egress.allow_devbox_to_devbox ? "Yes" : "No",
+    });
+    if (policy.egress.allowed_hostnames &&
+        policy.egress.allowed_hostnames.length > 0) {
+        egressFields.push({
+            label: "Allowed Hostnames",
+            value: `${policy.egress.allowed_hostnames.length} hostname(s)`,
+        });
+    }
+    detailSections.push({
+        title: "Egress Rules",
+        icon: figures.arrowRight,
+        color: colors.info,
+        fields: egressFields,
+    });
+    // Operations available for network policies
+    const operations = [
+        {
+            key: "edit",
+            label: "Edit Network Policy",
+            color: colors.warning,
+            icon: figures.pointer,
+            shortcut: "e",
+        },
+        {
+            key: "delete",
+            label: "Delete Network Policy",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, _resource) => {
+        switch (operation) {
+            case "edit":
+                setShowEditForm(true);
+                break;
+            case "delete":
+                // Show confirmation dialog
+                setShowDeleteConfirm(true);
+                break;
+        }
+    };
+    // Execute delete after confirmation
+    const executeDelete = async () => {
+        if (!policy)
+            return;
+        setShowDeleteConfirm(false);
+        setDeleting(true);
+        try {
+            await deleteNetworkPolicy(policy.id);
+            goBack();
+        }
+        catch (err) {
+            setError(err);
+            setDeleting(false);
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (np) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Network Policy Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", np.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", np.name] }, "core-name"));
+        if (np.description) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Description: ", np.description] }, "core-desc"));
+        }
+        if (np.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(np.create_time_ms).toLocaleString()] }, "core-created"));
+        }
+        if (np.update_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Last Updated: ", new Date(np.update_time_ms).toLocaleString()] }, "core-updated"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Egress Rules
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Egress Rules" }, "egress-title"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Policy Type: ", getEgressTypeLabel(np.egress)] }, "egress-type"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Allow All: ", np.egress.allow_all ? "Yes" : "No"] }, "egress-allow-all"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Allow Devbox-to-Devbox:", " ", np.egress.allow_devbox_to_devbox ? "Yes" : "No"] }, "egress-devbox"));
+        lines.push(_jsx(Text, { children: " " }, "egress-space"));
+        // Allowed Hostnames
+        if (np.egress.allowed_hostnames && np.egress.allowed_hostnames.length > 0) {
+            lines.push(_jsxs(Text, { color: colors.warning, bold: true, children: ["Allowed Hostnames (", np.egress.allowed_hostnames.length, ")"] }, "hostnames-title"));
+            np.egress.allowed_hostnames.forEach((hostname, idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", figures.pointer, " ", hostname] }, `hostname-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "hostnames-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(np, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Show edit form
+    if (showEditForm && policy) {
+        return (_jsx(NetworkPolicyCreatePage, { onBack: () => setShowEditForm(false), onCreate: (updatedPolicy) => {
+                // Update the fetched policy with the new data
+                setFetchedPolicy(updatedPolicy);
+                setShowEditForm(false);
+            }, initialPolicy: policy }));
+    }
+    // Show delete confirmation
+    if (showDeleteConfirm && policy) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Network Policy", message: `Are you sure you want to delete "${policy.name || policy.id}"?`, details: "This action cannot be undone. Any devboxes using this policy will lose their network restrictions.", breadcrumbItems: [
+                { label: "Network Policies" },
+                { label: policy.name || policy.id },
+                { label: "Delete", active: true },
+            ], onConfirm: executeDelete, onCancel: () => setShowDeleteConfirm(false) }));
+    }
+    // Show deleting state
+    if (deleting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: policy.name || policy.id },
+                        { label: "Deleting...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Deleting network policy..." })] }));
+    }
+    return (_jsx(ResourceDetailPage, { resource: policy, resourceType: "Network Policies", getDisplayName: (np) => np.name || np.id, getId: (np) => np.id, getStatus: () => "active", detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines }));
+}

package/dist/screens/NetworkPolicyListScreen.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { ListNetworkPoliciesUI } from "../commands/network-policy/list.js";
+export function NetworkPolicyListScreen() {
+    const { goBack } = useNavigation();
+    return _jsx(ListNetworkPoliciesUI, { onBack: goBack });
+}