@runloop/rl-cli 1.1.0 → 1.3.0

package/dist/components/LogsViewer.js

@@ -7,6 +7,7 @@ import React from "react";
 import { Box, Text, useInput } from "ink";
 import figures from "figures";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { parseAnyLogEntry } from "../utils/logFormatter.js";
@@ -165,5 +166,11 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
                             : fullMessage;
                         return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: truncatedMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }, index));
                     }
-                })) }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total logs"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [g] Top \u2022 [G] Bottom \u2022 [w] Toggle Wrap \u2022 [c] Copy \u2022 [Enter], [q], or [esc] Back"] }) })] }));
+                })) }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total logs"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "g", label: "Top" },
+                    { key: "G", label: "Bottom" },
+                    { key: "w", label: "Toggle Wrap" },
+                    { key: "c", label: "Copy" },
+                    { key: "Enter/q/esc", label: "Back" },
+                ] })] }));
 };

package/dist/components/MainMenu.js

@@ -4,6 +4,7 @@ import { Box, Text, useInput, useApp } from "ink";
 import figures from "figures";
 import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
 import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
 import { execCommand } from "../utils/exec.js";
@@ -32,6 +33,20 @@ const menuItems = [
         icon: "◈",
         color: colors.accent3,
     },
+    {
+        key: "objects",
+        label: "Storage Objects",
+        description: "Manage files and data in cloud storage",
+        icon: "▤",
+        color: colors.secondary,
+    },
+    {
+        key: "network-policies",
+        label: "Network Policies",
+        description: "Manage egress network access rules",
+        icon: "◇",
+        color: colors.info,
+    },
 ];
 export const MainMenu = ({ onSelect }) => {
     const { exit } = useApp();
@@ -64,6 +79,12 @@ export const MainMenu = ({ onSelect }) => {
         else if (input === "s" || input === "3") {
             onSelect("snapshots");
         }
+        else if (input === "o" || input === "4") {
+            onSelect("objects");
+        }
+        else if (input === "n" || input === "5") {
+            onSelect("network-policies");
+        }
         else if (input === "u" && updateAvailable) {
             // Release terminal and exec into update command (never returns)
             execCommand("sh", [
@@ -75,13 +96,23 @@ export const MainMenu = ({ onSelect }) => {
     // Use compact layout if terminal height is less than 20 lines (memoized)
     const useCompactLayout = terminalHeight < 20;
     if (useCompactLayout) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Cloud development environments \u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Cloud development environments \u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
                         return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " }), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
-                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) })] }));
+                    }) }), _jsx(NavigationTips, { showArrows: true, paddingX: 2, tips: [
+                        { key: "1-5", label: "Quick select" },
+                        { key: "Enter", label: "Select" },
+                        { key: "Esc", label: "Quit" },
+                        { key: "u", label: "Update", condition: !!updateAvailable },
+                    ] })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
                         return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: figures.pointer }), _jsx(Text, { children: " " })] })), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
-                    })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) }) })] }));
+                    })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "1-5", label: "Quick select" },
+                    { key: "Enter", label: "Select" },
+                    { key: "Esc", label: "Quit" },
+                    { key: "u", label: "Update", condition: !!updateAvailable },
+                ] })] }));
 };

package/dist/components/NavigationTips.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
+/**
+ * Renders a responsive navigation tips bar that wraps on small screens
+ */
+export const NavigationTips = ({ tips, showArrows = false, arrowLabel = "Navigate", paddingX = 1, marginTop = 1, }) => {
+    // Filter tips by condition (undefined condition means always show)
+    const visibleTips = tips.filter((tip) => tip.condition === undefined || tip.condition === true);
+    // Build the tips array, prepending arrows if requested
+    const allTips = [];
+    if (showArrows) {
+        allTips.push({
+            icon: `${figures.arrowUp}${figures.arrowDown}`,
+            label: arrowLabel,
+        });
+    }
+    allTips.push(...visibleTips);
+    if (allTips.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { marginTop: marginTop, paddingX: paddingX, flexWrap: "wrap", children: allTips.map((tip, index) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [index > 0 && " • ", tip.icon && `${tip.icon} `, tip.key && `[${tip.key}] `, tip.label] }, index))) }));
+};

package/dist/components/NetworkPolicyCreatePage.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * NetworkPolicyCreatePage - Form for creating or editing a network policy
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { getClient } from "../utils/client.js";
+import { SpinnerComponent } from "./Spinner.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { SuccessMessage } from "./SuccessMessage.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { FormTextInput, FormSelect, FormActionButton, FormListManager, useFormSelectNavigation, } from "./form/index.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const BOOLEAN_OPTIONS = ["Yes", "No"];
+export const NetworkPolicyCreatePage = ({ onBack, onCreate, initialPolicy, }) => {
+    const isEditMode = !!initialPolicy;
+    const [currentField, setCurrentField] = React.useState("submit");
+    const [formData, setFormData] = React.useState(() => {
+        if (initialPolicy) {
+            return {
+                name: initialPolicy.name || "",
+                description: initialPolicy.description || "",
+                allow_all: initialPolicy.egress.allow_all ? "Yes" : "No",
+                allow_devbox_to_devbox: initialPolicy.egress.allow_devbox_to_devbox
+                    ? "Yes"
+                    : "No",
+                allowed_hostnames: initialPolicy.egress.allowed_hostnames || [],
+            };
+        }
+        return {
+            name: "",
+            description: "",
+            allow_all: "No",
+            allow_devbox_to_devbox: "No",
+            allowed_hostnames: [],
+        };
+    });
+    const [hostnamesExpanded, setHostnamesExpanded] = React.useState(false);
+    const [submitting, setSubmitting] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [validationError, setValidationError] = React.useState(null);
+    const allFields = [
+        {
+            key: "submit",
+            label: isEditMode ? "Update Network Policy" : "Create Network Policy",
+            type: "action",
+        },
+        { key: "name", label: "Name (required)", type: "text" },
+        { key: "description", label: "Description", type: "text" },
+        { key: "allow_all", label: "Allow All Egress", type: "select" },
+        {
+            key: "allow_devbox_to_devbox",
+            label: "Allow Devbox-to-Devbox",
+            type: "select",
+        },
+        { key: "allowed_hostnames", label: "Allowed Hostnames", type: "list" },
+    ];
+    // Hide allowed_hostnames when allow_all is enabled
+    const fields = formData.allow_all === "Yes"
+        ? allFields.filter((f) => f.key !== "allowed_hostnames")
+        : allFields;
+    const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Select navigation handlers
+    const handleAllowAllNav = useFormSelectNavigation(formData.allow_all, BOOLEAN_OPTIONS, (value) => {
+        setFormData({ ...formData, allow_all: value });
+        // If enabling allow_all and currently on hostnames field, move to previous field
+        if (value === "Yes" && currentField === "allowed_hostnames") {
+            setCurrentField("allow_devbox_to_devbox");
+            setHostnamesExpanded(false);
+        }
+    }, currentField === "allow_all");
+    const handleDevboxNav = useFormSelectNavigation(formData.allow_devbox_to_devbox, BOOLEAN_OPTIONS, (value) => setFormData({ ...formData, allow_devbox_to_devbox: value }), currentField === "allow_devbox_to_devbox");
+    useInput((input, key) => {
+        // Handle result screen
+        if (result) {
+            if (input === "q" || key.escape || key.return) {
+                if (onCreate) {
+                    onCreate(result);
+                }
+                onBack();
+            }
+            return;
+        }
+        // Handle error screen
+        if (error) {
+            if (input === "r" || key.return) {
+                // Retry - clear error and return to form
+                setError(null);
+            }
+            else if (input === "q" || key.escape) {
+                // Quit - go back to list
+                onBack();
+            }
+            return;
+        }
+        // Handle submitting state
+        if (submitting) {
+            return;
+        }
+        // Handle hostnames expanded mode - let FormListManager handle input
+        if (hostnamesExpanded) {
+            return;
+        }
+        // Back to list
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Submit form with Ctrl+S
+        if (input === "s" && key.ctrl) {
+            handleSubmit();
+            return;
+        }
+        // Handle Enter on submit field
+        if (currentField === "submit" && key.return) {
+            handleSubmit();
+            return;
+        }
+        // Handle Enter on hostnames field to expand
+        if (currentField === "allowed_hostnames" && key.return) {
+            setHostnamesExpanded(true);
+            return;
+        }
+        // Handle select field navigation
+        if (handleAllowAllNav(input, key))
+            return;
+        if (handleDevboxNav(input, key))
+            return;
+        // Navigation between fields (up/down arrows and tab/shift+tab)
+        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
+            setCurrentField(fields[currentFieldIndex - 1].key);
+            return;
+        }
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
+            setCurrentField(fields[currentFieldIndex + 1].key);
+            return;
+        }
+    });
+    const handleSubmit = async () => {
+        // Validate required fields
+        if (!formData.name.trim()) {
+            setValidationError("Name is required");
+            setCurrentField("name");
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        setValidationError(null);
+        try {
+            const client = getClient();
+            const params = {};
+            // For create, name is always required
+            // For update, only include if changed
+            if (!isEditMode || formData.name.trim() !== initialPolicy?.name) {
+                params.name = formData.name.trim();
+            }
+            // Include description if set (or if clearing in edit mode)
+            if (formData.description.trim()) {
+                params.description = formData.description.trim();
+            }
+            else if (isEditMode && initialPolicy?.description) {
+                // Clear description if it was set before but now empty
+                params.description = "";
+            }
+            params.allow_all = formData.allow_all === "Yes";
+            params.allow_devbox_to_devbox = formData.allow_devbox_to_devbox === "Yes";
+            // For allowed_hostnames, always send the current list
+            // (empty array means no hostnames allowed)
+            params.allowed_hostnames = formData.allowed_hostnames;
+            let policy;
+            if (isEditMode && initialPolicy) {
+                policy = await client.networkPolicies.update(initialPolicy.id, params);
+            }
+            else {
+                // For create, name is required
+                policy = await client.networkPolicies.create({
+                    ...params,
+                    name: formData.name.trim(),
+                });
+            }
+            setResult(policy);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const breadcrumbLabel = isEditMode ? initialPolicy?.name || "Edit" : "Create";
+    const actionLabel = isEditMode ? "Edit" : "Create";
+    // Result screen
+    if (result) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: breadcrumbLabel, active: true },
+                    ] }), _jsx(SuccessMessage, { message: `Network policy ${isEditMode ? "updated" : "created"} successfully!` }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Allow All: ", result.egress.allow_all ? "Yes" : "No"] }) })] }), isEditMode && (_jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { color: colors.warning, children: [figures.info, " Changes are eventually consistent and may take a few moments to propagate."] }) })), _jsx(NavigationTips, { tips: [
+                        {
+                            key: "Enter/q/esc",
+                            label: isEditMode ? "Return to details" : "Return to list",
+                        },
+                    ] })] }));
+    }
+    // Error screen
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: breadcrumbLabel, active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isEditMode ? "update" : "create"} network policy`, error: error }), _jsx(NavigationTips, { tips: [
+                        { key: "Enter/r", label: "Retry" },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
+    }
+    // Submitting screen
+    if (submitting) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Network Policies" },
+                        { label: breadcrumbLabel, active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `${isEditMode ? "Updating" : "Creating"} network policy...` })] }));
+    }
+    // Form screen
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Network Policies" },
+                    { label: breadcrumbLabel, active: true },
+                ] }), isEditMode && (_jsx(Box, { borderStyle: "round", borderColor: colors.warning, paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Text, { color: colors.warning, children: [figures.warning, " ", _jsx(Text, { bold: true, children: "Note:" }), " Network policy updates are", " ", _jsx(Text, { bold: true, children: "eventually consistent" }), ". Changes may take a few moments to propagate to all devboxes using this policy."] }) })), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
+                    const isActive = currentField === field.key;
+                    if (field.type === "action") {
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: `[Enter to ${isEditMode ? "update" : "create"}]` }, field.key));
+                    }
+                    if (field.type === "text") {
+                        const value = formData[field.key];
+                        const hasError = field.key === "name" && validationError;
+                        return (_jsx(FormTextInput, { label: field.label, value: value, onChange: (newValue) => {
+                                setFormData({ ...formData, [field.key]: newValue });
+                                // Clear validation error when typing in the field with error
+                                if (field.key === "name" && validationError) {
+                                    setValidationError(null);
+                                }
+                            }, isActive: isActive, placeholder: field.key === "name"
+                                ? "my-network-policy"
+                                : field.key === "description"
+                                    ? "Policy description"
+                                    : "", error: hasError ? validationError : undefined }, field.key));
+                    }
+                    if (field.type === "select") {
+                        const value = formData[field.key];
+                        return (_jsx(FormSelect, { label: field.label, value: value, options: BOOLEAN_OPTIONS, onChange: (newValue) => setFormData({ ...formData, [field.key]: newValue }), isActive: isActive }, field.key));
+                    }
+                    if (field.type === "list") {
+                        return (_jsx(FormListManager, { title: field.label, items: formData.allowed_hostnames, onItemsChange: (items) => setFormData({ ...formData, allowed_hostnames: items }), isActive: isActive, isExpanded: hostnamesExpanded, onExpandedChange: setHostnamesExpanded, itemPlaceholder: "github.com or *.npmjs.org", addLabel: "+ Add hostname", collapsedLabel: "hostname(s)" }, field.key));
+                    }
+                    return null;
+                }) }), !hostnamesExpanded && (_jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: `${actionLabel}/Expand` },
+                    { key: "q", label: "Cancel" },
+                ] }))] }));
+};

package/dist/components/OperationsMenu.js

@@ -2,6 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
+import { NavigationTips } from "./NavigationTips.js";
 /**
  * Reusable operations menu component for detail pages
  * Displays a list of available operations with keyboard navigation
@@ -10,7 +11,14 @@ export const OperationsMenu = ({ operations, selectedIndex, onNavigate: _onNavig
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
                             const isSelected = index === selectedIndex;
                             return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022", additionalActions.map((action) => ` [${action.key}] ${action.label} •`), " ", "[q] Back"] }) })] }));
+                        }) })] }), _jsx(NavigationTips, { showArrows: true, paddingX: 0, tips: [
+                    { key: "Enter", label: "Select" },
+                    ...additionalActions.map((action) => ({
+                        key: action.key,
+                        label: action.label,
+                    })),
+                    { key: "q", label: "Back" },
+                ] })] }));
 };
 /**
  * Helper to filter operations based on conditions

package/dist/components/ResourceActionsMenu.js

@@ -4,6 +4,7 @@ import { Box, Text, useInput } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
 import { ActionsPopup } from "./ActionsPopup.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 export const ResourceActionsMenu = (props) => {
@@ -104,7 +105,10 @@ export const ResourceActionsMenu = (props) => {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: operationError ? colors.error : colors.success, children: operationError ? `${label} failed` : `${label} completed` }), !!operationResult && (_jsx(Text, { color: colors.textDim, dimColor: true, children: operationResult })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointerSmall, " Press [Enter] to go back"] })] })] }));
     }
     if (executingOperation && selectedOp?.needsInput) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, children: [selectedOp.inputPrompt || "Input:", " "] }), _jsxs(Text, { children: [" ", operationInput] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, children: [selectedOp.inputPrompt || "Input:", " "] }), _jsxs(Text, { children: [" ", operationInput] }), _jsx(NavigationTips, { marginTop: 0, paddingX: 0, tips: [
+                                { key: "Enter", label: "Execute" },
+                                { key: "q/esc", label: "Cancel" },
+                            ] })] })] }));
     }
     // Operations menu
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: resource, operations: operations.map((op) => ({

package/dist/components/ResourceDetailPage.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ResourceDetailPage - Generic detail page component for resources
+ * Can be used for devboxes, blueprints, snapshots, etc.
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { Header } from "./Header.js";
+import { StatusBadge } from "./StatusBadge.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+// Format time ago in a succinct way
+const formatTimeAgo = (timestamp) => {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60)
+        return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30)
+        return `${days}d ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return `${months}mo ago`;
+    const years = Math.floor(months / 12);
+    return `${years}y ago`;
+};
+// Truncate long strings to prevent layout issues
+const truncateString = (str, maxLength) => {
+    if (str.length <= maxLength)
+        return str;
+    return str.substring(0, maxLength - 3) + "...";
+};
+export function ResourceDetailPage({ resource: initialResource, resourceType, getDisplayName, getId, getStatus, getUrl, breadcrumbPrefix = [], detailSections, operations, onOperation, onBack, buildDetailLines, additionalContent, pollResource, pollInterval = 3000, }) {
+    const isMounted = React.useRef(true);
+    // Track mounted state
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Local state for resource data (updated by polling)
+    const [currentResource, setCurrentResource] = React.useState(initialResource);
+    const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
+    const [detailScroll, setDetailScroll] = React.useState(0);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
+    // Background polling for resource details
+    React.useEffect(() => {
+        if (!pollResource || showDetailedInfo)
+            return;
+        const interval = setInterval(async () => {
+            if (isMounted.current) {
+                try {
+                    const updatedResource = await pollResource();
+                    if (isMounted.current) {
+                        setCurrentResource(updatedResource);
+                    }
+                }
+                catch {
+                    // Silently ignore polling errors
+                }
+            }
+        }, pollInterval);
+        return () => clearInterval(interval);
+    }, [pollResource, pollInterval, showDetailedInfo]);
+    // Calculate viewport for detailed info view
+    const detailViewport = useViewportHeight({ overhead: 18, minHeight: 10 });
+    const displayName = getDisplayName(currentResource);
+    const resourceId = getId(currentResource);
+    const status = getStatus(currentResource);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    useInput((input, key) => {
+        if (!isMounted.current)
+            return;
+        // Handle detailed info mode
+        if (showDetailedInfo) {
+            if (input === "q" || key.escape) {
+                setShowDetailedInfo(false);
+                setDetailScroll(0);
+            }
+            else if (input === "j" || input === "s" || key.downArrow) {
+                setDetailScroll(detailScroll + 1);
+            }
+            else if (input === "k" || input === "w" || key.upArrow) {
+                setDetailScroll(Math.max(0, detailScroll - 1));
+            }
+            else if (key.pageDown) {
+                setDetailScroll(detailScroll + 10);
+            }
+            else if (key.pageUp) {
+                setDetailScroll(Math.max(0, detailScroll - 10));
+            }
+            return;
+        }
+        // Main view input handling
+        if (input === "q" || key.escape) {
+            onBack();
+        }
+        else if (input === "i" && buildDetailLines) {
+            setShowDetailedInfo(true);
+            setDetailScroll(0);
+        }
+        else if (key.upArrow && selectedOperation > 0) {
+            setSelectedOperation(selectedOperation - 1);
+        }
+        else if (key.downArrow && selectedOperation < operations.length - 1) {
+            setSelectedOperation(selectedOperation + 1);
+        }
+        else if (key.return) {
+            const op = operations[selectedOperation];
+            if (op) {
+                onOperation(op.key, currentResource);
+            }
+        }
+        else if (input) {
+            // Check if input matches any operation shortcut
+            const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
+            if (matchedOpIndex !== -1) {
+                setSelectedOperation(matchedOpIndex);
+                onOperation(operations[matchedOpIndex].key, currentResource);
+            }
+        }
+        if (input === "o" && getUrl) {
+            const url = getUrl(currentResource);
+            const openBrowser = async () => {
+                const { exec } = await import("child_process");
+                const platform = process.platform;
+                let openCommand;
+                if (platform === "darwin") {
+                    openCommand = `open "${url}"`;
+                }
+                else if (platform === "win32") {
+                    openCommand = `start "${url}"`;
+                }
+                else {
+                    openCommand = `xdg-open "${url}"`;
+                }
+                exec(openCommand);
+            };
+            openBrowser();
+        }
+    });
+    // Detailed info mode - full screen
+    if (showDetailedInfo && buildDetailLines) {
+        const detailLines = buildDetailLines(currentResource);
+        const viewportHeight = detailViewport.viewportHeight;
+        const maxScroll = Math.max(0, detailLines.length - viewportHeight);
+        const actualScroll = Math.min(detailScroll, maxScroll);
+        const visibleLines = detailLines.slice(actualScroll, actualScroll + viewportHeight);
+        const hasMore = actualScroll + viewportHeight < detailLines.length;
+        const hasLess = actualScroll > 0;
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        ...breadcrumbPrefix,
+                        { label: resourceType },
+                        { label: displayName },
+                        { label: "Full Details", active: true },
+                    ] }), _jsx(Header, { title: `${displayName} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: status }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.idColor, children: resourceId })] }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: colors.border, paddingX: 2, paddingY: 1, children: _jsx(Box, { flexDirection: "column", children: visibleLines }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 Line ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of", " ", detailLines.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [q or esc] Back to Details"] })] })] }));
+    }
+    // Main detail view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    ...breadcrumbPrefix,
+                    { label: resourceType },
+                    { label: displayName, active: true },
+                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", children: [_jsx(Text, { color: colors.primary, bold: true, children: truncateString(displayName, Math.max(20, detailViewport.terminalWidth - 35)) }), displayName !== resourceId && (_jsxs(Text, { color: colors.idColor, children: [" \u2022 ", resourceId] }))] }), _jsx(Box, { children: _jsx(StatusBadge, { status: status, fullText: true }) })] }), detailSections.map((section, sectionIndex) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: section.color || colors.warning, bold: true, children: [section.icon || figures.squareSmallFilled, " ", section.title] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: section.fields
+                            .filter((field) => field.value !== undefined && field.value !== null)
+                            .map((field, fieldIndex) => (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [field.label, " "] }), typeof field.value === "string" ? (_jsx(Text, { color: field.color, dimColor: !field.color, children: field.value })) : (field.value)] }, fieldIndex))) })] }, sectionIndex))), additionalContent, operations.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: operations.map((op, index) => {
+                            const isSelected = index === selectedOperation;
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", op.shortcut, "]"] })] }, op.key));
+                        }) })] })), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: "Execute" },
+                    { key: "i", label: "Full Details", condition: !!buildDetailLines },
+                    { key: "o", label: "Browser", condition: !!getUrl },
+                    { key: "q", label: "Back" },
+                ] })] }));
+}
+// Helper to format timestamp as "time (ago)"
+export function formatTimestamp(timestamp) {
+    if (!timestamp)
+        return undefined;
+    const formatted = new Date(timestamp).toLocaleString();
+    const ago = formatTimeAgo(timestamp);
+    return `${formatted} (${ago})`;
+}
+// Helper to format create time with arrow to end time
+export function formatTimeRange(createTime, endTime) {
+    if (!createTime)
+        return undefined;
+    const start = new Date(createTime).toLocaleString();
+    if (endTime) {
+        const end = new Date(endTime).toLocaleString();
+        return `${start} → ${end}`;
+    }
+    return `${start} (${formatTimeAgo(createTime)})`;
+}