@runloop/rl-cli 0.0.2 → 0.0.3

package/dist/cli.js

@@ -6,11 +6,26 @@ import { deleteDevbox } from './commands/devbox/delete.js';
 import { execCommand } from './commands/devbox/exec.js';
 import { uploadFile } from './commands/devbox/upload.js';
 import { getConfig } from './utils/config.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+// Get version from package.json
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageJson = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf8'));
+export const VERSION = packageJson.version;
+// Global Ctrl+C handler to ensure it always exits
+process.on('SIGINT', () => {
+    // Force exit immediately, clearing alternate screen buffer
+    process.stdout.write('\x1b[?1049l');
+    process.stdout.write('\n');
+    process.exit(130); // Standard exit code for SIGINT
+});
 const program = new Command();
 program
     .name('rln')
     .description('Beautiful CLI for Runloop devbox management')
-    .version('1.0.0');
+    .version(VERSION);
 program
     .command('auth')
     .description('Configure API authentication')
@@ -35,7 +50,16 @@ devbox
     .description('List all devboxes')
     .option('-s, --status <status>', 'Filter by status')
     .option('-o, --output [format]', 'Output format: text|json|yaml (default: interactive)')
-    .action(listDevboxes);
+    .action(async (options) => {
+    // Only use alternate screen for interactive mode
+    if (!options.output) {
+        const { runInteractiveCommand } = await import('./utils/interactiveCommand.js');
+        await runInteractiveCommand(() => listDevboxes(options));
+    }
+    else {
+        await listDevboxes(options);
+    }
+});
 devbox
     .command('delete <id>')
     .description('Shutdown a devbox')
@@ -65,7 +89,13 @@ snapshot
     .option('-o, --output [format]', 'Output format: text|json|yaml (default: interactive)')
     .action(async (options) => {
     const { listSnapshots } = await import('./commands/snapshot/list.js');
-    listSnapshots(options);
+    if (!options.output) {
+        const { runInteractiveCommand } = await import('./utils/interactiveCommand.js');
+        await runInteractiveCommand(() => listSnapshots(options));
+    }
+    else {
+        await listSnapshots(options);
+    }
 });
 snapshot
     .command('create <devbox-id>')
@@ -96,15 +126,31 @@ blueprint
     .option('-o, --output [format]', 'Output format: text|json|yaml (default: interactive)')
     .action(async (options) => {
     const { listBlueprints } = await import('./commands/blueprint/list.js');
-    listBlueprints(options);
+    if (!options.output) {
+        const { runInteractiveCommand } = await import('./utils/interactiveCommand.js');
+        await runInteractiveCommand(() => listBlueprints(options));
+    }
+    else {
+        await listBlueprints(options);
+    }
 });
-// Check if API key is configured (except for auth command)
-const args = process.argv.slice(2);
-if (args[0] !== 'auth' && args[0] !== '--help' && args[0] !== '-h' && args.length > 0) {
-    const config = getConfig();
-    if (!config.apiKey) {
-        console.error('\n❌ API key not configured. Run: rln auth\n');
-        process.exit(1);
+// Main CLI entry point
+(async () => {
+    // Check if API key is configured (except for auth command)
+    const args = process.argv.slice(2);
+    if (args[0] !== 'auth' && args[0] !== '--help' && args[0] !== '-h' && args.length > 0) {
+        const config = getConfig();
+        if (!config.apiKey) {
+            console.error('\n❌ API key not configured. Run: rln auth\n');
+            process.exit(1);
+        }
+    }
+    // If no command provided, show main menu
+    if (args.length === 0) {
+        const { runMainMenu } = await import('./commands/menu.js');
+        runMainMenu();
+    }
+    else {
+        program.parse();
     }
-}
-program.parse();
+})();

package/dist/commands/auth.js

@@ -6,6 +6,7 @@ import { setApiKey } from '../utils/config.js';
 import { Header } from '../components/Header.js';
 import { Banner } from '../components/Banner.js';
 import { SuccessMessage } from '../components/SuccessMessage.js';
+import { getSettingsUrl } from '../utils/url.js';
 const AuthUI = () => {
     const [apiKey, setApiKeyInput] = React.useState('');
     const [saved, setSaved] = React.useState(false);
@@ -19,7 +20,7 @@ const AuthUI = () => {
     if (saved) {
         return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Header, { title: "Authentication" }), _jsx(SuccessMessage, { message: "API key saved!", details: "Try: rln devbox list" })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Banner, {}), _jsx(Header, { title: "Authentication" }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "gray", children: "Get your key: " }), _jsx(Text, { color: "cyan", children: "https://runloop.ai/settings" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "API Key: " }), _jsx(TextInput, { value: apiKey, onChange: setApiKeyInput, placeholder: "rl_...", mask: "*" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press Enter to save" }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Banner, {}), _jsx(Header, { title: "Authentication" }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "gray", children: "Get your key: " }), _jsx(Text, { color: "cyan", children: getSettingsUrl() })] }), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "API Key: " }), _jsx(TextInput, { value: apiKey, onChange: setApiKeyInput, placeholder: "ak_...", mask: "*" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press Enter to save" }) })] }));
 };
 export default function auth() {
     console.clear();

package/dist/commands/blueprint/list.js

@@ -14,6 +14,7 @@ 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 { getBlueprintUrl } from '../../utils/url.js';
 const PAGE_SIZE = 10;
 const MAX_FETCH = 100;
 // Format time ago
@@ -36,9 +37,9 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-const ListBlueprintsUI = () => {
+const ListBlueprintsUI = ({ onBack, onExit }) => {
     const { stdout } = useStdout();
-    const { exit } = useApp();
+    const { exit: inkExit } = useApp();
     const [loading, setLoading] = React.useState(true);
     const [blueprints, setBlueprints] = React.useState([]);
     const [error, setError] = React.useState(null);
@@ -180,7 +181,7 @@ const ListBlueprintsUI = () => {
             }
             else if (input === 'o' && selectedBlueprint) {
                 // Open in browser
-                const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.id}`;
+                const url = getBlueprintUrl(selectedBlueprint.id);
                 const openBrowser = async () => {
                     const { exec } = await import('child_process');
                     const platform = process.platform;
@@ -232,7 +233,7 @@ const ListBlueprintsUI = () => {
         }
         else if (input === 'o' && selectedBlueprint) {
             // Open in browser
-            const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.id}`;
+            const url = getBlueprintUrl(selectedBlueprint.id);
             const openBrowser = async () => {
                 const { exec } = await import('child_process');
                 const platform = process.platform;
@@ -250,8 +251,16 @@ const ListBlueprintsUI = () => {
             };
             openBrowser();
         }
-        else if (input === 'q') {
-            process.exit(0);
+        else if (key.escape) {
+            if (onBack) {
+                onBack();
+            }
+            else if (onExit) {
+                onExit();
+            }
+            else {
+                inkExit();
+            }
         }
     });
     const totalPages = Math.ceil(blueprints.length / PAGE_SIZE);
@@ -360,8 +369,10 @@ const ListBlueprintsUI = () => {
                                 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 })] }));
+                        ] }), _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: [' ', "[Esc] Back"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list blueprints", error: error })] }));
 };
+// 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 () => {

package/dist/commands/devbox/list.js

@@ -14,6 +14,8 @@ 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);
@@ -35,8 +37,8 @@ const formatTimeAgo = (timestamp) => {
     return `${years}y ago`;
 };
 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([]);
@@ -99,6 +101,17 @@ const ListDevboxesUI = ({ status }) => {
         { 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 {
@@ -189,6 +202,11 @@ const ListDevboxesUI = ({ status }) => {
         return () => clearInterval(interval);
     }, [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) {
@@ -271,7 +289,7 @@ const ListDevboxesUI = ({ status }) => {
         }
         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;
@@ -292,14 +310,25 @@ const ListDevboxesUI = ({ status }) => {
         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);
+        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();
+                }
+            }
         }
     });
     // Filter devboxes based on search query (client-side only for current page)
@@ -313,10 +342,14 @@ const ListDevboxesUI = ({ status }) => {
                 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;
+    // 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);
@@ -359,11 +392,11 @@ const ListDevboxesUI = ({ status }) => {
             }, breadcrumbItems: [
                 { label: 'Devboxes' },
                 { label: selectedDevbox.name || selectedDevbox.id, active: true }
-            ], initialOperation: selectedOp?.key, initialOperationIndex: selectedOperation }));
+            ], 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 }));
     }
     // Show popup with table in background
     if (showPopup && selectedDevbox) {
@@ -408,14 +441,30 @@ const ListDevboxesUI = ({ status }) => {
                             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
+    // 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: [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: () => {
+                ] }), 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]" })] })), 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: [
+                                } }), _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: '',
@@ -452,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, " ", 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 })] }));
+                        ] }, `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);
+}

package/dist/commands/snapshot/list.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
+import { Box, Text, useInput, useStdout, useApp } from 'ink';
 import figures from 'figures';
 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 { ErrorMessage } from '../../components/ErrorMessage.js';
 import { StatusBadge } from '../../components/StatusBadge.js';
@@ -33,8 +31,9 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-const ListSnapshotsUI = ({ devboxId }) => {
+const ListSnapshotsUI = ({ devboxId, onBack, onExit }) => {
     const { stdout } = useStdout();
+    const { exit: inkExit } = useApp();
     const [loading, setLoading] = React.useState(true);
     const [snapshots, setSnapshots] = React.useState([]);
     const [error, setError] = React.useState(null);
@@ -89,8 +88,16 @@ const ListSnapshotsUI = ({ devboxId }) => {
             setCurrentPage(currentPage - 1);
             setSelectedIndex(0);
         }
-        else if (input === 'q') {
-            process.exit(0);
+        else if (key.escape) {
+            if (onBack) {
+                onBack();
+            }
+            else if (onExit) {
+                onExit();
+            }
+            else {
+                inkExit();
+            }
         }
     });
     const totalPages = Math.ceil(snapshots.length / PAGE_SIZE);
@@ -99,17 +106,19 @@ const ListSnapshotsUI = ({ devboxId }) => {
     const currentSnapshots = snapshots.slice(startIndex, endIndex);
     const ready = snapshots.filter((s) => s.status === 'ready').length;
     const pending = snapshots.filter((s) => s.status !== 'ready').length;
-    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Breadcrumb, { items: [
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: 'Snapshots', active: !devboxId },
                     ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
-                ] }), _jsx(Header, { title: "Snapshots", subtitle: devboxId ? `Filtering by devbox: ${devboxId}` : undefined }), loading && _jsx(SpinnerComponent, { message: "Loading snapshots..." }), !loading && !error && snapshots.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No snapshots found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln snapshot create <devbox-id>" })] })), !loading && !error && snapshots.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: [figures.tick, " ", ready] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: [figures.ellipsis, " ", pending] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "cyan", children: [figures.hamburger, " ", snapshots.length, snapshots.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: currentSnapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, columns: [
+                ] }), loading && _jsx(SpinnerComponent, { message: "Loading snapshots..." }), !loading && !error && snapshots.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No snapshots found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln snapshot create <devbox-id>" })] })), !loading && !error && snapshots.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: [figures.tick, " ", ready] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: [figures.ellipsis, " ", pending] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "cyan", children: [figures.hamburger, " ", snapshots.length, snapshots.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: currentSnapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, columns: [
                             createComponentColumn('status', 'Status', (snapshot) => _jsx(StatusBadge, { status: snapshot.status, showText: false }), { width: 2 }),
                             createTextColumn('id', 'ID', (snapshot) => showFullId ? snapshot.id : snapshot.id.slice(0, 13), { width: showFullId ? idWidth : 15, color: 'gray', dimColor: true, bold: false }),
                             createTextColumn('name', 'Name', (snapshot) => snapshot.name || '(unnamed)', { width: nameWidth }),
                             createTextColumn('devbox', 'Devbox', (snapshot) => snapshot.devbox_id || '', { width: devboxWidth, color: 'cyan', dimColor: true, bold: false, visible: showDevboxId }),
                             createTextColumn('created', 'Created', (snapshot) => snapshot.created_at ? formatTimeAgo(new Date(snapshot.created_at).getTime()) : '', { 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"] }), 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 snapshots", error: error })] }));
+                        ] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', figures.arrowLeft, figures.arrowRight, " Page \u2022"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[Esc] Back"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list snapshots", error: error })] }));
 };
+// Export the UI component for use in the main menu
+export { ListSnapshotsUI };
 export async function listSnapshots(options) {
     const executor = createExecutor(options);
     await executor.executeList(async () => {

package/dist/components/Banner.js

@@ -1,11 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Text } from 'ink';
+import { Box } from 'ink';
+import BigText from 'ink-big-text';
 import Gradient from 'ink-gradient';
 export const Banner = React.memo(() => {
-    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(Gradient, { colors: ['#0a4d3a', '#e5f1ed'], children: _jsx(Text, { bold: true, children: `
-╦═╗╦ ╦╔╗╔╦  ╔═╗╔═╗╔═╗
-╠╦╝║ ║║║║║  ║ ║║ ║╠═╝
-╩╚═╚═╝╝╚╝╩═╝╚═╝╚═╝╩ .ai
-          ` }) }) }));
+    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", children: _jsx(Gradient, { name: "vice", children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
 });

package/dist/components/Breadcrumb.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text } from 'ink';
-import figures from 'figures';
 export const Breadcrumb = React.memo(({ items }) => {
-    const baseUrl = process.env.RUNLOOP_BASE_URL;
-    const isDevEnvironment = baseUrl && baseUrl !== 'https://api.runloop.ai';
-    return (_jsxs(Box, { marginBottom: 1, paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: "green", dimColor: true, bold: true, children: "RL" }), isDevEnvironment && _jsx(Text, { color: "redBright", bold: true, children: " (dev)" }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowRight, " "] }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? 'cyan' : 'gray', bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsx(Text, { color: "gray", dimColor: true, children: " / " }))] }, index)))] }));
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    const isDevEnvironment = env === 'dev';
+    return (_jsx(Box, { marginBottom: 1, paddingX: 2, paddingY: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: "rl" }), isDevEnvironment && _jsx(Text, { color: "redBright", bold: true, children: " (dev)" }), _jsx(Text, { color: "gray", dimColor: true, children: " \u203A " }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? 'white' : 'gray', bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsx(Text, { color: "gray", dimColor: true, children: " \u203A " }))] }, index)))] }) }));
 });

package/dist/components/DevboxActionsMenu.js

@@ -12,7 +12,7 @@ import { Breadcrumb } from './Breadcrumb.js';
 export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     { label: 'Devboxes' },
     { label: devbox.name || devbox.id, active: true }
-], initialOperation, initialOperationIndex = 0, }) => {
+], initialOperation, initialOperationIndex = 0, skipOperationsMenu = false, onSSHRequest, }) => {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const [loading, setLoading] = React.useState(false);
@@ -21,7 +21,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     const [operationInput, setOperationInput] = React.useState('');
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
-    const [logsWrapMode, setLogsWrapMode] = React.useState(true);
+    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
     const [logsScroll, setLogsScroll] = React.useState(0);
     const [execScroll, setExecScroll] = React.useState(0);
     const [copyStatus, setCopyStatus] = React.useState(null);
@@ -56,7 +56,8 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     }) : allOperations;
     // Auto-execute operations that don't need input
     React.useEffect(() => {
-        if ((executingOperation === 'delete' || executingOperation === 'ssh' || executingOperation === 'logs' || executingOperation === 'suspend' || executingOperation === 'resume') && !loading && devbox) {
+        const autoExecuteOps = ['delete', 'ssh', 'logs', 'suspend', 'resume'];
+        if (executingOperation && autoExecuteOps.includes(executingOperation) && !loading && devbox) {
             executeOperation();
         }
     }, [executingOperation]);
@@ -77,14 +78,20 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         if (operationResult || operationError) {
             if (input === 'q' || key.escape || key.return) {
                 console.clear();
-                setOperationResult(null);
-                setOperationError(null);
-                setExecutingOperation(null);
-                setOperationInput('');
-                setLogsWrapMode(true);
-                setLogsScroll(0);
-                setExecScroll(0);
-                setCopyStatus(null);
+                // If skipOperationsMenu is true, go back to parent instead of operations menu
+                if (skipOperationsMenu) {
+                    onBack();
+                }
+                else {
+                    setOperationResult(null);
+                    setOperationError(null);
+                    setExecutingOperation(null);
+                    setOperationInput('');
+                    setLogsWrapMode(true);
+                    setLogsScroll(0);
+                    setExecScroll(0);
+                    setCopyStatus(null);
+                }
             }
             else if ((key.upArrow || input === 'k') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
                 setExecScroll(Math.max(0, execScroll - 1));
@@ -295,15 +302,25 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     const keyPath = pathModule.join(sshDir, `${devbox.id}.pem`);
                     fsModule.writeFileSync(keyPath, sshKey.ssh_private_key, { mode: 0o600 });
                     const sshUser = devbox.launch_parameters?.user_parameters?.username || 'user';
-                    const proxyCommand = 'openssl s_client -quiet -verify_quiet -servername %h -connect ssh.runloop.ai:443 2>/dev/null';
-                    global.__sshCommand = {
+                    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+                    const sshHost = env === 'dev' ? 'ssh.runloop.pro' : 'ssh.runloop.ai';
+                    const proxyCommand = `openssl s_client -quiet -verify_quiet -servername %h -connect ${sshHost}:443 2>/dev/null`;
+                    const sshConfig = {
                         keyPath,
                         proxyCommand,
                         sshUser,
                         url: sshKey.url,
+                        devboxId: devbox.id,
                         devboxName: devbox.name || devbox.id
                     };
-                    exit();
+                    // Notify parent that SSH is requested
+                    if (onSSHRequest) {
+                        onSSHRequest(sshConfig);
+                        exit();
+                    }
+                    else {
+                        setOperationError(new Error('SSH session handler not configured'));
+                    }
                     break;
                 case 'logs':
                     const logsResult = await client.devboxes.logs.list(devbox.id);
@@ -452,9 +469,13 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                                             ? '8080'
                                             : 'my-snapshot' }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
     }
-    // Operations selection mode
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
-                            const isSelected = index === selectedOperation;
-                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', " "] }), _jsxs(Text, { color: isSelected ? op.color : 'gray', bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: "gray", dimColor: true, children: [" [", op.shortcut, "]"] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022 [q] Back"] }) })] }));
+    // Operations selection mode - only show if not skipping
+    if (!skipOperationsMenu || !executingOperation) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+                                const isSelected = index === selectedOperation;
+                                return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', " "] }), _jsxs(Text, { color: isSelected ? op.color : 'gray', bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: "gray", dimColor: true, children: [" [", op.shortcut, "]"] })] }, op.key));
+                            }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022 [q] Back"] }) })] }));
+    }
+    // If skipOperationsMenu is true and executingOperation is set, show loading while it executes
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(SpinnerComponent, { message: "Loading..." })] }));
 };

package/dist/components/DevboxDetailPage.js

@@ -7,6 +7,7 @@ import { StatusBadge } from './StatusBadge.js';
 import { MetadataDisplay } from './MetadataDisplay.js';
 import { Breadcrumb } from './Breadcrumb.js';
 import { DevboxActionsMenu } from './DevboxActionsMenu.js';
+import { getDevboxUrl } from '../utils/url.js';
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -27,7 +28,7 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
+export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest }) => {
     const { stdout } = useStdout();
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
@@ -125,7 +126,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         }
         if (input === 'o') {
             // 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;
@@ -275,14 +276,14 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
     };
     // Actions view - show the DevboxActionsMenu when an action is triggered
     if (showActions) {
+        const selectedOp = operations[selectedOperation];
         return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
                 setShowActions(false);
                 setSelectedOperation(0);
             }, breadcrumbItems: [
                 { label: 'Devboxes' },
-                { label: selectedDevbox.name || selectedDevbox.id },
-                { label: 'Actions', active: true }
-            ] }));
+                { label: selectedDevbox.name || selectedDevbox.id }
+            ], initialOperation: selectedOp?.key, skipOperationsMenu: true, onSSHRequest: onSSHRequest }));
     }
     // Detailed info mode - full screen
     if (showDetailedInfo) {

package/dist/components/MainMenu.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import figures from 'figures';
+import { Banner } from './Banner.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import { VERSION } from '../cli.js';
+export const MainMenu = React.memo(({ onSelect }) => {
+    const { exit } = useApp();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    // Calculate terminal height once at mount and memoize
+    const terminalHeight = React.useMemo(() => process.stdout.rows || 24, []);
+    const menuItems = React.useMemo(() => [
+        {
+            key: 'devboxes',
+            label: 'Devboxes',
+            description: 'Manage cloud development environments',
+            icon: '◉',
+            color: 'cyan',
+        },
+        {
+            key: 'blueprints',
+            label: 'Blueprints',
+            description: 'Create and manage devbox templates',
+            icon: '▣',
+            color: 'magenta',
+        },
+        {
+            key: 'snapshots',
+            label: 'Snapshots',
+            description: 'Save and restore devbox states',
+            icon: '◈',
+            color: 'green',
+        },
+    ], []);
+    useInput((input, key) => {
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < menuItems.length - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            onSelect(menuItems[selectedIndex].key);
+        }
+        else if (key.escape) {
+            exit();
+        }
+        else if (input === 'd' || input === '1') {
+            onSelect('devboxes');
+        }
+        else if (input === 'b' || input === '2') {
+            onSelect('blueprints');
+        }
+        else if (input === 's' || input === '3') {
+            onSelect('snapshots');
+        }
+    });
+    // Use compact layout if terminal height is less than 20 lines (memoized)
+    const useCompactLayout = React.useMemo(() => terminalHeight < 20, [terminalHeight]);
+    if (useCompactLayout) {
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Cloud development environments \u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? item.color : 'gray', children: isSelected ? figures.pointer : ' ' }), _jsx(Text, { children: " " }), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : 'white', bold: isSelected, children: item.label }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "- ", item.description] }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[", index + 1, "]"] })] }, item.key));
+                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Breadcrumb, { items: [{ label: 'Home', active: true }] }), _jsx(Box, { marginBottom: 1, children: _jsx(Banner, {}) }), _jsx(Box, { flexDirection: "column", paddingX: 2, marginBottom: 1, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginBottom: 1, marginTop: 1, children: [_jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(Text, { color: "white", bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: isSelected ? 'round' : 'single', borderColor: isSelected ? item.color : 'gray', marginBottom: 0, children: [_jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : 'white', bold: isSelected, children: item.label }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
+                    })] }), _jsx(Box, { paddingX: 2, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));
+});

package/dist/utils/CommandExecutor.js

@@ -28,9 +28,13 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         console.clear();
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Execute a create/action command with automatic format handling
@@ -47,9 +51,13 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         console.clear();
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Execute a delete command with automatic format handling
@@ -66,8 +74,12 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Fetch items from an async iterator with optional filtering and limits

package/dist/utils/client.js

@@ -1,12 +1,29 @@
 import Runloop from '@runloop/api-client';
 import { getConfig } from './config.js';
+/**
+ * Get the base URL based on RUNLOOP_ENV environment variable
+ * - dev: https://api.runloop.pro
+ * - prod or unset: https://api.runloop.ai (default)
+ */
+function getBaseUrl() {
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    switch (env) {
+        case 'dev':
+            return 'https://api.runloop.pro';
+        case 'prod':
+        default:
+            return 'https://api.runloop.ai';
+    }
+}
 export function getClient() {
     const config = getConfig();
     if (!config.apiKey) {
         throw new Error('API key not configured. Run: rln auth');
     }
+    const baseURL = getBaseUrl();
     return new Runloop({
         bearerToken: config.apiKey,
+        baseURL,
         timeout: 10000, // 10 seconds instead of default 30 seconds
         maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
     });

package/dist/utils/interactiveCommand.js

@@ -0,0 +1,14 @@
+/**
+ * Wrapper for interactive commands that need alternate screen buffer management
+ */
+export async function runInteractiveCommand(command) {
+    // Enter alternate screen buffer
+    process.stdout.write('\x1b[?1049h');
+    try {
+        await command();
+    }
+    finally {
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
+    }
+}

package/dist/utils/sshSession.js

@@ -0,0 +1,25 @@
+import { spawnSync } from 'child_process';
+export async function runSSHSession(config) {
+    // Reset terminal to fix input visibility issues
+    // This ensures the terminal is in a proper state after exiting Ink
+    spawnSync('reset', [], { stdio: 'inherit' });
+    console.clear();
+    console.log(`\nConnecting to devbox ${config.devboxName}...\n`);
+    // Spawn SSH in foreground with proper terminal settings
+    const result = spawnSync('ssh', [
+        '-t', // Force pseudo-terminal allocation for proper input handling
+        '-i', config.keyPath,
+        '-o', `ProxyCommand=${config.proxyCommand}`,
+        '-o', 'StrictHostKeyChecking=no',
+        '-o', 'UserKnownHostsFile=/dev/null',
+        `${config.sshUser}@${config.url}`
+    ], {
+        stdio: 'inherit',
+        shell: false
+    });
+    return {
+        exitCode: result.status || 0,
+        shouldRestart: true,
+        returnToDevboxId: config.devboxId
+    };
+}

package/dist/utils/url.js

@@ -0,0 +1,39 @@
+/**
+ * Utility functions for generating URLs
+ */
+/**
+ * Get the base URL for the Runloop platform based on environment
+ * - dev: https://platform.runloop.pro
+ * - prod or unset: https://platform.runloop.ai (default)
+ */
+export function getBaseUrl() {
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    switch (env) {
+        case 'dev':
+            return 'https://platform.runloop.pro';
+        case 'prod':
+        default:
+            return 'https://platform.runloop.ai';
+    }
+}
+/**
+ * Generate a devbox URL for the given devbox ID
+ */
+export function getDevboxUrl(devboxId) {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/devboxes/${devboxId}`;
+}
+/**
+ * Generate a blueprint URL for the given blueprint ID
+ */
+export function getBlueprintUrl(blueprintId) {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/blueprints/${blueprintId}`;
+}
+/**
+ * Generate a settings URL
+ */
+export function getSettingsUrl() {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/settings`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Beautiful CLI for Runloop devbox management",
   "type": "module",
   "bin": {