@runloop/rl-cli 1.2.0 → 1.4.0

package/dist/components/ResourceListView.js

@@ -4,6 +4,7 @@ import { Box, Text, useInput, useApp } from "ink";
 import TextInput from "ink-text-input";
 import figures from "figures";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
 import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { Table } from "./Table.js";
@@ -233,6 +234,22 @@ 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: " " }), _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"] })] })] }));
+                                } }), _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 })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: totalPages > 1,
+                    },
+                    { key: "Enter", label: "Details", condition: !!config.onSelect },
+                    {
+                        key: "/",
+                        label: "Search",
+                        condition: config.searchConfig?.enabled,
+                    },
+                    ...(config.additionalShortcuts || []).map((shortcut) => ({
+                        key: shortcut.key,
+                        label: shortcut.label,
+                    })),
+                    { key: "Esc", label: "Back" },
+                ] })] }));
 }

package/dist/components/StatusBadge.js

@@ -68,7 +68,7 @@ export const getStatusDisplay = (status) => {
         // === ERROR STATES ===
         case "failure":
             return {
-                icon: figures.cross,
+                icon: figures.warning,
                 color: colors.error,
                 text: "FAILED    ",
                 label: "Failed",
@@ -76,7 +76,7 @@ export const getStatusDisplay = (status) => {
         case "build_failed":
         case "failed":
             return {
-                icon: figures.cross,
+                icon: figures.warning,
                 color: colors.error,
                 text: "FAILED    ",
                 label: "Failed",

package/dist/components/Table.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
 import figures from "figures";
@@ -10,21 +10,19 @@ import { colors, sanitizeWidth } from "../utils/theme.js";
 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 });
+        data = [];
     }
+    const isEmpty = data.length === 0;
     // 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.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) => {
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", 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", width: "100%", borderStyle: title ? "single" : "round", borderColor: colors.border, paddingX: 1, children: [_jsxs(Box, { width: "100%", 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) => {
+                            }), _jsx(Box, { flexGrow: 1 })] }), isEmpty && (_jsxs(Box, { paddingY: 1, width: "100%", children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), emptyState || (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.info, " No items found"] })), _jsx(Box, { flexGrow: 1 })] })), 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}-${colIndex}`)))] }, rowKey));
+                        return (_jsxs(Box, { width: "100%", 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}`))), _jsx(Box, { flexGrow: 1 })] }, rowKey));
                     })] })] }));
 }
 /**

package/dist/components/form/FormActionButton.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../../utils/theme.js";
+export const FormActionButton = ({ label, isActive, hint = "[Enter to execute]", }) => {
+    return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? colors.success : colors.textDim, bold: isActive, children: [isActive ? figures.pointer : " ", " ", label] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", hint] }))] }));
+};

package/dist/components/form/FormField.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../../utils/theme.js";
+export const FormField = ({ label, isActive, children, hint, error, }) => {
+    return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: error ? colors.error : isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", label, ":", " "] }), children, error && (_jsxs(Text, { color: colors.error, children: [" ", figures.cross, " ", error] })), hint && isActive && !error && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", hint] }))] }));
+};

package/dist/components/form/FormListManager.js

@@ -0,0 +1,112 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * FormListManager - List management component for forms (add/edit/delete items)
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { colors } from "../../utils/theme.js";
+export const FormListManager = ({ title, items, onItemsChange, isActive, isExpanded, onExpandedChange, itemPlaceholder = "item", addLabel = "+ Add new item", collapsedLabel = "items", }) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [inputMode, setInputMode] = React.useState(null);
+    const [inputValue, setInputValue] = React.useState("");
+    const [editingIndex, setEditingIndex] = React.useState(-1);
+    // Selection model: 0 = "Add new", 1..n = Existing items, n+1 = "Done"
+    const maxIndex = items.length + 1;
+    useInput((input, key) => {
+        if (!isExpanded)
+            return;
+        // Handle input mode (typing)
+        if (inputMode) {
+            if (key.return && inputValue.trim()) {
+                if (inputMode === "add") {
+                    onItemsChange([...items, inputValue.trim()]);
+                }
+                else if (inputMode === "edit" && editingIndex >= 0) {
+                    const newItems = [...items];
+                    newItems[editingIndex] = inputValue.trim();
+                    onItemsChange(newItems);
+                }
+                setInputValue("");
+                setInputMode(null);
+                setEditingIndex(-1);
+                setSelectedIndex(0);
+                return;
+            }
+            else if (key.escape) {
+                // Cancel input - restore item if editing
+                if (inputMode === "edit" && editingIndex >= 0) {
+                    // Item was already removed, add it back
+                    const newItems = [...items];
+                    newItems.splice(editingIndex, 0, inputValue);
+                    onItemsChange(newItems);
+                }
+                setInputValue("");
+                setInputMode(null);
+                setEditingIndex(-1);
+                return;
+            }
+            return;
+        }
+        // Navigation mode
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < maxIndex) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            if (selectedIndex === 0) {
+                // Add new
+                setInputValue("");
+                setInputMode("add");
+            }
+            else if (selectedIndex === maxIndex) {
+                // Done - exit expanded mode
+                onExpandedChange(false);
+                setSelectedIndex(0);
+            }
+            else if (selectedIndex >= 1 && selectedIndex <= items.length) {
+                // Edit existing (selectedIndex - 1 gives array index)
+                const itemIndex = selectedIndex - 1;
+                const itemToEdit = items[itemIndex];
+                setInputValue(itemToEdit);
+                setEditingIndex(itemIndex);
+                // Remove the item while editing
+                const newItems = items.filter((_, i) => i !== itemIndex);
+                onItemsChange(newItems);
+                setInputMode("edit");
+            }
+        }
+        else if ((input === "d" || key.delete) &&
+            selectedIndex >= 1 &&
+            selectedIndex <= items.length) {
+            // Delete selected item
+            const itemIndex = selectedIndex - 1;
+            const newItems = items.filter((_, i) => i !== itemIndex);
+            onItemsChange(newItems);
+            // Adjust selection
+            if (selectedIndex > newItems.length) {
+                setSelectedIndex(Math.max(0, newItems.length));
+            }
+        }
+        else if (key.escape || input === "q") {
+            // Exit expanded mode
+            onExpandedChange(false);
+            setSelectedIndex(0);
+        }
+    }, { isActive: isExpanded });
+    // Collapsed view
+    if (!isExpanded) {
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? colors.primary : colors.textDim, children: [isActive ? figures.pointer : " ", " ", title, ":", " "] }), _jsxs(Text, { color: colors.text, children: [items.length, " ", collapsedLabel] }), isActive && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to manage]"] }))] }), items.length > 0 && (_jsxs(Box, { marginLeft: 3, flexDirection: "column", children: [items.slice(0, 3).map((item, idx) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointer, " ", item] }, idx))), items.length > 3 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["... and ", items.length - 3, " more"] }))] }))] }));
+    }
+    // Expanded view
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", title] }), inputMode && (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: inputMode === "add" ? colors.success : colors.warning, paddingX: 1, children: [_jsx(Text, { color: inputMode === "add" ? colors.success : colors.warning, bold: true, children: inputMode === "add" ? "Adding New" : "Editing" }), _jsxs(Box, { children: [_jsx(Text, { color: colors.primary, children: "Value: " }), _jsx(TextInput, { value: inputValue, onChange: setInputValue, placeholder: itemPlaceholder })] })] })), !inputMode && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedIndex === 0 ? colors.primary : colors.textDim, children: [selectedIndex === 0 ? figures.pointer : " ", " "] }), _jsx(Text, { color: selectedIndex === 0 ? colors.success : colors.textDim, bold: selectedIndex === 0, children: addLabel })] }), items.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: items.map((item, index) => {
+                            const itemIndex = index + 1;
+                            const isSelected = selectedIndex === itemIndex;
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsx(Text, { color: isSelected ? colors.primary : colors.textDim, bold: isSelected, children: item })] }, index));
+                        }) })), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: selectedIndex === maxIndex ? colors.primary : colors.textDim, children: [selectedIndex === maxIndex ? figures.pointer : " ", " "] }), _jsxs(Text, { color: selectedIndex === maxIndex ? colors.success : colors.textDim, bold: selectedIndex === maxIndex, children: [figures.tick, " Done"] })] })] })), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: inputMode
+                        ? "[Enter] Save • [esc] Cancel"
+                        : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedIndex === 0 ? "Add" : selectedIndex === maxIndex ? "Done" : "Edit"} • [d] Delete • [esc] Back` }) })] }));
+};

package/dist/components/form/FormSelect.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * FormSelect - Left/right arrow selection field for forms
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { FormField } from "./FormField.js";
+import { colors } from "../../utils/theme.js";
+export function FormSelect({ label, value, options, onChange, isActive, getDisplayLabel, }) {
+    const displayValue = getDisplayLabel ? getDisplayLabel(value) : value;
+    return (_jsx(FormField, { label: label, isActive: isActive, hint: `[${figures.arrowLeft}${figures.arrowRight} to change]`, children: _jsx(Text, { color: isActive ? colors.primary : colors.text, bold: isActive, children: displayValue || "(none)" }) }));
+}
+/**
+ * Helper hook to handle left/right arrow navigation for select fields
+ */
+export function useFormSelectNavigation(value, options, onChange, isActive) {
+    const handleInput = React.useCallback((input, key) => {
+        if (!isActive)
+            return false;
+        if (key.leftArrow || key.rightArrow) {
+            const currentIndex = options.indexOf(value);
+            const safeIndex = currentIndex === -1 ? 0 : currentIndex;
+            // Wrap around: left from first goes to last, right from last goes to first
+            const newIndex = key.leftArrow
+                ? (safeIndex - 1 + options.length) % options.length
+                : (safeIndex + 1) % options.length;
+            onChange(options[newIndex]);
+            return true;
+        }
+        return false;
+    }, [value, options, onChange, isActive]);
+    return handleInput;
+}

package/dist/components/form/FormTextInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import TextInput from "ink-text-input";
+import { FormField } from "./FormField.js";
+import { colors } from "../../utils/theme.js";
+export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, }) => {
+    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: value || "(empty)" })) }));
+};

package/dist/components/form/index.js

@@ -0,0 +1,8 @@
+/**
+ * Form Components - Reusable form primitives for create/edit pages
+ */
+export { FormField } from "./FormField.js";
+export { FormTextInput } from "./FormTextInput.js";
+export { FormSelect, useFormSelectNavigation, } from "./FormSelect.js";
+export { FormActionButton, } from "./FormActionButton.js";
+export { FormListManager, } from "./FormListManager.js";

package/dist/hooks/useViewportHeight.js

@@ -1,8 +1,20 @@
 import React from "react";
 import { useStdout } from "ink";
+/**
+ * Get safe terminal dimensions with bounds checking
+ */
+function getSafeDimensions(stdout) {
+    const sampledWidth = stdout?.columns && stdout.columns > 0 ? stdout.columns : 120;
+    const sampledHeight = stdout?.rows && stdout.rows > 0 ? stdout.rows : 30;
+    return {
+        width: Math.max(80, Math.min(300, sampledWidth)),
+        height: Math.max(20, Math.min(100, sampledHeight)),
+    };
+}
 /**
  * Custom hook to calculate available viewport height for content rendering.
  * Ensures consistent layout calculations across all CLI screens and prevents overflow.
+ * Responds to terminal resize events to update layout dynamically.
  *
  * @param options Configuration for viewport calculation
  * @returns Viewport dimensions including available height for content
@@ -16,29 +28,35 @@ import { useStdout } from "ink";
 export function useViewportHeight(options = {}) {
     const { overhead = 0, minHeight = 5, maxHeight = 100 } = options;
     const { stdout } = useStdout();
-    // Sample terminal dimensions ONCE and use fixed values - no reactive dependencies
-    // This prevents re-renders and Yoga WASM crashes from dynamic resizing
-    // CRITICAL: Initialize with safe fallback values to prevent null/undefined
-    const dimensions = React.useRef({
-        width: 120,
-        height: 30,
-    });
-    // Only sample on first call when still at default values
-    if (dimensions.current.width === 120 && dimensions.current.height === 30) {
-        // Only sample if stdout has valid dimensions
-        const sampledWidth = stdout?.columns && stdout.columns > 0 ? stdout.columns : 120;
-        const sampledHeight = stdout?.rows && stdout.rows > 0 ? stdout.rows : 30;
-        // Always enforce safe bounds to prevent Yoga crashes
-        dimensions.current = {
-            width: Math.max(80, Math.min(200, sampledWidth)),
-            height: Math.max(20, Math.min(100, sampledHeight)),
+    // Use state to track dimensions so we can respond to resize events
+    const [dimensions, setDimensions] = React.useState(() => getSafeDimensions(stdout));
+    // Listen for terminal resize events
+    React.useEffect(() => {
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            const newDimensions = getSafeDimensions(stdout);
+            setDimensions((prev) => {
+                // Only update if dimensions actually changed
+                if (prev.width !== newDimensions.width ||
+                    prev.height !== newDimensions.height) {
+                    return newDimensions;
+                }
+                return prev;
+            });
+        };
+        // Listen for resize events
+        stdout.on("resize", handleResize);
+        // Also check dimensions on mount in case they differ from initial
+        handleResize();
+        return () => {
+            stdout.off("resize", handleResize);
         };
-    }
-    const terminalHeight = dimensions.current.height;
-    const terminalWidth = dimensions.current.width;
+    }, [stdout]);
+    const terminalHeight = dimensions.height;
+    const terminalWidth = dimensions.width;
     // Calculate viewport height with bounds
     const viewportHeight = Math.max(minHeight, Math.min(maxHeight, terminalHeight - overhead));
-    // Removed console.logs to prevent rendering interference
     return {
         viewportHeight,
         terminalHeight,

package/dist/router/Router.js

@@ -8,6 +8,8 @@ import { useNavigation } from "../store/navigationStore.js";
 import { useDevboxStore } from "../store/devboxStore.js";
 import { useBlueprintStore } from "../store/blueprintStore.js";
 import { useSnapshotStore } from "../store/snapshotStore.js";
+import { useNetworkPolicyStore } from "../store/networkPolicyStore.js";
+import { useObjectStore } from "../store/objectStore.js";
 import { ErrorBoundary } from "../components/ErrorBoundary.js";
 // Import screen components
 import { MenuScreen } from "../screens/MenuScreen.js";
@@ -16,8 +18,15 @@ import { DevboxDetailScreen } from "../screens/DevboxDetailScreen.js";
 import { DevboxActionsScreen } from "../screens/DevboxActionsScreen.js";
 import { DevboxCreateScreen } from "../screens/DevboxCreateScreen.js";
 import { BlueprintListScreen } from "../screens/BlueprintListScreen.js";
+import { BlueprintDetailScreen } from "../screens/BlueprintDetailScreen.js";
 import { BlueprintLogsScreen } from "../screens/BlueprintLogsScreen.js";
 import { SnapshotListScreen } from "../screens/SnapshotListScreen.js";
+import { SnapshotDetailScreen } from "../screens/SnapshotDetailScreen.js";
+import { NetworkPolicyListScreen } from "../screens/NetworkPolicyListScreen.js";
+import { NetworkPolicyDetailScreen } from "../screens/NetworkPolicyDetailScreen.js";
+import { NetworkPolicyCreateScreen } from "../screens/NetworkPolicyCreateScreen.js";
+import { ObjectListScreen } from "../screens/ObjectListScreen.js";
+import { ObjectDetailScreen } from "../screens/ObjectDetailScreen.js";
 import { SSHSessionScreen } from "../screens/SSHSessionScreen.js";
 /**
  * Router component that renders the current screen
@@ -58,6 +67,19 @@ export function Router() {
                         useSnapshotStore.getState().clearAll();
                     }
                     break;
+                case "network-policy-list":
+                case "network-policy-detail":
+                case "network-policy-create":
+                    if (!currentScreen.startsWith("network-policy")) {
+                        useNetworkPolicyStore.getState().clearAll();
+                    }
+                    break;
+                case "object-list":
+                case "object-detail":
+                    if (!currentScreen.startsWith("object")) {
+                        useObjectStore.getState().clearAll();
+                    }
+                    break;
             }
         }
         prevScreenRef.current = currentScreen;
@@ -66,5 +88,5 @@ export function Router() {
     // and mount new component, preventing race conditions during screen transitions.
     // The key ensures React treats this as a completely new component tree.
     // Wrap in ErrorBoundary to catch any Yoga WASM errors gracefully.
-    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
+    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintDetailScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-list" && (_jsx(NetworkPolicyListScreen, { ...params }, currentScreen)), currentScreen === "network-policy-detail" && (_jsx(NetworkPolicyDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-create" && (_jsx(NetworkPolicyCreateScreen, { ...params }, currentScreen)), currentScreen === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
 }