@runloop/rl-cli 0.0.1 → 0.0.2

package/dist/commands/devbox/create.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { Box, Text } from 'ink';
 import { getClient } from '../../utils/client.js';
-import { Header } from '../../components/Header.js';
 import { Banner } from '../../components/Banner.js';
 import { SpinnerComponent } from '../../components/Spinner.js';
 import { SuccessMessage } from '../../components/SuccessMessage.js';
@@ -31,7 +30,7 @@ const CreateDevboxUI = ({ name, template }) => {
         };
         create();
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Header, { title: "Create Devbox" }), loading && _jsx(SpinnerComponent, { message: "Creating..." }), result && (_jsxs(_Fragment, { children: [_jsx(SuccessMessage, { message: "Devbox created!", details: `ID: ${result.id}\nStatus: ${result.status}` }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Try: " }), _jsxs(Text, { color: "cyan", children: ["rln devbox exec ", result.id, " ls"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to create devbox", error: error })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Creating..." }), result && (_jsxs(_Fragment, { children: [_jsx(SuccessMessage, { message: "Devbox created!", details: `ID: ${result.id}\nStatus: ${result.status}` }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Try: " }), _jsxs(Text, { color: "cyan", children: ["rln devbox exec ", result.id, " ls"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to create devbox", error: error })] }));
 };
 export async function createDevbox(options) {
     const executor = createExecutor(options);

package/dist/commands/devbox/list.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text, useInput, useApp, useStdout } from 'ink';
+import TextInput from 'ink-text-input';
 import figures from 'figures';
 import { getClient } from '../../utils/client.js';
 import { SpinnerComponent } from '../../components/Spinner.js';
@@ -11,6 +12,8 @@ import { Table, createTextColumn } from '../../components/Table.js';
 import { createExecutor } from '../../utils/CommandExecutor.js';
 import { DevboxDetailPage } from '../../components/DevboxDetailPage.js';
 import { DevboxCreatePage } from '../../components/DevboxCreatePage.js';
+import { DevboxActionsMenu } from '../../components/DevboxActionsMenu.js';
+import { ActionsPopup } from '../../components/ActionsPopup.js';
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -31,7 +34,6 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-const MAX_FETCH = 100;
 const DEFAULT_PAGE_SIZE = 10;
 const ListDevboxesUI = ({ status }) => {
     const { exit } = useApp();
@@ -43,8 +45,17 @@ const ListDevboxesUI = ({ status }) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [showDetails, setShowDetails] = React.useState(false);
     const [showCreate, setShowCreate] = React.useState(false);
+    const [showActions, setShowActions] = React.useState(false);
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
     const [refreshing, setRefreshing] = React.useState(false);
     const [refreshIcon, setRefreshIcon] = React.useState(0);
+    const [searchMode, setSearchMode] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [totalCount, setTotalCount] = React.useState(0);
+    const [hasMore, setHasMore] = React.useState(false);
+    const pageCache = React.useRef(new Map());
+    const lastIdCache = React.useRef(new Map());
     // Calculate responsive dimensions
     const terminalWidth = stdout?.columns || 120;
     const terminalHeight = stdout?.rows || 30;
@@ -76,6 +87,18 @@ const ListDevboxesUI = ({ status }) => {
         const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - 10;
         nameWidth = Math.max(8, remainingWidth);
     }
+    // Define allOperations
+    const allOperations = [
+        { key: 'logs', label: 'View Logs', color: 'blue', icon: figures.info, shortcut: 'l' },
+        { key: 'exec', label: 'Execute Command', color: 'green', icon: figures.play, shortcut: 'e' },
+        { key: 'upload', label: 'Upload File', color: 'green', icon: figures.arrowUp, shortcut: 'u' },
+        { key: 'snapshot', label: 'Create Snapshot', color: 'yellow', icon: figures.circleFilled, shortcut: 'n' },
+        { key: 'ssh', label: 'SSH onto the box', color: 'cyan', icon: figures.arrowRight, shortcut: 's' },
+        { key: 'tunnel', label: 'Open Tunnel', color: 'magenta', icon: figures.pointerSmall, shortcut: 't' },
+        { key: 'suspend', label: 'Suspend Devbox', color: 'yellow', icon: figures.squareSmallFilled, shortcut: 'p' },
+        { key: 'resume', label: 'Resume Devbox', color: 'green', icon: figures.play, shortcut: 'r' },
+        { key: 'delete', label: 'Shutdown Devbox', color: 'red', icon: figures.cross, shortcut: 'd' },
+    ];
     React.useEffect(() => {
         const list = async (isInitialLoad = false) => {
             try {
@@ -83,22 +106,53 @@ const ListDevboxesUI = ({ status }) => {
                 if (isInitialLoad) {
                     setRefreshing(true);
                 }
+                // Check if we have cached data for this page
+                if (!isInitialLoad && pageCache.current.has(currentPage)) {
+                    setDevboxes(pageCache.current.get(currentPage) || []);
+                    setLoading(false);
+                    return;
+                }
                 const client = getClient();
-                const allDevboxes = [];
+                const pageDevboxes = [];
+                // Get starting_after cursor from previous page's last ID
+                const startingAfter = currentPage > 0 ? lastIdCache.current.get(currentPage - 1) : undefined;
+                // Build query params
+                const queryParams = {
+                    limit: PAGE_SIZE,
+                };
+                if (startingAfter) {
+                    queryParams.starting_after = startingAfter;
+                }
+                if (status) {
+                    queryParams.status = status;
+                }
+                // Fetch only the current page
+                const page = await client.devboxes.list(queryParams);
+                // Collect items from the page - only get PAGE_SIZE items, don't auto-paginate
                 let count = 0;
-                for await (const devbox of client.devboxes.list()) {
-                    if (!status || devbox.status === status) {
-                        allDevboxes.push(devbox);
-                    }
+                for await (const devbox of page) {
+                    pageDevboxes.push(devbox);
                     count++;
-                    if (count >= MAX_FETCH) {
+                    // Break after getting PAGE_SIZE items to prevent auto-pagination
+                    if (count >= PAGE_SIZE) {
                         break;
                     }
                 }
-                // Only update if data actually changed
+                // Update pagination metadata from the page object
+                // These properties are on the page object itself
+                const total = page.total_count || pageDevboxes.length;
+                const more = page.has_more || false;
+                setTotalCount(total);
+                setHasMore(more);
+                // Cache the page data and last ID
+                if (pageDevboxes.length > 0) {
+                    pageCache.current.set(currentPage, pageDevboxes);
+                    lastIdCache.current.set(currentPage, pageDevboxes[pageDevboxes.length - 1].id);
+                }
+                // Update devboxes for current page
                 setDevboxes((prev) => {
-                    const hasChanged = JSON.stringify(prev) !== JSON.stringify(allDevboxes);
-                    return hasChanged ? allDevboxes : prev;
+                    const hasChanged = JSON.stringify(prev) !== JSON.stringify(pageDevboxes);
+                    return hasChanged ? pageDevboxes : prev;
                 });
             }
             catch (err) {
@@ -115,24 +169,35 @@ const ListDevboxesUI = ({ status }) => {
         list(true);
         // Poll every 3 seconds (increased from 2), but only when in list view
         const interval = setInterval(() => {
-            if (!showDetails && !showCreate) {
+            if (!showDetails && !showCreate && !showActions) {
+                // Clear cache on refresh to get latest data
+                pageCache.current.clear();
+                lastIdCache.current.clear();
                 list(false);
             }
         }, 3000);
         return () => clearInterval(interval);
-    }, [showDetails, showCreate]);
+    }, [showDetails, showCreate, showActions, currentPage]);
     // Animate refresh icon only when in list view
     React.useEffect(() => {
-        if (showDetails || showCreate) {
+        if (showDetails || showCreate || showActions) {
             return; // Don't animate when not in list view
         }
         const interval = setInterval(() => {
             setRefreshIcon((prev) => (prev + 1) % 10);
         }, 80);
         return () => clearInterval(interval);
-    }, [showDetails, showCreate]);
+    }, [showDetails, showCreate, showActions]);
     useInput((input, key) => {
         const pageDevboxes = currentDevboxes.length;
+        // Skip input handling when in search mode - let TextInput handle it
+        if (searchMode) {
+            if (key.escape) {
+                setSearchMode(false);
+                setSearchQuery('');
+            }
+            return;
+        }
         // Skip input handling when in details view - let DevboxDetailPage handle it
         if (showDetails) {
             return;
@@ -141,6 +206,41 @@ const ListDevboxesUI = ({ status }) => {
         if (showCreate) {
             return;
         }
+        // Skip input handling when in actions view - let DevboxActionsMenu handle it
+        if (showActions) {
+            return;
+        }
+        // Handle popup navigation
+        if (showPopup) {
+            if (key.escape || input === 'q') {
+                console.clear();
+                setShowPopup(false);
+                setSelectedOperation(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) {
+                // Execute the selected operation
+                console.clear();
+                setShowPopup(false);
+                setShowActions(true);
+            }
+            else if (input) {
+                // Check for shortcut match
+                const matchedOpIndex = operations.findIndex(op => op.shortcut === input);
+                if (matchedOpIndex !== -1) {
+                    setSelectedOperation(matchedOpIndex);
+                    console.clear();
+                    setShowPopup(false);
+                    setShowActions(true);
+                }
+            }
+            return;
+        }
         // Handle list view
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
@@ -160,6 +260,11 @@ const ListDevboxesUI = ({ status }) => {
             console.clear();
             setShowDetails(true);
         }
+        else if (input === 'a') {
+            console.clear();
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
         else if (input === 'c') {
             console.clear();
             setShowCreate(true);
@@ -184,17 +289,57 @@ const ListDevboxesUI = ({ status }) => {
             };
             openBrowser();
         }
+        else if (input === '/') {
+            setSearchMode(true);
+        }
+        else if (key.escape && searchQuery) {
+            // Clear search when Esc is pressed and there's an active search
+            setSearchQuery('');
+            setCurrentPage(0);
+            setSelectedIndex(0);
+        }
         else if (input === 'q') {
             process.exit(0);
         }
     });
-    const running = devboxes.filter((d) => d.status === 'running').length;
-    const stopped = devboxes.filter((d) => ['stopped', 'suspended'].includes(d.status)).length;
-    const totalPages = Math.ceil(devboxes.length / PAGE_SIZE);
-    const startIndex = currentPage * PAGE_SIZE;
-    const endIndex = Math.min(startIndex + PAGE_SIZE, devboxes.length);
-    const currentDevboxes = devboxes.slice(startIndex, endIndex);
+    // Filter devboxes based on search query (client-side only for current page)
+    const filteredDevboxes = React.useMemo(() => {
+        if (!searchQuery.trim())
+            return devboxes;
+        const query = searchQuery.toLowerCase();
+        return devboxes.filter(devbox => {
+            return (devbox.id?.toLowerCase().includes(query) ||
+                devbox.name?.toLowerCase().includes(query) ||
+                devbox.status?.toLowerCase().includes(query));
+        });
+    }, [devboxes, searchQuery]);
+    const running = filteredDevboxes.filter((d) => d.status === 'running').length;
+    const stopped = filteredDevboxes.filter((d) => ['stopped', 'suspended'].includes(d.status)).length;
+    // Current page is already fetched, no need to slice
+    const currentDevboxes = filteredDevboxes;
     const selectedDevbox = currentDevboxes[selectedIndex];
+    // Calculate pagination info
+    const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + currentDevboxes.length;
+    // Filter operations based on devbox status
+    const operations = selectedDevbox ? allOperations.filter(op => {
+        const status = selectedDevbox.status;
+        // When suspended: logs and resume
+        if (status === 'suspended') {
+            return op.key === 'resume' || op.key === 'logs';
+        }
+        // When not running (shutdown, failure, etc): only logs
+        if (status !== 'running' && status !== 'provisioning' && status !== 'initializing') {
+            return op.key === 'logs';
+        }
+        // When running: everything except resume
+        if (status === 'running') {
+            return op.key !== 'resume';
+        }
+        // Default for transitional states (provisioning, initializing)
+        return op.key === 'logs' || op.key === 'delete';
+    }) : allOperations;
     // Create view
     if (showCreate) {
         return (_jsx(DevboxCreatePage, { onBack: () => {
@@ -205,32 +350,82 @@ const ListDevboxesUI = ({ status }) => {
                 // The list will auto-refresh via the polling effect
             } }));
     }
+    // Actions view
+    if (showActions && selectedDevbox) {
+        const selectedOp = operations[selectedOperation];
+        return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
+                setShowActions(false);
+                setSelectedOperation(0);
+            }, breadcrumbItems: [
+                { label: 'Devboxes' },
+                { label: selectedDevbox.name || selectedDevbox.id, active: true }
+            ], initialOperation: selectedOp?.key, initialOperationIndex: selectedOperation }));
+    }
     // Details view
     if (showDetails && selectedDevbox) {
         return _jsx(DevboxDetailPage, { devbox: selectedDevbox, onBack: () => setShowDetails(false) });
     }
+    // Show popup with table in background
+    if (showPopup && selectedDevbox) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes', active: true }
+                    ] }), !loading && !error && devboxes.length > 0 && (_jsx(_Fragment, { children: _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${totalCount}]`, columns: [
+                            {
+                                key: 'statusIcon',
+                                label: '',
+                                width: statusIconWidth,
+                                render: (devbox, index, isSelected) => {
+                                    const statusDisplay = getStatusDisplay(devbox.status);
+                                    // Truncate icon to fit width and pad
+                                    const icon = statusDisplay.icon.slice(0, statusIconWidth);
+                                    const padded = icon.padEnd(statusIconWidth, ' ');
+                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
+                                }
+                            },
+                            createTextColumn('id', 'ID', (devbox) => devbox.id, { width: idWidth, color: 'gray', dimColor: true, bold: false }),
+                            {
+                                key: 'statusText',
+                                label: 'Status',
+                                width: statusTextWidth,
+                                render: (devbox, index, isSelected) => {
+                                    const statusDisplay = getStatusDisplay(devbox.status);
+                                    const truncated = statusDisplay.text.slice(0, statusTextWidth);
+                                    const padded = truncated.padEnd(statusTextWidth, ' ');
+                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
+                                }
+                            },
+                            createTextColumn('name', 'Name', (devbox) => devbox.name || '', { width: nameWidth, dimColor: true }),
+                            createTextColumn('capabilities', 'Capabilities', (devbox) => {
+                                const hasCapabilities = devbox.capabilities && devbox.capabilities.filter((c) => c !== 'unknown').length > 0;
+                                return hasCapabilities
+                                    ? `[${devbox.capabilities
+                                        .filter((c) => c !== 'unknown')
+                                        .map((c) => c === 'computer_usage' ? 'comp' : c === 'browser_usage' ? 'browser' : c === 'docker_in_docker' ? 'docker' : c)
+                                        .join(',')}]`
+                                    : '';
+                            }, { width: capabilitiesWidth, color: 'blue', dimColor: true, bold: false, visible: showCapabilities }),
+                            createTextColumn('tags', 'Tags', (devbox) => devbox.blueprint_id ? '[bp]' : devbox.snapshot_id ? '[snap]' : '', { width: tagWidth, color: 'yellow', dimColor: true, bold: false, visible: showTags }),
+                            createTextColumn('created', 'Created', (devbox) => devbox.create_time_ms ? formatTimeAgo(devbox.create_time_ms) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
+                        ] }) })), _jsx(Box, { marginTop: -Math.min(operations.length + 10, PAGE_SIZE + 5), justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedDevbox, operations: operations, selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })] }));
+    }
     // List view
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: 'Devboxes', active: true }
-                ] }), loading && _jsx(SpinnerComponent, { message: "Loading..." }), !loading && !error && devboxes.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No devboxes found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln devbox create" })] })), !loading && !error && devboxes.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${devboxes.length}]`, columns: [
+                ] }), loading && _jsx(SpinnerComponent, { message: "Loading..." }), !loading && !error && devboxes.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No devboxes found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln devbox create" })] })), !loading && !error && devboxes.length > 0 && (_jsxs(_Fragment, { children: [searchMode && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "cyan", children: [figures.pointerSmall, " Search: "] }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search (name, id, status)...", onSubmit: () => {
+                                    setSearchMode(false);
+                                    setCurrentPage(0);
+                                    setSelectedIndex(0);
+                                } }), _jsx(Text, { color: "gray", dimColor: true, children: " [Esc to cancel]" })] })), searchQuery && !searchMode && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "cyan", children: [figures.info, " Searching for: "] }), _jsx(Text, { color: "yellow", bold: true, children: searchQuery }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", filteredDevboxes.length, " results) [/ to edit, Esc to clear]"] })] })), _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${totalCount}]`, columns: [
                             {
                                 key: 'statusIcon',
                                 label: '',
                                 width: statusIconWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
-                                    const status = devbox.status;
-                                    let color = 'gray';
-                                    if (status === 'running')
-                                        color = 'green';
-                                    else if (status === 'stopped' || status === 'suspended')
-                                        color = 'gray';
-                                    else if (status === 'starting' || status === 'stopping')
-                                        color = 'yellow';
-                                    else if (status === 'failed')
-                                        color = 'red';
-                                    const padded = statusDisplay.icon.padEnd(statusIconWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : color, bold: true, inverse: isSelected, children: padded }));
+                                    // Truncate icon to fit width and pad
+                                    const icon = statusDisplay.icon.slice(0, statusIconWidth);
+                                    const padded = icon.padEnd(statusIconWidth, ' ');
+                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
                                 }
                             },
                             createTextColumn('id', 'ID', (devbox) => devbox.id, { width: idWidth, color: 'gray', dimColor: true, bold: false }),
@@ -240,19 +435,9 @@ const ListDevboxesUI = ({ status }) => {
                                 width: statusTextWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
-                                    const status = devbox.status;
-                                    let color = 'gray';
-                                    if (status === 'running')
-                                        color = 'green';
-                                    else if (status === 'stopped' || status === 'suspended')
-                                        color = 'gray';
-                                    else if (status === 'starting' || status === 'stopping')
-                                        color = 'yellow';
-                                    else if (status === 'failed')
-                                        color = 'red';
                                     const truncated = statusDisplay.text.slice(0, statusTextWidth);
                                     const padded = truncated.padEnd(statusTextWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : color, bold: true, inverse: isSelected, children: padded }));
+                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
                                 }
                             },
                             createTextColumn('name', 'Name', (devbox) => devbox.name || '', { width: nameWidth }),
@@ -267,7 +452,7 @@ const ListDevboxesUI = ({ status }) => {
                             }, { width: capabilitiesWidth, color: 'blue', dimColor: true, bold: false, visible: showCapabilities }),
                             createTextColumn('tags', 'Tags', (devbox) => devbox.blueprint_id ? '[bp]' : devbox.snapshot_id ? '[snap]' : '', { width: tagWidth, color: 'yellow', dimColor: true, bold: false, visible: showTags }),
                             createTextColumn('created', 'Created', (devbox) => devbox.create_time_ms ? formatTimeAgo(devbox.create_time_ms) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
-                        ] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " ", devboxes.length, devboxes.length >= MAX_FETCH && '+'] }), _jsx(Text, { color: "gray", dimColor: true, children: " total" }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] })] })), _jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", devboxes.length] }), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: "cyan", children: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][refreshIcon % 10] })) : (_jsx(Text, { color: "green", children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 [Enter] Operations \u2022 [c] Create \u2022 [o] Browser \u2022 [q] Quit"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
+                        ] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " ", totalCount] }), _jsx(Text, { color: "gray", dimColor: true, children: " total" }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] })] })), _jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), hasMore && (_jsx(Text, { color: "gray", dimColor: true, children: " (more available)" })), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: "cyan", children: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][refreshIcon % 10] })) : (_jsx(Text, { color: "green", children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 [Enter] Details \u2022 [a] Actions \u2022 [c] Create \u2022 [/] Search \u2022 [o] Browser \u2022 [q] Quit"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
 };
 export async function listDevboxes(options) {
     const executor = createExecutor(options);

package/dist/components/ActionsPopup.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figures from 'figures';
+import chalk from 'chalk';
+export const ActionsPopup = ({ devbox, operations, selectedOperation, onClose, }) => {
+    // Calculate the maximum width needed
+    const maxLabelLength = Math.max(...operations.map(op => op.label.length));
+    const contentWidth = maxLabelLength + 12; // Content + icon + pointer + shortcuts
+    // Strip ANSI codes to get real length, then pad
+    const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, '');
+    const bgLine = (content) => {
+        const cleanLength = stripAnsi(content).length;
+        const padding = Math.max(0, contentWidth - cleanLength);
+        return chalk.bgBlack(content + ' '.repeat(padding));
+    };
+    // Render all lines with background
+    const lines = [
+        bgLine(chalk.cyan.bold(` ${figures.play} Quick Actions`)),
+        chalk.bgBlack(' '.repeat(contentWidth)),
+        ...operations.map((op, index) => {
+            const isSelected = index === selectedOperation;
+            const pointer = isSelected ? figures.pointer : ' ';
+            const content = ` ${pointer} ${op.icon} ${op.label} [${op.shortcut}]`;
+            let styled;
+            if (isSelected) {
+                const colorFn = chalk[op.color];
+                styled = typeof colorFn === 'function' ? colorFn.bold(content) : chalk.white.bold(content);
+            }
+            else {
+                styled = chalk.gray(content);
+            }
+            return bgLine(styled);
+        }),
+        chalk.bgBlack(' '.repeat(contentWidth)),
+        bgLine(chalk.gray.dim(` ${figures.arrowUp}${figures.arrowDown} Nav • [Enter]`)),
+        bgLine(chalk.gray.dim(` [Esc] Close`)),
+    ];
+    // Draw custom border with background to fill gaps
+    const borderTop = chalk.cyan('╭' + '─'.repeat(contentWidth) + '╮');
+    const borderBottom = chalk.cyan('╰' + '─'.repeat(contentWidth) + '╯');
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), lines.map((line, i) => (_jsxs(Text, { children: [chalk.cyan('│'), line, chalk.cyan('│')] }, i))), _jsx(Text, { children: borderBottom })] }) }));
+};