@runloop/rl-cli 0.1.2 → 0.3.0

package/dist/commands/blueprint/list.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, 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, useInput, useStdout } from "ink";
+import { Box, Text, useInput, useApp } from "ink";
 import TextInput from "ink-text-input";
 import figures from "figures";
 import { getClient } from "../../utils/client.js";
@@ -12,43 +12,157 @@ import { Breadcrumb } from "../../components/Breadcrumb.js";
 import { createTextColumn, Table } from "../../components/Table.js";
 import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
-import { createExecutor } from "../../utils/CommandExecutor.js";
+import { output, outputError } from "../../utils/output.js";
 import { getBlueprintUrl } from "../../utils/url.js";
 import { colors } from "../../utils/theme.js";
 import { getStatusDisplay } from "../../components/StatusBadge.js";
 import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
-const PAGE_SIZE = 10;
-const MAX_FETCH = 100;
-const ListBlueprintsUI = ({ onBack, onExit }) => {
-    const { stdout } = useStdout();
+import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
+import { useViewportHeight } from "../../hooks/useViewportHeight.js";
+import { useCursorPagination } from "../../hooks/useCursorPagination.js";
+import { useNavigation } from "../../store/navigationStore.js";
+const DEFAULT_PAGE_SIZE = 10;
+const ListBlueprintsUI = ({ onBack, onExit, }) => {
+    const { exit: inkExit } = useApp();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [selectedBlueprint, setSelectedBlueprint] = React.useState(null);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
     const [executingOperation, setExecutingOperation] = React.useState(null);
     const [operationInput, setOperationInput] = React.useState("");
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
+    const [operationLoading, setOperationLoading] = React.useState(false);
     const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
-    // List view state - moved to top to ensure hooks are called in same order
-    const [blueprints, setBlueprints] = React.useState([]);
-    const [listError, setListError] = React.useState(null);
-    const [currentPage, setCurrentPage] = React.useState(0);
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [showActions, setShowActions] = React.useState(false);
     const [showPopup, setShowPopup] = React.useState(false);
-    // Calculate responsive column widths
-    const terminalWidth = stdout?.columns || 120;
-    const showDescription = terminalWidth >= 120;
+    const { navigate } = useNavigation();
+    // Calculate overhead for viewport height
+    const overhead = 13;
+    const { viewportHeight, terminalWidth } = useViewportHeight({
+        overhead,
+        minHeight: 5,
+    });
+    const PAGE_SIZE = viewportHeight;
+    // All width constants
     const statusIconWidth = 2;
     const statusTextWidth = 10;
     const idWidth = 25;
-    const nameWidth = terminalWidth >= 120 ? 30 : 25;
+    const nameWidth = Math.max(15, terminalWidth >= 120 ? 30 : 25);
     const descriptionWidth = 40;
     const timeWidth = 20;
+    const showDescription = terminalWidth >= 120;
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        const client = getClient();
+        const pageBlueprints = [];
+        // Build query params
+        const queryParams = {
+            limit: params.limit,
+        };
+        if (params.startingAt) {
+            queryParams.starting_after = params.startingAt;
+        }
+        // Fetch ONE page only
+        const page = (await client.blueprints.list(queryParams));
+        // Extract data and create defensive copies
+        if (page.blueprints && Array.isArray(page.blueprints)) {
+            page.blueprints.forEach((b) => {
+                pageBlueprints.push({
+                    id: b.id,
+                    name: b.name,
+                    status: b.status,
+                    create_time_ms: b.create_time_ms,
+                });
+            });
+        }
+        const result = {
+            items: pageBlueprints,
+            hasMore: page.has_more || false,
+            totalCount: page.total_count || pageBlueprints.length,
+        };
+        return result;
+    }, []);
+    // Use the shared pagination hook
+    const { items: blueprints, loading, navigating, error: listError, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: (blueprint) => blueprint.id,
+        pollInterval: 2000,
+        pollingEnabled: !showPopup && !showCreateDevbox && !executingOperation,
+        deps: [PAGE_SIZE],
+    });
+    // Memoize columns array
+    const blueprintColumns = React.useMemo(() => [
+        {
+            key: "statusIcon",
+            label: "",
+            width: statusIconWidth,
+            render: (blueprint, _index, isSelected) => {
+                const statusDisplay = getStatusDisplay(blueprint.status || "");
+                const statusColor = statusDisplay.color === colors.textDim
+                    ? colors.info
+                    : statusDisplay.color;
+                return (_jsxs(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+            },
+        },
+        {
+            key: "id",
+            label: "ID",
+            width: idWidth + 1,
+            render: (blueprint, _index, isSelected) => {
+                const value = blueprint.id;
+                const width = Math.max(1, idWidth + 1);
+                const truncated = value.slice(0, Math.max(1, width - 1));
+                const padded = truncated.padEnd(width, " ");
+                return (_jsx(Text, { color: isSelected ? "white" : colors.idColor, bold: false, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
+            },
+        },
+        {
+            key: "statusText",
+            label: "Status",
+            width: statusTextWidth,
+            render: (blueprint, _index, isSelected) => {
+                const statusDisplay = getStatusDisplay(blueprint.status || "");
+                const statusColor = statusDisplay.color === colors.textDim
+                    ? colors.info
+                    : statusDisplay.color;
+                const safeWidth = Math.max(1, statusTextWidth);
+                const truncated = statusDisplay.text.slice(0, safeWidth);
+                const padded = truncated.padEnd(safeWidth, " ");
+                return (_jsx(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
+            },
+        },
+        createTextColumn("name", "Name", (blueprint) => blueprint.name || "", {
+            width: nameWidth,
+        }),
+        // Description column removed - not available in API
+        createTextColumn("created", "Created", (blueprint) => blueprint.create_time_ms
+            ? formatTimeAgo(blueprint.create_time_ms)
+            : "", {
+            width: timeWidth,
+            color: colors.textDim,
+            dimColor: false,
+            bold: false,
+        }),
+    ], [
+        statusIconWidth,
+        statusTextWidth,
+        idWidth,
+        nameWidth,
+        descriptionWidth,
+        timeWidth,
+        showDescription,
+    ]);
     // Helper function to generate operations based on selected blueprint
     const getOperationsForBlueprint = (blueprint) => {
         const operations = [];
-        // Only show create devbox option if blueprint is successfully built
+        // View Logs is always available
+        operations.push({
+            key: "view_logs",
+            label: "View Logs",
+            color: colors.info,
+            icon: figures.info,
+        });
         if (blueprint &&
             (blueprint.status === "build_complete" ||
                 blueprint.status === "building_complete")) {
@@ -59,7 +173,6 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
                 icon: figures.play,
             });
         }
-        // Always show delete option
         operations.push({
             key: "delete",
             label: "Delete Blueprint",
@@ -68,57 +181,97 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
         });
         return operations;
     };
-    // Fetch blueprints - moved to top to ensure hooks are called in same order
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
     React.useEffect(() => {
-        const fetchBlueprints = async () => {
-            try {
-                setLoading(true);
-                const client = getClient();
-                const allBlueprints = [];
-                let count = 0;
-                for await (const blueprint of client.blueprints.list()) {
-                    allBlueprints.push(blueprint);
-                    count++;
-                    if (count >= MAX_FETCH)
-                        break;
-                }
-                setBlueprints(allBlueprints);
-            }
-            catch (err) {
-                setListError(err);
+        if (blueprints.length > 0 && selectedIndex >= blueprints.length) {
+            setSelectedIndex(Math.max(0, blueprints.length - 1));
+        }
+    }, [blueprints.length, selectedIndex]);
+    const selectedBlueprintItem = blueprints[selectedIndex];
+    const allOperations = getOperationsForBlueprint(selectedBlueprintItem);
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + blueprints.length;
+    const executeOperation = async (blueprintOverride, operationOverride) => {
+        const client = getClient();
+        // Use override if provided, otherwise use selectedBlueprint from state
+        // If neither is available, use selectedBlueprintItem as fallback
+        const blueprint = blueprintOverride || selectedBlueprint || selectedBlueprintItem;
+        // Use operation override if provided (to avoid state timing issues)
+        const operation = operationOverride || executingOperation;
+        if (!blueprint) {
+            console.error("No blueprint selected for operation");
+            return;
+        }
+        // Ensure selectedBlueprint is set in state if it wasn't already
+        if (!selectedBlueprint && blueprint) {
+            setSelectedBlueprint(blueprint);
+        }
+        try {
+            setOperationLoading(true);
+            switch (operation) {
+                case "view_logs":
+                    // Navigate to the logs screen
+                    setOperationLoading(false);
+                    setExecutingOperation(null);
+                    navigate("blueprint-logs", {
+                        blueprintId: blueprint.id,
+                        blueprintName: blueprint.name || blueprint.id,
+                    });
+                    return;
+                case "create_devbox":
+                    setShowCreateDevbox(true);
+                    setExecutingOperation(null);
+                    setOperationLoading(false);
+                    return;
+                case "delete":
+                    await client.blueprints.delete(blueprint.id);
+                    setOperationResult(`Blueprint ${blueprint.id} deleted successfully`);
+                    break;
             }
-            finally {
-                setLoading(false);
+        }
+        catch (err) {
+            setOperationError(err);
+        }
+        finally {
+            setOperationLoading(false);
+        }
+    };
+    // Filter operations based on blueprint status
+    const operations = selectedBlueprint
+        ? allOperations.filter((op) => {
+            const status = selectedBlueprint.status;
+            if (op.key === "create_devbox") {
+                return status === "build_complete";
             }
-        };
-        fetchBlueprints();
-    }, []);
-    // Handle input for all views - combined into single hook
+            return true;
+        })
+        : allOperations;
+    // Handle input for all views
     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);
-        }
         // Handle operation input mode
         if (executingOperation && !operationResult && !operationError) {
+            // Allow escape/q to cancel any operation, even during loading
+            if (input === "q" || key.escape) {
+                setExecutingOperation(null);
+                setOperationInput("");
+                setOperationLoading(false);
+                return;
+            }
             const currentOp = allOperations.find((op) => op.key === executingOperation);
             if (currentOp?.needsInput) {
                 if (key.return) {
                     executeOperation();
                 }
-                else if (input === "q" || key.escape) {
-                    console.clear();
-                    setExecutingOperation(null);
-                    setOperationInput("");
-                }
             }
             return;
         }
         // Handle operation result display
         if (operationResult || operationError) {
             if (input === "q" || key.escape || key.return) {
-                console.clear();
                 setOperationResult(null);
                 setOperationError(null);
                 setExecutingOperation(null);
@@ -128,9 +281,9 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
         }
         // Handle create devbox view
         if (showCreateDevbox) {
-            return; // Let DevboxCreatePage handle its own input
+            return;
         }
-        // Handle actions popup overlay: consume keys and prevent table nav
+        // Handle actions popup overlay
         if (showPopup) {
             if (key.upArrow && selectedOperation > 0) {
                 setSelectedOperation(selectedOperation - 1);
@@ -140,66 +293,53 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
                 setSelectedOperation(selectedOperation + 1);
             }
             else if (key.return) {
-                console.clear();
                 setShowPopup(false);
                 const operationKey = allOperations[selectedOperation].key;
                 if (operationKey === "create_devbox") {
-                    // Go directly to create devbox screen
                     setSelectedBlueprint(selectedBlueprintItem);
                     setShowCreateDevbox(true);
                 }
                 else {
-                    // Execute other operations normally
                     setSelectedBlueprint(selectedBlueprintItem);
                     setExecutingOperation(operationKey);
-                    executeOperation();
+                    executeOperation(selectedBlueprintItem, operationKey);
                 }
             }
             else if (key.escape || input === "q") {
-                console.clear();
                 setShowPopup(false);
                 setSelectedOperation(0);
             }
             else if (input === "c") {
-                // Create devbox hotkey - only if blueprint is complete
                 if (selectedBlueprintItem &&
                     (selectedBlueprintItem.status === "build_complete" ||
                         selectedBlueprintItem.status === "building_complete")) {
-                    console.clear();
                     setShowPopup(false);
                     setSelectedBlueprint(selectedBlueprintItem);
                     setShowCreateDevbox(true);
                 }
             }
             else if (input === "d") {
-                // Delete hotkey
                 const deleteIndex = allOperations.findIndex((op) => op.key === "delete");
                 if (deleteIndex >= 0) {
-                    console.clear();
                     setShowPopup(false);
                     setSelectedBlueprint(selectedBlueprintItem);
                     setExecutingOperation("delete");
-                    executeOperation();
+                    executeOperation(selectedBlueprintItem, "delete");
                 }
             }
-            return; // prevent falling through to list nav
-        }
-        // Handle actions view
-        if (showActions) {
-            if (input === "q" || key.escape) {
-                console.clear();
-                setShowActions(false);
-                setSelectedOperation(0);
+            else if (input === "l") {
+                const logsIndex = allOperations.findIndex((op) => op.key === "view_logs");
+                if (logsIndex >= 0) {
+                    setShowPopup(false);
+                    setSelectedBlueprint(selectedBlueprintItem);
+                    setExecutingOperation("view_logs");
+                    executeOperation(selectedBlueprintItem, "view_logs");
+                }
             }
             return;
         }
-        // Handle list navigation (default view)
-        const pageSize = PAGE_SIZE;
-        const totalPages = Math.ceil(blueprints.length / pageSize);
-        const startIndex = currentPage * pageSize;
-        const endIndex = Math.min(startIndex + pageSize, blueprints.length);
-        const currentBlueprints = blueprints.slice(startIndex, endIndex);
-        const pageBlueprints = currentBlueprints.length;
+        // Handle list navigation
+        const pageBlueprints = blueprints.length;
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
         }
@@ -207,22 +347,30 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
             setSelectedIndex(selectedIndex + 1);
         }
         else if ((input === "n" || key.rightArrow) &&
-            currentPage < totalPages - 1) {
-            setCurrentPage(currentPage + 1);
+            !loading &&
+            !navigating &&
+            hasMore) {
+            nextPage();
             setSelectedIndex(0);
         }
-        else if ((input === "p" || key.leftArrow) && currentPage > 0) {
-            setCurrentPage(currentPage - 1);
+        else if ((input === "p" || key.leftArrow) &&
+            !loading &&
+            !navigating &&
+            hasPrev) {
+            prevPage();
             setSelectedIndex(0);
         }
         else if (input === "a") {
-            console.clear();
             setShowPopup(true);
             setSelectedOperation(0);
         }
-        else if (input === "o" && currentBlueprints[selectedIndex]) {
-            // Open in browser
-            const url = getBlueprintUrl(currentBlueprints[selectedIndex].id);
+        else if (input === "l" && selectedBlueprintItem) {
+            setSelectedBlueprint(selectedBlueprintItem);
+            setExecutingOperation("view_logs");
+            executeOperation(selectedBlueprintItem, "view_logs");
+        }
+        else if (input === "o" && blueprints[selectedIndex]) {
+            const url = getBlueprintUrl(blueprints[selectedIndex].id);
             const openBrowser = async () => {
                 const { exec } = await import("child_process");
                 const platform = process.platform;
@@ -247,63 +395,11 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
             else if (onExit) {
                 onExit();
             }
-        }
-    });
-    // Pagination computed early to allow hooks before any returns
-    const pageSize = PAGE_SIZE;
-    const totalPages = Math.ceil(blueprints.length / pageSize);
-    const startIndex = currentPage * pageSize;
-    const endIndex = Math.min(startIndex + pageSize, blueprints.length);
-    const currentBlueprints = blueprints.slice(startIndex, endIndex);
-    // Ensure selected index is within bounds - place before any returns
-    React.useEffect(() => {
-        if (currentBlueprints.length > 0 &&
-            selectedIndex >= currentBlueprints.length) {
-            setSelectedIndex(Math.max(0, currentBlueprints.length - 1));
-        }
-    }, [currentBlueprints.length, selectedIndex]);
-    const selectedBlueprintItem = currentBlueprints[selectedIndex];
-    // Generate operations based on selected blueprint status
-    const allOperations = getOperationsForBlueprint(selectedBlueprintItem);
-    const executeOperation = async () => {
-        const client = getClient();
-        const blueprint = selectedBlueprint;
-        if (!blueprint)
-            return;
-        try {
-            setLoading(true);
-            switch (executingOperation) {
-                case "create_devbox":
-                    // Navigate to create devbox screen with blueprint pre-filled
-                    setShowCreateDevbox(true);
-                    setExecutingOperation(null);
-                    setLoading(false);
-                    return;
-                case "delete":
-                    await client.blueprints.delete(blueprint.id);
-                    setOperationResult(`Blueprint ${blueprint.id} deleted successfully`);
-                    break;
+            else {
+                inkExit();
             }
         }
-        catch (err) {
-            setOperationError(err);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    // Filter operations based on blueprint status
-    const operations = selectedBlueprint
-        ? allOperations.filter((op) => {
-            const status = selectedBlueprint.status;
-            // Only allow creating devbox if build is complete
-            if (op.key === "create_devbox") {
-                return status === "build_complete";
-            }
-            // Allow delete for any status
-            return true;
-        })
-        : allOperations;
+    });
     // Operation result display
     if (operationResult || operationError) {
         const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
@@ -321,113 +417,52 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
         const currentOp = allOperations.find((op) => op.key === executingOperation);
         const needsInput = currentOp?.needsInput;
         const operationLabel = currentOp?.label || "Operation";
-        if (loading) {
+        if (operationLoading) {
+            const messages = {
+                delete: "Deleting blueprint...",
+                view_logs: "Fetching logs...",
+            };
             return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                             { label: "Blueprints" },
                             { label: selectedBlueprint.name || selectedBlueprint.id },
                             { label: operationLabel, active: true },
-                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: "Please wait..." })] }));
+                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [q] or [esc] to cancel" }) })] }));
         }
-        if (!needsInput) {
-            const messages = {
-                delete: "Deleting blueprint...",
-            };
+        // Only show input screen if operation needs input
+        // Operations like view_logs navigate away and don't need this screen
+        if (needsInput) {
             return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                             { label: "Blueprints" },
                             { label: selectedBlueprint.name || selectedBlueprint.id },
                             { label: operationLabel, active: true },
-                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
+                        ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, children: [currentOp?.inputPrompt || "", " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: currentOp?.inputPlaceholder || "" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
         }
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: "Blueprints" },
-                        { label: selectedBlueprint.name || selectedBlueprint.id },
-                        { label: operationLabel, active: true },
-                    ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, children: [currentOp.inputPrompt, " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: currentOp.inputPlaceholder || "" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+        // For operations that don't need input (like view_logs), fall through to list view
     }
     // Create devbox screen
     if (showCreateDevbox && selectedBlueprint) {
         return (_jsx(DevboxCreatePage, { onBack: () => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
-            }, onCreate: (devbox) => {
-                // Return to blueprint list after creation
+            }, onCreate: () => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
             }, initialBlueprintId: selectedBlueprint.id }));
     }
     // Loading state
-    if (loading) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }], showVersionCheck: true }), _jsx(SpinnerComponent, { message: "Loading blueprints..." })] }));
+    if (loading && blueprints.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsx(SpinnerComponent, { message: "Loading blueprints..." })] }));
     }
     // Error state
     if (listError) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }], showVersionCheck: true }), _jsx(ErrorMessage, { message: "Failed to load blueprints", error: listError })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsx(ErrorMessage, { message: "Failed to load blueprints", error: listError })] }));
     }
     // Empty state
     if (blueprints.length === 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }], showVersionCheck: true }), _jsxs(Box, { children: [_jsx(Text, { color: colors.warning, children: figures.info }), _jsx(Text, { children: " No blueprints found. Try:" }), _jsx(Text, { color: colors.primary, bold: true, children: "rli blueprint create" })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.warning, children: figures.info }), _jsx(Text, { children: " No blueprints found. Try: " }), _jsx(Text, { color: colors.primary, bold: true, children: "rli blueprint create" })] })] }));
     }
-    // Pagination moved earlier
-    // Overlay: draw quick actions popup over the table (keep table visible)
     // List view
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), _jsx(Table, { data: currentBlueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, title: `blueprints[${blueprints.length}]`, columns: [
-                    {
-                        key: "statusIcon",
-                        label: "",
-                        width: statusIconWidth,
-                        render: (blueprint, index, isSelected) => {
-                            const statusDisplay = getStatusDisplay(blueprint.status);
-                            const statusColor = statusDisplay.color === colors.textDim
-                                ? colors.info
-                                : statusDisplay.color;
-                            return (_jsxs(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
-                        },
-                    },
-                    {
-                        key: "id",
-                        label: "ID",
-                        width: idWidth + 1,
-                        render: (blueprint, index, isSelected) => {
-                            const value = blueprint.id;
-                            const width = idWidth + 1;
-                            const truncated = value.slice(0, width - 1);
-                            const padded = truncated.padEnd(width, " ");
-                            return (_jsx(Text, { color: isSelected ? "white" : colors.textDim, bold: false, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
-                        },
-                    },
-                    {
-                        key: "statusText",
-                        label: "Status",
-                        width: statusTextWidth,
-                        render: (blueprint, index, isSelected) => {
-                            const statusDisplay = getStatusDisplay(blueprint.status);
-                            const statusColor = statusDisplay.color === colors.textDim
-                                ? colors.info
-                                : statusDisplay.color;
-                            const truncated = statusDisplay.text.slice(0, statusTextWidth);
-                            const padded = truncated.padEnd(statusTextWidth, " ");
-                            return (_jsx(Text, { color: isSelected ? "white" : statusColor, bold: true, dimColor: false, inverse: isSelected, wrap: "truncate", children: padded }));
-                        },
-                    },
-                    createTextColumn("name", "Name", (blueprint) => blueprint.name || "(unnamed)", {
-                        width: nameWidth,
-                    }),
-                    createTextColumn("description", "Description", (blueprint) => blueprint.dockerfile_setup?.description || "", {
-                        width: descriptionWidth,
-                        color: colors.textDim,
-                        dimColor: false,
-                        bold: false,
-                        visible: showDescription,
-                    }),
-                    createTextColumn("created", "Created", (blueprint) => blueprint.create_time_ms
-                        ? formatTimeAgo(blueprint.create_time_ms)
-                        : "", {
-                        width: timeWidth,
-                        color: colors.textDim,
-                        dimColor: false,
-                        bold: false,
-                    }),
-                ] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", blueprints.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 ", blueprints.length] })] }), showPopup && selectedBlueprintItem && (_jsx(Box, { marginTop: -Math.min(allOperations.length + 10, PAGE_SIZE + 5), justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedBlueprintItem, operations: allOperations.map((op) => ({
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Blueprints", active: true }] }), !showPopup && (_jsx(Table, { data: blueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, title: `blueprints[${totalCount}]`, columns: blueprintColumns })), !showPopup && (_jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedBlueprintItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedBlueprintItem, operations: allOperations.map((op) => ({
                         key: op.key,
                         label: op.label,
                         color: op.color,
@@ -436,17 +471,30 @@ const ListBlueprintsUI = ({ onBack, onExit }) => {
                             ? "c"
                             : op.key === "delete"
                                 ? "d"
-                                : "",
-                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [o] Browser"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
+                                : op.key === "view_logs"
+                                    ? "l"
+                                    : "",
+                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [o] Browser"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 };
 // Export the UI component for use in the main menu
 export { ListBlueprintsUI };
 export async function listBlueprints(options = {}) {
-    const executor = createExecutor(options);
-    await executor.executeList(async () => {
-        const client = executor.getClient();
-        return executor.fetchFromIterator(client.blueprints.list(), {
-            limit: PAGE_SIZE,
-        });
-    }, () => _jsx(ListBlueprintsUI, {}), PAGE_SIZE);
+    try {
+        const client = getClient();
+        // Build query params
+        const queryParams = {
+            limit: DEFAULT_PAGE_SIZE,
+        };
+        if (options.name) {
+            queryParams.name = options.name;
+        }
+        // Fetch blueprints
+        const page = (await client.blueprints.list(queryParams));
+        // Extract blueprints array
+        const blueprints = page.blueprints || [];
+        output(blueprints, { format: options.output, defaultFormat: "json" });
+    }
+    catch (error) {
+        outputError("Failed to list blueprints", error);
+    }
 }