@runloop/rl-cli 1.2.0 → 1.3.0

package/README.md

@@ -4,7 +4,7 @@
 [![CI](https://github.com/runloopai/rl-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/runloopai/rl-cli/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-An interactive CLI for interacting with the [Runloop.ai](https://runloop.ai) platform. Use it as an **interactive command-line application** with rich UI components, or as a **traditional CLI** for scripting and automation.
+A **TUI + CLI** for the [Runloop.ai](https://runloop.ai) platform. Use it as an **interactive TUI** (Terminal User Interface) with rich UI components, or as a **traditional CLI** for scripting and automation.
 
 📖 **[Full Documentation](https://docs.runloop.ai/docs/tools/cli)**
 
@@ -15,10 +15,10 @@ An interactive CLI for interacting with the [Runloop.ai](https://runloop.ai) pla
 ## Quick Example
 
 ```bash
-# Interactive mode - launches a beautiful UI menu
+# TUI mode - launches an interactive terminal UI
 rli
 
-# Traditional CLI mode - perfect for scripts
+# CLI mode - perfect for scripts and automation
 rli devbox list                    # Outputs JSON/text
 rli devbox create --name my-devbox
 rli devbox exec <devbox-id> echo "Hello World"
@@ -27,10 +27,11 @@ rli devbox delete <devbox-id>
 
 ## Features
 
+- 🖥️ **TUI mode** — Interactive terminal UI with menus, tables, and real-time updates
+- 🎯 **CLI mode** — Traditional commands with text, JSON, and YAML output for scripting
 - ⚡ Fast and responsive with pagination
 - 📦 Manage devboxes, snapshots, and blueprints
-- 🚀 Execute commands, ssh, view logs in devboxes
-- 🎯 Traditional CLI with text, json, and yaml output modes.
+- 🚀 Execute commands, SSH, view logs in devboxes
 - 🤖 **Model Context Protocol (MCP) server for AI integration**
 
 ## Installation
@@ -53,13 +54,23 @@ Get your API key from [https://runloop.ai/settings](https://runloop.ai/settings)
 
 ## Usage
 
-### Interactive CLI
+### TUI (Interactive Mode)
 
 ```bash
-rli                    # Run the interactive console
+rli                    # Launch the interactive TUI
 rli --help             # See help information
 ```
 
+### CLI (Scripting Mode)
+
+All commands support `--output` (`-o`) for format control:
+
+```bash
+rli devbox list                      # Default text output
+rli devbox list -o json              # JSON output
+rli devbox list -o yaml              # YAML output
+```
+
 ## Command Structure
 
 The CLI is organized into command buckets:
@@ -119,6 +130,15 @@ rli object upload <path>                 # Upload a file as an object
 rli object delete <id>                   # Delete an object (irreversible)
 ```
 
+### Network-policy Commands (alias: `np`)
+
+```bash
+rli network-policy list                  # List network policies
+rli network-policy get <id>              # Get network policy details
+rli network-policy create                # Create a new network policy
+rli network-policy delete <id>           # Delete a network policy
+```
+
 ### Mcp Commands
 
 ```bash
@@ -160,7 +180,7 @@ rli mcp start --http --port 8080
 
 ## Theme Configuration
 
-The CLI supports both light and dark terminal themes and will automatically select the appropriate theme.
+The TUI supports both light and dark terminal themes and will automatically select the appropriate theme.
 
 ## Development
 

package/dist/commands/blueprint/list.js

@@ -9,6 +9,7 @@ import { SpinnerComponent } from "../../components/Spinner.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { SuccessMessage } from "../../components/SuccessMessage.js";
 import { Breadcrumb } from "../../components/Breadcrumb.js";
+import { NavigationTips } from "../../components/NavigationTips.js";
 import { createTextColumn, Table } from "../../components/Table.js";
 import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
@@ -21,6 +22,7 @@ import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
 import { useNavigation } from "../../store/navigationStore.js";
+import { ConfirmationPrompt } from "../../components/ConfirmationPrompt.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListBlueprintsUI = ({ onBack, onExit, }) => {
     const { exit: inkExit } = useApp();
@@ -33,6 +35,7 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     const [operationError, setOperationError] = React.useState(null);
     const [operationLoading, setOperationLoading] = React.useState(false);
     const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [showPopup, setShowPopup] = React.useState(false);
     const { navigate } = useNavigation();
@@ -44,13 +47,18 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     });
     const PAGE_SIZE = viewportHeight;
     // All width constants
+    const fixedWidth = 6; // border + padding
     const statusIconWidth = 2;
     const statusTextWidth = 10;
     const idWidth = 25;
-    const nameWidth = Math.max(15, terminalWidth >= 120 ? 30 : 25);
     const descriptionWidth = 40;
     const timeWidth = 20;
     const showDescription = terminalWidth >= 120;
+    // Name width uses remaining space after fixed columns
+    const baseWidth = fixedWidth + statusIconWidth + statusTextWidth + idWidth + timeWidth;
+    const optionalWidth = showDescription ? descriptionWidth : 0;
+    const remainingWidth = terminalWidth - baseWidth - optionalWidth;
+    const nameWidth = Math.min(80, Math.max(15, remainingWidth));
     // Fetch function for pagination hook
     const fetchPage = React.useCallback(async (params) => {
         const client = getClient();
@@ -88,7 +96,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
         pageSize: PAGE_SIZE,
         getItemId: (blueprint) => blueprint.id,
         pollInterval: 2000,
-        pollingEnabled: !showPopup && !showCreateDevbox && !executingOperation,
+        pollingEnabled: !showPopup &&
+            !showCreateDevbox &&
+            !executingOperation &&
+            !showDeleteConfirm,
         deps: [PAGE_SIZE],
     });
     // Memoize columns array
@@ -99,10 +110,7 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             width: statusIconWidth,
             render: (blueprint, _index, isSelected) => {
                 const statusDisplay = getStatusDisplay(blueprint.status || "");
-                const statusColor = statusDisplay.color === colors.textDim
-                    ? colors.info
-                    : statusDisplay.color;
-                return (_jsxs(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                return (_jsxs(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
             },
         },
         {
@@ -123,13 +131,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             width: statusTextWidth,
             render: (blueprint, _index, isSelected) => {
                 const statusDisplay = getStatusDisplay(blueprint.status || "");
-                const statusColor = statusDisplay.color === colors.textDim
-                    ? colors.info
-                    : statusDisplay.color;
                 const safeWidth = Math.max(1, statusTextWidth);
                 const truncated = statusDisplay.text.slice(0, safeWidth);
                 const padded = truncated.padEnd(safeWidth, " ");
-                return (_jsx(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
+                return (_jsx(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
             },
         },
         createTextColumn("name", "Name", (blueprint) => blueprint.name || "", {
@@ -156,6 +161,13 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     // Helper function to generate operations based on selected blueprint
     const getOperationsForBlueprint = (blueprint) => {
         const operations = [];
+        // View Details is always first
+        operations.push({
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        });
         // View Logs is always available
         operations.push({
             key: "view_logs",
@@ -213,6 +225,14 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
         try {
             setOperationLoading(true);
             switch (operation) {
+                case "view_details":
+                    // Navigate to the detail screen
+                    setOperationLoading(false);
+                    setExecutingOperation(null);
+                    navigate("blueprint-detail", {
+                        blueprintId: blueprint.id,
+                    });
+                    return;
                 case "view_logs":
                     // Navigate to the logs screen
                     setOperationLoading(false);
@@ -295,16 +315,33 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             else if (key.return) {
                 setShowPopup(false);
                 const operationKey = allOperations[selectedOperation].key;
-                if (operationKey === "create_devbox") {
+                if (operationKey === "view_details") {
+                    navigate("blueprint-detail", {
+                        blueprintId: selectedBlueprintItem.id,
+                    });
+                }
+                else if (operationKey === "create_devbox") {
                     setSelectedBlueprint(selectedBlueprintItem);
                     setShowCreateDevbox(true);
                 }
+                else if (operationKey === "delete") {
+                    // Show delete confirmation
+                    setSelectedBlueprint(selectedBlueprintItem);
+                    setShowDeleteConfirm(true);
+                }
                 else {
                     setSelectedBlueprint(selectedBlueprintItem);
                     setExecutingOperation(operationKey);
                     executeOperation(selectedBlueprintItem, operationKey);
                 }
             }
+            else if (input === "v" && selectedBlueprintItem) {
+                // View details hotkey
+                setShowPopup(false);
+                navigate("blueprint-detail", {
+                    blueprintId: selectedBlueprintItem.id,
+                });
+            }
             else if (key.escape || input === "q") {
                 setShowPopup(false);
                 setSelectedOperation(0);
@@ -321,10 +358,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             else if (input === "d") {
                 const deleteIndex = allOperations.findIndex((op) => op.key === "delete");
                 if (deleteIndex >= 0) {
+                    // Show delete confirmation
                     setShowPopup(false);
                     setSelectedBlueprint(selectedBlueprintItem);
-                    setExecutingOperation("delete");
-                    executeOperation(selectedBlueprintItem, "delete");
+                    setShowDeleteConfirm(true);
                 }
             }
             else if (input === "l") {
@@ -360,6 +397,12 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             prevPage();
             setSelectedIndex(0);
         }
+        else if (key.return && selectedBlueprintItem) {
+            // Enter key navigates to detail view
+            navigate("blueprint-detail", {
+                blueprintId: selectedBlueprintItem.id,
+            });
+        }
         else if (input === "a") {
             setShowPopup(true);
             setSelectedOperation(0);
@@ -400,6 +443,21 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             }
         }
     });
+    // Delete confirmation
+    if (showDeleteConfirm && selectedBlueprint) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Blueprint", message: `Are you sure you want to delete "${selectedBlueprint.name || selectedBlueprint.id}"?`, details: "This action cannot be undone.", breadcrumbItems: [
+                { label: "Blueprints" },
+                { label: selectedBlueprint.name || selectedBlueprint.id },
+                { label: "Delete", active: true },
+            ], onConfirm: () => {
+                setShowDeleteConfirm(false);
+                setExecutingOperation("delete");
+                executeOperation(selectedBlueprint, "delete");
+            }, onCancel: () => {
+                setShowDeleteConfirm(false);
+                setSelectedBlueprint(null);
+            } }));
+    }
     // Operation result display
     if (operationResult || operationError) {
         const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
@@ -410,7 +468,7 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
                             label: selectedBlueprint?.name || selectedBlueprint?.id || "Blueprint",
                         },
                         { label: operationLabel, active: true },
-                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
+                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Continue" }] })] }));
     }
     // Operation input mode
     if (executingOperation && selectedBlueprint) {
@@ -435,7 +493,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
                             { label: "Blueprints" },
                             { label: selectedBlueprint.name || selectedBlueprint.id },
                             { label: operationLabel, active: true },
-                        ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, children: [currentOp?.inputPrompt || "", " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: currentOp?.inputPlaceholder || "" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+                        ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, children: [currentOp?.inputPrompt || "", " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: currentOp?.inputPlaceholder || "" }) }), _jsx(NavigationTips, { marginTop: 1, paddingX: 0, tips: [
+                                    { key: "Enter", label: "Execute" },
+                                    { key: "q/esc", label: "Cancel" },
+                                ] })] })] }));
         }
         // For operations that don't need input (like view_logs), fall through to list view
     }
@@ -458,24 +519,32 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     if (listError) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsx(ErrorMessage, { message: "Failed to load blueprints", error: listError })] }));
     }
-    // Empty state
-    if (blueprints.length === 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.warning, children: figures.info }), _jsx(Text, { children: " No blueprints found. Try: " }), _jsx(Text, { color: colors.primary, bold: true, children: "rli blueprint create" })] })] }));
-    }
     // List view
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), !showPopup && (_jsx(Table, { data: blueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, title: `blueprints[${totalCount}]`, columns: blueprintColumns })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedBlueprintItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedBlueprintItem, operations: allOperations.map((op) => ({
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), !showPopup && (_jsx(Table, { data: blueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, title: `blueprints[${totalCount}]`, columns: blueprintColumns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No blueprints found. Try: rli blueprint create"] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedBlueprintItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedBlueprintItem, operations: allOperations.map((op) => ({
                         key: op.key,
                         label: op.label,
                         color: op.color,
                         icon: op.icon,
-                        shortcut: op.key === "create_devbox"
-                            ? "c"
-                            : op.key === "delete"
-                                ? "d"
-                                : op.key === "view_logs"
-                                    ? "l"
-                                    : "",
-                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [o] Browser"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
+                        shortcut: op.key === "view_details"
+                            ? "v"
+                            : op.key === "create_devbox"
+                                ? "c"
+                                : op.key === "delete"
+                                    ? "d"
+                                    : op.key === "view_logs"
+                                        ? "l"
+                                        : "",
+                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: hasMore || hasPrev,
+                    },
+                    { key: "Enter", label: "Details" },
+                    { key: "a", label: "Actions" },
+                    { key: "o", label: "Browser" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
 };
 // Export the UI component for use in the main menu
 export { ListBlueprintsUI };

package/dist/commands/blueprint/prune.js

@@ -42,9 +42,9 @@ async function fetchAllBlueprintsWithName(name) {
  */
 function categorizeBlueprints(blueprints, keepCount) {
     // Filter successful builds
-    const successful = blueprints.filter((b) => b.status === "build_complete" || b.status === "building_complete");
-    // Filter failed builds
-    const failed = blueprints.filter((b) => b.status !== "build_complete" && b.status !== "building_complete");
+    const successful = blueprints.filter((b) => b.status === "build_complete");
+    // Filter failed/incomplete builds
+    const failed = blueprints.filter((b) => b.status !== "build_complete");
     // Sort successful by create_time_ms descending (newest first)
     successful.sort((a, b) => (b.create_time_ms || 0) - (a.create_time_ms || 0));
     // Determine what to keep and delete
@@ -106,14 +106,8 @@ function displaySummary(name, result, isDryRun) {
     else {
         // Show all blueprints without summarizing
         for (const blueprint of result.toDelete) {
-            const icon = blueprint.status === "build_complete" ||
-                blueprint.status === "building_complete"
-                ? "✓"
-                : "✗";
-            const statusLabel = blueprint.status === "build_complete" ||
-                blueprint.status === "building_complete"
-                ? "successful"
-                : "failed";
+            const icon = blueprint.status === "build_complete" ? "✓" : "⚠";
+            const statusLabel = blueprint.status === "build_complete" ? "successful" : "failed";
             console.log(`  ${icon} ${blueprint.id} - Created ${formatTimestamp(blueprint.create_time_ms)} (${statusLabel})`);
         }
     }
@@ -127,14 +121,8 @@ function displayDeletedBlueprints(deleted) {
     }
     console.log("\nDeleted blueprints:");
     for (const blueprint of deleted) {
-        const icon = blueprint.status === "build_complete" ||
-            blueprint.status === "building_complete"
-            ? "✓"
-            : "✗";
-        const statusLabel = blueprint.status === "build_complete" ||
-            blueprint.status === "building_complete"
-            ? "successful"
-            : "failed";
+        const icon = blueprint.status === "build_complete" ? "✓" : "⚠";
+        const statusLabel = blueprint.status === "build_complete" ? "successful" : "failed";
         console.log(`  ${icon} ${blueprint.id} - Created ${formatTimestamp(blueprint.create_time_ms)} (${statusLabel})`);
     }
 }

package/dist/commands/devbox/create.js

@@ -74,6 +74,9 @@ export async function createDevbox(options = {}) {
                 on_idle: options.idleAction,
             };
         }
+        if (options.networkPolicy) {
+            launchParameters.network_policy_id = options.networkPolicy;
+        }
         // Build create request
         const createRequest = {
             name: options.name || `devbox-${Date.now()}`,

package/dist/commands/devbox/list.js

@@ -8,6 +8,7 @@ import { SpinnerComponent } from "../../components/Spinner.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { getStatusDisplay } from "../../components/StatusBadge.js";
 import { Breadcrumb } from "../../components/Breadcrumb.js";
+import { NavigationTips } from "../../components/NavigationTips.js";
 import { Table, createTextColumn } from "../../components/Table.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
 import { output, outputError } from "../../utils/output.js";
@@ -104,46 +105,24 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
     const sourceWidth = 26;
     // ID is always full width (25 chars for dbx_31CYd5LLFbBxst8mqnUjO format)
     const idWidth = 26;
-    // Responsive layout based on terminal width (simplified like blueprint list)
-    const showCapabilities = terminalWidth >= 140;
-    const showSource = terminalWidth >= 120;
+    // Responsive layout - hide less important columns on smaller screens
+    // Priority (most to least important): ID, Name, Status, Created, Source, Capabilities
+    const showCapabilities = terminalWidth >= 160;
+    const showSource = terminalWidth >= 135;
+    const showCreated = terminalWidth >= 100;
     // CRITICAL: Absolute maximum column widths to prevent Yoga crashes
     const ABSOLUTE_MAX_NAME_WIDTH = 80;
     // Name width is flexible and uses remaining space
-    let nameWidth = 15;
-    if (terminalWidth >= 120) {
-        const remainingWidth = terminalWidth -
-            fixedWidth -
-            statusIconWidth -
-            idWidth -
-            statusTextWidth -
-            timeWidth -
-            capabilitiesWidth -
-            sourceWidth -
-            12;
-        nameWidth = Math.min(ABSOLUTE_MAX_NAME_WIDTH, Math.max(15, remainingWidth));
-    }
-    else if (terminalWidth >= 110) {
-        const remainingWidth = terminalWidth -
-            fixedWidth -
-            statusIconWidth -
-            idWidth -
-            statusTextWidth -
-            timeWidth -
-            sourceWidth -
-            10;
-        nameWidth = Math.min(ABSOLUTE_MAX_NAME_WIDTH, Math.max(12, remainingWidth));
-    }
-    else {
-        const remainingWidth = terminalWidth -
-            fixedWidth -
-            statusIconWidth -
-            idWidth -
-            statusTextWidth -
-            timeWidth -
-            10;
-        nameWidth = Math.min(ABSOLUTE_MAX_NAME_WIDTH, Math.max(8, remainingWidth));
-    }
+    // Only subtract widths of columns that are actually shown
+    const baseWidth = fixedWidth +
+        statusIconWidth +
+        idWidth +
+        statusTextWidth +
+        (showCreated ? timeWidth : 0) +
+        6; // border + padding
+    const optionalWidth = (showSource ? sourceWidth : 0) + (showCapabilities ? capabilitiesWidth : 0);
+    const remainingWidth = terminalWidth - baseWidth - optionalWidth;
+    const nameWidth = Math.min(ABSOLUTE_MAX_NAME_WIDTH, Math.max(15, remainingWidth));
     // Build responsive column list (memoized to prevent recreating on every render)
     const tableColumns = React.useMemo(() => {
         const ABSOLUTE_MAX_NAME = 80;
@@ -156,22 +135,9 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 width: statusIconWidth,
                 render: (devbox, _index, isSelected) => {
                     const statusDisplay = getStatusDisplay(devbox?.status);
-                    const statusColor = statusDisplay.color === colors.textDim
-                        ? colors.info
-                        : statusDisplay.color;
-                    return (_jsxs(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                    return (_jsxs(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
                 },
             },
-            createTextColumn("name", "Name", (devbox) => {
-                const name = String(devbox?.name || "");
-                const safeMax = Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME);
-                return name.length > safeMax
-                    ? name.substring(0, Math.max(1, safeMax - 3)) + "..."
-                    : name;
-            }, {
-                width: Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME),
-                dimColor: false,
-            }),
             createTextColumn("id", "ID", (devbox) => {
                 const id = String(devbox?.id || "");
                 const safeMax = Math.min(idWidth || 26, ABSOLUTE_MAX_ID);
@@ -184,6 +150,16 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 dimColor: false,
                 bold: false,
             }),
+            createTextColumn("name", "Name", (devbox) => {
+                const name = String(devbox?.name || "");
+                const safeMax = Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME);
+                return name.length > safeMax
+                    ? name.substring(0, Math.max(1, safeMax - 3)) + "..."
+                    : name;
+            }, {
+                width: Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME),
+                dimColor: false,
+            }),
             // Status text column with color matching the icon
             {
                 key: "status",
@@ -191,13 +167,10 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 width: statusTextWidth,
                 render: (devbox, _index, isSelected) => {
                     const statusDisplay = getStatusDisplay(devbox?.status);
-                    const statusColor = statusDisplay.color === colors.textDim
-                        ? colors.info
-                        : statusDisplay.color;
                     const safeWidth = Math.max(1, statusTextWidth);
                     const truncated = statusDisplay.text.slice(0, safeWidth);
                     const padded = truncated.padEnd(safeWidth, " ");
-                    return (_jsx(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
+                    return (_jsx(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
                 },
             },
             createTextColumn("created", "Created", (devbox) => {
@@ -208,18 +181,11 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                 width: timeWidth,
                 color: colors.textDim,
                 dimColor: false,
+                visible: showCreated,
             }),
         ];
         if (showSource) {
-            columns.push(createTextColumn("source", "Source", (devbox) => {
-                if (devbox?.blueprint_id) {
-                    const bpId = String(devbox.blueprint_id);
-                    const truncated = bpId.slice(0, 16);
-                    const text = `${truncated}`;
-                    return text.length > 30 ? text.substring(0, 27) + "..." : text;
-                }
-                return "-";
-            }, {
+            columns.push(createTextColumn("source", "Source", (devbox) => devbox?.blueprint_id || "-", {
                 width: sourceWidth,
                 color: colors.textDim,
                 dimColor: false,
@@ -243,6 +209,7 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
         idWidth,
         statusTextWidth,
         timeWidth,
+        showCreated,
         showSource,
         sourceWidth,
         showCapabilities,
@@ -511,7 +478,19 @@ const ListDevboxesUI = ({ status, onBack, onExit, onNavigateToDetail, }) => {
                             setSelectedIndex(0);
                         } }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to search, Esc to cancel]"] })] })), !searchMode && submittedSearchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: submittedSearchQuery.length > 50
                             ? submittedSearchQuery.substring(0, 50) + "..."
-                            : submittedSearchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", totalCount, " results) [/ to edit, Esc to clear]"] })] })), !showPopup && (_jsx(Table, { data: devboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: "devboxes", columns: tableColumns })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", submittedSearchQuery, "\""] })] }))] })), showPopup && selectedDevbox && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedDevbox, operations: operations, selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Enter] Details"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [c] Create"] }), selectedDevbox && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [o] Open in Browser"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [/] Search"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
+                            : submittedSearchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", totalCount, " results) [/ to edit, Esc to clear]"] })] })), !showPopup && (_jsx(Table, { data: devboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: "devboxes", columns: tableColumns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No devboxes found. Press [c] to create one."] }) })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), submittedSearchQuery && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.warning, children: ["Filtered: \"", submittedSearchQuery, "\""] })] }))] })), showPopup && selectedDevbox && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedDevbox, operations: operations, selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: hasMore || hasPrev,
+                    },
+                    { key: "Enter", label: "Details" },
+                    { key: "a", label: "Actions" },
+                    { key: "c", label: "Create" },
+                    { key: "o", label: "Open in Browser", condition: !!selectedDevbox },
+                    { key: "/", label: "Search" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
 };
 // Export the UI component for use in the main menu
 export { ListDevboxesUI };

package/dist/commands/menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
-import { enterAlternateScreenBuffer, exitAlternateScreenBuffer, } from "../utils/screen.js";
+import { enterAlternateScreenBuffer, exitAlternateScreenBuffer, clearScreen, } from "../utils/screen.js";
 import { processUtils } from "../utils/processUtils.js";
 import { Router } from "../router/Router.js";
 import { NavigationProvider } from "../store/navigationStore.js";
@@ -14,6 +14,7 @@ function App({ initialScreen = "menu", focusDevboxId, }) {
 }
 export async function runMainMenu(initialScreen = "menu", focusDevboxId) {
     enterAlternateScreenBuffer();
+    clearScreen(); // Ensure cursor is at top-left before Ink renders
     try {
         const { waitUntilExit } = render(_jsx(App, { initialScreen: initialScreen, focusDevboxId: focusDevboxId }, `app-${initialScreen}-${focusDevboxId}`), {
             patchConsole: false,

package/dist/commands/network-policy/create.js

@@ -0,0 +1,27 @@
+/**
+ * Create network policy command
+ */
+import { getClient } from "../../utils/client.js";
+import { output, outputError } from "../../utils/output.js";
+export async function createNetworkPolicy(options) {
+    try {
+        const client = getClient();
+        const policy = await client.networkPolicies.create({
+            name: options.name,
+            description: options.description,
+            allow_all: options.allowAll ?? false,
+            allow_devbox_to_devbox: options.allowDevboxToDevbox ?? false,
+            allowed_hostnames: options.allowedHostnames ?? [],
+        });
+        // Default: just output the ID for easy scripting
+        if (!options.output || options.output === "text") {
+            console.log(policy.id);
+        }
+        else {
+            output(policy, { format: options.output, defaultFormat: "json" });
+        }
+    }
+    catch (error) {
+        outputError("Failed to create network policy", error);
+    }
+}