@runloop/rl-cli 0.0.1

package/dist/components/DevboxDetailPage.js

@@ -0,0 +1,621 @@
+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 { StatusBadge } from './StatusBadge.js';
+import { MetadataDisplay } from './MetadataDisplay.js';
+import { Breadcrumb } from './Breadcrumb.js';
+// Format time ago in a succinct way
+const formatTimeAgo = (timestamp) => {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    if (seconds < 60)
+        return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30)
+        return `${days}d ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return `${months}mo ago`;
+    const years = Math.floor(months / 12);
+    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 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 },
+    ];
+    // Filter operations based on devbox status
+    const operations = selectedDevbox ? allOperations.filter(op => {
+        const status = selectedDevbox.status;
+        // When suspended: logs and resume
+        if (status === 'suspended') {
+            return op.key === 'resume' || op.key === 'logs';
+        }
+        // When not running (shutdown, failure, etc): only logs
+        if (status !== 'running' && status !== 'provisioning' && status !== 'initializing') {
+            return op.key === 'logs';
+        }
+        // When running: everything except resume
+        if (status === 'running') {
+            return op.key !== 'resume';
+        }
+        // Default for transitional states (provisioning, initializing)
+        return op.key === 'logs' || op.key === 'delete';
+    }) : allOperations;
+    // 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]);
+    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);
+            }
+            return;
+        }
+        // Handle detailed info mode
+        if (showDetailedInfo) {
+            if (input === 'q' || key.escape) {
+                setShowDetailedInfo(false);
+                setDetailScroll(0);
+            }
+            else if (input === 'j' || input === 's' || key.downArrow) {
+                // Scroll down in detailed info
+                setDetailScroll(detailScroll + 1);
+            }
+            else if (input === 'k' || input === 'w' || key.upArrow) {
+                // Scroll up in detailed info
+                setDetailScroll(Math.max(0, detailScroll - 1));
+            }
+            else if (key.pageDown) {
+                // Page down
+                setDetailScroll(detailScroll + 10);
+            }
+            else if (key.pageUp) {
+                // Page up
+                setDetailScroll(Math.max(0, detailScroll - 10));
+            }
+            return;
+        }
+        // Operations selection mode
+        if (input === 'q' || key.escape) {
+            console.clear();
+            onBack();
+            setSelectedOperation(0);
+        }
+        else if (input === 'i') {
+            setShowDetailedInfo(true);
+            setDetailScroll(0);
+        }
+        else if (input === 'o') {
+            // Open in browser
+            const url = `https://platform.runloop.ai/devboxes/${selectedDevbox.id}`;
+            const openBrowser = async () => {
+                const { exec } = await import('child_process');
+                const platform = process.platform;
+                let openCommand;
+                if (platform === 'darwin') {
+                    openCommand = `open "${url}"`;
+                }
+                else if (platform === 'win32') {
+                    openCommand = `start "${url}"`;
+                }
+                else {
+                    openCommand = `xdg-open "${url}"`;
+                }
+                exec(openCommand);
+            };
+            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;
+    // Build detailed info lines for scrolling
+    const buildDetailLines = () => {
+        const lines = [];
+        const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+        // Core Information
+        lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Devbox Details" }, "core-title"));
+        lines.push(_jsxs(Text, { dimColor: true, children: ["  ID: ", selectedDevbox.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: ["  Name: ", selectedDevbox.name || '(none)'] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: ["  Status: ", capitalize(selectedDevbox.status)] }, "core-status"));
+        lines.push(_jsxs(Text, { dimColor: true, children: ["  Created: ", new Date(selectedDevbox.create_time_ms).toLocaleString()] }, "core-created"));
+        if (selectedDevbox.end_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: ["  Ended: ", new Date(selectedDevbox.end_time_ms).toLocaleString()] }, "core-ended"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Capabilities
+        if (selectedDevbox.capabilities && selectedDevbox.capabilities.length > 0) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Capabilities" }, "cap-title"));
+            selectedDevbox.capabilities.forEach((cap, idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", figures.pointer, " ", cap] }, `cap-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "cap-space"));
+        }
+        // Launch Parameters
+        if (selectedDevbox.launch_parameters) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Launch Parameters" }, "launch-title"));
+            const lp = selectedDevbox.launch_parameters;
+            if (lp.resource_size_request) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Resource Size Request: ", lp.resource_size_request] }, "launch-size-req"));
+            }
+            if (lp.architecture) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Architecture: ", lp.architecture] }, "launch-arch"));
+            }
+            if (lp.custom_cpu_cores) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  CPU Cores: ", lp.custom_cpu_cores] }, "launch-cpu"));
+            }
+            if (lp.custom_gb_memory) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Memory: ", lp.custom_gb_memory, "GB"] }, "launch-memory"));
+            }
+            if (lp.custom_disk_size) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Disk Size: ", lp.custom_disk_size, "GB"] }, "launch-disk"));
+            }
+            if (lp.keep_alive_time_seconds) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Keep Alive: ", lp.keep_alive_time_seconds, "s (", Math.floor(lp.keep_alive_time_seconds / 60), "m)"] }, "launch-keepalive"));
+            }
+            if (lp.after_idle) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  After Idle: ", lp.after_idle.on_idle, " after ", lp.after_idle.idle_time_seconds, "s"] }, "launch-afteridle"));
+            }
+            if (lp.available_ports && lp.available_ports.length > 0) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Available Ports: ", lp.available_ports.join(', ')] }, "launch-ports"));
+            }
+            if (lp.launch_commands && lp.launch_commands.length > 0) {
+                lines.push(_jsx(Text, { dimColor: true, children: "  Launch Commands:" }, "launch-launch-cmds"));
+                lp.launch_commands.forEach((cmd, idx) => {
+                    lines.push(_jsxs(Text, { dimColor: true, children: ["    ", figures.pointer, " ", cmd] }, `launch-cmd-${idx}`));
+                });
+            }
+            if (lp.required_services && lp.required_services.length > 0) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Required Services: ", lp.required_services.join(', ')] }, "launch-services"));
+            }
+            if (lp.user_parameters) {
+                lines.push(_jsx(Text, { dimColor: true, children: "  User Parameters:" }, "launch-user"));
+                if (lp.user_parameters.username) {
+                    lines.push(_jsxs(Text, { dimColor: true, children: ["    Username: ", lp.user_parameters.username] }, "user-name"));
+                }
+                if (lp.user_parameters.uid) {
+                    lines.push(_jsxs(Text, { dimColor: true, children: ["    UID: ", lp.user_parameters.uid] }, "user-uid"));
+                }
+            }
+            lines.push(_jsx(Text, { children: " " }, "launch-space"));
+        }
+        // Source
+        if (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Source" }, "source-title"));
+            if (selectedDevbox.blueprint_id) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Blueprint: ", selectedDevbox.blueprint_id] }, "source-bp"));
+            }
+            if (selectedDevbox.snapshot_id) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Snapshot: ", selectedDevbox.snapshot_id] }, "source-snap"));
+            }
+            lines.push(_jsx(Text, { children: " " }, "source-space"));
+        }
+        // Initiator
+        if (selectedDevbox.initiator_type) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Initiator" }, "init-title"));
+            lines.push(_jsxs(Text, { dimColor: true, children: ["  Type: ", selectedDevbox.initiator_type] }, "init-type"));
+            if (selectedDevbox.initiator_id) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  ID: ", selectedDevbox.initiator_id] }, "init-id"));
+            }
+            lines.push(_jsx(Text, { children: " " }, "init-space"));
+        }
+        // Status Details
+        if (selectedDevbox.failure_reason || selectedDevbox.shutdown_reason) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Status Details" }, "status-title"));
+            if (selectedDevbox.failure_reason) {
+                lines.push(_jsxs(Text, { color: "red", dimColor: true, children: ["  Failure Reason: ", selectedDevbox.failure_reason] }, "status-fail"));
+            }
+            if (selectedDevbox.shutdown_reason) {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  Shutdown Reason: ", selectedDevbox.shutdown_reason] }, "status-shut"));
+            }
+            lines.push(_jsx(Text, { children: " " }, "status-space"));
+        }
+        // Metadata
+        if (selectedDevbox.metadata && Object.keys(selectedDevbox.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(selectedDevbox.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // State Transitions
+        if (selectedDevbox.state_transitions && selectedDevbox.state_transitions.length > 0) {
+            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "State History" }, "state-title"));
+            selectedDevbox.state_transitions.forEach((transition, idx) => {
+                const text = `${idx + 1}. ${capitalize(transition.status)}${transition.transition_time_ms ? ` at ${new Date(transition.transition_time_ms).toLocaleString()}` : ''}`;
+                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", text] }, `state-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "state-space"));
+        }
+        // Raw JSON (full)
+        lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(selectedDevbox, null, 2).split('\n');
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: ["  ", line] }, `json-${idx}`));
+        });
+        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" }) })] })] }));
+    }
+    // Detailed info mode - full screen
+    if (showDetailedInfo) {
+        const detailLines = buildDetailLines();
+        const terminalHeight = stdout?.rows || 30;
+        const viewportHeight = Math.max(10, terminalHeight - 12); // Reserve space for header/footer
+        const maxScroll = Math.max(0, detailLines.length - viewportHeight);
+        const actualScroll = Math.min(detailScroll, maxScroll);
+        const visibleLines = detailLines.slice(actualScroll, actualScroll + viewportHeight);
+        const hasMore = actualScroll + viewportHeight < detailLines.length;
+        const hasLess = actualScroll > 0;
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { 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] }) })] }));
+    }
+    // Operations selection mode (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) => {
+                            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"] }) })] }));
+};

package/dist/components/ErrorMessage.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figures from 'figures';
+export const ErrorMessage = ({ message, error }) => {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: "red", bold: true, children: [figures.cross, " ", message] }) }), error && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: error.message }) }))] }));
+};

package/dist/components/Header.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+export const Header = React.memo(({ title, subtitle }) => {
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: "#0a4d3a", children: ["\u258C", title] }), subtitle && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: subtitle })] }))] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: "#0a4d3a", children: '─'.repeat(title.length + 1) }) })] }));
+});