@runloop/rl-cli 0.1.2 → 0.3.0

package/dist/components/DevboxActionsMenu.js

@@ -1,31 +1,62 @@
 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 { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
 import figures from "figures";
-import { getClient } from "../utils/client.js";
 import { Header } from "./Header.js";
 import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useNavigation } from "../store/navigationStore.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { getDevboxLogs, execCommand, suspendDevbox, resumeDevbox, shutdownDevbox, uploadFile, createSnapshot as createDevboxSnapshot, createTunnel, createSSHKey, } from "../services/devboxService.js";
+import { LogsViewer } from "./LogsViewer.js";
 export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     { label: "Devboxes" },
     { label: devbox.name || devbox.id, active: true },
-], initialOperation, initialOperationIndex = 0, skipOperationsMenu = false, onSSHRequest, }) => {
-    const { exit } = useApp();
-    const { stdout } = useStdout();
+], initialOperation, initialOperationIndex = 0, skipOperationsMenu = false, }) => {
+    const { navigate, currentScreen, params } = useNavigation();
     const [loading, setLoading] = React.useState(false);
     const [selectedOperation, setSelectedOperation] = React.useState(initialOperationIndex);
     const [executingOperation, setExecutingOperation] = React.useState(initialOperation || null);
     const [operationInput, setOperationInput] = React.useState("");
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
-    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
-    const [logsScroll, setLogsScroll] = React.useState(0);
     const [execScroll, setExecScroll] = React.useState(0);
     const [copyStatus, setCopyStatus] = React.useState(null);
+    // Calculate viewport for exec output:
+    // - Breadcrumb (3 lines + marginBottom): 4 lines
+    // - Command header (border + 2 content + border + marginBottom): 5 lines
+    // - Output box borders: 2 lines
+    // - Stats bar (marginTop + content): 2 lines
+    // - Help bar (marginTop + content): 2 lines
+    // - Safety buffer: 1 line
+    // Total: 16 lines
+    const execViewport = useViewportHeight({ overhead: 16, minHeight: 10 });
+    // CRITICAL: Aggressive memory cleanup to prevent heap exhaustion
+    React.useEffect(() => {
+        // Clear large data immediately when results are shown to free memory faster
+        if (operationResult || operationError) {
+            const timer = setTimeout(() => {
+                // After 100ms, if user hasn't acted, start aggressive cleanup
+                // This helps with memory without disrupting UX
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [operationResult, operationError]);
+    // Cleanup on unmount
+    React.useEffect(() => {
+        return () => {
+            // Aggressively null out all large data structures
+            setOperationResult(null);
+            setOperationError(null);
+            setOperationInput("");
+            setLoading(false);
+        };
+    }, []);
     const allOperations = [
         {
             key: "logs",
@@ -123,6 +154,8 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             executeOperation();
         }
     }, [executingOperation]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     useInput((input, key) => {
         // Handle operation input mode
         if (executingOperation && !operationResult && !operationError) {
@@ -130,7 +163,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 executeOperation();
             }
             else if (input === "q" || key.escape) {
-                console.clear();
                 setExecutingOperation(null);
                 setOperationInput("");
             }
@@ -139,20 +171,19 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         // Handle operation result display
         if (operationResult || operationError) {
             if (input === "q" || key.escape || key.return) {
-                console.clear();
+                // Clear large data structures immediately to prevent memory leaks
+                setOperationResult(null);
+                setOperationError(null);
+                setOperationInput("");
+                setExecScroll(0);
+                setCopyStatus(null);
                 // If skipOperationsMenu is true, go back to parent instead of operations menu
                 if (skipOperationsMenu) {
+                    setExecutingOperation(null);
                     onBack();
                 }
                 else {
-                    setOperationResult(null);
-                    setOperationError(null);
                     setExecutingOperation(null);
-                    setOperationInput("");
-                    setLogsWrapMode(true);
-                    setLogsScroll(0);
-                    setExecScroll(0);
-                    setCopyStatus(null);
                 }
             }
             else if ((key.upArrow || input === "k") &&
@@ -193,9 +224,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     ...(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);
+                const maxScroll = Math.max(0, lines.length - execViewport.viewportHeight);
                 setExecScroll(maxScroll);
             }
             else if (input === "c" &&
@@ -242,115 +271,18 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 };
                 copyToClipboard(output);
             }
-            else if ((key.upArrow || input === "k") &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsScroll(Math.max(0, logsScroll - 1));
-            }
-            else if ((key.downArrow || input === "j") &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsScroll(logsScroll + 1);
-            }
-            else if (key.pageUp &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsScroll(Math.max(0, logsScroll - 10));
-            }
-            else if (key.pageDown &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsScroll(logsScroll + 10);
-            }
-            else if (input === "g" &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsScroll(0);
-            }
-            else if (input === "G" &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                const logs = operationResult.__logs || [];
-                const terminalHeight = stdout?.rows || 30;
-                const viewportHeight = Math.max(10, terminalHeight - 10);
-                const maxScroll = Math.max(0, logs.length - viewportHeight);
-                setLogsScroll(maxScroll);
-            }
-            else if (input === "w" &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                setLogsWrapMode(!logsWrapMode);
-            }
-            else if (input === "c" &&
-                operationResult &&
-                typeof operationResult === "object" &&
-                operationResult.__customRender === "logs") {
-                // Copy logs to clipboard
-                const logs = operationResult.__logs || [];
-                const logsText = logs
-                    .map((log) => {
-                    const time = new Date(log.timestamp_ms).toLocaleString();
-                    const level = log.level || "INFO";
-                    const source = log.source || "exec";
-                    const message = log.message || "";
-                    const cmd = log.cmd ? `[${log.cmd}] ` : "";
-                    const exitCode = log.exit_code !== null && log.exit_code !== undefined
-                        ? `(${log.exit_code}) `
-                        : "";
-                    return `${time} ${level}/${source} ${exitCode}${cmd}${message}`;
-                })
-                    .join("\n");
-                const copyToClipboard = async (text) => {
-                    const { spawn } = await import("child_process");
-                    const platform = process.platform;
-                    let command;
-                    let args;
-                    if (platform === "darwin") {
-                        command = "pbcopy";
-                        args = [];
-                    }
-                    else if (platform === "win32") {
-                        command = "clip";
-                        args = [];
-                    }
-                    else {
-                        command = "xclip";
-                        args = ["-selection", "clipboard"];
-                    }
-                    const proc = spawn(command, args);
-                    proc.stdin.write(text);
-                    proc.stdin.end();
-                    proc.on("exit", (code) => {
-                        if (code === 0) {
-                            setCopyStatus("Copied to clipboard!");
-                            setTimeout(() => setCopyStatus(null), 2000);
-                        }
-                        else {
-                            setCopyStatus("Failed to copy");
-                            setTimeout(() => setCopyStatus(null), 2000);
-                        }
-                    });
-                    proc.on("error", () => {
-                        setCopyStatus("Copy not supported");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    });
-                };
-                copyToClipboard(logsText);
-            }
             return;
         }
         // Operations selection mode
         if (input === "q" || key.escape) {
-            console.clear();
-            onBack();
+            // Clear all state before going back to free memory
+            setOperationResult(null);
+            setOperationError(null);
+            setOperationInput("");
+            setExecutingOperation(null);
             setSelectedOperation(0);
+            setLoading(false);
+            onBack();
         }
         else if (key.upArrow && selectedOperation > 0) {
             setSelectedOperation(selectedOperation - 1);
@@ -359,7 +291,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             setSelectedOperation(selectedOperation + 1);
         }
         else if (key.return) {
-            console.clear();
             const op = operations[selectedOperation].key;
             setExecutingOperation(op);
         }
@@ -367,20 +298,17 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             // Check if input matches any operation shortcut
             const matchedOp = operations.find((op) => op.shortcut === input);
             if (matchedOp) {
-                console.clear();
                 setExecutingOperation(matchedOp.key);
             }
         }
     });
     const executeOperation = async () => {
-        const client = getClient();
         try {
             setLoading(true);
             switch (executingOperation) {
                 case "exec":
-                    const execResult = await client.devboxes.executeSync(devbox.id, {
-                        command: operationInput,
-                    });
+                    // Use service layer (already truncates output to prevent Yoga crashes)
+                    const execResult = await execCommand(devbox.id, operationInput);
                     // Format exec result for custom rendering
                     const formattedExecResult = {
                         __customRender: "exec",
@@ -392,23 +320,19 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     setOperationResult(formattedExecResult);
                     break;
                 case "upload":
-                    const fs = await import("fs");
-                    const fileStream = fs.createReadStream(operationInput);
+                    // Use service layer
                     const filename = operationInput.split("/").pop() || "file";
-                    await client.devboxes.uploadFile(devbox.id, {
-                        path: filename,
-                        file: fileStream,
-                    });
+                    await uploadFile(devbox.id, operationInput, filename);
                     setOperationResult(`File ${filename} uploaded successfully`);
                     break;
                 case "snapshot":
-                    const snapshot = await client.devboxes.snapshotDisk(devbox.id, {
-                        name: operationInput || `snapshot-${Date.now()}`,
-                    });
+                    // Use service layer
+                    const snapshot = await createDevboxSnapshot(devbox.id, operationInput || `snapshot-${Date.now()}`);
                     setOperationResult(`Snapshot created: ${snapshot.id}`);
                     break;
                 case "ssh":
-                    const sshKey = await client.devboxes.createSSHKey(devbox.id);
+                    // Use service layer
+                    const sshKey = await createSSHKey(devbox.id);
                     const fsModule = await import("fs");
                     const pathModule = await import("path");
                     const osModule = await import("os");
@@ -421,45 +345,45 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     const sshUser = devbox.launch_parameters?.user_parameters?.username || "user";
                     const env = process.env.RUNLOOP_ENV?.toLowerCase();
                     const sshHost = env === "dev" ? "ssh.runloop.pro" : "ssh.runloop.ai";
-                    const proxyCommand = `openssl s_client -quiet -verify_quiet -servername %h -connect ${sshHost}:443 2>/dev/null`;
-                    const sshConfig = {
+                    // macOS openssl doesn't support -verify_quiet, use compatible flags
+                    // servername should be %h (target hostname) - SSH will replace %h with the actual hostname from the SSH command
+                    // This matches the reference implementation where servername is the target hostname
+                    const proxyCommand = `openssl s_client -quiet -servername %h -connect ${sshHost}:443 2>/dev/null`;
+                    // Navigate to SSH session screen
+                    navigate("ssh-session", {
                         keyPath,
                         proxyCommand,
                         sshUser,
                         url: sshKey.url,
                         devboxId: devbox.id,
                         devboxName: devbox.name || devbox.id,
-                    };
-                    // Notify parent that SSH is requested
-                    if (onSSHRequest) {
-                        onSSHRequest(sshConfig);
-                        exit();
-                    }
-                    else {
-                        setOperationError(new Error("SSH session handler not configured"));
-                    }
+                        returnScreen: currentScreen,
+                        returnParams: params,
+                    });
                     break;
                 case "logs":
-                    const logsResult = await client.devboxes.logs.list(devbox.id);
-                    if (logsResult.logs.length === 0) {
+                    // Use service layer (already truncates and escapes log messages)
+                    const logs = await getDevboxLogs(devbox.id);
+                    if (logs.length === 0) {
                         setOperationResult("No logs available for this devbox.");
                     }
                     else {
-                        logsResult.__customRender = "logs";
-                        logsResult.__logs = logsResult.logs;
-                        logsResult.__totalCount = logsResult.logs.length;
+                        const logsResult = {
+                            __customRender: "logs",
+                            __logs: logs,
+                            __totalCount: logs.length,
+                        };
                         setOperationResult(logsResult);
                     }
                     break;
                 case "tunnel":
+                    // Use service layer
                     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,
-                        });
+                        const tunnel = await createTunnel(devbox.id, port);
                         setOperationResult(`Tunnel created!\n\n` +
                             `Local Port: ${port}\n` +
                             `Public URL: ${tunnel.url}\n\n` +
@@ -467,15 +391,18 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     }
                     break;
                 case "suspend":
-                    await client.devboxes.suspend(devbox.id);
+                    // Use service layer
+                    await suspendDevbox(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} suspended successfully`);
                     break;
                 case "resume":
-                    await client.devboxes.resume(devbox.id);
+                    // Use service layer
+                    await resumeDevbox(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} resumed successfully`);
                     break;
                 case "delete":
-                    await client.devboxes.shutdown(devbox.id);
+                    // Use service layer
+                    await shutdownDevbox(devbox.id);
                     setOperationResult(`Devbox ${devbox.id} shut down successfully`);
                     break;
             }
@@ -501,8 +428,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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 viewportHeight = execViewport.viewportHeight;
             const maxScroll = Math.max(0, allLines.length - viewportHeight);
             const actualScroll = Math.min(execScroll, maxScroll);
             const visibleLines = allLines.slice(actualScroll, actualScroll + viewportHeight);
@@ -512,58 +438,37 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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) => {
+                        ] }), _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.length > 500
+                                            ? command.substring(0, 500) + "..."
+                                            : 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 ? colors.error : colors.text;
                                 return (_jsx(Box, { children: _jsx(Text, { color: lineColor, children: line }) }, index));
-                            }), 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"] }) })] }));
+                            })] }), _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] }), hasLess && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] })), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), 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") {
             const logs = operationResult.__logs || [];
-            const totalCount = operationResult.__totalCount || 0;
-            const terminalHeight = stdout?.rows || 30;
-            const terminalWidth = stdout?.columns || 120;
-            const viewportHeight = Math.max(10, terminalHeight - 10);
-            const maxScroll = Math.max(0, logs.length - viewportHeight);
-            const actualScroll = Math.min(logsScroll, maxScroll);
-            const visibleLogs = logs.slice(actualScroll, actualScroll + viewportHeight);
-            const hasMore = actualScroll + viewportHeight < logs.length;
-            const hasLess = actualScroll > 0;
-            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: "Logs", active: true }] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: 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 = 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: 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;
-                                    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: 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 (_jsx(LogsViewer, { logs: logs, breadcrumbItems: [
+                    ...breadcrumbItems,
+                    { label: "Logs", active: true },
+                ], onBack: () => {
+                    // Clear large data structures immediately to prevent memory leaks
+                    setOperationResult(null);
+                    setOperationError(null);
+                    setOperationInput("");
+                    // If skipOperationsMenu is true, go back to parent instead of operations menu
+                    if (skipOperationsMenu) {
+                        setExecutingOperation(null);
+                        onBack();
+                    }
+                    else {
+                        setExecutingOperation(null);
+                    }
+                }, title: "Logs" }));
         }
         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" }) })] }));
     }
@@ -598,7 +503,12 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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: 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"
+        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: (() => {
+                                    const name = devbox.name || devbox.id;
+                                    return name.length > 100
+                                        ? name.substring(0, 100) + "..."
+                                        : name;
+                                })() }) }), _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"
@@ -608,7 +518,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     }
     // Operations selection mode - only show if not skipping
     if (!skipOperationsMenu || !executingOperation) {
-        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) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _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 ? 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"] }) })] }));

package/dist/components/DevboxCreatePage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
@@ -10,6 +10,7 @@ import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
 import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
@@ -68,6 +69,8 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
         "CUSTOM_SIZE",
     ];
     const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     useInput((input, key) => {
         // Handle result screen
         if (result) {
@@ -97,7 +100,6 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
         }
         // Back to list
         if (input === "q" || key.escape) {
-            console.clear();
             onBack();
             return;
         }
@@ -241,10 +243,13 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
                 });
             }
             else if (currentField === "resource_size") {
-                const currentIndex = resourceSizes.indexOf(formData.resource_size);
+                // Find current index, defaulting to 0 if not found (e.g., empty string)
+                const currentSize = formData.resource_size || "SMALL";
+                const currentIndex = resourceSizes.indexOf(currentSize);
+                const safeIndex = currentIndex === -1 ? 0 : currentIndex;
                 const newIndex = key.leftArrow
-                    ? Math.max(0, currentIndex - 1)
-                    : Math.min(resourceSizes.length - 1, currentIndex + 1);
+                    ? Math.max(0, safeIndex - 1)
+                    : Math.min(resourceSizes.length - 1, safeIndex + 1);
                 setFormData({
                     ...formData,
                     resource_size: resourceSizes[newIndex],
@@ -339,7 +344,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
     };
     // Result screen
     if (result) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SuccessMessage, { message: "Devbox created successfully!", details: `ID: ${result.id}\nName: ${result.name || "(none)"}\nStatus: ${result.status}` }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SuccessMessage, { message: "Devbox created successfully!" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Status: ", result.status] }) })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to return to list" }) })] }));
     }
     // Error screen
     if (error) {
@@ -350,7 +355,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(SpinnerComponent, { message: "Creating devbox..." })] }));
     }
     // Form screen
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes" }, { label: "Create", active: true }] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
                     const isActive = currentField === field.key;
                     const fieldData = formData[field.key];
                     if (field.type === "action") {