@runloop/rl-cli 1.4.0 → 1.4.1

package/dist/components/Banner.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import BigText from "ink-big-text";
 import Gradient from "ink-gradient";
 import { isLightMode } from "../utils/theme.js";
-import { useViewportHeight } from "../hooks/useViewportHeight.js";
 // Dramatic shades of green shimmer - wide range
 const DARK_SHIMMER_COLORS = [
     "#024A38", // Very very dark emerald
@@ -83,15 +82,38 @@ const DARK_FRAMES = precomputeFrames(DARK_SHIMMER_COLORS.filter((_, i) => i % 2
 const LIGHT_FRAMES = precomputeFrames(LIGHT_SHIMMER_COLORS.filter((_, i) => i % 2 === 0));
 // Minimum width to show the full BigText banner (simple3d font needs ~80 chars for "RUNLOOP.ai")
 const MIN_WIDTH_FOR_BIG_BANNER = 90;
+// Minimum height to show the full BigText banner - require generous room (40 lines)
+const MIN_HEIGHT_FOR_BIG_BANNER = 40;
 // Animation interval in ms
 const SHIMMER_INTERVAL = 400;
 export const Banner = React.memo(() => {
     const [frameIndex, setFrameIndex] = useState(0);
     const frames = isLightMode() ? LIGHT_FRAMES : DARK_FRAMES;
-    const { terminalWidth } = useViewportHeight();
+    const { stdout } = useStdout();
     const timeoutRef = useRef(null);
-    // Determine if we should show compact mode
-    const isCompact = terminalWidth < MIN_WIDTH_FOR_BIG_BANNER;
+    // Get raw terminal dimensions, responding to resize events
+    // Default to conservative values if we can't detect (triggers compact mode)
+    const getDimensions = React.useCallback(() => ({
+        width: stdout?.columns && stdout.columns > 0 ? stdout.columns : 80,
+        height: stdout?.rows && stdout.rows > 0 ? stdout.rows : 20,
+    }), [stdout]);
+    const [dimensions, setDimensions] = useState(getDimensions);
+    useEffect(() => {
+        // Update immediately on mount and when stdout changes
+        setDimensions(getDimensions());
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setDimensions(getDimensions());
+        };
+        stdout.on("resize", handleResize);
+        return () => {
+            stdout.off("resize", handleResize);
+        };
+    }, [stdout, getDimensions]);
+    // Determine if we should show compact mode (not enough width OR height)
+    const isCompact = dimensions.width < MIN_WIDTH_FOR_BIG_BANNER ||
+        dimensions.height < MIN_HEIGHT_FOR_BIG_BANNER;
     useEffect(() => {
         const tick = () => {
             setFrameIndex((prev) => (prev + 1) % frames.length);

package/dist/components/LogsViewer.js

@@ -16,32 +16,42 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
     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
+    // - Breadcrumb (border top + content + border bottom + marginBottom): 4 lines
+    // - Log box borders: 2 lines (added to height by Ink)
     // - 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 });
+    // - Help bar (content): 1 line
+    // Total: 9 lines
+    const logsViewport = useViewportHeight({ overhead: 9, minHeight: 10 });
+    // Calculate max scroll position based on current mode
+    // For wrap mode, we can scroll until the last entry is at the top
+    // For non-wrap mode, we stop when the last entries fill the viewport
+    const getMaxScroll = () => {
+        if (logsWrapMode) {
+            return Math.max(0, logs.length - 1);
+        }
+        else {
+            return Math.max(0, logs.length - logsViewport.viewportHeight);
+        }
+    };
     // Handle input for logs navigation
     useInput((input, key) => {
+        const maxScroll = getMaxScroll();
         if (key.upArrow || input === "k") {
             setLogsScroll(Math.max(0, logsScroll - 1));
         }
         else if (key.downArrow || input === "j") {
-            setLogsScroll(logsScroll + 1);
+            setLogsScroll(Math.min(maxScroll, logsScroll + 1));
         }
         else if (key.pageUp) {
             setLogsScroll(Math.max(0, logsScroll - 10));
         }
         else if (key.pageDown) {
-            setLogsScroll(logsScroll + 10);
+            setLogsScroll(Math.min(maxScroll, 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") {
@@ -101,72 +111,141 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
     });
     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;
+    // Account for box borders (2 chars) and paddingX={1} (2 chars)
+    // Add extra buffer (4 chars) for any edge cases with Ink rendering
+    const boxChrome = 8;
+    const contentWidth = Math.max(40, terminalWidth - boxChrome);
+    // Helper to sanitize log message
+    const sanitizeMessage = (message) => {
+        // Strip ANSI escape sequences (colors, cursor movement, etc.)
+        const strippedAnsi = message.replace(
+        // eslint-disable-next-line no-control-regex
+        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        // Replace control characters with spaces
+        return (strippedAnsi
+            .replace(/\r\n/g, " ")
+            .replace(/\n/g, " ")
+            .replace(/\r/g, " ")
+            .replace(/\t/g, " ")
+            // Remove any other control characters (ASCII 0-31 except space)
+            // eslint-disable-next-line no-control-regex
+            .replace(/[\x00-\x1F]/g, ""));
+    };
+    // Helper to calculate how many lines a log entry will take when wrapped
+    const calculateWrappedLineCount = (log) => {
+        const parts = parseAnyLogEntry(log);
+        const sanitized = sanitizeMessage(parts.message);
+        const MAX_MESSAGE_LENGTH = 1000;
+        const fullMessage = sanitized.length > MAX_MESSAGE_LENGTH
+            ? sanitized.substring(0, MAX_MESSAGE_LENGTH) + "..."
+            : sanitized;
+        const cmd = parts.cmd
+            ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
+            : "";
+        const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+        const shellPart = parts.shellName ? `(${parts.shellName}) ` : "";
+        // Calculate total line length
+        const totalLength = parts.timestamp.length +
+            1 + // space
+            parts.level.length +
+            1 + // space
+            parts.source.length +
+            2 + // brackets
+            1 + // space
+            shellPart.length +
+            cmd.length +
+            fullMessage.length +
+            (exitCode ? 1 + exitCode.length : 0);
+        // Calculate how many lines this will wrap to
+        // Use contentWidth directly since we now have proper width constraints
+        const lineCount = Math.ceil(totalLength / contentWidth);
+        return Math.max(1, lineCount);
+    };
+    // Calculate visible logs based on wrap mode
+    let visibleLogs;
+    let actualScroll;
+    let visibleLineCount;
+    if (logsWrapMode) {
+        // In wrap mode, we need to count lines and only show what fits
+        actualScroll = Math.min(logsScroll, Math.max(0, logs.length - 1));
+        visibleLogs = [];
+        visibleLineCount = 0;
+        for (let i = actualScroll; i < logs.length; i++) {
+            const lineCount = calculateWrappedLineCount(logs[i]);
+            if (visibleLineCount + lineCount > viewportHeight &&
+                visibleLogs.length > 0) {
+                break;
+            }
+            visibleLogs.push(logs[i]);
+            visibleLineCount += lineCount;
+        }
+    }
+    else {
+        // In non-wrap mode, each log is exactly 1 line
+        const maxScroll = Math.max(0, logs.length - viewportHeight);
+        actualScroll = Math.min(logsScroll, maxScroll);
+        visibleLogs = logs.slice(actualScroll, actualScroll + viewportHeight);
+        visibleLineCount = visibleLogs.length;
+    }
+    const hasMore = actualScroll + visibleLogs.length < 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) => {
+    // Color maps (defined once outside the loop)
+    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,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, height: viewportHeight, 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");
+                    const sanitizedMessage = sanitizeMessage(parts.message);
                     // 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 fullMessage = sanitizedMessage.length > MAX_MESSAGE_LENGTH
+                        ? sanitizedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
+                        : sanitizedMessage;
                     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));
+                        // For wrap mode, render with explicit width to prevent layout issues
+                        return (_jsx(Box, { width: contentWidth, flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", 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));
+                        // Non-wrap mode: build the complete line and truncate to fit exactly
+                        const shellPart = parts.shellName ? `(${parts.shellName}) ` : "";
+                        const exitPart = exitCode ? ` ${exitCode}` : "";
+                        // Build the full line content
+                        const prefix = `${parts.timestamp} ${parts.level} [${parts.source}] ${shellPart}${cmd}`;
+                        const suffix = exitPart;
+                        // Calculate how much space is available for the message
+                        const availableForMessage = contentWidth - prefix.length - suffix.length;
+                        let displayMessage;
+                        if (availableForMessage <= 3) {
+                            // No room for message
+                            displayMessage = "";
+                        }
+                        else if (fullMessage.length <= availableForMessage) {
+                            displayMessage = fullMessage;
+                        }
+                        else {
+                            displayMessage =
+                                fullMessage.substring(0, availableForMessage - 3) + "...";
+                        }
+                        return (_jsx(Box, { width: contentWidth, children: _jsxs(Text, { wrap: "truncate-end", 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: displayMessage }), 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(NavigationTips, { showArrows: true, tips: [
+                })) }), _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 + visibleLogs.length, 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(NavigationTips, { showArrows: true, tips: [
                     { key: "g", label: "Top" },
                     { key: "G", label: "Bottom" },
                     { key: "w", label: "Toggle Wrap" },

package/dist/components/MainMenu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { Box, Text, useInput, useApp } from "ink";
+import { Box, Text, useInput, useApp, useStdout } from "ink";
 import figures from "figures";
 import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
@@ -8,7 +8,6 @@ import { NavigationTips } from "./NavigationTips.js";
 import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
 import { execCommand } from "../utils/exec.js";
-import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 const menuItems = [
@@ -48,11 +47,44 @@ const menuItems = [
         color: colors.info,
     },
 ];
+function getLayoutMode(height) {
+    if (height >= 40)
+        return "full"; // Big banner + bordered items + descriptions
+    if (height >= 22)
+        return "medium"; // Small banner + simple items + descriptions
+    if (height >= 15)
+        return "compact"; // No banner + simple items + short descriptions
+    return "minimal"; // No banner + labels only
+}
 export const MainMenu = ({ onSelect }) => {
     const { exit } = useApp();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    // Use centralized viewport hook for consistent layout
-    const { terminalHeight } = useViewportHeight({ overhead: 0 });
+    const { stdout } = useStdout();
+    // Get raw terminal dimensions, responding to resize events
+    // Default to 20 rows / 80 cols if we can't detect
+    const getTerminalDimensions = React.useCallback(() => {
+        return {
+            height: stdout?.rows && stdout.rows > 0 ? stdout.rows : 20,
+            width: stdout?.columns && stdout.columns > 0 ? stdout.columns : 80,
+        };
+    }, [stdout]);
+    const [terminalDimensions, setTerminalDimensions] = React.useState(getTerminalDimensions);
+    React.useEffect(() => {
+        // Update immediately on mount and when stdout changes
+        setTerminalDimensions(getTerminalDimensions());
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setTerminalDimensions(getTerminalDimensions());
+        };
+        stdout.on("resize", handleResize);
+        return () => {
+            stdout.off("resize", handleResize);
+        };
+    }, [stdout, getTerminalDimensions]);
+    const terminalHeight = terminalDimensions.height;
+    const terminalWidth = terminalDimensions.width;
+    const isNarrow = terminalWidth < 70;
     // Check for updates
     const { updateAvailable } = useUpdateCheck();
     // Handle Ctrl+C to exit
@@ -93,26 +125,49 @@ export const MainMenu = ({ onSelect }) => {
             ]);
         }
     });
-    // Use compact layout if terminal height is less than 20 lines (memoized)
-    const useCompactLayout = terminalHeight < 20;
-    if (useCompactLayout) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Cloud development environments \u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+    const layoutMode = getLayoutMode(terminalHeight);
+    // Navigation tips for all layouts
+    const navTips = (_jsx(NavigationTips, { showArrows: true, paddingX: 2, tips: [
+            { key: "1-5", label: "Quick select" },
+            { key: "Enter", label: "Select" },
+            { key: "Esc", label: "Quit" },
+            { key: "u", label: "Update", condition: !!updateAvailable },
+        ] }));
+    // Minimal layout - just the essentials
+    if (layoutMode === "minimal") {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
-                        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(NavigationTips, { showArrows: true, paddingX: 2, tips: [
-                        { key: "1-5", label: "Quick select" },
-                        { key: "Enter", label: "Select" },
-                        { key: "Esc", label: "Quit" },
-                        { key: "u", label: "Update", condition: !!updateAvailable },
-                    ] })] }));
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                    }) }), navTips] }));
     }
-    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, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+    // Compact layout - no banner, simple items with descriptions (or no descriptions if narrow)
+    if (layoutMode === "compact") {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow
+                                        ? ` [${index + 1}]`
+                                        : ` - ${item.description} [${index + 1}]` })] }, item.key));
+                    }) }), navTips] }));
+    }
+    // Medium layout - small banner, simple items with descriptions (or no descriptions if narrow)
+    if (layoutMode === "medium") {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsx(Text, { color: colors.textDim, dimColor: true, children: isNarrow
+                                ? ` • v${VERSION}`
+                                : ` • Cloud development environments • v${VERSION}` })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        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 }), !isNarrow && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                    }) }), navTips] }));
+    }
+    // Full layout - big banner, bordered items (or simple items if narrow)
+    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, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), isNarrow ? (
+                    // Narrow layout - no borders, compact items
+                    _jsx(Box, { flexDirection: "column", marginTop: 1, children: menuItems.map((item, index) => {
+                            const isSelected = index === selectedIndex;
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? item.color : colors.textDim, children: isSelected ? figures.pointer : " " }), _jsxs(Text, { color: item.color, children: [" ", item.icon, " "] }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
+                        }) })) : (
+                    // Wide layout - bordered items with descriptions
+                    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(NavigationTips, { showArrows: true, tips: [
-                    { key: "1-5", label: "Quick select" },
-                    { key: "Enter", label: "Select" },
-                    { key: "Esc", label: "Quit" },
-                    { key: "u", label: "Update", condition: !!updateAvailable },
-                ] })] }));
+                    }))] }), navTips] }));
 };

package/dist/components/NavigationTips.js

@@ -1,11 +1,149 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NavigationTips - Shared component for rendering keyboard navigation hints
+ * Supports responsive display with compact format for small terminal widths
+ */
+import React from "react";
+import { Box, Text, useStdout } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
 /**
- * Renders a responsive navigation tips bar that wraps on small screens
+ * Map of common labels to their compact versions
+ */
+const COMPACT_LABELS = {
+    // Navigation
+    Navigate: "Nav",
+    Page: "Pg",
+    Top: "Top",
+    Bottom: "Bot",
+    // Actions
+    Select: "Sel",
+    Details: "Info",
+    Execute: "Run",
+    Continue: "OK",
+    Back: "Back",
+    Quit: "Quit",
+    Search: "Find",
+    Actions: "Act",
+    Create: "New",
+    Delete: "Del",
+    Copy: "Cpy",
+    Update: "Upd",
+    Refresh: "Ref",
+    // Browser/Web
+    Browser: "Web",
+    "Open in Browser": "Web",
+    // Toggles
+    "Toggle Wrap": "Wrap",
+    "Full Details": "More",
+    // Quick select - short version that isn't redundant with key
+    "Quick select": "Jump",
+};
+/**
+ * Get compact label - uses explicit compactLabel, then lookup, then truncates
+ */
+function getCompactLabel(tip) {
+    if (tip.compactLabel)
+        return tip.compactLabel;
+    if (COMPACT_LABELS[tip.label])
+        return COMPACT_LABELS[tip.label];
+    // Truncate long labels to first word or 4 chars
+    if (tip.label.length > 6) {
+        const firstWord = tip.label.split(" ")[0];
+        return firstWord.length <= 6 ? firstWord : firstWord.slice(0, 4);
+    }
+    return tip.label;
+}
+/**
+ * Shorten key for very compact display
+ */
+function getCompactKey(key) {
+    // Shorten common compound keys
+    if (key === "Enter/q/esc")
+        return "⏎/q";
+    if (key === "Enter/q")
+        return "⏎/q";
+    if (key === "Enter")
+        return "⏎";
+    if (key === "Esc")
+        return "⎋";
+    return key;
+}
+/**
+ * Calculate the width needed to render tips in a given mode
+ */
+function calculateWidth(tips, mode, separator) {
+    let width = 0;
+    tips.forEach((tip, index) => {
+        if (index > 0)
+            width += separator.length;
+        if (tip.icon) {
+            width += tip.icon.length;
+            if (mode !== "keysOnly")
+                width += 1; // space after icon
+        }
+        if (tip.key) {
+            const keyStr = mode === "keysOnly" ? getCompactKey(tip.key) : tip.key;
+            width += keyStr.length + 2; // "[key]"
+            if (mode !== "keysOnly")
+                width += 1; // space after key
+        }
+        if (mode === "full") {
+            width += tip.label.length;
+        }
+        else if (mode === "compact") {
+            width += getCompactLabel(tip).length;
+        }
+        // keysOnly mode adds no label width
+    });
+    return width;
+}
+/**
+ * Renders a single tip based on display mode
+ */
+function renderTip(tip, mode) {
+    let result = "";
+    if (tip.icon) {
+        result += tip.icon;
+        if (mode !== "keysOnly")
+            result += " ";
+    }
+    if (tip.key) {
+        const keyStr = mode === "keysOnly" ? getCompactKey(tip.key) : tip.key;
+        result += `[${keyStr}]`;
+        if (mode !== "keysOnly")
+            result += " ";
+    }
+    if (mode === "full") {
+        result += tip.label;
+    }
+    else if (mode === "compact") {
+        result += getCompactLabel(tip);
+    }
+    return result.trimEnd();
+}
+/**
+ * Renders a responsive navigation tips bar with compact format for small screens
  */
 export const NavigationTips = ({ tips, showArrows = false, arrowLabel = "Navigate", paddingX = 1, marginTop = 1, }) => {
+    const { stdout } = useStdout();
+    // Get raw terminal width, responding to resize events
+    const [terminalWidth, setTerminalWidth] = React.useState(() => {
+        return stdout?.columns && stdout.columns > 0 ? stdout.columns : 80;
+    });
+    React.useEffect(() => {
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            const newWidth = stdout.columns && stdout.columns > 0 ? stdout.columns : 80;
+            setTerminalWidth(newWidth);
+        };
+        stdout.on("resize", handleResize);
+        handleResize(); // Check on mount
+        return () => {
+            stdout.off("resize", handleResize);
+        };
+    }, [stdout]);
     // Filter tips by condition (undefined condition means always show)
     const visibleTips = tips.filter((tip) => tip.condition === undefined || tip.condition === true);
     // Build the tips array, prepending arrows if requested
@@ -20,5 +158,37 @@ export const NavigationTips = ({ tips, showArrows = false, arrowLabel = "Navigat
     if (allTips.length === 0) {
         return null;
     }
-    return (_jsx(Box, { marginTop: marginTop, paddingX: paddingX, flexWrap: "wrap", children: allTips.map((tip, index) => (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [index > 0 && " • ", tip.icon && `${tip.icon} `, tip.key && `[${tip.key}] `, tip.label] }, index))) }));
+    // Calculate available width (terminal width minus padding)
+    const availableWidth = terminalWidth - paddingX * 2;
+    // Determine the best display mode that fits
+    const fullSeparator = " • ";
+    const compactSeparator = "  ";
+    const keysOnlySeparator = " ";
+    let mode = "full";
+    let separator = fullSeparator;
+    const fullWidth = calculateWidth(allTips, "full", fullSeparator);
+    if (fullWidth > availableWidth) {
+        // Try compact mode with shorter separator
+        const compactWidth = calculateWidth(allTips, "compact", compactSeparator);
+        if (compactWidth <= availableWidth) {
+            mode = "compact";
+            separator = compactSeparator;
+        }
+        else {
+            // Fall back to keys-only mode
+            const keysOnlyWidth = calculateWidth(allTips, "keysOnly", keysOnlySeparator);
+            if (keysOnlyWidth <= availableWidth) {
+                mode = "keysOnly";
+                separator = keysOnlySeparator;
+            }
+            else {
+                // Even keys-only doesn't fit, use it anyway (best we can do)
+                mode = "keysOnly";
+                separator = keysOnlySeparator;
+            }
+        }
+    }
+    // Build the output string to ensure no wrapping
+    const output = allTips.map((tip) => renderTip(tip, mode)).join(separator);
+    return (_jsx(Box, { marginTop: marginTop, paddingX: paddingX, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: output }) }));
 };

package/dist/components/ResourceDetailPage.js

@@ -50,6 +50,43 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
     }, []);
     // Local state for resource data (updated by polling)
     const [currentResource, setCurrentResource] = React.useState(initialResource);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    // Copy to clipboard helper
+    const copyToClipboard = React.useCallback(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 ID 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);
+        });
+    }, []);
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
@@ -106,6 +143,10 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
         if (input === "q" || key.escape) {
             onBack();
         }
+        else if (input === "c") {
+            // Copy resource ID to clipboard
+            copyToClipboard(getId(currentResource));
+        }
         else if (input === "i" && buildDetailLines) {
             setShowDetailedInfo(true);
             setDetailScroll(0);
@@ -176,11 +217,12 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
                             .map((field, fieldIndex) => (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [field.label, " "] }), typeof field.value === "string" ? (_jsx(Text, { color: field.color, dimColor: !field.color, children: field.value })) : (field.value)] }, fieldIndex))) })] }, sectionIndex))), additionalContent, operations.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, 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(NavigationTips, { showArrows: true, tips: [
+                        }) })] })), copyStatus && (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.success, bold: true, children: copyStatus }) })), _jsx(NavigationTips, { showArrows: true, tips: [
                     { key: "Enter", label: "Execute" },
+                    { key: "c", label: "Copy ID" },
                     { key: "i", label: "Full Details", condition: !!buildDetailLines },
                     { key: "o", label: "Browser", condition: !!getUrl },
-                    { key: "q", label: "Back" },
+                    { key: "q/Ctrl+C", label: "Back/Quit" },
                 ] })] }));
 }
 // Helper to format timestamp as "time (ago)"

package/dist/utils/logFormatter.js

@@ -13,36 +13,35 @@ const SOURCE_CONFIG = {
 const SOURCE_WIDTH = 5;
 /**
  * Format timestamp based on how recent the log is
+ * Always returns a fixed-width string for consistent alignment
  */
 export function formatTimestamp(timestampMs) {
     const date = new Date(timestampMs);
     const now = new Date();
     const isToday = date.toDateString() === now.toDateString();
     const isThisYear = date.getFullYear() === now.getFullYear();
-    const time = date.toLocaleTimeString("en-US", {
-        hour12: false,
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-    });
+    // Build time components manually for consistent formatting
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const seconds = date.getSeconds().toString().padStart(2, "0");
     const ms = date.getMilliseconds().toString().padStart(3, "0");
+    const time = `${hours}:${minutes}:${seconds}`;
     if (isToday) {
+        // Format: "HH:MM:SS.mmm" (12 chars)
         return `${time}.${ms}`;
     }
     else if (isThisYear) {
-        const monthDay = date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-        });
-        return `${monthDay} ${time}`;
+        // Format: "Mon DD HH:MM:SS" (15 chars, pad day to 2)
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const day = date.getDate().toString().padStart(2, " ");
+        return `${month} ${day} ${time}`;
     }
     else {
-        const fullDate = date.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-        });
-        return `${fullDate} ${time}`;
+        // Format: "YYYY Mon DD HH:MM:SS" (20 chars)
+        const year = date.getFullYear();
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const day = date.getDate().toString().padStart(2, " ");
+        return `${year} ${month} ${day} ${time}`;
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Beautiful CLI for the Runloop platform",
   "type": "module",
   "bin": {