@runloop/rl-cli 1.2.0 → 1.4.0

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);
+    }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Delete network policy command
+ */
+import { getClient } from "../../utils/client.js";
+import { output, outputError } from "../../utils/output.js";
+export async function deleteNetworkPolicy(id, options = {}) {
+    try {
+        const client = getClient();
+        await client.networkPolicies.delete(id);
+        // Default: just output the ID for easy scripting
+        if (!options.output || options.output === "text") {
+            console.log(id);
+        }
+        else {
+            output({ id, status: "deleted" }, { format: options.output, defaultFormat: "json" });
+        }
+    }
+    catch (error) {
+        outputError("Failed to delete network policy", error);
+    }
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Get network policy details command
+ */
+import { getClient } from "../../utils/client.js";
+import { output, outputError } from "../../utils/output.js";
+export async function getNetworkPolicy(options) {
+    try {
+        const client = getClient();
+        const policy = await client.networkPolicies.retrieve(options.id);
+        output(policy, { format: options.output, defaultFormat: "json" });
+    }
+    catch (error) {
+        outputError("Failed to get network policy", error);
+    }
+}