@runloop/rl-cli 0.0.1 → 0.0.2

package/dist/components/DevboxDetailPage.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Text, useInput, useApp, useStdout } from 'ink';
-import TextInput from 'ink-text-input';
+import { Box, Text, useInput, useStdout } from 'ink';
 import figures from 'figures';
-import { getClient } from '../utils/client.js';
 import { Header } from './Header.js';
-import { SpinnerComponent } from './Spinner.js';
-import { ErrorMessage } from './ErrorMessage.js';
-import { SuccessMessage } from './SuccessMessage.js';
 import { StatusBadge } from './StatusBadge.js';
 import { MetadataDisplay } from './MetadataDisplay.js';
 import { Breadcrumb } from './Breadcrumb.js';
+import { DevboxActionsMenu } from './DevboxActionsMenu.js';
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -32,33 +28,22 @@ const formatTimeAgo = (timestamp) => {
     return `${years}y ago`;
 };
 export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
-    const { exit } = useApp();
     const { stdout } = useStdout();
-    const [loading, setLoading] = React.useState(false);
-    const [selectedOperation, setSelectedOperation] = React.useState(0);
-    const [executingOperation, setExecutingOperation] = React.useState(null);
-    const [operationInput, setOperationInput] = React.useState('');
-    const [operationResult, setOperationResult] = React.useState(null);
-    const [operationError, setOperationError] = React.useState(null);
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
-    const [logsWrapMode, setLogsWrapMode] = React.useState(true);
-    const [logsScroll, setLogsScroll] = React.useState(0);
-    const [copyStatus, setCopyStatus] = React.useState(null);
+    const [showActions, setShowActions] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
     const selectedDevbox = initialDevbox;
-    // Memoize time-based values to prevent re-rendering on every tick
-    const formattedCreateTime = React.useMemo(() => selectedDevbox.create_time_ms ? new Date(selectedDevbox.create_time_ms).toLocaleString() : '', [selectedDevbox.create_time_ms]);
-    const createTimeAgo = React.useMemo(() => selectedDevbox.create_time_ms ? formatTimeAgo(selectedDevbox.create_time_ms) : '', [selectedDevbox.create_time_ms]);
     const allOperations = [
-        { key: 'logs', label: 'View Logs', color: 'blue', icon: figures.info },
-        { key: 'exec', label: 'Execute Command', color: 'green', icon: figures.play },
-        { key: 'upload', label: 'Upload File', color: 'green', icon: figures.arrowUp },
-        { key: 'snapshot', label: 'Create Snapshot', color: 'yellow', icon: figures.circleFilled },
-        { key: 'ssh', label: 'SSH onto the box', color: 'cyan', icon: figures.arrowRight },
-        { key: 'tunnel', label: 'Open Tunnel', color: 'magenta', icon: figures.pointerSmall },
-        { key: 'suspend', label: 'Suspend Devbox', color: 'yellow', icon: figures.squareSmallFilled },
-        { key: 'resume', label: 'Resume Devbox', color: 'green', icon: figures.play },
-        { key: 'delete', label: 'Shutdown Devbox', color: 'red', icon: figures.cross },
+        { 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' },
     ];
     // Filter operations based on devbox status
     const operations = selectedDevbox ? allOperations.filter(op => {
@@ -78,120 +63,12 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         // Default for transitional states (provisioning, initializing)
         return op.key === 'logs' || op.key === 'delete';
     }) : allOperations;
-    // Auto-execute operations that don't need input (delete, ssh, logs, suspend, resume)
-    React.useEffect(() => {
-        if ((executingOperation === 'delete' || executingOperation === 'ssh' || executingOperation === 'logs' || executingOperation === 'suspend' || executingOperation === 'resume') && !loading && selectedDevbox) {
-            executeOperation();
-        }
-    }, [executingOperation]);
+    // Memoize time-based values to prevent re-rendering on every tick
+    const formattedCreateTime = React.useMemo(() => selectedDevbox.create_time_ms ? new Date(selectedDevbox.create_time_ms).toLocaleString() : '', [selectedDevbox.create_time_ms]);
+    const createTimeAgo = React.useMemo(() => selectedDevbox.create_time_ms ? formatTimeAgo(selectedDevbox.create_time_ms) : '', [selectedDevbox.create_time_ms]);
     useInput((input, key) => {
-        // Handle operation input mode
-        if (executingOperation && !operationResult && !operationError) {
-            if (key.return && operationInput.trim()) {
-                executeOperation();
-            }
-            else if (input === 'q' || key.escape) {
-                console.clear();
-                setExecutingOperation(null);
-                setOperationInput('');
-            }
-            return;
-        }
-        // Handle operation result display
-        if (operationResult || operationError) {
-            if (input === 'q' || key.escape || key.return) {
-                console.clear();
-                setOperationResult(null);
-                setOperationError(null);
-                setExecutingOperation(null);
-                setOperationInput('');
-                setLogsWrapMode(true); // Reset wrap mode
-                setLogsScroll(0); // Reset scroll
-                setCopyStatus(null); // Reset copy status
-                // Keep detail view open
-            }
-            else if ((key.upArrow || input === 'k') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Scroll up in logs
-                setLogsScroll(Math.max(0, logsScroll - 1));
-            }
-            else if ((key.downArrow || input === 'j') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Scroll down in logs
-                setLogsScroll(logsScroll + 1);
-            }
-            else if (key.pageUp && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Page up
-                setLogsScroll(Math.max(0, logsScroll - 10));
-            }
-            else if (key.pageDown && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Page down
-                setLogsScroll(logsScroll + 10);
-            }
-            else if (input === 'g' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Jump to top
-                setLogsScroll(0);
-            }
-            else if (input === 'G' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Jump to bottom (last line)
-                const logs = operationResult.__logs || [];
-                const terminalHeight = stdout?.rows || 30;
-                const viewportHeight = Math.max(10, terminalHeight - 10);
-                const maxScroll = Math.max(0, logs.length - viewportHeight);
-                setLogsScroll(maxScroll);
-            }
-            else if (input === 'w' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Toggle wrap mode for logs
-                setLogsWrapMode(!logsWrapMode);
-            }
-            else if (input === 'c' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-                // Copy logs to clipboard
-                const logs = operationResult.__logs || [];
-                const logsText = logs.map((log) => {
-                    const time = new Date(log.timestamp_ms).toLocaleString();
-                    const level = log.level || 'INFO';
-                    const source = log.source || 'exec';
-                    const message = log.message || '';
-                    const cmd = log.cmd ? `[${log.cmd}] ` : '';
-                    const exitCode = log.exit_code !== null && log.exit_code !== undefined ? `(${log.exit_code}) ` : '';
-                    return `${time} ${level}/${source} ${exitCode}${cmd}${message}`;
-                }).join('\n');
-                // Copy to clipboard using pbcopy (macOS), xclip (Linux), or clip (Windows)
-                const copyToClipboard = async (text) => {
-                    const { spawn } = await import('child_process');
-                    const platform = process.platform;
-                    let command;
-                    let args;
-                    if (platform === 'darwin') {
-                        command = 'pbcopy';
-                        args = [];
-                    }
-                    else if (platform === 'win32') {
-                        command = 'clip';
-                        args = [];
-                    }
-                    else {
-                        command = 'xclip';
-                        args = ['-selection', 'clipboard'];
-                    }
-                    const proc = spawn(command, args);
-                    proc.stdin.write(text);
-                    proc.stdin.end();
-                    proc.on('exit', (code) => {
-                        if (code === 0) {
-                            setCopyStatus('Copied to clipboard!');
-                            setTimeout(() => setCopyStatus(null), 2000);
-                        }
-                        else {
-                            setCopyStatus('Failed to copy');
-                            setTimeout(() => setCopyStatus(null), 2000);
-                        }
-                    });
-                    proc.on('error', () => {
-                        setCopyStatus('Copy not supported');
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    });
-                };
-                copyToClipboard(logsText);
-            }
+        // Skip input handling when in actions view
+        if (showActions) {
             return;
         }
         // Handle detailed info mode
@@ -218,17 +95,35 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
             }
             return;
         }
-        // Operations selection mode
+        // Main view input handling
         if (input === 'q' || key.escape) {
             console.clear();
             onBack();
-            setSelectedOperation(0);
         }
         else if (input === 'i') {
             setShowDetailedInfo(true);
             setDetailScroll(0);
         }
-        else if (input === 'o') {
+        else if (key.upArrow && selectedOperation > 0) {
+            setSelectedOperation(selectedOperation - 1);
+        }
+        else if (key.downArrow && selectedOperation < operations.length - 1) {
+            setSelectedOperation(selectedOperation + 1);
+        }
+        else if (key.return || input === 'a') {
+            console.clear();
+            setShowActions(true);
+        }
+        else if (input) {
+            // Check if input matches any operation shortcut
+            const matchedOpIndex = operations.findIndex(op => op.shortcut === input);
+            if (matchedOpIndex !== -1) {
+                setSelectedOperation(matchedOpIndex);
+                console.clear();
+                setShowActions(true);
+            }
+        }
+        if (input === 'o') {
             // Open in browser
             const url = `https://platform.runloop.ai/devboxes/${selectedDevbox.id}`;
             const openBrowser = async () => {
@@ -248,118 +143,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
             };
             openBrowser();
         }
-        else if (key.upArrow && selectedOperation > 0) {
-            setSelectedOperation(selectedOperation - 1);
-        }
-        else if (key.downArrow && selectedOperation < operations.length - 1) {
-            setSelectedOperation(selectedOperation + 1);
-        }
-        else if (key.return) {
-            console.clear();
-            const op = operations[selectedOperation].key;
-            setExecutingOperation(op);
-        }
     });
-    const executeOperation = async () => {
-        const client = getClient();
-        const devbox = selectedDevbox;
-        try {
-            setLoading(true);
-            switch (executingOperation) {
-                case 'exec':
-                    const execResult = await client.devboxes.executeSync(devbox.id, {
-                        command: operationInput,
-                    });
-                    setOperationResult(execResult.stdout || execResult.stderr || 'Command executed');
-                    break;
-                case 'upload':
-                    // For upload, operationInput should be file path
-                    const fs = await import('fs');
-                    const fileStream = fs.createReadStream(operationInput);
-                    const filename = operationInput.split('/').pop() || 'file';
-                    await client.devboxes.uploadFile(devbox.id, {
-                        path: filename,
-                        file: fileStream,
-                    });
-                    setOperationResult(`File ${filename} uploaded successfully`);
-                    break;
-                case 'snapshot':
-                    const snapshot = await client.devboxes.snapshotDisk(devbox.id, {
-                        name: operationInput || `snapshot-${Date.now()}`,
-                    });
-                    setOperationResult(`Snapshot created: ${snapshot.id}`);
-                    break;
-                case 'ssh':
-                    const sshKey = await client.devboxes.createSSHKey(devbox.id);
-                    // Save SSH key to persistent location
-                    const fsModule = await import('fs');
-                    const pathModule = await import('path');
-                    const osModule = await import('os');
-                    const sshDir = pathModule.join(osModule.homedir(), '.runloop', 'ssh_keys');
-                    fsModule.mkdirSync(sshDir, { recursive: true });
-                    const keyPath = pathModule.join(sshDir, `${devbox.id}.pem`);
-                    fsModule.writeFileSync(keyPath, sshKey.ssh_private_key, { mode: 0o600 });
-                    // Determine user from launch parameters
-                    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';
-                    // Store SSH command details globally
-                    global.__sshCommand = {
-                        keyPath,
-                        proxyCommand,
-                        sshUser,
-                        url: sshKey.url,
-                        devboxName: devbox.name || devbox.id
-                    };
-                    // Exit Ink app to release terminal, SSH will be spawned after exit
-                    exit();
-                    break;
-                case 'logs':
-                    const logsResult = await client.devboxes.logs.list(devbox.id);
-                    if (logsResult.logs.length === 0) {
-                        setOperationResult('No logs available for this devbox.');
-                    }
-                    else {
-                        // Store logs data for custom rendering - show all logs
-                        logsResult.__customRender = 'logs';
-                        logsResult.__logs = logsResult.logs; // Show all logs, not just last 50
-                        logsResult.__totalCount = logsResult.logs.length;
-                        setOperationResult(logsResult);
-                    }
-                    break;
-                case 'tunnel':
-                    const port = parseInt(operationInput);
-                    if (isNaN(port) || port < 1 || port > 65535) {
-                        setOperationError(new Error('Invalid port number. Please enter a port between 1 and 65535.'));
-                    }
-                    else {
-                        const tunnel = await client.devboxes.createTunnel(devbox.id, { port });
-                        setOperationResult(`Tunnel created!\n\n` +
-                            `Local Port: ${port}\n` +
-                            `Public URL: ${tunnel.url}\n\n` +
-                            `You can now access port ${port} on the devbox via:\n${tunnel.url}`);
-                    }
-                    break;
-                case 'suspend':
-                    await client.devboxes.suspend(devbox.id);
-                    setOperationResult(`Devbox ${devbox.id} suspended successfully`);
-                    break;
-                case 'resume':
-                    await client.devboxes.resume(devbox.id);
-                    setOperationResult(`Devbox ${devbox.id} resumed successfully`);
-                    break;
-                case 'delete':
-                    await client.devboxes.shutdown(devbox.id);
-                    setOperationResult(`Devbox ${devbox.id} shut down successfully`);
-                    break;
-            }
-        }
-        catch (err) {
-            setOperationError(err);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
     const uptime = selectedDevbox.create_time_ms
         ? Math.floor((Date.now() - selectedDevbox.create_time_ms) / 1000 / 60)
         : null;
@@ -489,108 +273,16 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         });
         return lines;
     };
-    // Operation result display
-    if (operationResult || operationError) {
-        const operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
-        // Check for custom logs rendering
-        if (operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
-            const logs = operationResult.__logs || [];
-            const totalCount = operationResult.__totalCount || 0;
-            // Calculate viewport for scrolling
-            const terminalHeight = stdout?.rows || 30;
-            const terminalWidth = stdout?.columns || 120;
-            const viewportHeight = Math.max(10, terminalHeight - 10); // Reserve space for header/footer
-            const maxScroll = Math.max(0, logs.length - viewportHeight);
-            const actualScroll = Math.min(logsScroll, maxScroll);
-            const visibleLogs = logs.slice(actualScroll, actualScroll + viewportHeight);
-            const hasMore = actualScroll + viewportHeight < logs.length;
-            const hasLess = actualScroll > 0;
-            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                            { label: 'Devboxes' },
-                            { label: selectedDevbox?.name || selectedDevbox?.id || 'Devbox' },
-                            { label: 'Logs', active: true }
-                        ] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [visibleLogs.map((log, index) => {
-                                const time = new Date(log.timestamp_ms).toLocaleTimeString();
-                                const level = log.level ? log.level[0].toUpperCase() : 'I';
-                                const source = log.source ? log.source.substring(0, 8) : 'exec';
-                                const fullMessage = log.message || '';
-                                const cmd = log.cmd ? `[${log.cmd.substring(0, 40)}${log.cmd.length > 40 ? '...' : ''}] ` : '';
-                                const exitCode = log.exit_code !== null && log.exit_code !== undefined ? `(${log.exit_code}) ` : '';
-                                let levelColor = 'gray';
-                                if (level === 'E')
-                                    levelColor = 'red';
-                                else if (level === 'W')
-                                    levelColor = 'yellow';
-                                else if (level === 'I')
-                                    levelColor = 'cyan';
-                                if (logsWrapMode) {
-                                    // Wrap mode: show full message on same line, let terminal handle wrapping
-                                    return (_jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: time }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: true, children: level }), _jsxs(Text, { color: "gray", dimColor: true, children: ["/", source] }), _jsx(Text, { children: " " }), exitCode && _jsx(Text, { color: "yellow", children: exitCode }), cmd && _jsx(Text, { color: "blue", dimColor: true, children: cmd }), _jsx(Text, { children: fullMessage })] }, index));
-                                }
-                                else {
-                                    // No-wrap mode: calculate actual metadata width and truncate accordingly
-                                    // Time (11) + space (1) + Level (1) + /source (1+8) + space (1) + exitCode.length + cmd.length + border/padding (6)
-                                    const metadataWidth = 11 + 1 + 1 + 1 + 8 + 1 + exitCode.length + cmd.length + 6;
-                                    const availableMessageWidth = Math.max(20, terminalWidth - metadataWidth);
-                                    const truncatedMessage = fullMessage.length > availableMessageWidth
-                                        ? fullMessage.substring(0, availableMessageWidth - 3) + '...'
-                                        : fullMessage;
-                                    return (_jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: time }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: true, children: level }), _jsxs(Text, { color: "gray", dimColor: true, children: ["/", source] }), _jsx(Text, { children: " " }), exitCode && _jsx(Text, { color: "yellow", children: exitCode }), cmd && _jsx(Text, { color: "blue", dimColor: true, children: cmd }), _jsx(Text, { children: truncatedMessage })] }, index));
-                                }
-                            }), hasLess && (_jsx(Box, { children: _jsxs(Text, { color: "cyan", children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { children: _jsxs(Text, { color: "cyan", children: [figures.arrowDown, " More below"] }) }))] }), _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 logs" }), _jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, logs.length), " of ", logs.length] }), _jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsx(Text, { color: logsWrapMode ? 'green' : 'gray', bold: logsWrapMode, children: logsWrapMode ? 'Wrap: ON' : 'Wrap: OFF' }), copyStatus && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsx(Text, { color: "green", bold: true, children: copyStatus })] }))] }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [g] Top \u2022 [G] Bottom \u2022 [w] Toggle Wrap \u2022 [c] Copy \u2022 [Enter], [q], or [esc] Back"] }) })] }));
-        }
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes' },
-                        { label: selectedDevbox?.name || selectedDevbox?.id || 'Devbox' },
-                        { label: operationLabel, active: true }
-                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && _jsx(ErrorMessage, { message: "Operation failed", error: operationError }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
-    }
-    // Operation input mode
-    if (executingOperation && selectedDevbox) {
-        const needsInput = executingOperation === 'exec' ||
-            executingOperation === 'upload' ||
-            executingOperation === 'snapshot' ||
-            executingOperation === 'tunnel';
-        const operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
-        if (loading) {
-            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                            { label: 'Devboxes' },
-                            { label: selectedDevbox.name || selectedDevbox.id },
-                            { label: operationLabel, active: true }
-                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: "Please wait..." })] }));
-        }
-        if (!needsInput) {
-            // SSH, Logs, Suspend, Resume, and Delete operations are auto-executed via useEffect
-            const messages = {
-                ssh: 'Creating SSH key...',
-                logs: 'Fetching logs...',
-                suspend: 'Suspending devbox...',
-                resume: 'Resuming devbox...',
-                delete: 'Shutting down devbox...',
-            };
-            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                            { label: 'Devboxes' },
-                            { label: selectedDevbox.name || selectedDevbox.id },
-                            { label: operationLabel, active: true }
-                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || 'Please wait...' })] }));
-        }
-        const prompts = {
-            exec: 'Command to execute:',
-            upload: 'File path to upload:',
-            snapshot: 'Snapshot name (optional):',
-            tunnel: 'Port number to expose:',
-        };
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes' },
-                        { label: selectedDevbox.name || selectedDevbox.id },
-                        { label: operationLabel, active: true }
-                    ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "cyan", bold: true, children: selectedDevbox.name || selectedDevbox.id }) }), _jsx(Box, { children: _jsxs(Text, { color: "gray", children: [prompts[executingOperation], " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: executingOperation === 'exec'
-                                    ? 'ls -la'
-                                    : executingOperation === 'upload'
-                                        ? '/path/to/file'
-                                        : executingOperation === 'tunnel'
-                                            ? '8080'
-                                            : 'my-snapshot' }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+    // Actions view - show the DevboxActionsMenu when an action is triggered
+    if (showActions) {
+        return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
+                setShowActions(false);
+                setSelectedOperation(0);
+            }, breadcrumbItems: [
+                { label: 'Devboxes' },
+                { label: selectedDevbox.name || selectedDevbox.id },
+                { label: 'Actions', active: true }
+            ] }));
     }
     // Detailed info mode - full screen
     if (showDetailedInfo) {
@@ -606,16 +298,16 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
                         { label: 'Devboxes' },
                         { label: selectedDevbox.name || selectedDevbox.id },
                         { label: 'Full Details', active: true }
-                    ] }), _jsx(Header, { title: `${selectedDevbox.name || selectedDevbox.id} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: selectedDevbox.status }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: selectedDevbox.id })] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: visibleLines }), hasLess && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { marginTop: hasLess ? 0 : 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowDown, " More below"] }) }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 [q or esc] Back to Operations \u2022 Line ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of ", detailLines.length] }) })] }));
+                    ] }), _jsx(Header, { title: `${selectedDevbox.name || selectedDevbox.id} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: selectedDevbox.status }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: selectedDevbox.id })] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: visibleLines }), hasLess && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { marginTop: hasLess ? 0 : 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowDown, " More below"] }) }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 [q or esc] Back to Details \u2022 Line ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of ", detailLines.length] }) })] }));
     }
-    // Operations selection mode (main detail view)
+    // Main detail view
     const lp = selectedDevbox.launch_parameters;
     const hasCapabilities = selectedDevbox.capabilities && selectedDevbox.capabilities.filter((c) => c !== 'unknown').length > 0;
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: 'Devboxes' },
                     { label: selectedDevbox.name || selectedDevbox.id, active: true }
-                ] }), _jsx(Header, { title: "Devbox Details" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === 'running' && (_jsxs(Box, { children: [_jsxs(Text, { color: "green", dimColor: true, children: ["Uptime: ", uptime < 60 ? `${uptime}m` : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] }), lp?.keep_alive_time_seconds && (_jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 Keep-alive: ", Math.floor(lp.keep_alive_time_seconds / 60), "m"] }))] }))] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [(lp?.resource_size_request || lp?.custom_cpu_cores || lp?.custom_gb_memory || lp?.custom_disk_size || lp?.architecture) && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: [figures.squareSmallFilled, " Resources"] }), _jsxs(Text, { dimColor: true, children: [lp?.resource_size_request && `${lp.resource_size_request}`, lp?.architecture && ` • ${lp.architecture}`, lp?.custom_cpu_cores && ` • ${lp.custom_cpu_cores}VCPU`, lp?.custom_gb_memory && ` • ${lp.custom_gb_memory}GB RAM`, lp?.custom_disk_size && ` • ${lp.custom_disk_size}GB DISC`] })] })), hasCapabilities && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "blue", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "blue", bold: true, children: [figures.tick, " Capabilities"] }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities.filter((c) => c !== 'unknown').join(', ') })] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "magenta", bold: true, children: [figures.circleFilled, " Source"] }), _jsxs(Text, { dimColor: true, children: [selectedDevbox.blueprint_id && `BP: ${selectedDevbox.blueprint_id}`, selectedDevbox.snapshot_id && `Snap: ${selectedDevbox.snapshot_id}`] })] }))] }), selectedDevbox.metadata && Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: "red", dimColor: true, children: selectedDevbox.failure_reason })] })), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+                ] }), _jsx(Header, { title: "Devbox Details" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === 'running' && (_jsxs(Box, { children: [_jsxs(Text, { color: "green", dimColor: true, children: ["Uptime: ", uptime < 60 ? `${uptime}m` : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] }), lp?.keep_alive_time_seconds && (_jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 Keep-alive: ", Math.floor(lp.keep_alive_time_seconds / 60), "m"] }))] }))] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [(lp?.resource_size_request || lp?.custom_cpu_cores || lp?.custom_gb_memory || lp?.custom_disk_size || lp?.architecture) && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: [figures.squareSmallFilled, " Resources"] }), _jsxs(Text, { dimColor: true, children: [lp?.resource_size_request && `${lp.resource_size_request}`, lp?.architecture && ` • ${lp.architecture}`, lp?.custom_cpu_cores && ` • ${lp.custom_cpu_cores}VCPU`, lp?.custom_gb_memory && ` • ${lp.custom_gb_memory}GB RAM`, lp?.custom_disk_size && ` • ${lp.custom_disk_size}GB DISC`] })] })), hasCapabilities && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "blue", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "blue", bold: true, children: [figures.tick, " Capabilities"] }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities.filter((c) => c !== 'unknown').join(', ') })] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "magenta", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "magenta", bold: true, children: [figures.circleFilled, " Source"] }), _jsxs(Text, { dimColor: true, children: [selectedDevbox.blueprint_id && `BP: ${selectedDevbox.blueprint_id}`, selectedDevbox.snapshot_id && `Snap: ${selectedDevbox.snapshot_id}`] })] }))] }), selectedDevbox.metadata && Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: "red", dimColor: true, children: selectedDevbox.failure_reason })] })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Actions"] }), _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] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));
+                            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] Execute \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));
 };

package/dist/components/StatusBadge.js

@@ -7,32 +7,35 @@ export const getStatusDisplay = (status) => {
     }
     switch (status) {
         case 'running':
-            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING' };
+            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING   ' };
         case 'provisioning':
-            return { icon: figures.hamburger, color: 'yellow', text: 'PROVISIONING' };
+            return { icon: figures.ellipsis, color: 'yellow', text: 'PROVISION ' };
         case 'initializing':
-            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZING' };
+            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZE' };
         case 'suspended':
-            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED' };
+            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED ' };
         case 'failure':
-            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
         case 'shutdown':
-            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN' };
+            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN  ' };
         case 'resuming':
-            return { icon: figures.ellipsis, color: 'cyan', text: 'RESUMING' };
+            return { icon: figures.ellipsis, color: 'cyan', text: 'RESUMING  ' };
         case 'suspending':
             return { icon: figures.ellipsis, color: 'yellow', text: 'SUSPENDING' };
         case 'ready':
-            return { icon: figures.tick, color: 'green', text: 'READY' };
+            return { icon: figures.tick, color: 'green', text: 'READY     ' };
         case 'build_complete':
         case 'building_complete':
-            return { icon: figures.tick, color: 'green', text: 'COMPLETE' };
+            return { icon: figures.tick, color: 'green', text: 'COMPLETE  ' };
         case 'building':
-            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING' };
+            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING  ' };
         case 'build_failed':
-            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
         default:
-            return { icon: figures.questionMarkPrefix, color: 'gray', text: status.toUpperCase() };
+            // Truncate and pad any unknown status to 10 chars to match column width
+            const truncated = status.toUpperCase().slice(0, 10);
+            const padded = truncated.padEnd(10, ' ');
+            return { icon: figures.questionMarkPrefix, color: 'gray', text: padded };
     }
 };
 export const StatusBadge = ({ status, showText = true }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Beautiful CLI for Runloop devbox management",
   "type": "module",
   "bin": {
@@ -47,6 +47,7 @@
   "dependencies": {
     "@inkjs/ui": "^2.0.0",
     "@runloop/api-client": "^0.55.0",
+    "@runloop/rl-cli": "^0.0.1",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "conf": "^13.0.1",