@runloop/rl-cli 0.0.2 → 0.1.0

package/dist/commands/blueprint/list.js

@@ -1,150 +1,105 @@
 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 TextInput from 'ink-text-input';
-import figures from 'figures';
-import { getClient } from '../../utils/client.js';
-import { Header } from '../../components/Header.js';
-import { SpinnerComponent } from '../../components/Spinner.js';
-import { ErrorMessage } from '../../components/ErrorMessage.js';
-import { SuccessMessage } from '../../components/SuccessMessage.js';
-import { StatusBadge } from '../../components/StatusBadge.js';
-import { Breadcrumb } from '../../components/Breadcrumb.js';
-import { MetadataDisplay } from '../../components/MetadataDisplay.js';
-import { Table, createTextColumn, createComponentColumn } from '../../components/Table.js';
-import { OperationsMenu } from '../../components/OperationsMenu.js';
-import { createExecutor } from '../../utils/CommandExecutor.js';
+import React from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { getClient } from "../../utils/client.js";
+import { Header } from "../../components/Header.js";
+import { SpinnerComponent } from "../../components/Spinner.js";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
+import { SuccessMessage } from "../../components/SuccessMessage.js";
+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 { 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;
-// Format time ago
-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`;
-};
-const ListBlueprintsUI = () => {
+const ListBlueprintsUI = ({ onBack, onExit }) => {
     const { stdout } = useStdout();
-    const { exit } = useApp();
-    const [loading, setLoading] = React.useState(true);
-    const [blueprints, setBlueprints] = React.useState([]);
-    const [error, setError] = React.useState(null);
-    const [currentPage, setCurrentPage] = React.useState(0);
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [showDetails, setShowDetails] = React.useState(false);
+    const [selectedBlueprint, setSelectedBlueprint] = React.useState(null);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
     const [executingOperation, setExecutingOperation] = React.useState(null);
-    const [operationInput, setOperationInput] = React.useState('');
+    const [operationInput, setOperationInput] = React.useState("");
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
+    const [loading, setLoading] = 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 showFullId = terminalWidth >= 80;
+    const statusIconWidth = 2;
+    const statusTextWidth = 10;
     const idWidth = 25;
     const nameWidth = terminalWidth >= 120 ? 30 : 25;
     const descriptionWidth = 40;
     const timeWidth = 20;
-    const allOperations = [
-        {
-            key: 'create_devbox',
-            label: 'Create Devbox from Blueprint',
-            color: 'green',
-            icon: figures.play,
-            needsInput: true,
-            inputPrompt: 'Devbox name (optional):',
-            inputPlaceholder: 'my-devbox',
-        },
-        {
-            key: 'delete',
-            label: 'Delete Blueprint',
-            color: 'red',
+    // Helper function to generate operations based on selected blueprint
+    const getOperationsForBlueprint = (blueprint) => {
+        const operations = [];
+        // Only show create devbox option if blueprint is successfully built
+        if (blueprint &&
+            (blueprint.status === "build_complete" ||
+                blueprint.status === "building_complete")) {
+            operations.push({
+                key: "create_devbox",
+                label: "Create Devbox from Blueprint",
+                color: colors.success,
+                icon: figures.play,
+            });
+        }
+        // Always show delete option
+        operations.push({
+            key: "delete",
+            label: "Delete Blueprint",
+            color: colors.error,
             icon: figures.cross,
-        },
-    ];
+        });
+        return operations;
+    };
+    // Fetch blueprints - moved to top to ensure hooks are called in same order
     React.useEffect(() => {
-        const list = async () => {
+        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) {
+                    if (count >= MAX_FETCH)
                         break;
-                    }
                 }
                 setBlueprints(allBlueprints);
             }
             catch (err) {
-                setError(err);
+                setListError(err);
             }
             finally {
                 setLoading(false);
             }
         };
-        list();
+        fetchBlueprints();
     }, []);
-    // Clear console when transitioning to detail view
-    const prevShowDetailsRef = React.useRef(showDetails);
-    React.useEffect(() => {
-        if (showDetails && !prevShowDetailsRef.current) {
-            console.clear();
-        }
-        prevShowDetailsRef.current = showDetails;
-    }, [showDetails]);
-    // Auto-execute operations that don't need input
-    React.useEffect(() => {
-        if (executingOperation === 'delete' && !loading && selectedBlueprint) {
-            executeOperation();
-        }
-    }, [executingOperation]);
-    const executeOperation = async () => {
-        const client = getClient();
-        const blueprint = selectedBlueprint;
-        try {
-            setLoading(true);
-            switch (executingOperation) {
-                case 'create_devbox':
-                    const devbox = await client.devboxes.create({
-                        blueprint_id: blueprint.id,
-                        name: operationInput || undefined,
-                    });
-                    setOperationResult(`Devbox created successfully!\n\n` +
-                        `ID: ${devbox.id}\n` +
-                        `Name: ${devbox.name || '(none)'}\n` +
-                        `Status: ${devbox.status}\n\n` +
-                        `Use 'rln devbox list' to view all devboxes.`);
-                    break;
-                case 'delete':
-                    await client.blueprints.delete(blueprint.id);
-                    setOperationResult(`Blueprint ${blueprint.id} deleted successfully`);
-                    break;
-            }
-        }
-        catch (err) {
-            setOperationError(err);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
+    // Handle input for all views - combined into single hook
     useInput((input, key) => {
-        const pageBlueprints = currentBlueprints.length;
+        // 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) {
             const currentOp = allOperations.find((op) => op.key === executingOperation);
@@ -152,95 +107,130 @@ const ListBlueprintsUI = () => {
                 if (key.return) {
                     executeOperation();
                 }
-                else if (input === 'q' || key.escape) {
+                else if (input === "q" || key.escape) {
                     console.clear();
                     setExecutingOperation(null);
-                    setOperationInput('');
+                    setOperationInput("");
                 }
             }
             return;
         }
         // Handle operation result display
         if (operationResult || operationError) {
-            if (input === 'q' || key.escape || key.return) {
+            if (input === "q" || key.escape || key.return) {
                 console.clear();
                 setOperationResult(null);
                 setOperationError(null);
                 setExecutingOperation(null);
-                setOperationInput('');
+                setOperationInput("");
             }
             return;
         }
-        // Handle details view
-        if (showDetails) {
-            if (input === 'q' || key.escape) {
-                console.clear();
-                setShowDetails(false);
-                setSelectedOperation(0);
-            }
-            else if (input === 'o' && selectedBlueprint) {
-                // Open in browser
-                const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.id}`;
-                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}"`;
-                    }
-                    exec(openCommand);
-                };
-                openBrowser();
-            }
-            else if (key.upArrow && selectedOperation > 0) {
+        // Handle create devbox view
+        if (showCreateDevbox) {
+            return; // Let DevboxCreatePage handle its own input
+        }
+        // Handle actions popup overlay: consume keys and prevent table nav
+        if (showPopup) {
+            if (key.upArrow && selectedOperation > 0) {
                 setSelectedOperation(selectedOperation - 1);
             }
-            else if (key.downArrow && selectedOperation < operations.length - 1) {
+            else if (key.downArrow &&
+                selectedOperation < allOperations.length - 1) {
                 setSelectedOperation(selectedOperation + 1);
             }
             else if (key.return) {
                 console.clear();
-                const op = operations[selectedOperation].key;
-                setExecutingOperation(op);
+                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();
+                }
+            }
+            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();
+                }
+            }
+            return; // prevent falling through to list nav
+        }
+        // Handle actions view
+        if (showActions) {
+            if (input === "q" || key.escape) {
+                console.clear();
+                setShowActions(false);
+                setSelectedOperation(0);
             }
             return;
         }
-        // Handle list view
+        // 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;
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
         }
         else if (key.downArrow && selectedIndex < pageBlueprints - 1) {
             setSelectedIndex(selectedIndex + 1);
         }
-        else if ((input === 'n' || key.rightArrow) && currentPage < totalPages - 1) {
+        else if ((input === "n" || key.rightArrow) &&
+            currentPage < totalPages - 1) {
             setCurrentPage(currentPage + 1);
             setSelectedIndex(0);
         }
-        else if ((input === 'p' || key.leftArrow) && currentPage > 0) {
+        else if ((input === "p" || key.leftArrow) && currentPage > 0) {
             setCurrentPage(currentPage - 1);
             setSelectedIndex(0);
         }
-        else if (key.return) {
+        else if (input === "a") {
             console.clear();
-            setShowDetails(true);
+            setShowPopup(true);
+            setSelectedOperation(0);
         }
-        else if (input === 'o' && selectedBlueprint) {
+        else if (input === "o" && currentBlueprints[selectedIndex]) {
             // Open in browser
-            const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.id}`;
+            const url = getBlueprintUrl(currentBlueprints[selectedIndex].id);
             const openBrowser = async () => {
-                const { exec } = await import('child_process');
+                const { exec } = await import("child_process");
                 const platform = process.platform;
                 let openCommand;
-                if (platform === 'darwin') {
+                if (platform === "darwin") {
                     openCommand = `open "${url}"`;
                 }
-                else if (platform === 'win32') {
+                else if (platform === "win32") {
                     openCommand = `start "${url}"`;
                 }
                 else {
@@ -250,25 +240,65 @@ const ListBlueprintsUI = () => {
             };
             openBrowser();
         }
-        else if (input === 'q') {
-            process.exit(0);
+        else if (key.escape) {
+            if (onBack) {
+                onBack();
+            }
+            else if (onExit) {
+                onExit();
+            }
         }
     });
-    const totalPages = Math.ceil(blueprints.length / PAGE_SIZE);
-    const startIndex = currentPage * PAGE_SIZE;
-    const endIndex = Math.min(startIndex + PAGE_SIZE, blueprints.length);
+    // 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);
-    const selectedBlueprint = currentBlueprints[selectedIndex];
-    const buildComplete = blueprints.filter((b) => b.status === 'build_complete').length;
-    const building = blueprints.filter((b) => ['provisioning', 'building'].includes(b.status)).length;
-    const failed = blueprints.filter((b) => b.status === 'build_failed').length;
+    // 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;
+            }
+        }
+        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';
+            if (op.key === "create_devbox") {
+                return status === "build_complete";
             }
             // Allow delete for any status
             return true;
@@ -276,92 +306,141 @@ const ListBlueprintsUI = () => {
         : allOperations;
     // Operation result display
     if (operationResult || operationError) {
-        const operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Blueprints' },
+                        { label: "Blueprints" },
                         {
-                            label: selectedBlueprint?.name || selectedBlueprint?.id || 'Blueprint',
+                            label: selectedBlueprint?.name || selectedBlueprint?.id || "Blueprint",
                         },
                         { label: operationLabel, active: true },
-                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && _jsx(ErrorMessage, { message: "Operation failed", error: operationError }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
+                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
     }
     // Operation input mode
     if (executingOperation && selectedBlueprint) {
         const currentOp = allOperations.find((op) => op.key === executingOperation);
         const needsInput = currentOp?.needsInput;
-        const operationLabel = currentOp?.label || 'Operation';
+        const operationLabel = currentOp?.label || "Operation";
         if (loading) {
             return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                            { label: 'Blueprints' },
+                            { label: "Blueprints" },
                             { label: selectedBlueprint.name || selectedBlueprint.id },
                             { label: operationLabel, active: true },
                         ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: "Please wait..." })] }));
         }
         if (!needsInput) {
             const messages = {
-                delete: 'Deleting blueprint...',
+                delete: "Deleting blueprint...",
             };
             return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                            { label: 'Blueprints' },
+                            { 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: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
         }
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Blueprints' },
+                        { 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: "cyan", bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: "gray", 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: "gray", dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+                    ] }), _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" }) })] })] }));
     }
-    // Details view with operation selection
-    if (showDetails && selectedBlueprint) {
-        const ds = selectedBlueprint.dockerfile_setup;
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Blueprints' },
-                        {
-                            label: selectedBlueprint.name || selectedBlueprint.id,
-                            active: true,
-                        },
-                    ] }), _jsx(Header, { title: "Blueprint Details" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: selectedBlueprint.name || selectedBlueprint.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedBlueprint.status }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 ", selectedBlueprint.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: selectedBlueprint.create_time_ms
-                                        ? new Date(selectedBlueprint.create_time_ms).toLocaleString()
-                                        : '' }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "(", selectedBlueprint.create_time_ms
-                                            ? formatTimeAgo(selectedBlueprint.create_time_ms)
-                                            : '', ")"] })] }), ds?.description && (_jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: ds.description }) }))] }), ds && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "yellow", bold: true, children: [figures.squareSmallFilled, " Dockerfile Setup"] }), ds.base_image && (_jsxs(Text, { dimColor: true, children: ["Base Image: ", ds.base_image] })), ds.entrypoint && (_jsxs(Text, { dimColor: true, children: ["Entrypoint: ", ds.entrypoint] })), ds.system_packages && ds.system_packages.length > 0 && (_jsxs(Text, { dimColor: true, children: ["System Packages: ", ds.system_packages.join(', ')] })), ds.python_packages && ds.python_packages.length > 0 && (_jsxs(Text, { dimColor: true, children: ["Python Packages: ", ds.python_packages.join(', ')] }))] })), selectedBlueprint.metadata && Object.keys(selectedBlueprint.metadata).length > 0 && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, children: _jsx(MetadataDisplay, { metadata: selectedBlueprint.metadata, showBorder: false }) })), selectedBlueprint.build_error && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, ' '] }), _jsx(Text, { color: "red", dimColor: true, children: selectedBlueprint.build_error })] })), _jsx(OperationsMenu, { operations: operations, selectedIndex: selectedOperation, onNavigate: (direction) => {
-                        if (direction === 'up' && selectedOperation > 0) {
-                            setSelectedOperation(selectedOperation - 1);
-                        }
-                        else if (direction === 'down' && selectedOperation < operations.length - 1) {
-                            setSelectedOperation(selectedOperation + 1);
-                        }
-                    }, onSelect: (op) => {
-                        console.clear();
-                        setExecutingOperation(op.key);
-                    }, onBack: () => {
-                        console.clear();
-                        setShowDetails(false);
-                        setSelectedOperation(0);
-                    }, additionalActions: [{ key: 'o', label: 'Browser', handler: () => { } }] })] }));
+    // Create devbox screen
+    if (showCreateDevbox && selectedBlueprint) {
+        return (_jsx(DevboxCreatePage, { onBack: () => {
+                setShowCreateDevbox(false);
+                setSelectedBlueprint(null);
+            }, onCreate: (devbox) => {
+                // Return to blueprint list after creation
+                setShowCreateDevbox(false);
+                setSelectedBlueprint(null);
+            }, initialBlueprintId: selectedBlueprint.id }));
+    }
+    // Loading state
+    if (loading) {
+        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 }] }), _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 }] }), _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 }] }), loading && _jsx(SpinnerComponent, { message: "Loading blueprints..." }), !loading && !error && blueprints.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No blueprints found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln blueprint create" })] })), !loading && !error && blueprints.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: [figures.tick, " ", buildComplete] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: [figures.ellipsis, " ", building] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "red", children: [figures.cross, " ", failed] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "cyan", children: [figures.hamburger, " ", blueprints.length, blueprints.length >= MAX_FETCH && '+'] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Page ", currentPage + 1, "/", totalPages] })] }))] }), _jsx(Table, { data: currentBlueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, columns: [
-                            createComponentColumn('status', 'Status', (blueprint) => _jsx(StatusBadge, { status: blueprint.status, showText: false }), { width: 2 }),
-                            createTextColumn('id', 'ID', (blueprint) => (showFullId ? blueprint.id : blueprint.id.slice(0, 13)), {
-                                width: showFullId ? idWidth : 15,
-                                color: 'gray',
-                                dimColor: true,
-                                bold: false,
-                            }),
-                            createTextColumn('name', 'Name', (blueprint) => blueprint.name || '(unnamed)', { width: nameWidth }),
-                            createTextColumn('description', 'Description', (blueprint) => blueprint.dockerfile_setup?.description || '', {
-                                width: descriptionWidth,
-                                color: 'gray',
-                                dimColor: true,
-                                bold: false,
-                                visible: showDescription,
-                            }),
-                            createTextColumn('created', 'Created', (blueprint) => blueprint.create_time_ms ? formatTimeAgo(blueprint.create_time_ms) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
-                        ] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Operations \u2022 [o] Open in Browser \u2022"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', figures.arrowLeft, figures.arrowRight, " Page \u2022"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[q] Quit"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list blueprints", error: error })] }));
+    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) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.key === "create_devbox"
+                            ? "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"] })] })] }));
 };
+// 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 () => {