@runloop/rl-cli 0.2.0 → 0.3.0

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) {

package/dist/components/LogsViewer.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * LogsViewer - Shared component for viewing logs (devbox or blueprint)
+ * Extracted from DevboxActionsMenu for reuse
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { parseAnyLogEntry } from "../utils/logFormatter.js";
+export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: true }], onBack, title = "Logs", }) => {
+    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
+    const [logsScroll, setLogsScroll] = React.useState(0);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    // 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 });
+    // Handle input for logs navigation
+    useInput((input, key) => {
+        if (key.upArrow || input === "k") {
+            setLogsScroll(Math.max(0, logsScroll - 1));
+        }
+        else if (key.downArrow || input === "j") {
+            setLogsScroll(logsScroll + 1);
+        }
+        else if (key.pageUp) {
+            setLogsScroll(Math.max(0, logsScroll - 10));
+        }
+        else if (key.pageDown) {
+            setLogsScroll(logsScroll + 10);
+        }
+        else if (input === "g") {
+            setLogsScroll(0);
+        }
+        else if (input === "G") {
+            const maxScroll = Math.max(0, logs.length - logsViewport.viewportHeight);
+            setLogsScroll(maxScroll);
+        }
+        else if (input === "w") {
+            setLogsWrapMode(!logsWrapMode);
+        }
+        else if (input === "c") {
+            // Copy logs to clipboard using shared formatter
+            const logsText = logs
+                .map((log) => {
+                const parts = parseAnyLogEntry(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);
+        }
+        else if (input === "q" || key.escape || key.return) {
+            onBack();
+        }
+    });
+    const viewportHeight = Math.max(1, 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 }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, children: logs.length === 0 ? (_jsx(Text, { color: colors.textDim, dimColor: true, children: "No logs available" })) : (visibleLogs.map((log, index) => {
+                    const parts = parseAnyLogEntry(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, " ", logs.length] }), _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"] }) })] }));
+};

package/dist/components/MainMenu.js

@@ -4,7 +4,7 @@ import { Box, Text, useInput, useApp } from "ink";
 import figures from "figures";
 import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
-import { VERSION } from "../cli.js";
+import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
@@ -69,7 +69,7 @@ export const MainMenu = ({ onSelect }) => {
                         return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsx(Text, { children: " " }), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
                     }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }] }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
                         return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: figures.pointer }), _jsx(Text, { children: " " })] })), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
                     })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));

package/dist/components/UpdateNotification.js

@@ -0,0 +1,56 @@
+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";
+import { VERSION } from "../version.js";
+/**
+ * Version check component that checks npm for updates and displays a notification
+ * Restored from git history and enhanced with better visual styling
+ */
+export const UpdateNotification = () => {
+    const [updateAvailable, setUpdateAvailable] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
+    React.useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const currentVersion = VERSION;
+                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
+                if (response.ok) {
+                    const data = (await response.json());
+                    const latestVersion = data.version;
+                    if (latestVersion && latestVersion !== currentVersion) {
+                        // Check if current version is older than latest
+                        const compareVersions = (version1, version2) => {
+                            const v1parts = version1.split(".").map(Number);
+                            const v2parts = version2.split(".").map(Number);
+                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
+                                const v1part = v1parts[i] || 0;
+                                const v2part = v2parts[i] || 0;
+                                if (v1part > v2part)
+                                    return 1;
+                                if (v1part < v2part)
+                                    return -1;
+                            }
+                            return 0;
+                        };
+                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
+                        if (isUpdateAvailable) {
+                            setUpdateAvailable(latestVersion);
+                        }
+                    }
+                }
+            }
+            catch {
+                // Silently fail
+            }
+            finally {
+                setIsChecking(false);
+            }
+        };
+        checkForUpdates();
+    }, []);
+    if (isChecking || !updateAvailable) {
+        return null;
+    }
+    return (_jsxs(Box, { borderStyle: "round", borderColor: colors.warning, paddingX: 1, paddingY: 0, marginTop: 0, children: [_jsx(Text, { color: colors.warning, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.warning, bold: true, children: VERSION }), _jsxs(Text, { color: colors.primary, bold: true, children: [" ", "\u2192", " "] }), _jsx(Text, { color: colors.success, bold: true, children: updateAvailable }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
+};

package/dist/hooks/useExitOnCtrlC.js

@@ -4,11 +4,12 @@
  */
 import { useInput } from "ink";
 import { exitAlternateScreenBuffer } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.js";
 export function useExitOnCtrlC() {
     useInput((input, key) => {
         if (key.ctrl && input === "c") {
             exitAlternateScreenBuffer();
-            process.exit(130); // Standard exit code for SIGINT
+            processUtils.exit(130); // Standard exit code for SIGINT
         }
     });
 }

package/dist/mcp/server-http.js

@@ -4,6 +4,7 @@ import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
 import { getClient } from "../utils/client.js";
 import express from "express";
+import { processUtils } from "../utils/processUtils.js";
 // Define available tools for the MCP server
 const TOOLS = [
     {
@@ -412,5 +413,5 @@ async function main() {
 }
 main().catch((error) => {
     console.error("Fatal error in main():", error);
-    process.exit(1);
+    processUtils.exit(1);
 });