@runloop/rl-cli 0.0.1 → 0.0.3

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,10 @@ 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';
+import { getDevboxUrl } from '../../utils/url.js';
+import { runSSHSession } from '../../utils/sshSession.js';
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -31,10 +36,9 @@ 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();
+const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit }) => {
+    const { exit: inkExit } = useApp();
     const { stdout } = useStdout();
     const [loading, setLoading] = React.useState(true);
     const [devboxes, setDevboxes] = React.useState([]);
@@ -43,8 +47,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 +89,29 @@ 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' },
+    ];
+    // Check if we need to focus on a specific devbox after returning from SSH
+    React.useEffect(() => {
+        if (focusDevboxId && devboxes.length > 0 && !loading) {
+            // Find the devbox in the current page
+            const devboxIndex = devboxes.findIndex(d => d.id === focusDevboxId);
+            if (devboxIndex !== -1) {
+                setSelectedIndex(devboxIndex);
+                setShowDetails(true);
+            }
+        }
+    }, [devboxes, loading, focusDevboxId]);
     React.useEffect(() => {
         const list = async (isInitialLoad = false) => {
             try {
@@ -83,22 +119,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 +182,40 @@ 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) => {
+        // Handle Ctrl+C to force exit
+        if (key.ctrl && input === 'c') {
+            process.stdout.write('\x1b[?1049l'); // Exit alternate screen
+            process.exit(130);
+        }
         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 +224,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,13 +278,18 @@ 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);
         }
         else if (input === 'o' && selectedDevbox) {
             // Open in browser
-            const url = `https://platform.runloop.ai/devboxes/${selectedDevbox.id}`;
+            const url = getDevboxUrl(selectedDevbox.id);
             const openBrowser = async () => {
                 const { exec } = await import('child_process');
                 const platform = process.platform;
@@ -184,17 +307,72 @@ const ListDevboxesUI = ({ status }) => {
             };
             openBrowser();
         }
-        else if (input === 'q') {
-            process.exit(0);
+        else if (input === '/') {
+            setSearchMode(true);
+        }
+        else if (key.escape) {
+            if (searchQuery) {
+                // Clear search when Esc is pressed and there's an active search
+                setSearchQuery('');
+                setCurrentPage(0);
+                setSelectedIndex(0);
+            }
+            else {
+                // Go back to home
+                if (onBack) {
+                    onBack();
+                }
+                else if (onExit) {
+                    onExit();
+                }
+                else {
+                    inkExit();
+                }
+            }
         }
     });
-    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]);
+    // Current page is already fetched, no need to slice
+    const currentDevboxes = filteredDevboxes;
+    // Ensure selected index is within bounds after filtering
+    React.useEffect(() => {
+        if (currentDevboxes.length > 0 && selectedIndex >= currentDevboxes.length) {
+            setSelectedIndex(Math.max(0, currentDevboxes.length - 1));
+        }
+    }, [currentDevboxes.length, selectedIndex]);
     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 +383,98 @@ 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, skipOperationsMenu: true, onSSHRequest: onSSHRequest }));
+    }
     // Details view
     if (showDetails && selectedDevbox) {
-        return _jsx(DevboxDetailPage, { devbox: selectedDevbox, onBack: () => setShowDetails(false) });
+        return (_jsx(DevboxDetailPage, { devbox: selectedDevbox, onBack: () => setShowDetails(false), onSSHRequest: onSSHRequest }));
     }
-    // List view
+    // 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) }) })] }));
+    }
+    // If loading or error, show that first
+    if (loading) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes', active: true }
+                    ] }), _jsx(SpinnerComponent, { message: "Loading..." })] }));
+    }
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes', active: true }
+                    ] }), _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
+    }
+    if (!loading && !error && devboxes.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Devboxes', active: true }
+                    ] }), _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" })] })] }));
+    }
+    // List view with data
     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: [
+                ] }), currentDevboxes && currentDevboxes.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]" })] })), !searchMode && searchQuery && (_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: [" (", currentDevboxes.length, " results) [/ to edit, Esc to clear]"] })] })), _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${searchQuery ? currentDevboxes.length : 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 +484,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,36 +501,34 @@ 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 })] }));
+                        ] }, `table-${searchQuery}-${currentPage}`), _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 [Esc] Back"] })] })] }))] }));
 };
-export async function listDevboxes(options) {
+// Export the UI component for use in the main menu
+export { ListDevboxesUI };
+export async function listDevboxes(options, focusDevboxId) {
     const executor = createExecutor(options);
+    let sshSessionConfig = null;
     await executor.executeList(async () => {
         const client = executor.getClient();
         return executor.fetchFromIterator(client.devboxes.list(), {
             filter: options.status ? (devbox) => devbox.status === options.status : undefined,
             limit: DEFAULT_PAGE_SIZE,
         });
-    }, () => _jsx(ListDevboxesUI, { status: options.status }), DEFAULT_PAGE_SIZE);
-    // Check if we need to spawn SSH after Ink exit
-    const sshCommand = global.__sshCommand;
-    if (sshCommand) {
-        delete global.__sshCommand;
-        // Import spawn
-        const { spawnSync } = await import('child_process');
-        // Clear and show connection message
-        console.clear();
-        console.log(`\nConnecting to devbox ${sshCommand.devboxName}...\n`);
-        // Spawn SSH in foreground
-        const result = spawnSync('ssh', [
-            '-i', sshCommand.keyPath,
-            '-o', `ProxyCommand=${sshCommand.proxyCommand}`,
-            '-o', 'StrictHostKeyChecking=no',
-            '-o', 'UserKnownHostsFile=/dev/null',
-            `${sshCommand.sshUser}@${sshCommand.url}`
-        ], {
-            stdio: 'inherit'
-        });
-        process.exit(result.status || 0);
+    }, () => (_jsx(ListDevboxesUI, { status: options.status, focusDevboxId: focusDevboxId, onSSHRequest: (config) => {
+            sshSessionConfig = config;
+        } })), DEFAULT_PAGE_SIZE);
+    // If SSH was requested, handle it now after Ink has exited
+    if (sshSessionConfig) {
+        const result = await runSSHSession(sshSessionConfig);
+        if (result.shouldRestart) {
+            console.clear();
+            console.log(`\nSSH session ended. Returning to CLI...\n`);
+            await new Promise(resolve => setTimeout(resolve, 500));
+            // Restart the list view with the devbox ID to focus on
+            await listDevboxes(options, result.returnToDevboxId);
+        }
+        else {
+            process.exit(result.exitCode);
+        }
     }
 }

package/dist/commands/menu.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { render, useApp } from 'ink';
+import { MainMenu } from '../components/MainMenu.js';
+import { runSSHSession } from '../utils/sshSession.js';
+// Import the UI components directly
+import { ListDevboxesUI } from './devbox/list.js';
+import { ListBlueprintsUI } from './blueprint/list.js';
+import { ListSnapshotsUI } from './snapshot/list.js';
+import { Box } from 'ink';
+const App = ({ onSSHRequest, initialScreen = 'menu', focusDevboxId }) => {
+    const { exit } = useApp();
+    const [currentScreen, setCurrentScreen] = React.useState(initialScreen);
+    const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+    const handleMenuSelect = (key) => {
+        setCurrentScreen(key);
+    };
+    const handleBack = () => {
+        setCurrentScreen('menu');
+    };
+    const handleExit = () => {
+        exit();
+    };
+    // Wrap everything in a full-height container
+    return (_jsxs(Box, { flexDirection: "column", minHeight: process.stdout.rows || 24, children: [currentScreen === 'menu' && _jsx(MainMenu, { onSelect: handleMenuSelect }), currentScreen === 'devboxes' && (_jsx(ListDevboxesUI, { onBack: handleBack, onExit: handleExit, onSSHRequest: onSSHRequest, focusDevboxId: focusDevboxId })), currentScreen === 'blueprints' && _jsx(ListBlueprintsUI, { onBack: handleBack, onExit: handleExit }), currentScreen === 'snapshots' && _jsx(ListSnapshotsUI, { onBack: handleBack, onExit: handleExit })] }));
+};
+export async function runMainMenu(initialScreen = 'menu', focusDevboxId) {
+    // Enter alternate screen buffer once at the start
+    process.stdout.write('\x1b[?1049h');
+    let sshSessionConfig = null;
+    let shouldContinue = true;
+    let currentInitialScreen = initialScreen;
+    let currentFocusDevboxId = focusDevboxId;
+    while (shouldContinue) {
+        sshSessionConfig = null;
+        try {
+            const { waitUntilExit } = render(_jsx(App, { onSSHRequest: (config) => {
+                    sshSessionConfig = config;
+                }, initialScreen: currentInitialScreen, focusDevboxId: currentFocusDevboxId }));
+            await waitUntilExit();
+            shouldContinue = false;
+        }
+        catch (error) {
+            console.error('Error in menu:', error);
+            shouldContinue = false;
+        }
+        // If SSH was requested, handle it now after Ink has exited
+        if (sshSessionConfig) {
+            // Exit alternate screen buffer for SSH
+            process.stdout.write('\x1b[?1049l');
+            const result = await runSSHSession(sshSessionConfig);
+            if (result.shouldRestart) {
+                console.clear();
+                console.log(`\nSSH session ended. Returning to menu...\n`);
+                await new Promise(resolve => setTimeout(resolve, 500));
+                // Re-enter alternate screen buffer and return to devboxes list
+                process.stdout.write('\x1b[?1049h');
+                currentInitialScreen = 'devboxes';
+                currentFocusDevboxId = result.returnToDevboxId;
+                shouldContinue = true;
+            }
+            else {
+                shouldContinue = false;
+            }
+        }
+    }
+    // Exit alternate screen buffer once at the end
+    process.stdout.write('\x1b[?1049l');
+    process.exit(0);
+}