@runloop/rl-cli 0.1.2 → 0.2.0

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/hooks/useCursorPagination.js

@@ -1,125 +1,165 @@
 import React from "react";
+/**
+ * Hook for cursor-based pagination with polling.
+ *
+ * Design:
+ * - No caching: always fetches fresh data on navigation or poll
+ * - Cursor history: tracks the last item ID of each visited page
+ *   - cursorHistory[N] = last item ID of page N (used as startingAt for page N+1)
+ * - Polling: refreshes current page every pollInterval ms
+ *
+ * Navigation:
+ * - Page 0: startingAt = undefined
+ * - Page N: startingAt = cursorHistory[N-1]
+ * - Going back uses known cursor from history
+ */
 export function useCursorPagination(config) {
+    const { fetchPage, pageSize, getItemId, pollInterval = 2000, deps = [], pollingEnabled = true, } = config;
+    // State
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
+    const [navigating, setNavigating] = React.useState(false);
     const [error, setError] = React.useState(null);
     const [currentPage, setCurrentPage] = React.useState(0);
-    const [totalCount, setTotalCount] = React.useState(0);
     const [hasMore, setHasMore] = React.useState(false);
-    const [refreshing, setRefreshing] = React.useState(false);
-    // Cache for page data and cursors
-    const pageCache = React.useRef(new Map());
-    const lastIdCache = React.useRef(new Map());
-    const fetchData = React.useCallback(async (isInitialLoad = false) => {
+    const [totalCount, setTotalCount] = React.useState(0);
+    // Cursor history: cursorHistory[N] = last item ID of page N
+    // Used to determine startingAt for page N+1
+    const cursorHistoryRef = React.useRef([]);
+    // Track if component is mounted
+    const isMountedRef = React.useRef(true);
+    // Track if we're currently fetching (to prevent concurrent fetches)
+    const isFetchingRef = React.useRef(false);
+    // Store stable references to config
+    const fetchPageRef = React.useRef(fetchPage);
+    const getItemIdRef = React.useRef(getItemId);
+    const pageSizeRef = React.useRef(pageSize);
+    // Keep refs in sync
+    React.useEffect(() => {
+        fetchPageRef.current = fetchPage;
+    }, [fetchPage]);
+    React.useEffect(() => {
+        getItemIdRef.current = getItemId;
+    }, [getItemId]);
+    React.useEffect(() => {
+        pageSizeRef.current = pageSize;
+    }, [pageSize]);
+    // Cleanup on unmount
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    /**
+     * Fetch a specific page
+     * @param page - Page number to fetch (0-indexed)
+     * @param isInitialLoad - Whether this is the initial load (shows loading state)
+     * @param isNavigation - Whether this is a page navigation (shows navigating state)
+     */
+    const fetchPageData = React.useCallback(async (page, isInitialLoad = false, isNavigation = false) => {
+        if (!isMountedRef.current)
+            return;
+        if (isFetchingRef.current)
+            return;
+        isFetchingRef.current = true;
         try {
             if (isInitialLoad) {
-                setRefreshing(true);
-            }
-            setLoading(true);
-            // Check cache first (skip on refresh)
-            if (!isInitialLoad && pageCache.current.has(currentPage)) {
-                setItems(pageCache.current.get(currentPage) || []);
-                setLoading(false);
-                return;
+                setLoading(true);
             }
-            const pageItems = [];
-            // Get starting_at cursor from previous page's last ID
-            const startingAt = currentPage > 0
-                ? lastIdCache.current.get(currentPage - 1)
-                : undefined;
-            // Build query params
-            const queryParams = {
-                limit: config.pageSize,
-                ...config.queryParams,
-            };
-            if (startingAt) {
-                queryParams.starting_at = startingAt;
+            if (isNavigation) {
+                setNavigating(true);
             }
-            // Fetch the page
-            const result = await config.fetchPage(queryParams);
-            // Extract items (handle both array response and paginated response)
-            const fetchedItems = Array.isArray(result) ? result : result.items;
-            pageItems.push(...fetchedItems.slice(0, config.pageSize));
-            // Update pagination metadata
-            if (!Array.isArray(result)) {
-                setTotalCount(result.total_count || pageItems.length);
-                setHasMore(result.has_more || false);
-            }
-            else {
-                setTotalCount(pageItems.length);
-                setHasMore(false);
+            setError(null);
+            // Determine startingAt cursor:
+            // - Page 0: undefined
+            // - Page N: cursorHistory[N-1] (last item ID from previous page)
+            const startingAt = page > 0 ? cursorHistoryRef.current[page - 1] : undefined;
+            const result = await fetchPageRef.current({
+                limit: pageSizeRef.current,
+                startingAt,
+            });
+            if (!isMountedRef.current)
+                return;
+            // Update items
+            setItems(result.items);
+            // Update cursor history for this page
+            if (result.items.length > 0) {
+                const lastItemId = getItemIdRef.current(result.items[result.items.length - 1]);
+                cursorHistoryRef.current[page] = lastItemId;
             }
-            // Cache the page data and last ID
-            if (pageItems.length > 0) {
-                pageCache.current.set(currentPage, pageItems);
-                lastIdCache.current.set(currentPage, config.getItemId(pageItems[pageItems.length - 1]));
+            // Update pagination state
+            setHasMore(result.hasMore);
+            if (result.totalCount !== undefined) {
+                setTotalCount(result.totalCount);
             }
-            // Update items for current page
-            setItems(pageItems);
         }
         catch (err) {
+            if (!isMountedRef.current)
+                return;
             setError(err);
         }
         finally {
-            setLoading(false);
-            if (isInitialLoad) {
-                setTimeout(() => setRefreshing(false), 300);
+            if (isMountedRef.current) {
+                setLoading(false);
+                setNavigating(false);
             }
+            isFetchingRef.current = false;
         }
-    }, [currentPage, config]);
-    // Initial load and page changes
+    }, []);
+    // Reset when deps change (e.g., filters, search)
+    const depsKey = JSON.stringify(deps);
     React.useEffect(() => {
-        fetchData(true);
-    }, [fetchData, currentPage]);
-    // Auto-refresh
+        // Clear cursor history when deps change
+        cursorHistoryRef.current = [];
+        setCurrentPage(0);
+        setItems([]);
+        setHasMore(false);
+        setTotalCount(0);
+        // Fetch page 0
+        fetchPageData(0, true);
+    }, [depsKey, fetchPageData]);
+    // Polling effect
     React.useEffect(() => {
-        if (!config.refreshInterval || config.refreshInterval <= 0) {
+        if (!pollInterval || pollInterval <= 0 || !pollingEnabled) {
             return;
         }
-        const interval = setInterval(() => {
-            // Clear cache on refresh
-            pageCache.current.clear();
-            lastIdCache.current.clear();
-            fetchData(false);
-        }, config.refreshInterval);
-        return () => clearInterval(interval);
-    }, [config.refreshInterval, fetchData]);
+        const timer = setInterval(() => {
+            if (isMountedRef.current && !isFetchingRef.current) {
+                fetchPageData(currentPage, false);
+            }
+        }, pollInterval);
+        return () => clearInterval(timer);
+    }, [pollInterval, pollingEnabled, currentPage, fetchPageData]);
+    // Navigation functions
     const nextPage = React.useCallback(() => {
-        if (!loading && hasMore) {
-            setCurrentPage((prev) => prev + 1);
+        if (!loading && !navigating && hasMore) {
+            const newPage = currentPage + 1;
+            setCurrentPage(newPage);
+            fetchPageData(newPage, false, true);
         }
-    }, [loading, hasMore]);
+    }, [loading, navigating, hasMore, currentPage, fetchPageData]);
     const prevPage = React.useCallback(() => {
-        if (!loading && currentPage > 0) {
-            setCurrentPage((prev) => prev - 1);
-        }
-    }, [loading, currentPage]);
-    const goToPage = React.useCallback((page) => {
-        if (!loading && page >= 0) {
-            setCurrentPage(page);
+        if (!loading && !navigating && currentPage > 0) {
+            const newPage = currentPage - 1;
+            setCurrentPage(newPage);
+            fetchPageData(newPage, false, true);
         }
-    }, [loading]);
+    }, [loading, navigating, currentPage, fetchPageData]);
     const refresh = React.useCallback(() => {
-        pageCache.current.clear();
-        lastIdCache.current.clear();
-        fetchData(true);
-    }, [fetchData]);
-    const clearCache = React.useCallback(() => {
-        pageCache.current.clear();
-        lastIdCache.current.clear();
-    }, []);
+        fetchPageData(currentPage, false);
+    }, [currentPage, fetchPageData]);
     return {
         items,
         loading,
+        navigating,
         error,
         currentPage,
-        totalCount,
         hasMore,
-        refreshing,
+        hasPrev: currentPage > 0,
+        totalCount,
         nextPage,
         prevPage,
-        goToPage,
         refresh,
-        clearCache,
     };
 }

package/dist/hooks/useExitOnCtrlC.js

@@ -0,0 +1,14 @@
+/**
+ * Hook to handle Ctrl+C (SIGINT) consistently across all screens
+ * Exits the program with proper cleanup of alternate screen buffer
+ */
+import { useInput } from "ink";
+import { exitAlternateScreenBuffer } from "../utils/screen.js";
+export function useExitOnCtrlC() {
+    useInput((input, key) => {
+        if (key.ctrl && input === "c") {
+            exitAlternateScreenBuffer();
+            process.exit(130); // Standard exit code for SIGINT
+        }
+    });
+}

package/dist/hooks/useViewportHeight.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { useStdout } from "ink";
+/**
+ * Custom hook to calculate available viewport height for content rendering.
+ * Ensures consistent layout calculations across all CLI screens and prevents overflow.
+ *
+ * @param options Configuration for viewport calculation
+ * @returns Viewport dimensions including available height for content
+ *
+ * @example
+ * ```tsx
+ * const { viewportHeight } = useViewportHeight({ overhead: 10 });
+ * const pageSize = viewportHeight; // Use for dynamic page sizing
+ * ```
+ */
+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)),
+        };
+    }
+    const terminalHeight = dimensions.current.height;
+    const terminalWidth = dimensions.current.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,
+        terminalWidth,
+    };
+}