@runloop/rl-cli 0.1.1 → 0.2.0

package/dist/components/DevboxActionsMenu.js

@@ -1,21 +1,24 @@
 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 { parseLogEntry } from "../utils/logFormatter.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);
@@ -26,6 +29,44 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     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 });
+    // Calculate viewport for logs output:
+    // - Breadcrumb (3 lines + marginBottom): 4 lines
+    // - Log box borders: 2 lines
+    // - Stats bar (marginTop + content): 2 lines
+    // - Help bar (marginTop + content): 2 lines
+    // - Safety buffer: 1 line
+    // Total: 11 lines
+    const logsViewport = useViewportHeight({ overhead: 11, 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 +164,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 +173,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 executeOperation();
             }
             else if (input === "q" || key.escape) {
-                console.clear();
                 setExecutingOperation(null);
                 setOperationInput("");
             }
@@ -139,20 +181,21 @@ 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("");
+                setLogsWrapMode(true);
+                setLogsScroll(0);
+                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 +236,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" &&
@@ -277,9 +318,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 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);
+                const maxScroll = Math.max(0, logs.length - logsViewport.viewportHeight);
                 setLogsScroll(maxScroll);
             }
             else if (input === "w" &&
@@ -292,19 +331,15 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 operationResult &&
                 typeof operationResult === "object" &&
                 operationResult.__customRender === "logs") {
-                // Copy logs to clipboard
+                // Copy logs to clipboard using shared formatter
                 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}`;
+                    const parts = parseLogEntry(log);
+                    const cmd = parts.cmd ? `$ ${parts.cmd} ` : "";
+                    const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                    const shell = parts.shellName ? `(${parts.shellName}) ` : "";
+                    return `${parts.timestamp} ${parts.level} [${parts.source}] ${shell}${cmd}${parts.message} ${exitCode}`.trim();
                 })
                     .join("\n");
                 const copyToClipboard = async (text) => {
@@ -348,9 +383,14 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         }
         // 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 +399,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 +406,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 +428,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 +453,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 +499,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 +536,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,12 +546,14 @@ 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 &&
@@ -525,45 +561,76 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             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 viewportHeight = logsViewport.viewportHeight;
+            const terminalWidth = logsViewport.terminalWidth;
             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 (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: "Logs", active: true }] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, children: visibleLogs.map((log, index) => {
+                            const parts = parseLogEntry(log);
+                            // Sanitize message: escape special chars to prevent layout breaks
+                            const escapedMessage = parts.message
+                                .replace(/\r\n/g, "\\n")
+                                .replace(/\n/g, "\\n")
+                                .replace(/\r/g, "\\r")
+                                .replace(/\t/g, "\\t");
+                            // Limit message length to prevent Yoga layout engine errors
+                            const MAX_MESSAGE_LENGTH = 1000;
+                            const fullMessage = escapedMessage.length > MAX_MESSAGE_LENGTH
+                                ? escapedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
+                                : escapedMessage;
+                            const cmd = parts.cmd
+                                ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
+                                : "";
+                            const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                            // Map color names to theme colors
+                            const levelColorMap = {
+                                red: colors.error,
+                                yellow: colors.warning,
+                                blue: colors.primary,
+                                gray: colors.textDim,
+                            };
+                            const sourceColorMap = {
+                                magenta: "#d33682",
+                                cyan: colors.info,
+                                green: colors.success,
+                                yellow: colors.warning,
+                                gray: colors.textDim,
+                                white: colors.text,
+                            };
+                            const levelColor = levelColorMap[parts.levelColor] || colors.textDim;
+                            const sourceColor = sourceColorMap[parts.sourceColor] || colors.textDim;
+                            if (logsWrapMode) {
+                                return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: fullMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }, index));
+                            }
+                            else {
+                                // Calculate available width for message truncation
+                                const timestampLen = parts.timestamp.length;
+                                const levelLen = parts.level.length;
+                                const sourceLen = parts.source.length + 2; // brackets
+                                const shellLen = parts.shellName
+                                    ? parts.shellName.length + 3
+                                    : 0;
+                                const cmdLen = cmd.length;
+                                const exitLen = exitCode.length;
+                                const spacesLen = 5; // spaces between elements
+                                const metadataWidth = timestampLen +
+                                    levelLen +
+                                    sourceLen +
+                                    shellLen +
+                                    cmdLen +
+                                    exitLen +
+                                    spacesLen;
+                                const safeTerminalWidth = Math.max(80, terminalWidth);
+                                const availableMessageWidth = Math.max(20, safeTerminalWidth - metadataWidth);
+                                const truncatedMessage = fullMessage.length > availableMessageWidth
+                                    ? fullMessage.substring(0, Math.max(1, availableMessageWidth - 3)) + "..."
+                                    : fullMessage;
+                                return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: truncatedMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }, index));
+                            }
+                        }) }), _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] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] })), _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: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
     }
@@ -598,7 +665,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 +680,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") {