@runloop/rl-cli 0.2.0 → 0.4.0

package/dist/commands/mcp-install.js

@@ -3,13 +3,14 @@ import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
 import { homedir, platform } from "os";
 import { join } from "path";
 import { execSync } from "child_process";
+import { processUtils } from "../utils/processUtils.js";
 function getClaudeConfigPath() {
     const plat = platform();
     if (plat === "darwin") {
         return join(homedir(), "Library", "Application Support", "Claude", "claude_desktop_config.json");
     }
     else if (plat === "win32") {
-        const appData = process.env.APPDATA;
+        const appData = processUtils.env.APPDATA;
         if (!appData) {
             throw new Error("APPDATA environment variable not found");
         }
@@ -51,7 +52,7 @@ export async function installMcpConfig() {
             catch {
                 console.error("❌ Error: Claude config file exists but is not valid JSON");
                 console.error("Please fix the file manually or delete it to create a new one");
-                process.exit(1);
+                processUtils.exit(1);
             }
         }
         else {
@@ -71,20 +72,20 @@ export async function installMcpConfig() {
             // Ask if they want to overwrite
             console.log("\n❓ Do you want to overwrite it? (y/N): ");
             // For non-interactive mode, just exit
-            if (process.stdin.isTTY) {
+            if (processUtils.stdin.isTTY) {
                 const response = await new Promise((resolve) => {
-                    process.stdin.once("data", (data) => {
+                    processUtils.stdin.on("data", (data) => {
                         resolve(data.toString().trim().toLowerCase());
                     });
                 });
                 if (response !== "y" && response !== "yes") {
                     console.log("\n✓ Keeping existing configuration");
-                    process.exit(0);
+                    processUtils.exit(0);
                 }
             }
             else {
                 console.log("\n✓ Keeping existing configuration (non-interactive mode)");
-                process.exit(0);
+                processUtils.exit(0);
             }
         }
         // Add runloop MCP server config
@@ -100,7 +101,7 @@ export async function installMcpConfig() {
         console.log("\n📝 Next steps:");
         console.log("1. Restart Claude Desktop completely (quit and reopen)");
         console.log('2. Ask Claude: "List my devboxes" or "What Runloop tools do you have?"');
-        console.log('\n💡 Tip: Make sure you\'ve run "rli auth" to configure your API key first!');
+        console.log("\n💡 Tip: Make sure RUNLOOP_API_KEY environment variable is set!");
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
@@ -116,6 +117,6 @@ export async function installMcpConfig() {
                 },
             },
         }, null, 2));
-        process.exit(1);
+        processUtils.exit(1);
     }
 }

package/dist/commands/mcp.js

@@ -2,6 +2,7 @@
 import { spawn } from "child_process";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
+import { processUtils } from "../utils/processUtils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export async function startMcpServer() {
@@ -14,17 +15,17 @@ export async function startMcpServer() {
     });
     serverProcess.on("error", (error) => {
         console.error("Failed to start MCP server:", error);
-        process.exit(1);
+        processUtils.exit(1);
     });
     serverProcess.on("exit", (code) => {
         if (code !== 0) {
             console.error(`MCP server exited with code ${code}`);
-            process.exit(code || 1);
+            processUtils.exit(code || 1);
         }
     });
     // Handle Ctrl+C
-    process.on("SIGINT", () => {
+    processUtils.on("SIGINT", () => {
         serverProcess.kill("SIGINT");
-        process.exit(0);
+        processUtils.exit(0);
     });
 }

package/dist/commands/menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
 import { enterAlternateScreenBuffer, exitAlternateScreenBuffer, } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.js";
 import { Router } from "../router/Router.js";
 import { NavigationProvider } from "../store/navigationStore.js";
 function AppInner() {
@@ -24,5 +25,5 @@ export async function runMainMenu(initialScreen = "menu", focusDevboxId) {
         console.error("Error in menu:", error);
     }
     exitAlternateScreenBuffer();
-    process.exit(0);
+    processUtils.exit(0);
 }

package/dist/components/ActionsPopup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import figures from "figures";
 import chalk from "chalk";
-import { isLightMode } from "../utils/theme.js";
+import { getChalkTextColor, getChalkColor } from "../utils/theme.js";
 export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, onClose: _onClose, }) => {
     // Calculate max width needed for content (visible characters only)
     // CRITICAL: Ensure all values are valid numbers to prevent Yoga crashes
@@ -15,11 +15,12 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
     // Plus 2 for border characters = 6 total extra
     // CRITICAL: Validate all computed widths are positive integers
     const contentWidth = Math.max(10, maxContentWidth + 4);
-    // Get background color chalk function - inverted for contrast
-    // In light mode (light terminal), use black background for popup
-    // In dark mode (dark terminal), use white background for popup
-    const bgColor = isLightMode() ? chalk.bgBlack : chalk.bgWhite;
-    const textColor = isLightMode() ? chalk.white : chalk.black;
+    // Get background color chalk function - use theme colors to match the theme mode
+    // In light mode, use light background; in dark mode, use dark background
+    const popupBgHex = getChalkColor("background");
+    const popupTextHex = getChalkColor("text");
+    const bgColorFn = chalk.bgHex(popupBgHex);
+    const textColorFn = chalk.hex(popupTextHex);
     // Helper to create background lines with proper padding including left/right margins
     const createBgLine = (styledContent, plainContent) => {
         const visibleLength = plainContent.length;
@@ -27,11 +28,11 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
         const repeatCount = Math.max(0, Math.floor(maxContentWidth - visibleLength));
         const rightPadding = " ".repeat(repeatCount);
         // Apply background to left padding + content + right padding
-        return bgColor("  " + styledContent + rightPadding + "  ");
+        return bgColorFn("  " + styledContent + rightPadding + "  ");
     };
     // Create empty line with full background
     // CRITICAL: Validate repeat count is positive integer
-    const emptyLine = bgColor(" ".repeat(Math.max(1, Math.floor(contentWidth))));
+    const emptyLine = bgColorFn(" ".repeat(Math.max(1, Math.floor(contentWidth))));
     // Create border lines with background and integrated title
     const title = `${figures.play} Quick Actions`;
     // The content between ╭ and ╮ should be exactly contentWidth
@@ -41,12 +42,12 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
     // CRITICAL: Validate repeat counts are non-negative integers
     const remainingDashes = Math.max(0, Math.floor(contentWidth - titleTotalLength));
     // Use theme primary color for borders to match theme
-    const borderColorFn = isLightMode() ? chalk.cyan : chalk.blue;
-    const borderTop = bgColor(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
+    const borderColorFn = getChalkTextColor("primary");
+    const borderTop = bgColorFn(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
     // CRITICAL: Validate contentWidth is a positive integer
-    const borderBottom = bgColor(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
+    const borderBottom = bgColorFn(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
     const borderSide = (content) => {
-        return bgColor(borderColorFn("│") + content + borderColorFn("│"));
+        return bgColorFn(borderColorFn("│") + content + borderColorFn("│"));
     };
     return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), _jsx(Text, { children: borderSide(emptyLine) }), operations.map((op, index) => {
                     const isSelected = index === selectedOperation;
@@ -56,14 +57,14 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
                     if (isSelected) {
                         // Selected: use operation-specific color for icon and label
                         const opColor = op.color;
-                        const colorFn = chalk[opColor] || textColor;
-                        styledLine = `${textColor(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColor(`[${op.shortcut}]`)}`;
+                        const colorFn = chalk[opColor] || textColorFn;
+                        styledLine = `${textColorFn(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColorFn(`[${op.shortcut}]`)}`;
                     }
                     else {
-                        // Unselected: gray/dim text for everything
-                        const dimFn = isLightMode() ? chalk.gray : chalk.gray;
+                        // Unselected: use theme's textDim color for dimmed text
+                        const dimFn = getChalkTextColor("textDim");
                         styledLine = `${dimFn(pointer)} ${dimFn(op.icon)} ${dimFn(op.label)} ${dimFn(`[${op.shortcut}]`)}`;
                     }
                     return (_jsx(Text, { children: borderSide(createBgLine(styledLine, lineText)) }, op.key));
-                }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderSide(createBgLine(textColor(`${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`), `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`)) }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderBottom })] }) }));
+                }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderSide(createBgLine(textColorFn(`${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`), `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`)) }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderBottom })] }) }));
 };

package/dist/components/Banner.js

@@ -3,6 +3,12 @@ import React from "react";
 import { Box } from "ink";
 import BigText from "ink-big-text";
 import Gradient from "ink-gradient";
+import { isLightMode } from "../utils/theme.js";
 export const Banner = React.memo(() => {
-    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", children: _jsx(Gradient, { name: "vice", children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
+    // Use theme-aware gradient colors
+    // In light mode, use darker/deeper colors for better contrast on light backgrounds
+    // "teen" has darker colors (blue/purple) that work well on light backgrounds
+    // In dark mode, use the vibrant "vice" gradient (pink/cyan) that works well on dark backgrounds
+    const gradientName = isLightMode() ? "teen" : "vice";
+    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", paddingX: 1, children: _jsx(Gradient, { name: gradientName, children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
 });

package/dist/components/Breadcrumb.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
 import { colors } from "../utils/theme.js";
-export const Breadcrumb = ({ items }) => {
+import { UpdateNotification } from "./UpdateNotification.js";
+export const Breadcrumb = ({ items, showVersionCheck = false, }) => {
     const env = process.env.RUNLOOP_ENV?.toLowerCase();
     const isDevEnvironment = env === "dev";
-    return (_jsx(Box, { marginBottom: 1, paddingX: 1, paddingY: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
-                    // Limit label length to prevent Yoga layout engine errors
-                    const MAX_LABEL_LENGTH = 80;
-                    const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
-                        ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
-                        : item.label;
-                    return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
-                })] }) }));
+    return (_jsxs(Box, { marginBottom: 1, paddingX: 0, paddingY: 0, children: [_jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
+                        // Limit label length to prevent Yoga layout engine errors
+                        const MAX_LABEL_LENGTH = 80;
+                        const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
+                            ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
+                            : item.label;
+                        return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
+                    })] }), showVersionCheck && (_jsx(Box, { paddingX: 2, marginTop: 0, children: _jsx(UpdateNotification, {}) }))] }));
 };

package/dist/components/DevboxActionsMenu.js

@@ -13,7 +13,7 @@ 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";
+import { LogsViewer } from "./LogsViewer.js";
 export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     { label: "Devboxes" },
     { label: devbox.name || devbox.id, active: true },
@@ -25,8 +25,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     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:
@@ -38,14 +36,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     // - 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
@@ -185,8 +175,6 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                 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
@@ -283,102 +271,6 @@ 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 maxScroll = Math.max(0, logs.length - logsViewport.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 using shared formatter
-                const logs = operationResult.__logs || [];
-                const logsText = logs
-                    .map((log) => {
-                    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) => {
-                    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
@@ -560,77 +452,23 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             typeof operationResult === "object" &&
             operationResult.__customRender === "logs") {
             const logs = operationResult.__logs || [];
-            const totalCount = operationResult.__totalCount || 0;
-            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 }] }), _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 (_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" }) })] }));
     }

package/dist/components/InteractiveSpawn.js

@@ -5,7 +5,8 @@
  */
 import React from "react";
 import { spawn } from "child_process";
-import { exitAlternateScreenBuffer, enterAlternateScreenBuffer, } from "../utils/screen.js";
+import { showCursor, clearScreen, enterAlternateScreenBuffer, } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.js";
 /**
  * Releases terminal control from Ink so a subprocess can take over.
  * This directly manipulates stdin to bypass Ink's input handling.
@@ -15,17 +16,31 @@ function releaseTerminal() {
     process.stdin.pause();
     // Disable raw mode so the subprocess can control terminal echo and line buffering
     // SSH needs to set its own terminal modes
-    if (process.stdin.isTTY && process.stdin.setRawMode) {
-        process.stdin.setRawMode(false);
+    if (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.stdin.setRawMode(false);
+    }
+    // Reset terminal attributes (SGR reset) - clears any colors/styles Ink may have set
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("\x1b[0m");
+    }
+    // Show cursor - Ink may have hidden it, and subprocesses expect it to be visible
+    showCursor();
+    // Flush stdout to ensure all pending writes are complete before handoff
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("");
     }
 }
 /**
  * Restores terminal control to Ink after subprocess exits.
  */
 function restoreTerminal() {
+    // Clear the screen to remove subprocess output before Ink renders
+    clearScreen();
+    // Re-enter alternate screen buffer for Ink's fullscreen UI
+    enterAlternateScreenBuffer();
     // Re-enable raw mode for Ink's input handling
-    if (process.stdin.isTTY && process.stdin.setRawMode) {
-        process.stdin.setRawMode(true);
+    if (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.stdin.setRawMode(true);
     }
     // Resume stdin so Ink can read input again
     process.stdin.resume();
@@ -41,12 +56,11 @@ export const InteractiveSpawn = ({ command, args, onExit, onError, }) => {
             return;
         }
         hasSpawnedRef.current = true;
-        // Exit alternate screen so subprocess gets a clean terminal
-        exitAlternateScreenBuffer();
         // Release terminal from Ink's control
         releaseTerminal();
-        // Small delay to ensure terminal state is fully released
-        setTimeout(() => {
+        // Use setImmediate to ensure terminal state is released without noticeable delay
+        // This is faster than setTimeout and ensures the event loop has processed the release
+        setImmediate(() => {
             // Spawn the process with inherited stdio for proper TTY allocation
             const child = spawn(command, args, {
                 stdio: "inherit", // This allows the process to use the terminal directly
@@ -59,8 +73,6 @@ export const InteractiveSpawn = ({ command, args, onExit, onError, }) => {
                 hasSpawnedRef.current = false;
                 // Restore terminal control to Ink
                 restoreTerminal();
-                // Re-enter alternate screen after process exits
-                enterAlternateScreenBuffer();
                 if (onExit) {
                     onExit(code);
                 }
@@ -71,13 +83,11 @@ export const InteractiveSpawn = ({ command, args, onExit, onError, }) => {
                 hasSpawnedRef.current = false;
                 // Restore terminal control to Ink
                 restoreTerminal();
-                // Re-enter alternate screen on error
-                enterAlternateScreenBuffer();
                 if (onError) {
                     onError(error);
                 }
             });
-        }, 50);
+        });
         // Cleanup function - kill the process if component unmounts
         return () => {
             if (processRef.current && !processRef.current.killed) {