@runloop/rl-cli 1.8.0 → 1.10.0

package/dist/components/ResourceDetailPage.js

@@ -4,35 +4,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Can be used for devboxes, blueprints, snapshots, etc.
  */
 import React from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text } from "ink";
 import figures from "figures";
-import { Header } from "./Header.js";
 import { StatusBadge } from "./StatusBadge.js";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { DetailedInfoView } from "./DetailedInfoView.js";
 import { NavigationTips } from "./NavigationTips.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
-const formatTimeAgo = (timestamp) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24)
-        return `${hours}h ago`;
-    const days = Math.floor(hours / 24);
-    if (days < 30)
-        return `${days}d ago`;
-    const months = Math.floor(days / 30);
-    if (months < 12)
-        return `${months}mo ago`;
-    const years = Math.floor(months / 12);
-    return `${years}y ago`;
-};
+import { useInputHandler, scrollBindings, } from "../hooks/useInputHandler.js";
+import { useNavigation } from "../store/navigationStore.js";
+import { openInBrowser as openUrlInBrowser } from "../utils/browser.js";
+import { copyToClipboard } from "../utils/clipboard.js";
+import { collectActionableFields, } from "./resourceDetailTypes.js";
+export { collectActionableFields } from "./resourceDetailTypes.js";
 // Truncate long strings to prevent layout issues
 const truncateString = (str, maxLength) => {
     if (str.length <= maxLength)
@@ -41,6 +27,7 @@ const truncateString = (str, maxLength) => {
 };
 export function ResourceDetailPage({ resource: initialResource, resourceType, getDisplayName, getId, getStatus, getUrl, breadcrumbPrefix = [], detailSections, operations, onOperation, onBack, buildDetailLines, additionalContent, pollResource, pollInterval = 3000, }) {
     const isMounted = React.useRef(true);
+    const { navigate } = useNavigation();
     // Track mounted state
     React.useEffect(() => {
         isMounted.current = true;
@@ -51,45 +38,27 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
     // Local state for resource data (updated by polling)
     const [currentResource, setCurrentResource] = React.useState(initialResource);
     const [copyStatus, setCopyStatus] = React.useState(null);
-    // Copy to clipboard helper
-    const copyToClipboard = React.useCallback(async (text) => {
-        const { spawn } = await import("child_process");
-        const platform = process.platform;
-        let command;
-        let args;
-        if (platform === "darwin") {
-            command = "pbcopy";
-            args = [];
-        }
-        else if (platform === "win32") {
-            command = "clip";
-            args = [];
-        }
-        else {
-            command = "xclip";
-            args = ["-selection", "clipboard"];
-        }
-        const proc = spawn(command, args);
-        proc.stdin.write(text);
-        proc.stdin.end();
-        proc.on("exit", (code) => {
-            if (code === 0) {
-                setCopyStatus("Copied ID to clipboard!");
-                setTimeout(() => setCopyStatus(null), 2000);
-            }
-            else {
-                setCopyStatus("Failed to copy");
-                setTimeout(() => setCopyStatus(null), 2000);
-            }
-        });
-        proc.on("error", () => {
-            setCopyStatus("Copy not supported");
-            setTimeout(() => setCopyStatus(null), 2000);
-        });
+    // Copy to clipboard with status feedback
+    const handleCopy = React.useCallback(async (text) => {
+        const status = await copyToClipboard(text);
+        setCopyStatus(status);
+        setTimeout(() => setCopyStatus(null), 2000);
     }, []);
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
-    const [selectedOperation, setSelectedOperation] = React.useState(0);
+    // Unified selectable items: actionable detail fields followed by operations.
+    // Arrow keys move through the entire list seamlessly.
+    const actionableFields = React.useMemo(() => collectActionableFields(detailSections), [detailSections]);
+    const totalSelectableItems = actionableFields.length + operations.length;
+    // Default selection is the first operation (skip links)
+    const [selectedIndex, setSelectedIndex] = React.useState(actionableFields.length);
+    // Clamp selectedIndex when the number of selectable items shrinks
+    // (e.g. operations list changes due to a status change from polling)
+    React.useEffect(() => {
+        if (totalSelectableItems > 0 && selectedIndex >= totalSelectableItems) {
+            setSelectedIndex(totalSelectableItems - 1);
+        }
+    }, [totalSelectableItems, selectedIndex]);
     // Background polling for resource details
     React.useEffect(() => {
         if (!pollResource || showDetailedInfo)
@@ -114,98 +83,118 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
     const displayName = getDisplayName(currentResource);
     const resourceId = getId(currentResource);
     const status = getStatus(currentResource);
+    // Execute a field action
+    const executeFieldAction = React.useCallback((action) => {
+        if (action.type === "navigate" && action.screen) {
+            navigate(action.screen, action.params || {});
+        }
+        else if (action.type === "callback" && action.handler) {
+            action.handler();
+        }
+    }, [navigate]);
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
-    useInput((input, key) => {
-        if (!isMounted.current)
+    // Helper: is the current selection on a link or an operation?
+    const isOnLink = selectedIndex < actionableFields.length;
+    const operationIndex = selectedIndex - actionableFields.length;
+    const handleOpenInBrowser = React.useCallback(() => {
+        if (!getUrl)
             return;
-        // Handle detailed info mode
-        if (showDetailedInfo) {
-            if (input === "q" || key.escape) {
-                setShowDetailedInfo(false);
-                setDetailScroll(0);
-            }
-            else if (input === "j" || input === "s" || key.downArrow) {
-                setDetailScroll(detailScroll + 1);
-            }
-            else if (input === "k" || input === "w" || key.upArrow) {
-                setDetailScroll(Math.max(0, detailScroll - 1));
-            }
-            else if (key.pageDown) {
-                setDetailScroll(detailScroll + 10);
-            }
-            else if (key.pageUp) {
-                setDetailScroll(Math.max(0, detailScroll - 10));
+        openUrlInBrowser(getUrl(currentResource));
+    }, [getUrl, currentResource]);
+    const exitDetailedInfo = React.useCallback(() => {
+        setShowDetailedInfo(false);
+        setDetailScroll(0);
+    }, []);
+    const handleEnter = React.useCallback(() => {
+        if (isOnLink) {
+            const ref = actionableFields[selectedIndex];
+            if (ref) {
+                executeFieldAction(ref.action);
             }
-            return;
-        }
-        // Main view input handling
-        if (input === "q" || key.escape) {
-            onBack();
-        }
-        else if (input === "c" && !key.ctrl) {
-            // Copy resource ID to clipboard (ignore if Ctrl+C for quit)
-            copyToClipboard(getId(currentResource));
-        }
-        else if (input === "i" && buildDetailLines) {
-            setShowDetailedInfo(true);
-            setDetailScroll(0);
         }
-        else if (key.upArrow && selectedOperation > 0) {
-            setSelectedOperation(selectedOperation - 1);
-        }
-        else if (key.downArrow && selectedOperation < operations.length - 1) {
-            setSelectedOperation(selectedOperation + 1);
-        }
-        else if (key.return) {
-            const op = operations[selectedOperation];
+        else {
+            const op = operations[operationIndex];
             if (op) {
                 onOperation(op.key, currentResource);
             }
         }
-        else if (input) {
-            // Check if input matches any operation shortcut
-            const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
-            if (matchedOpIndex !== -1) {
-                setSelectedOperation(matchedOpIndex);
-                onOperation(operations[matchedOpIndex].key, currentResource);
-            }
-        }
-        if (input === "o" && getUrl) {
-            const url = getUrl(currentResource);
-            const openBrowser = async () => {
-                const { exec } = await import("child_process");
-                const platform = process.platform;
-                let openCommand;
-                if (platform === "darwin") {
-                    openCommand = `open "${url}"`;
-                }
-                else if (platform === "win32") {
-                    openCommand = `start "${url}"`;
-                }
-                else {
-                    openCommand = `xdg-open "${url}"`;
+    }, [
+        isOnLink,
+        actionableFields,
+        selectedIndex,
+        operationIndex,
+        operations,
+        currentResource,
+        executeFieldAction,
+        onOperation,
+    ]);
+    const inputModes = React.useMemo(() => [
+        {
+            name: "detailedInfo",
+            active: () => showDetailedInfo,
+            bindings: {
+                ...scrollBindings(() => detailScroll, setDetailScroll),
+                q: exitDetailedInfo,
+                escape: exitDetailedInfo,
+            },
+        },
+        {
+            name: "mainView",
+            active: () => true,
+            bindings: {
+                q: onBack,
+                escape: onBack,
+                c: () => handleCopy(getId(currentResource)),
+                ...(buildDetailLines
+                    ? {
+                        i: () => {
+                            setShowDetailedInfo(true);
+                            setDetailScroll(0);
+                        },
+                    }
+                    : {}),
+                up: () => {
+                    if (selectedIndex > 0)
+                        setSelectedIndex(selectedIndex - 1);
+                },
+                down: () => {
+                    if (selectedIndex < totalSelectableItems - 1)
+                        setSelectedIndex(selectedIndex + 1);
+                },
+                enter: handleEnter,
+                ...(getUrl ? { o: handleOpenInBrowser } : {}),
+            },
+            onUnmatched: (input) => {
+                // Operation shortcuts work from anywhere
+                const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
+                if (matchedOpIndex !== -1) {
+                    setSelectedIndex(actionableFields.length + matchedOpIndex);
+                    onOperation(operations[matchedOpIndex].key, currentResource);
                 }
-                exec(openCommand);
-            };
-            openBrowser();
-        }
-    });
+            },
+        },
+    ], [
+        showDetailedInfo,
+        detailScroll,
+        exitDetailedInfo,
+        onBack,
+        currentResource,
+        buildDetailLines,
+        selectedIndex,
+        totalSelectableItems,
+        handleEnter,
+        getUrl,
+        handleOpenInBrowser,
+        operations,
+        actionableFields,
+        onOperation,
+        getId,
+    ]);
+    useInputHandler(inputModes, { isActive: isMounted.current });
     // Detailed info mode - full screen
     if (showDetailedInfo && buildDetailLines) {
-        const detailLines = buildDetailLines(currentResource);
-        const viewportHeight = detailViewport.viewportHeight;
-        const maxScroll = Math.max(0, detailLines.length - viewportHeight);
-        const actualScroll = Math.min(detailScroll, maxScroll);
-        const visibleLines = detailLines.slice(actualScroll, actualScroll + viewportHeight);
-        const hasMore = actualScroll + viewportHeight < detailLines.length;
-        const hasLess = actualScroll > 0;
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        ...breadcrumbPrefix,
-                        { label: resourceType },
-                        { label: displayName },
-                        { label: "Full Details", active: true },
-                    ] }), _jsx(Header, { title: `${displayName} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: status }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.idColor, children: resourceId })] }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: colors.border, paddingX: 2, paddingY: 1, children: _jsx(Box, { flexDirection: "column", children: visibleLines }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 Line ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of", " ", detailLines.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [q or esc] Back to Details"] })] })] }));
+        return (_jsx(DetailedInfoView, { detailLines: buildDetailLines(currentResource), scrollOffset: detailScroll, viewportHeight: detailViewport.viewportHeight, displayName: displayName, resourceId: resourceId, status: status, resourceType: resourceType, breadcrumbPrefix: breadcrumbPrefix }));
     }
     // Main detail view
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
@@ -214,33 +203,27 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
                     { label: displayName, active: true },
                 ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", children: [_jsx(Text, { color: colors.primary, bold: true, children: truncateString(displayName, Math.max(20, detailViewport.terminalWidth - 35)) }), displayName !== resourceId && (_jsxs(Text, { color: colors.idColor, children: [" \u2022 ", resourceId] }))] }), _jsx(Box, { children: _jsx(StatusBadge, { status: status, fullText: true }) })] }), detailSections.map((section, sectionIndex) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: section.color || colors.warning, bold: true, children: [section.icon || figures.squareSmallFilled, " ", section.title] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: section.fields
                             .filter((field) => field.value !== undefined && field.value !== null)
-                            .map((field, fieldIndex) => (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [field.label, " "] }), typeof field.value === "string" ? (_jsx(Text, { color: field.color, dimColor: !field.color, children: field.value })) : (field.value)] }, fieldIndex))) })] }, sectionIndex))), additionalContent, operations.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: operations.map((op, index) => {
-                            const isSelected = index === selectedOperation;
+                            .map((field, fieldIndex) => {
+                            // Check if this field is an actionable field and whether it's selected
+                            const isActionable = !!field.action;
+                            const actionableIdx = isActionable
+                                ? actionableFields.findIndex((ref) => ref.sectionIndex === sectionIndex &&
+                                    ref.fieldIndex === fieldIndex)
+                                : -1;
+                            const isFieldSelected = isActionable && actionableIdx === selectedIndex;
+                            return (_jsxs(Box, { children: [isActionable ? (_jsxs(Text, { color: isFieldSelected ? colors.primary : colors.textDim, children: [isFieldSelected ? figures.pointer : " ", " "] })) : null, _jsxs(Text, { color: isFieldSelected ? colors.primary : colors.textDim, bold: isFieldSelected, children: [field.label, field.label ? " " : ""] }), typeof field.value === "string" ? (_jsx(Text, { color: isFieldSelected
+                                            ? colors.primary
+                                            : field.color || undefined, dimColor: !isFieldSelected && !field.color, bold: isFieldSelected, children: field.value })) : (field.value), isFieldSelected && field.action?.hint && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter: ", field.action.hint, "]"] }))] }, fieldIndex));
+                        }) })] }, sectionIndex))), additionalContent, operations.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: operations.map((op, index) => {
+                            const isSelected = index + actionableFields.length === 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] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", op.shortcut, "]"] })] }, op.key));
                         }) })] })), copyStatus && (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.success, bold: true, children: copyStatus }) })), _jsx(NavigationTips, { showArrows: true, tips: [
-                    { key: "Enter", label: "Execute" },
+                    { key: "Enter", label: isOnLink ? "Open Link" : "Execute" },
                     { key: "c", label: "Copy ID" },
                     { key: "i", label: "Full Details", condition: !!buildDetailLines },
                     { key: "o", label: "Browser", condition: !!getUrl },
                     { key: "q/Ctrl+C", label: "Back/Quit" },
                 ] })] }));
 }
-// Helper to format timestamp as "time (ago)"
-export function formatTimestamp(timestamp) {
-    if (!timestamp)
-        return undefined;
-    const formatted = new Date(timestamp).toLocaleString();
-    const ago = formatTimeAgo(timestamp);
-    return `${formatted} (${ago})`;
-}
-// Helper to format create time with arrow to end time
-export function formatTimeRange(createTime, endTime) {
-    if (!createTime)
-        return undefined;
-    const start = new Date(createTime).toLocaleString();
-    if (endTime) {
-        const end = new Date(endTime).toLocaleString();
-        return `${start} → ${end}`;
-    }
-    return `${start} (${formatTimeAgo(createTime)})`;
-}
+// Re-export format helpers from utils/time for backward compatibility
+export { formatTimestamp, formatTimeRange } from "../utils/time.js";

package/dist/components/ResourceListView.js

@@ -11,39 +11,9 @@ 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 - concise with ISO-style date for older items
-export const formatTimeAgo = (timestamp) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
-    const date = new Date(timestamp);
-    const now = new Date();
-    // Format time as HH:MM:SS (24h)
-    const time = date.toTimeString().slice(0, 8);
-    // Less than 1 minute
-    if (seconds < 60)
-        return `${time} (${seconds}s ago)`;
-    const minutes = Math.floor(seconds / 60);
-    // Less than 1 hour
-    if (minutes < 60)
-        return `${time} (${minutes}m ago)`;
-    const hours = Math.floor(minutes / 60);
-    // Less than 24 hours - show time + relative
-    if (hours < 24)
-        return `${time} (${hours}hr ago)`;
-    const days = Math.floor(hours / 24);
-    const sameYear = date.getFullYear() === now.getFullYear();
-    // Format date parts
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const year = date.getFullYear();
-    // Date format: MM-DD or YYYY-MM-DD if different year
-    const dateStr = `${month}-${day}`;
-    // 1-7 days - show date + time + relative
-    if (days <= 7) {
-        return `${dateStr} ${time} (${days}d)`;
-    }
-    // More than 7 days - just date + time, no relative
-    return `${dateStr} ${time}`;
-};
+import { formatTimeAgoRich } from "../utils/time.js";
+// Re-export for backwards compatibility with existing imports
+export const formatTimeAgo = formatTimeAgoRich;
 export function ResourceListView({ config }) {
     const { exit: inkExit } = useApp();
     const isMounted = React.useRef(true);

package/dist/components/ResourcePicker.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ResourcePicker - Reusable component for selecting resources
+ * Supports single-select and multi-select modes with search and pagination
+ * Uses Table component for consistent styling with resource list views
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+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 { SearchBar } from "./SearchBar.js";
+import { Table, createTextColumn, createComponentColumn, } from "./Table.js";
+export { createTextColumn, createComponentColumn };
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { useCursorPagination } from "../hooks/useCursorPagination.js";
+import { useListSearch } from "../hooks/useListSearch.js";
+/**
+ * ResourcePicker component for selecting resources from a list
+ */
+export function ResourcePicker({ config, onSelect, onCancel, initialSelected = [], }) {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [selectedIds, setSelectedIds] = React.useState(new Set(initialSelected));
+    // Search state
+    const search = useListSearch({
+        onSearchSubmit: () => setSelectedIndex(0),
+        onSearchClear: () => setSelectedIndex(0),
+    });
+    // Calculate overhead for viewport height
+    // Matches list pages: breadcrumb(4) + table chrome(4) + stats(2) + nav tips(2) + buffer(1) = 13
+    const overhead = 13 + search.getSearchOverhead();
+    const { viewportHeight, terminalWidth } = useViewportHeight({
+        overhead,
+        minHeight: 5,
+    });
+    const PAGE_SIZE = viewportHeight;
+    // Resolve columns - support both static array and function that receives terminalWidth
+    const resolvedColumns = React.useMemo(() => {
+        if (!config.columns)
+            return undefined;
+        if (typeof config.columns === "function") {
+            return config.columns(terminalWidth);
+        }
+        return config.columns;
+    }, [config.columns, terminalWidth]);
+    // Store fetchPage in a ref to avoid dependency issues
+    const fetchPageRef = React.useRef(config.fetchPage);
+    React.useEffect(() => {
+        fetchPageRef.current = config.fetchPage;
+    }, [config.fetchPage]);
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        return fetchPageRef.current({
+            limit: params.limit,
+            startingAt: params.startingAt,
+            search: search.submittedSearchQuery || undefined,
+        });
+    }, [search.submittedSearchQuery]);
+    // Use the shared pagination hook
+    const { items, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: config.getItemId,
+        pollInterval: 0, // No polling for picker
+        pollingEnabled: false,
+        deps: [PAGE_SIZE, search.submittedSearchQuery],
+    });
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (items.length > 0 && selectedIndex >= items.length) {
+            setSelectedIndex(Math.max(0, items.length - 1));
+        }
+    }, [items.length, selectedIndex]);
+    const selectedItem = items[selectedIndex];
+    const minSelection = config.minSelection ?? 1;
+    const canConfirm = config.mode === "single"
+        ? selectedItem !== undefined
+        : selectedIds.size >= minSelection;
+    // Toggle selection for multi-select
+    const toggleSelection = React.useCallback((item) => {
+        const id = config.getItemId(item);
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                if (config.maxSelection && next.size >= config.maxSelection) {
+                    return prev; // Don't add if at max
+                }
+                next.add(id);
+            }
+            return next;
+        });
+    }, [config.getItemId, config.maxSelection]);
+    // Handle confirmation
+    const handleConfirm = React.useCallback(() => {
+        if (config.mode === "single") {
+            if (selectedItem) {
+                onSelect([selectedItem]);
+            }
+        }
+        else {
+            const selectedItems = items.filter((item) => selectedIds.has(config.getItemId(item)));
+            // Also include items from previous pages that were selected
+            // For now, we only return items from current view
+            // A more complete implementation would track full item objects
+            if (selectedItems.length >= minSelection) {
+                onSelect(selectedItems);
+            }
+        }
+    }, [config, selectedItem, selectedIds, items, minSelection, onSelect]);
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    useInput((input, key) => {
+        // Handle search mode input
+        if (search.searchMode) {
+            if (key.escape) {
+                search.cancelSearch();
+            }
+            return;
+        }
+        const pageItems = items.length;
+        // Navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageItems - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === "n" || key.rightArrow) &&
+            !loading &&
+            !navigating &&
+            hasMore) {
+            nextPage();
+            setSelectedIndex(0);
+        }
+        else if ((input === "p" || key.leftArrow) &&
+            !loading &&
+            !navigating &&
+            hasPrev) {
+            prevPage();
+            setSelectedIndex(0);
+        }
+        else if (input === " " && config.mode === "multi" && selectedItem) {
+            // Space toggles selection in multi mode
+            toggleSelection(selectedItem);
+        }
+        else if (key.return) {
+            if (config.mode === "single" && selectedItem) {
+                // Enter selects in single mode
+                onSelect([selectedItem]);
+            }
+            else if (config.mode === "multi" && canConfirm) {
+                // Enter confirms in multi mode
+                handleConfirm();
+            }
+        }
+        else if (input === "c" && config.onCreateNew) {
+            config.onCreateNew();
+        }
+        else if (input === "/") {
+            search.enterSearchMode();
+        }
+        else if (key.escape) {
+            if (search.handleEscape()) {
+                return;
+            }
+            onCancel();
+        }
+        else if (input === "q") {
+            onCancel();
+        }
+    });
+    // Loading state
+    if (loading && items.length === 0) {
+        return (_jsxs(_Fragment, { children: [config.breadcrumbItems && (_jsx(Breadcrumb, { items: config.breadcrumbItems })), _jsx(SpinnerComponent, { message: `Loading ${config.title.toLowerCase()}...` })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [config.breadcrumbItems && (_jsx(Breadcrumb, { items: config.breadcrumbItems })), _jsx(ErrorMessage, { message: `Failed to load resources`, error: error }), _jsx(NavigationTips, { tips: [{ key: "Esc", label: "Cancel" }] })] }));
+    }
+    // Calculate pagination info for display
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, totalCount);
+    return (_jsxs(_Fragment, { children: [config.breadcrumbItems && _jsx(Breadcrumb, { items: config.breadcrumbItems }), _jsx(SearchBar, { searchMode: search.searchMode, searchQuery: search.searchQuery, submittedSearchQuery: search.submittedSearchQuery, resultCount: totalCount, onSearchChange: search.setSearchQuery, onSearchSubmit: search.submitSearch, placeholder: config.searchPlaceholder || "Search..." }), resolvedColumns ? (_jsx(Table, { data: items, keyExtractor: config.getItemId, selectedIndex: selectedIndex, title: `${config.title.toLowerCase()}[${totalCount}]${config.mode === "multi" ? ` (${selectedIds.size} selected)` : ""}`, columns: config.mode === "multi"
+                    ? [
+                        // Prepend checkbox column for multi-select mode
+                        createComponentColumn("_selection", "", (row) => {
+                            const isChecked = selectedIds.has(config.getItemId(row));
+                            return (_jsxs(Text, { color: isChecked ? colors.success : colors.textDim, children: [isChecked
+                                        ? figures.checkboxOn
+                                        : figures.checkboxOff, " "] }));
+                        }, { width: 3 }),
+                        ...resolvedColumns,
+                    ]
+                    : resolvedColumns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found", config.onCreateNew ? " Press [c] to create one." : ""] }) })) : (
+            // Fallback simple list view if no columns provided
+            _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, children: items.length === 0 ? (_jsx(Box, { paddingY: 1, children: _jsxs(Text, { color: colors.textDim, children: [figures.info, " ", config.emptyMessage || "No items found", config.onCreateNew ? " Press [c] to create one." : ""] }) })) : (items.map((item, index) => {
+                    const isHighlighted = index === selectedIndex;
+                    const id = config.getItemId(item);
+                    const label = config.getItemLabel(item);
+                    const status = config.getItemStatus?.(item);
+                    const isChecked = selectedIds.has(id);
+                    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? colors.primary : colors.textDim, children: isHighlighted ? figures.pointer : " " }), _jsx(Text, { children: " " }), config.mode === "multi" && (_jsxs(Text, { color: isChecked ? colors.success : colors.textDim, children: [isChecked
+                                        ? figures.checkboxOn
+                                        : figures.checkboxOff, " "] })), _jsx(Text, { color: colors.text, bold: isHighlighted, inverse: isHighlighted, children: label }), status && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: status })] }))] }, id));
+                })) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: hasMore || hasPrev,
+                    },
+                    ...(config.mode === "multi"
+                        ? [{ key: "Space", label: "Toggle" }]
+                        : []),
+                    {
+                        key: "Enter",
+                        label: config.mode === "single" ? "Select" : "Confirm",
+                        condition: canConfirm,
+                    },
+                    ...(config.onCreateNew
+                        ? [{ key: "c", label: config.createNewLabel || "Create new" }]
+                        : []),
+                    { key: "/", label: "Search" },
+                    { key: "Esc", label: "Cancel" },
+                ] })] }));
+}