@runloop/rl-cli 0.0.1 → 0.0.2

package/dist/components/DevboxActionsMenu.js

@@ -0,0 +1,460 @@
+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, }) => {
+    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(true);
+    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(() => {
+        if ((executingOperation === 'delete' || executingOperation === 'ssh' || executingOperation === 'logs' || executingOperation === 'suspend' || executingOperation === 'resume') && !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();
+                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 proxyCommand = 'openssl s_client -quiet -verify_quiet -servername %h -connect ssh.runloop.ai:443 2>/dev/null';
+                    global.__sshCommand = {
+                        keyPath,
+                        proxyCommand,
+                        sshUser,
+                        url: sshKey.url,
+                        devboxName: devbox.name || devbox.id
+                    };
+                    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 {
+                        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
+    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"] }) })] }));
+};

package/dist/components/DevboxCreatePage.js

@@ -4,14 +4,13 @@ import { Box, Text, useInput } 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';
 import { MetadataDisplay } from './MetadataDisplay.js';
 export const DevboxCreatePage = ({ onBack, onCreate }) => {
-    const [currentField, setCurrentField] = React.useState('name');
+    const [currentField, setCurrentField] = React.useState('create');
     const [formData, setFormData] = React.useState({
         name: '',
         architecture: 'arm64',
@@ -33,6 +32,7 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
     const [result, setResult] = React.useState(null);
     const [error, setError] = React.useState(null);
     const baseFields = [
+        { key: 'create', label: 'Devbox Create', type: 'action' },
         { key: 'name', label: 'Name', type: 'text' },
         { key: 'architecture', label: 'Architecture', type: 'select' },
         { key: 'resource_size', label: 'Resource Size', type: 'select' },
@@ -93,6 +93,11 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
             handleCreate();
             return;
         }
+        // Handle Enter on create field
+        if (currentField === 'create' && key.return) {
+            handleCreate();
+            return;
+        }
         // Handle metadata section
         if (inMetadataSection) {
             const metadataKeys = Object.keys(formData.metadata);
@@ -312,29 +317,32 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: 'Devboxes' },
                         { label: 'Create', active: true }
-                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(SuccessMessage, { message: "Devbox created successfully!", details: `ID: ${result.id}\nName: ${result.name || '(none)'}\nStatus: ${result.status}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
+                    ] }), _jsx(SuccessMessage, { message: "Devbox created successfully!", details: `ID: ${result.id}\nName: ${result.name || '(none)'}\nStatus: ${result.status}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
     }
     // Error screen
     if (error) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: 'Devboxes' },
                         { label: 'Create', active: true }
-                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] or [r] to retry \u2022 [q] or [esc] to cancel" }) })] }));
+                    ] }), _jsx(ErrorMessage, { message: "Failed to create devbox", error: error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] or [r] to retry \u2022 [q] or [esc] to cancel" }) })] }));
     }
     // Creating screen
     if (creating) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                         { label: 'Devboxes' },
                         { label: 'Create', active: true }
-                    ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
+                    ] }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
     }
     // Form screen
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: 'Devboxes' },
                     { label: 'Create', active: true }
-                ] }), _jsx(Header, { title: "Create Devbox" }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
+                ] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
                     const isActive = currentField === field.key;
                     const fieldData = formData[field.key];
+                    if (field.type === 'action') {
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? 'green' : 'gray', bold: isActive, children: [isActive ? figures.pointer : ' ', " ", field.label] }), isActive && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[Enter to create]"] }))] }, field.key));
+                    }
                     if (field.type === 'text') {
                         return (_jsxs(Box, { marginBottom: 0, children: [_jsxs(Text, { color: isActive ? 'cyan' : 'gray', children: [isActive ? figures.pointer : ' ', " ", field.label, ":", ' '] }), isActive ? (_jsx(TextInput, { value: String(fieldData || ''), onChange: (value) => {
                                         setFormData({ ...formData, [field.key]: value });
@@ -366,5 +374,5 @@ export const DevboxCreatePage = ({ onBack, onCreate }) => {
                                             : `${figures.arrowUp}${figures.arrowDown} Navigate • [Enter] ${selectedMetadataIndex === 0 ? 'Add' : selectedMetadataIndex === maxIndex ? 'Done' : 'Edit'} • [d] Delete • [esc] Back` }) })] }, field.key));
                     }
                     return null;
-                }) }), formData.resource_size === 'CUSTOM_SIZE' && validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: "red", dimColor: true, children: validateCustomResources() })] })), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: "green", bold: true, children: [figures.info, " Summary"] }), _jsxs(Text, { dimColor: true, children: ["Name: ", formData.name || '(auto-generated)'] }), _jsxs(Text, { dimColor: true, children: ["Architecture: ", formData.architecture] }), formData.resource_size && _jsxs(Text, { dimColor: true, children: ["Resources: ", formData.resource_size] }), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_cpu && (_jsxs(Text, { dimColor: true, children: ["  CPU: ", formData.custom_cpu, " cores"] })), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_memory && (_jsxs(Text, { dimColor: true, children: ["  Memory: ", formData.custom_memory, " GB"] })), formData.resource_size === 'CUSTOM_SIZE' && formData.custom_disk && (_jsxs(Text, { dimColor: true, children: ["  Disk: ", formData.custom_disk, " GB"] })), _jsxs(Text, { dimColor: true, children: ["Keep Alive: ", formData.keep_alive, "s (", Math.floor(parseInt(formData.keep_alive || '0') / 60), "m)"] }), formData.blueprint_id && _jsxs(Text, { dimColor: true, children: ["Blueprint: ", formData.blueprint_id] }), formData.snapshot_id && _jsxs(Text, { dimColor: true, children: ["Snapshot: ", formData.snapshot_id] }), _jsxs(Text, { dimColor: true, children: ["Metadata: ", Object.keys(formData.metadata).length, " item(s)"] })] }), !inMetadataSection && (_jsxs(_Fragment, { children: [_jsx(Box, { borderStyle: "single", borderColor: "green", paddingX: 1, paddingY: 0, marginTop: 1, children: _jsxs(Text, { color: "green", bold: true, children: [figures.play, " Press [Ctrl+S] to create this devbox"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Ctrl+S] Create \u2022 [q] Cancel"] }) })] }))] }));
+                }) }), formData.resource_size === 'CUSTOM_SIZE' && validateCustomResources() && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " Validation Error"] }), _jsx(Text, { color: "red", dimColor: true, children: validateCustomResources() })] })), !inMetadataSection && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Create \u2022 [q] Cancel"] }) }))] }));
 };