@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/components/DevboxActionsMenu.js

@@ -1,24 +1,25 @@
 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';
+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";
+import { colors } from "../utils/theme.js";
 export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
-    { label: 'Devboxes' },
-    { label: devbox.name || devbox.id, active: true }
+    { 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 [operationInput, setOperationInput] = React.useState("");
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
     const [logsWrapMode, setLogsWrapMode] = React.useState(false);
@@ -26,38 +27,99 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     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' },
+        {
+            key: "logs",
+            label: "View Logs",
+            color: colors.info,
+            icon: figures.info,
+            shortcut: "l",
+        },
+        {
+            key: "exec",
+            label: "Execute Command",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "e",
+        },
+        {
+            key: "upload",
+            label: "Upload File",
+            color: colors.success,
+            icon: figures.arrowUp,
+            shortcut: "u",
+        },
+        {
+            key: "snapshot",
+            label: "Create Snapshot",
+            color: colors.warning,
+            icon: figures.circleFilled,
+            shortcut: "n",
+        },
+        {
+            key: "ssh",
+            label: "SSH onto the box",
+            color: colors.primary,
+            icon: figures.arrowRight,
+            shortcut: "s",
+        },
+        {
+            key: "tunnel",
+            label: "Open Tunnel",
+            color: colors.secondary,
+            icon: figures.pointerSmall,
+            shortcut: "t",
+        },
+        {
+            key: "suspend",
+            label: "Suspend Devbox",
+            color: colors.warning,
+            icon: figures.squareSmallFilled,
+            shortcut: "p",
+        },
+        {
+            key: "resume",
+            label: "Resume Devbox",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "r",
+        },
+        {
+            key: "delete",
+            label: "Shutdown Devbox",
+            color: colors.error,
+            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;
+    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) {
+        const autoExecuteOps = ["delete", "ssh", "logs", "suspend", "resume"];
+        if (executingOperation &&
+            autoExecuteOps.includes(executingOperation) &&
+            !loading &&
+            devbox) {
             executeOperation();
         }
     }, [executingOperation]);
@@ -67,16 +129,16 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             if (key.return && operationInput.trim()) {
                 executeOperation();
             }
-            else if (input === 'q' || key.escape) {
+            else if (input === "q" || key.escape) {
                 console.clear();
                 setExecutingOperation(null);
-                setOperationInput('');
+                setOperationInput("");
             }
             return;
         }
         // Handle operation result display
         if (operationResult || operationError) {
-            if (input === 'q' || key.escape || key.return) {
+            if (input === "q" || key.escape || key.return) {
                 console.clear();
                 // If skipOperationsMenu is true, go back to parent instead of operations menu
                 if (skipOperationsMenu) {
@@ -86,144 +148,197 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     setOperationResult(null);
                     setOperationError(null);
                     setExecutingOperation(null);
-                    setOperationInput('');
+                    setOperationInput("");
                     setLogsWrapMode(true);
                     setLogsScroll(0);
                     setExecScroll(0);
                     setCopyStatus(null);
                 }
             }
-            else if ((key.upArrow || input === 'k') && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'exec') {
+            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') {
+            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') {
+            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') {
+            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') {
+            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')];
+            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') {
+            else if (input === "c" &&
+                operationResult &&
+                typeof operationResult === "object" &&
+                operationResult.__customRender === "exec") {
                 // Copy exec output to clipboard
-                const output = (operationResult.stdout || '') + (operationResult.stderr || '');
+                const output = (operationResult.stdout || "") +
+                    (operationResult.stderr || "");
                 const copyToClipboard = async (text) => {
-                    const { spawn } = await import('child_process');
+                    const { spawn } = await import("child_process");
                     const platform = process.platform;
                     let command;
                     let args;
-                    if (platform === 'darwin') {
-                        command = 'pbcopy';
+                    if (platform === "darwin") {
+                        command = "pbcopy";
                         args = [];
                     }
-                    else if (platform === 'win32') {
-                        command = 'clip';
+                    else if (platform === "win32") {
+                        command = "clip";
                         args = [];
                     }
                     else {
-                        command = 'xclip';
-                        args = ['-selection', 'clipboard'];
+                        command = "xclip";
+                        args = ["-selection", "clipboard"];
                     }
                     const proc = spawn(command, args);
                     proc.stdin.write(text);
                     proc.stdin.end();
-                    proc.on('exit', (code) => {
+                    proc.on("exit", (code) => {
                         if (code === 0) {
-                            setCopyStatus('Copied to clipboard!');
+                            setCopyStatus("Copied to clipboard!");
                             setTimeout(() => setCopyStatus(null), 2000);
                         }
                         else {
-                            setCopyStatus('Failed to copy');
+                            setCopyStatus("Failed to copy");
                             setTimeout(() => setCopyStatus(null), 2000);
                         }
                     });
-                    proc.on('error', () => {
-                        setCopyStatus('Copy not supported');
+                    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') {
+            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') {
+            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') {
+            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') {
+            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') {
+            else if (input === "g" &&
+                operationResult &&
+                typeof operationResult === "object" &&
+                operationResult.__customRender === "logs") {
                 setLogsScroll(0);
             }
-            else if (input === 'G' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+            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') {
+            else if (input === "w" &&
+                operationResult &&
+                typeof operationResult === "object" &&
+                operationResult.__customRender === "logs") {
                 setLogsWrapMode(!logsWrapMode);
             }
-            else if (input === 'c' && operationResult && typeof operationResult === 'object' && operationResult.__customRender === 'logs') {
+            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 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}) ` : '';
+                    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');
+                })
+                    .join("\n");
                 const copyToClipboard = async (text) => {
-                    const { spawn } = await import('child_process');
+                    const { spawn } = await import("child_process");
                     const platform = process.platform;
                     let command;
                     let args;
-                    if (platform === 'darwin') {
-                        command = 'pbcopy';
+                    if (platform === "darwin") {
+                        command = "pbcopy";
                         args = [];
                     }
-                    else if (platform === 'win32') {
-                        command = 'clip';
+                    else if (platform === "win32") {
+                        command = "clip";
                         args = [];
                     }
                     else {
-                        command = 'xclip';
-                        args = ['-selection', 'clipboard'];
+                        command = "xclip";
+                        args = ["-selection", "clipboard"];
                     }
                     const proc = spawn(command, args);
                     proc.stdin.write(text);
                     proc.stdin.end();
-                    proc.on('exit', (code) => {
+                    proc.on("exit", (code) => {
                         if (code === 0) {
-                            setCopyStatus('Copied to clipboard!');
+                            setCopyStatus("Copied to clipboard!");
                             setTimeout(() => setCopyStatus(null), 2000);
                         }
                         else {
-                            setCopyStatus('Failed to copy');
+                            setCopyStatus("Failed to copy");
                             setTimeout(() => setCopyStatus(null), 2000);
                         }
                     });
-                    proc.on('error', () => {
-                        setCopyStatus('Copy not supported');
+                    proc.on("error", () => {
+                        setCopyStatus("Copy not supported");
                         setTimeout(() => setCopyStatus(null), 2000);
                     });
                 };
@@ -232,7 +347,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             return;
         }
         // Operations selection mode
-        if (input === 'q' || key.escape) {
+        if (input === "q" || key.escape) {
             console.clear();
             onBack();
             setSelectedOperation(0);
@@ -250,7 +365,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         }
         else if (input) {
             // Check if input matches any operation shortcut
-            const matchedOp = operations.find(op => op.shortcut === input);
+            const matchedOp = operations.find((op) => op.shortcut === input);
             if (matchedOp) {
                 console.clear();
                 setExecutingOperation(matchedOp.key);
@@ -262,48 +377,50 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         try {
             setLoading(true);
             switch (executingOperation) {
-                case 'exec':
+                case "exec":
                     const execResult = await client.devboxes.executeSync(devbox.id, {
                         command: operationInput,
                     });
                     // Format exec result for custom rendering
                     const formattedExecResult = {
-                        __customRender: 'exec',
+                        __customRender: "exec",
                         command: operationInput,
-                        stdout: execResult.stdout || '',
-                        stderr: execResult.stderr || '',
+                        stdout: execResult.stdout || "",
+                        stderr: execResult.stderr || "",
                         exitCode: execResult.exit_code ?? 0,
                     };
                     setOperationResult(formattedExecResult);
                     break;
-                case 'upload':
-                    const fs = await import('fs');
+                case "upload":
+                    const fs = await import("fs");
                     const fileStream = fs.createReadStream(operationInput);
-                    const filename = operationInput.split('/').pop() || 'file';
+                    const filename = operationInput.split("/").pop() || "file";
                     await client.devboxes.uploadFile(devbox.id, {
                         path: filename,
                         file: fileStream,
                     });
                     setOperationResult(`File ${filename} uploaded successfully`);
                     break;
-                case 'snapshot':
+                case "snapshot":
                     const snapshot = await client.devboxes.snapshotDisk(devbox.id, {
                         name: operationInput || `snapshot-${Date.now()}`,
                     });
                     setOperationResult(`Snapshot created: ${snapshot.id}`);
                     break;
-                case 'ssh':
+                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');
+                    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';
+                    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 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,
@@ -311,7 +428,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                         sshUser,
                         url: sshKey.url,
                         devboxId: devbox.id,
-                        devboxName: devbox.name || devbox.id
+                        devboxName: devbox.name || devbox.id,
                     };
                     // Notify parent that SSH is requested
                     if (onSSHRequest) {
@@ -319,43 +436,45 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                         exit();
                     }
                     else {
-                        setOperationError(new Error('SSH session handler not configured'));
+                        setOperationError(new Error("SSH session handler not configured"));
                     }
                     break;
-                case 'logs':
+                case "logs":
                     const logsResult = await client.devboxes.logs.list(devbox.id);
                     if (logsResult.logs.length === 0) {
-                        setOperationResult('No logs available for this devbox.');
+                        setOperationResult("No logs available for this devbox.");
                     }
                     else {
-                        logsResult.__customRender = 'logs';
+                        logsResult.__customRender = "logs";
                         logsResult.__logs = logsResult.logs;
                         logsResult.__totalCount = logsResult.logs.length;
                         setOperationResult(logsResult);
                     }
                     break;
-                case 'tunnel':
+                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.'));
+                        setOperationError(new Error("Invalid port number. Please enter a port between 1 and 65535."));
                     }
                     else {
-                        const tunnel = await client.devboxes.createTunnel(devbox.id, { port });
+                        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':
+                case "suspend":
                     await client.devboxes.suspend(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} suspended successfully`);
                     break;
-                case 'resume':
+                case "resume":
                     await client.devboxes.resume(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} resumed successfully`);
                     break;
-                case 'delete':
+                case "delete":
                     await client.devboxes.shutdown(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} shut down successfully`);
                     break;
@@ -368,18 +487,20 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             setLoading(false);
         }
     };
-    const operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
+    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 || '';
+        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 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);
@@ -387,16 +508,21 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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 exitCodeColor = exitCode === 0 ? colors.success : colors.error;
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                            ...breadcrumbItems,
+                            { label: "Execute Command", active: true },
+                        ] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Command:"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.text, children: command })] }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Exit Code:", " "] }), _jsx(Text, { color: exitCodeColor, bold: true, children: exitCode })] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, children: [allLines.length === 0 && (_jsx(Text, { color: colors.textDim, dimColor: true, children: "No output" })), visibleLines.map((line, index) => {
                                 const actualIndex = actualScroll + index;
                                 const isStderr = actualIndex >= stdoutLines.length;
-                                const lineColor = isStderr ? 'red' : 'white';
+                                const lineColor = isStderr ? colors.error : colors.text;
                                 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"] }) })] }));
+                            }), hasLess && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.primary, children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { marginTop: hasLess ? 0 : 1, children: _jsxs(Text, { color: colors.primary, children: [figures.arrowDown, " More below"] }) }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", allLines.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "lines"] }), allLines.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, allLines.length), " of", " ", allLines.length] })] })), stdout && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.success, dimColor: true, children: ["stdout: ", stdoutLines.length, " lines"] })] })), stderr && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.error, dimColor: true, children: ["stderr: ", stderrLines.length, " lines"] })] })), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: colors.textDim, 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') {
+        if (operationResult &&
+            typeof operationResult === "object" &&
+            operationResult.__customRender === "logs") {
             const logs = operationResult.__logs || [];
             const totalCount = operationResult.__totalCount || 0;
             const terminalHeight = stdout?.rows || 30;
@@ -407,74 +533,85 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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) => {
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: "Logs", active: true }] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, 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';
+                                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 = colors.textDim;
+                                if (level === "E")
+                                    levelColor = colors.error;
+                                else if (level === "W")
+                                    levelColor = colors.warning;
+                                else if (level === "I")
+                                    levelColor = colors.primary;
                                 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));
+                                    return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: time }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: true, children: level }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["/", source] }), _jsx(Text, { children: " " }), exitCode && _jsx(Text, { color: colors.warning, children: exitCode }), cmd && (_jsx(Text, { color: colors.info, 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.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));
+                                    return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: time }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: true, children: level }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["/", source] }), _jsx(Text, { children: " " }), exitCode && _jsx(Text, { color: colors.warning, children: exitCode }), cmd && (_jsx(Text, { color: colors.info, 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"] }) })] }));
+                            }), hasLess && (_jsx(Box, { children: _jsxs(Text, { color: colors.primary, children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { children: _jsxs(Text, { color: colors.primary, children: [figures.arrowDown, " More below"] }) }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total logs"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, logs.length), " of", " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: colors.textDim, 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" }) })] }));
+        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: colors.textDim, 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';
+        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..." })] }));
+            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...',
+                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...' })] }));
+            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:',
+            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" }) })] })] }));
+        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: colors.primary, bold: true, children: devbox.name || devbox.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, 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: colors.textDim, 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) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: colors.primary, 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"] }) })] }));
+                                return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", op.shortcut, "]"] })] }, op.key));
+                            }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, 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..." })] }));