@runloop/rl-cli 0.0.1 → 0.0.3

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/ActionsPopup.js

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

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

@@ -0,0 +1,481 @@
+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 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 { Breadcrumb } from './Breadcrumb.js';
+export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
+    { label: 'Devboxes' },
+    { label: devbox.name || devbox.id, active: true }
+], initialOperation, initialOperationIndex = 0, skipOperationsMenu = false, onSSHRequest, }) => {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const [loading, setLoading] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(initialOperationIndex);
+    const [executingOperation, setExecutingOperation] = React.useState(initialOperation || null);
+    const [operationInput, setOperationInput] = React.useState('');
+    const [operationResult, setOperationResult] = React.useState(null);
+    const [operationError, setOperationError] = React.useState(null);
+    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
+    const [logsScroll, setLogsScroll] = React.useState(0);
+    const [execScroll, setExecScroll] = React.useState(0);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    const allOperations = [
+        { key: 'logs', label: 'View Logs', color: 'blue', icon: figures.info, shortcut: 'l' },
+        { key: 'exec', label: 'Execute Command', color: 'green', icon: figures.play, shortcut: 'e' },
+        { key: 'upload', label: 'Upload File', color: 'green', icon: figures.arrowUp, shortcut: 'u' },
+        { key: 'snapshot', label: 'Create Snapshot', color: 'yellow', icon: figures.circleFilled, shortcut: 'n' },
+        { key: 'ssh', label: 'SSH onto the box', color: 'cyan', icon: figures.arrowRight, shortcut: 's' },
+        { key: 'tunnel', label: 'Open Tunnel', color: 'magenta', icon: figures.pointerSmall, shortcut: 't' },
+        { key: 'suspend', label: 'Suspend Devbox', color: 'yellow', icon: figures.squareSmallFilled, shortcut: 'p' },
+        { key: 'resume', label: 'Resume Devbox', color: 'green', icon: figures.play, shortcut: 'r' },
+        { key: 'delete', label: 'Shutdown Devbox', color: 'red', icon: figures.cross, shortcut: 'd' },
+    ];
+    // Filter operations based on devbox status
+    const operations = devbox ? allOperations.filter(op => {
+        const status = devbox.status;
+        // When suspended: logs and resume
+        if (status === 'suspended') {
+            return op.key === 'resume' || op.key === 'logs';
+        }
+        // When not running (shutdown, failure, etc): only logs
+        if (status !== 'running' && status !== 'provisioning' && status !== 'initializing') {
+            return op.key === 'logs';
+        }
+        // When running: everything except resume
+        if (status === 'running') {
+            return op.key !== 'resume';
+        }
+        // Default for transitional states (provisioning, initializing)
+        return op.key === 'logs' || op.key === 'delete';
+    }) : allOperations;
+    // Auto-execute operations that don't need input
+    React.useEffect(() => {
+        const autoExecuteOps = ['delete', 'ssh', 'logs', 'suspend', 'resume'];
+        if (executingOperation && autoExecuteOps.includes(executingOperation) && !loading && devbox) {
+            executeOperation();
+        }
+    }, [executingOperation]);
+    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();
+                // 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));
+            }
+            else if ((key.downArrow || input === 'j') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                setExecScroll(execScroll + 1);
+            }
+            else if (key.pageUp && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                setExecScroll(Math.max(0, execScroll - 10));
+            }
+            else if (key.pageDown && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                setExecScroll(execScroll + 10);
+            }
+            else if (input === 'g' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                setExecScroll(0);
+            }
+            else if (input === 'G' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                const lines = [...(operationResult.stdout || '').split('\n'), ...(operationResult.stderr || '').split('\n')];
+                const terminalHeight = stdout?.rows || 30;
+                const viewportHeight = Math.max(10, terminalHeight - 15);
+                const maxScroll = Math.max(0, lines.length - viewportHeight);
+                setExecScroll(maxScroll);
+            }
+            else if (input === 'c' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+                // Copy exec output to clipboard
+                const output = (operationResult.stdout || '') + (operationResult.stderr || '');
+                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(output);
+            }
+            else if ((key.upArrow || input === 'k') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                setLogsScroll(Math.max(0, logsScroll - 1));
+            }
+            else if ((key.downArrow || input === 'j') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                setLogsScroll(logsScroll + 1);
+            }
+            else if (key.pageUp && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                setLogsScroll(Math.max(0, logsScroll - 10));
+            }
+            else if (key.pageDown && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                setLogsScroll(logsScroll + 10);
+            }
+            else if (input === 'g' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                setLogsScroll(0);
+            }
+            else if (input === 'G' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+                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') {
+                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');
+                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);
+            }
+            return;
+        }
+        // Operations selection mode
+        if (input === 'q' || key.escape) {
+            console.clear();
+            onBack();
+            setSelectedOperation(0);
+        }
+        else if (key.upArrow && selectedOperation > 0) {
+            setSelectedOperation(selectedOperation - 1);
+        }
+        else if (key.downArrow && selectedOperation < operations.length - 1) {
+            setSelectedOperation(selectedOperation + 1);
+        }
+        else if (key.return) {
+            console.clear();
+            const op = operations[selectedOperation].key;
+            setExecutingOperation(op);
+        }
+        else if (input) {
+            // Check if input matches any operation shortcut
+            const matchedOp = operations.find(op => op.shortcut === input);
+            if (matchedOp) {
+                console.clear();
+                setExecutingOperation(matchedOp.key);
+            }
+        }
+    });
+    const executeOperation = async () => {
+        const client = getClient();
+        try {
+            setLoading(true);
+            switch (executingOperation) {
+                case 'exec':
+                    const execResult = await client.devboxes.executeSync(devbox.id, {
+                        command: operationInput,
+                    });
+                    // Format exec result for custom rendering
+                    const formattedExecResult = {
+                        __customRender: 'exec',
+                        command: operationInput,
+                        stdout: execResult.stdout || '',
+                        stderr: execResult.stderr || '',
+                        exitCode: execResult.exit_code ?? 0,
+                    };
+                    setOperationResult(formattedExecResult);
+                    break;
+                case 'upload':
+                    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);
+                    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 });
+                    const sshUser = devbox.launch_parameters?.user_parameters?.username || 'user';
+                    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
+                    };
+                    // 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);
+                    if (logsResult.logs.length === 0) {
+                        setOperationResult('No logs available for this devbox.');
+                    }
+                    else {
+                        logsResult.__customRender = 'logs';
+                        logsResult.__logs = logsResult.logs;
+                        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 operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
+    // Operation result display
+    if (operationResult || operationError) {
+        // Check for custom exec rendering
+        if (operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+            const command = operationResult.command || '';
+            const stdout = operationResult.stdout || '';
+            const stderr = operationResult.stderr || '';
+            const exitCode = operationResult.exitCode;
+            const stdoutLines = stdout ? stdout.split('\n') : [];
+            const stderrLines = stderr ? stderr.split('\n') : [];
+            const allLines = [...stdoutLines, ...stderrLines].filter(line => line !== '');
+            const terminalHeight = stdout?.rows || 30;
+            const viewportHeight = Math.max(10, terminalHeight - 15);
+            const maxScroll = Math.max(0, allLines.length - viewportHeight);
+            const actualScroll = Math.min(execScroll, maxScroll);
+            const visibleLines = allLines.slice(actualScroll, actualScroll + viewportHeight);
+            const hasMore = actualScroll + viewportHeight < allLines.length;
+            const hasLess = actualScroll > 0;
+            const exitCodeColor = exitCode === 0 ? 'green' : 'red';
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: 'Execute Command', active: true }] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Command:"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: "white", children: command })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: "Exit Code: " }), _jsx(Text, { color: exitCodeColor, bold: true, children: exitCode })] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [allLines.length === 0 && (_jsx(Text, { color: "gray", dimColor: true, children: "No output" })), visibleLines.map((line, index) => {
+                                const actualIndex = actualScroll + index;
+                                const isStderr = actualIndex >= stdoutLines.length;
+                                const lineColor = isStderr ? 'red' : 'white';
+                                return (_jsx(Box, { children: _jsx(Text, { color: lineColor, children: line }) }, index));
+                            }), 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"] }) }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " ", allLines.length] }), _jsx(Text, { color: "gray", dimColor: true, children: " lines" }), allLines.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, allLines.length), " of ", allLines.length] })] })), stdout && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "green", dimColor: true, children: ["stdout: ", stdoutLines.length, " lines"] })] })), stderr && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "red", dimColor: true, children: ["stderr: ", stderrLines.length, " lines"] })] })), 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 [c] Copy \u2022 [Enter], [q], or [esc] Back"] }) })] }));
+        }
+        // Check for custom logs rendering
+        if (operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+            const logs = operationResult.__logs || [];
+            const totalCount = operationResult.__totalCount || 0;
+            const terminalHeight = stdout?.rows || 30;
+            const terminalWidth = stdout?.columns || 120;
+            const viewportHeight = Math.max(10, terminalHeight - 10);
+            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: [...breadcrumbItems, { 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) {
+                                    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 {
+                                    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: [...breadcrumbItems, { 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 && devbox) {
+        const needsInput = executingOperation === 'exec' ||
+            executingOperation === 'upload' ||
+            executingOperation === 'snapshot' ||
+            executingOperation === 'tunnel';
+        if (loading) {
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: operationLabel, active: true }] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: "Please wait..." })] }));
+        }
+        if (!needsInput) {
+            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: [...breadcrumbItems, { 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: [...breadcrumbItems, { 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: devbox.name || devbox.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" }) })] })] }));
+    }
+    // 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..." })] }));
+};