@runloop/rl-cli 0.1.2 → 0.3.0

package/dist/components/MainMenu.js

@@ -1,39 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, useInput, useApp } from "ink";
 import figures from "figures";
 import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
-import { VERSION } from "../cli.js";
+import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
-export const MainMenu = React.memo(({ onSelect }) => {
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const menuItems = [
+    {
+        key: "devboxes",
+        label: "Devboxes",
+        description: "Manage cloud development environments",
+        icon: "◉",
+        color: colors.accent1,
+    },
+    {
+        key: "blueprints",
+        label: "Blueprints",
+        description: "Create and manage devbox templates",
+        icon: "▣",
+        color: colors.accent2,
+    },
+    {
+        key: "snapshots",
+        label: "Snapshots",
+        description: "Save and restore devbox states",
+        icon: "◈",
+        color: colors.accent3,
+    },
+];
+export const MainMenu = ({ onSelect }) => {
     const { exit } = useApp();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    // Calculate terminal height once at mount and memoize
-    const terminalHeight = React.useMemo(() => process.stdout.rows || 24, []);
-    const menuItems = React.useMemo(() => [
-        {
-            key: "devboxes",
-            label: "Devboxes",
-            description: "Manage cloud development environments",
-            icon: "◉",
-            color: colors.accent1,
-        },
-        {
-            key: "blueprints",
-            label: "Blueprints",
-            description: "Create and manage devbox templates",
-            icon: "▣",
-            color: colors.accent2,
-        },
-        {
-            key: "snapshots",
-            label: "Snapshots",
-            description: "Save and restore devbox states",
-            icon: "◈",
-            color: colors.accent3,
-        },
-    ], []);
+    // Use centralized viewport hook for consistent layout
+    const { terminalHeight } = useViewportHeight({ overhead: 0 });
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     useInput((input, key) => {
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
@@ -58,15 +62,15 @@ export const MainMenu = React.memo(({ onSelect }) => {
         }
     });
     // Use compact layout if terminal height is less than 20 lines (memoized)
-    const useCompactLayout = React.useMemo(() => terminalHeight < 20, [terminalHeight]);
+    const useCompactLayout = terminalHeight < 20;
     if (useCompactLayout) {
-        return (_jsxs(Box, { flexDirection: "column", height: "100%", 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: [_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"] }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Box, { flexShrink: 0, children: _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, 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) => {
                         const isSelected = index === selectedIndex;
-                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: isSelected ? "round" : "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, 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));
+                        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"] }) }) })] }));
-});
+};

package/dist/components/MetadataDisplay.js

@@ -1,8 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { Badge } from "@inkjs/ui";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
+const renderKeyValueBadge = (keyText, value, color) => (_jsxs(Box, { borderStyle: "round", borderColor: color, paddingX: 1, marginRight: 1, children: [_jsx(Text, { color: color, bold: true, children: keyText }), _jsx(Text, { color: color, children: ": " }), _jsx(Text, { color: color, children: value })] }));
 // Generate color for each key based on hash
 const getColorForKey = (key, index) => {
     const colorList = [
@@ -20,10 +20,10 @@ export const MetadataDisplay = ({ metadata, title = "Metadata", showBorder = fal
     if (entries.length === 0) {
         return null;
     }
-    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.info, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
+    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 1, children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.identical, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
                 const color = getColorForKey(key, index);
                 const isSelected = selectedKey === key;
-                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " "] })), _jsx(Badge, { color: isSelected ? colors.primary : color, children: `${key}: ${value}` })] }, key));
+                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " "] })), renderKeyValueBadge(key, value, isSelected ? colors.primary : color)] }, key));
             })] }));
     if (showBorder) {
         return (_jsx(Box, { borderStyle: "round", borderColor: colors.accent3, paddingX: 2, paddingY: 1, flexDirection: "column", children: content }));

package/dist/components/OperationsMenu.js

@@ -6,7 +6,7 @@ import { colors } from "../utils/theme.js";
  * Reusable operations menu component for detail pages
  * Displays a list of available operations with keyboard navigation
  */
-export const OperationsMenu = ({ operations, selectedIndex, onNavigate, onSelect, onBack, additionalActions = [], }) => {
+export const OperationsMenu = ({ operations, selectedIndex, onNavigate: _onNavigate, onSelect: _onSelect, onBack: _onBack, additionalActions = [], }) => {
     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));

package/dist/components/ResourceActionsMenu.js

@@ -8,8 +8,8 @@ import { ActionsPopup } from "./ActionsPopup.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 export const ResourceActionsMenu = (props) => {
     if (props.resourceType === "devbox") {
-        const { resource, onBack, breadcrumbItems, initialOperation, initialOperationIndex, skipOperationsMenu, onSSHRequest, } = props;
-        return (_jsx(DevboxActionsMenu, { devbox: resource, onBack: onBack, breadcrumbItems: breadcrumbItems, initialOperation: initialOperation, initialOperationIndex: initialOperationIndex, skipOperationsMenu: skipOperationsMenu, onSSHRequest: onSSHRequest }));
+        const { resource, onBack, breadcrumbItems, initialOperation, initialOperationIndex, skipOperationsMenu, } = props;
+        return (_jsx(DevboxActionsMenu, { devbox: resource, onBack: onBack, breadcrumbItems: breadcrumbItems, initialOperation: initialOperation, initialOperationIndex: initialOperationIndex, skipOperationsMenu: skipOperationsMenu }));
     }
     // Blueprint generic actions menu
     const { resource, onBack, breadcrumbItems = [
@@ -101,10 +101,10 @@ export const ResourceActionsMenu = (props) => {
     // Screens
     if (operationResult || operationError) {
         const label = operations.find((o) => o.key === executingOperation)?.label;
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _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"] })] })] }));
+        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, showVersionCheck: true }), _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(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] 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/ResourceListView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Box, Text, useInput, useStdout, useApp } from "ink";
+import { Box, Text, useInput, useApp } from "ink";
 import TextInput from "ink-text-input";
 import figures from "figures";
 import { Breadcrumb } from "./Breadcrumb.js";
@@ -8,6 +8,8 @@ import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { Table } from "./Table.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
 export const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -29,8 +31,15 @@ export const formatTimeAgo = (timestamp) => {
     return `${years}y ago`;
 };
 export function ResourceListView({ config }) {
-    const { stdout } = useStdout();
     const { exit: inkExit } = useApp();
+    const isMounted = React.useRef(true);
+    // Track mounted state
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
     const [loading, setLoading] = React.useState(true);
     const [resources, setResources] = React.useState([]);
     const [error, setError] = React.useState(null);
@@ -38,29 +47,39 @@ export function ResourceListView({ config }) {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [searchMode, setSearchMode] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState("");
-    const [refreshing, setRefreshing] = React.useState(false);
-    const [refreshIcon, setRefreshIcon] = React.useState(0);
-    const pageSize = config.pageSize || 10;
-    const maxFetch = config.maxFetch || 100;
-    // Calculate responsive dimensions
-    const terminalWidth = stdout?.columns || 120;
-    const terminalHeight = stdout?.rows || 30;
+    // Calculate overhead for viewport height:
+    // - Breadcrumb (3 lines + marginBottom): 4 lines
+    // - Search bar (if visible, 1 line + marginBottom): 2 lines
+    // - Table (title + top border + header + bottom border): 4 lines
+    // - Stats bar (marginTop + content): 2 lines
+    // - Help bar (marginTop + content): 2 lines
+    // - Safety buffer for edge cases: 1 line
+    // Total: 13 lines base + 2 if searching
+    const overhead = 13 + (searchMode || searchQuery ? 2 : 0);
+    const { viewportHeight } = useViewportHeight({
+        overhead,
+        minHeight: 5,
+    });
+    // Use viewport height for dynamic page size, or fall back to config
+    const pageSize = config.pageSize || viewportHeight;
     // Fetch resources
-    const fetchData = React.useCallback(async (isInitialLoad = false) => {
+    const fetchData = React.useCallback(async (_isInitialLoad = false) => {
+        if (!isMounted.current)
+            return;
         try {
-            if (isInitialLoad) {
-                setRefreshing(true);
-            }
             const data = await config.fetchResources();
-            setResources(data);
+            if (isMounted.current) {
+                setResources(data);
+            }
         }
         catch (err) {
-            setError(err);
+            if (isMounted.current) {
+                setError(err);
+            }
         }
         finally {
-            setLoading(false);
-            if (isInitialLoad) {
-                setTimeout(() => setRefreshing(false), 300);
+            if (isMounted.current) {
+                setLoading(false);
             }
         }
     }, [config.fetchResources]);
@@ -77,13 +96,7 @@ export function ResourceListView({ config }) {
             return () => clearInterval(interval);
         }
     }, [config.autoRefresh, fetchData]);
-    // Animate refresh icon
-    React.useEffect(() => {
-        const interval = setInterval(() => {
-            setRefreshIcon((prev) => (prev + 1) % 10);
-        }, 80);
-        return () => clearInterval(interval);
-    }, []);
+    // Removed refresh icon animation to prevent constant re-renders and flashing
     // Filter resources based on search query
     const filteredResources = React.useMemo(() => {
         if (!config.searchConfig?.enabled || !searchQuery.trim()) {
@@ -108,13 +121,13 @@ export function ResourceListView({ config }) {
         }
     }, [currentResources.length, selectedIndex]);
     const selectedResource = currentResources[selectedIndex];
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     // Input handling
     useInput((input, key) => {
-        // Handle Ctrl+C to force exit
-        if (key.ctrl && input === "c") {
-            process.stdout.write("\x1b[?1049l"); // Exit alternate screen
-            process.exit(130);
-        }
+        // Don't process input if unmounting
+        if (!isMounted.current)
+            return;
         const pageResourcesCount = currentResources.length;
         // Skip input handling when in search mode
         if (searchMode) {
@@ -141,7 +154,6 @@ export function ResourceListView({ config }) {
             setSelectedIndex(0);
         }
         else if (key.return && selectedResource && config.onSelect) {
-            console.clear();
             config.onSelect(selectedResource);
         }
         else if (input === "/" && config.searchConfig?.enabled) {
@@ -173,8 +185,8 @@ export function ResourceListView({ config }) {
             }
         }
     });
-    // Calculate stats
-    const stats = React.useMemo(() => {
+    // Calculate stats (computed for potential future use)
+    const _stats = React.useMemo(() => {
         if (!config.statusConfig || !config.getStatus) {
             return null;
         }
@@ -208,6 +220,6 @@ export function ResourceListView({ config }) {
                                     setSearchMode(false);
                                     setCurrentPage(0);
                                     setSelectedIndex(0);
-                                } }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Esc to cancel]"] })] })), !searchMode && searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: searchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", currentResources.length, " results) [/ to edit, Esc to clear]"] })] }))] })), _jsx(Table, { data: currentResources, keyExtractor: config.keyExtractor, selectedIndex: selectedIndex, title: `${config.resourceNamePlural.toLowerCase()}[${searchQuery ? currentResources.length : resources.length}]`, columns: config.columns }, `table-${searchQuery}-${currentPage}`), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", resources.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _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 ", filteredResources.length] }), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: colors.primary, children: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"][refreshIcon % 10] })) : (_jsx(Text, { color: colors.success, children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), config.onSelect && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Enter] Details"] })), config.searchConfig?.enabled && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [/] Search"] })), config.additionalShortcuts &&
+                                } }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Esc to cancel]"] })] })), !searchMode && searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: searchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", currentResources.length, " results) [/ to edit, Esc to clear]"] })] }))] })), _jsx(Table, { data: currentResources, keyExtractor: config.keyExtractor, selectedIndex: selectedIndex, title: `${config.resourceNamePlural.toLowerCase()}[${searchQuery ? currentResources.length : resources.length}]`, columns: config.columns }, `table-${searchQuery}-${currentPage}`), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", resources.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _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 ", filteredResources.length] }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.success, children: figures.circleFilled })] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), config.onSelect && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Enter] Details"] })), config.searchConfig?.enabled && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [/] Search"] })), config.additionalShortcuts &&
                         config.additionalShortcuts.map((shortcut) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [", shortcut.key, "] ", shortcut.label] }, shortcut.key))), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 }

package/dist/components/Spinner.js

@@ -2,6 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import Spinner from "ink-spinner";
 import { colors } from "../utils/theme.js";
-export const SpinnerComponent = ({ message, }) => {
-    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.primary, children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", message] })] }));
+export const SpinnerComponent = ({ message }) => {
+    // Limit message length to prevent Yoga layout engine errors
+    const MAX_LENGTH = 200;
+    const truncatedMessage = message.length > MAX_LENGTH
+        ? message.substring(0, MAX_LENGTH) + "..."
+        : message;
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: colors.primary, children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", truncatedMessage] })] }));
 };

package/dist/components/StatusBadge.js

@@ -88,7 +88,7 @@ export const getStatusDisplay = (status) => {
             };
     }
 };
-export const StatusBadge = ({ status, showText = true, }) => {
+export const StatusBadge = ({ status, showText = true }) => {
     const statusDisplay = getStatusDisplay(status);
     return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), showText && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: statusDisplay.color, children: statusDisplay.text })] }))] }));
 };

package/dist/components/SuccessMessage.js

@@ -2,6 +2,16 @@ 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";
-export const SuccessMessage = ({ message, details, }) => {
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " ", message] }) }), details && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: details.split("\n").map((line, i) => (_jsx(Text, { color: colors.textDim, dimColor: true, children: line }, i))) }))] }));
+export const SuccessMessage = ({ message, details }) => {
+    // Limit message length to prevent Yoga layout engine errors
+    const MAX_LENGTH = 500;
+    const truncatedMessage = message.length > MAX_LENGTH
+        ? message.substring(0, MAX_LENGTH) + "..."
+        : message;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " ", truncatedMessage] }) }), details && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: details.split("\n").map((line, i) => {
+                    const truncatedLine = line.length > MAX_LENGTH
+                        ? line.substring(0, MAX_LENGTH) + "..."
+                        : line;
+                    return (_jsx(Text, { color: colors.textDim, dimColor: true, children: truncatedLine }, i));
+                }) }))] }));
 };

package/dist/components/Table.js

@@ -2,21 +2,29 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { Box, Text } from "ink";
 import figures from "figures";
-import { colors } from "../utils/theme.js";
+import { colors, sanitizeWidth } from "../utils/theme.js";
 /**
  * Reusable table component for displaying lists of data with optional selection
  * Designed to be responsive and work across devboxes, blueprints, and snapshots
  */
 export function Table({ data, columns, selectedIndex = -1, showSelection = true, emptyState, keyExtractor, title, }) {
+    // Safety: Handle null/undefined data
+    if (!data || !Array.isArray(data)) {
+        return emptyState ? _jsx(_Fragment, { children: emptyState }) : null;
+    }
     if (data.length === 0 && emptyState) {
         return _jsx(_Fragment, { children: emptyState });
     }
     // Filter visible columns
     const visibleColumns = columns.filter((col) => col.visible !== false);
-    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsxs(Text, { color: colors.primary, bold: true, children: ["\u256D\u2500 ", title, " ", "─".repeat(Math.max(0, 10)), "\u256E"] }) })), _jsxs(Box, { flexDirection: "column", borderStyle: title ? "single" : "round", borderColor: colors.border, paddingX: 1, children: [_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column) => (_jsx(Text, { bold: true, dimColor: true, children: column.label.slice(0, column.width).padEnd(column.width, " ") }, `header-${column.key}`)))] }), data.map((row, index) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsxs(Text, { color: colors.primary, bold: true, children: ["\u256D\u2500 ", title.length > 50 ? title.substring(0, 50) + "..." : title, " ", "─".repeat(10), "\u256E"] }) })), _jsxs(Box, { flexDirection: "column", borderStyle: title ? "single" : "round", borderColor: colors.border, paddingX: 1, children: [_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column) => {
+                                // Cap column width to prevent Yoga crashes from padEnd creating massive strings
+                                const safeWidth = sanitizeWidth(column.width, 1, 100);
+                                return (_jsx(Text, { bold: true, dimColor: true, children: column.label.slice(0, safeWidth).padEnd(safeWidth, " ") }, `header-${column.key}`));
+                            })] }), data.map((row, index) => {
                         const isSelected = index === selectedIndex;
                         const rowKey = keyExtractor(row);
-                        return (_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? colors.primary : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column, colIndex) => (_jsx(React.Fragment, { children: column.render(row, index, isSelected) }, `${rowKey}-${column.key}`)))] }, rowKey));
+                        return (_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? colors.primary : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column, colIndex) => (_jsx(React.Fragment, { children: column.render(row, index, isSelected) }, `${rowKey}-${column.key}-${colIndex}`)))] }, rowKey));
                     })] })] }));
 }
 /**
@@ -29,8 +37,10 @@ export function createTextColumn(key, label, getValue, options) {
         width: options?.width || 20,
         visible: options?.visible,
         render: (row, index, isSelected) => {
-            const value = getValue(row);
-            const width = options?.width || 20;
+            const value = String(getValue(row) || "");
+            const rawWidth = options?.width || 20;
+            // CRITICAL: Sanitize width to prevent padEnd from creating invalid strings that crash Yoga
+            const width = sanitizeWidth(rawWidth, 1, 100);
             const color = options?.color || (isSelected ? colors.text : colors.text);
             const bold = options?.bold !== undefined ? options.bold : isSelected;
             const dimColor = options?.dimColor || false;
@@ -38,7 +48,7 @@ export function createTextColumn(key, label, getValue, options) {
             let truncated;
             if (value.length > width) {
                 // Reserve space for ellipsis if truncating
-                truncated = value.slice(0, width - 1) + "…";
+                truncated = value.slice(0, Math.max(1, width - 1)) + "…";
             }
             else {
                 truncated = value;

package/dist/components/UpdateNotification.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text } from "ink";
+import { colors } from "../utils/theme.js";
+import { VERSION } from "../version.js";
+/**
+ * Version check component that checks npm for updates and displays a notification
+ * Restored from git history and enhanced with better visual styling
+ */
+export const UpdateNotification = () => {
+    const [updateAvailable, setUpdateAvailable] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
+    React.useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const currentVersion = VERSION;
+                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
+                if (response.ok) {
+                    const data = (await response.json());
+                    const latestVersion = data.version;
+                    if (latestVersion && latestVersion !== currentVersion) {
+                        // Check if current version is older than latest
+                        const compareVersions = (version1, version2) => {
+                            const v1parts = version1.split(".").map(Number);
+                            const v2parts = version2.split(".").map(Number);
+                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
+                                const v1part = v1parts[i] || 0;
+                                const v2part = v2parts[i] || 0;
+                                if (v1part > v2part)
+                                    return 1;
+                                if (v1part < v2part)
+                                    return -1;
+                            }
+                            return 0;
+                        };
+                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
+                        if (isUpdateAvailable) {
+                            setUpdateAvailable(latestVersion);
+                        }
+                    }
+                }
+            }
+            catch {
+                // Silently fail
+            }
+            finally {
+                setIsChecking(false);
+            }
+        };
+        checkForUpdates();
+    }, []);
+    if (isChecking || !updateAvailable) {
+        return null;
+    }
+    return (_jsxs(Box, { borderStyle: "round", borderColor: colors.warning, paddingX: 1, paddingY: 0, marginTop: 0, children: [_jsx(Text, { color: colors.warning, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.warning, bold: true, children: VERSION }), _jsxs(Text, { color: colors.primary, bold: true, children: [" ", "\u2192", " "] }), _jsx(Text, { color: colors.success, bold: true, children: updateAvailable }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
+};