@runloop/rl-cli 0.1.2 → 0.3.0

package/dist/components/ActionsPopup.js

@@ -2,44 +2,69 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import figures from "figures";
 import chalk from "chalk";
-export const ActionsPopup = ({ devbox, operations, selectedOperation, onClose, }) => {
-    // Calculate the maximum width needed
-    const maxLabelLength = Math.max(...operations.map((op) => op.label.length));
-    const contentWidth = maxLabelLength + 12; // Content + icon + pointer + shortcuts
-    // Strip ANSI codes to get real length, then pad
-    const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, "");
-    const bgLine = (content) => {
-        const cleanLength = stripAnsi(content).length;
-        const padding = Math.max(0, contentWidth - cleanLength);
-        return chalk.bgBlack(content + " ".repeat(padding));
+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
+    const maxContentWidth = Math.max(...operations.map((op) => {
+        const lineText = `${figures.pointer} ${op.icon} ${op.label} [${op.shortcut}]`;
+        const len = lineText.length;
+        return Number.isFinite(len) && len > 0 ? len : 0;
+    }), `${figures.play} Quick Actions`.length, `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`.length, 40);
+    // Add horizontal padding to width (2 spaces on each side = 4 total)
+    // 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 - 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;
+        // CRITICAL: Validate repeat count is non-negative integer
+        const repeatCount = Math.max(0, Math.floor(maxContentWidth - visibleLength));
+        const rightPadding = " ".repeat(repeatCount);
+        // Apply background to left padding + content + right padding
+        return bgColorFn("  " + styledContent + rightPadding + "  ");
     };
-    // Render all lines with background
-    const lines = [
-        bgLine(chalk.cyan.bold(` ${figures.play} Quick Actions`)),
-        chalk.bgBlack(" ".repeat(contentWidth)),
-        ...operations.map((op, index) => {
-            const isSelected = index === selectedOperation;
-            const pointer = isSelected ? figures.pointer : " ";
-            const content = ` ${pointer} ${op.icon} ${op.label} [${op.shortcut}]`;
-            let styled;
-            if (isSelected) {
-                const colorFn = chalk[op.color];
-                styled =
-                    typeof colorFn === "function"
-                        ? colorFn.bold(content)
-                        : chalk.white.bold(content);
-            }
-            else {
-                styled = chalk.gray(content);
-            }
-            return bgLine(styled);
-        }),
-        chalk.bgBlack(" ".repeat(contentWidth)),
-        bgLine(chalk.gray.dim(` ${figures.arrowUp}${figures.arrowDown} Nav • [Enter]`)),
-        bgLine(chalk.gray.dim(` [Esc] Close`)),
-    ];
-    // Draw custom border with background to fill gaps
-    const borderTop = chalk.cyan("╭" + "─".repeat(contentWidth) + "╮");
-    const borderBottom = chalk.cyan("╰" + "─".repeat(contentWidth) + "╯");
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), lines.map((line, i) => (_jsxs(Text, { children: [chalk.cyan("│"), line, chalk.cyan("│")] }, i))), _jsx(Text, { children: borderBottom })] }) }));
+    // Create empty line with full background
+    // CRITICAL: Validate repeat count is positive integer
+    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
+    // Format: "─ title ─────"
+    const titleWithSpaces = ` ${title} `;
+    const titleTotalLength = titleWithSpaces.length + 1; // +1 for leading dash
+    // 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 = getChalkTextColor("primary");
+    const borderTop = bgColorFn(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
+    // CRITICAL: Validate contentWidth is a positive integer
+    const borderBottom = bgColorFn(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
+    const borderSide = (content) => {
+        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;
+                    const pointer = isSelected ? figures.pointer : " ";
+                    const lineText = `${pointer} ${op.icon} ${op.label} [${op.shortcut}]`;
+                    let styledLine;
+                    if (isSelected) {
+                        // Selected: use operation-specific color for icon and label
+                        const opColor = op.color;
+                        const colorFn = chalk[opColor] || textColorFn;
+                        styledLine = `${textColorFn(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColorFn(`[${op.shortcut}]`)}`;
+                    }
+                    else {
+                        // 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(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,53 +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";
-import { VERSION } from "../cli.js";
-// Version check component
-const VersionCheck = () => {
-    const [updateAvailable, setUpdateAvailable] = React.useState(null);
-    const [isChecking, setIsChecking] = React.useState(true);
-    React.useEffect(() => {
-        const checkForUpdates = async () => {
-            try {
-                // Import the utility functions from config
-                const { checkForUpdates: checkForUpdatesUtil } = await import("../utils/config.js");
-                // Use the same logic as the non-interactive version
-                // We'll call the utility function and capture its output
-                const originalConsoleError = console.error;
-                let updateMessage = "";
-                // Capture the console.error output
-                console.error = (...args) => {
-                    updateMessage = args.join(' ');
-                    originalConsoleError(...args);
-                };
-                // Call the update check utility
-                await checkForUpdatesUtil(false);
-                // Restore original console.error
-                console.error = originalConsoleError;
-                // Parse the update message to extract the latest version
-                if (updateMessage.includes("Update available:")) {
-                    const match = updateMessage.match(/Update available: .+ → (.+)/);
-                    if (match && match[1]) {
-                        setUpdateAvailable(match[1]);
-                    }
-                }
-            }
-            catch (error) {
-                // Silently fail
-            }
-            finally {
-                setIsChecking(false);
-            }
-        };
-        checkForUpdates();
-    }, []);
-    if (isChecking || !updateAvailable) {
-        return null;
-    }
-    return (_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.textDim, dimColor: 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.textDim, dimColor: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
-};
-export const Breadcrumb = React.memo(({ items, showVersionCheck = false }) => {
+import { UpdateNotification } from "./UpdateNotification.js";
+export const Breadcrumb = ({ items, showVersionCheck = false, }) => {
     const env = process.env.RUNLOOP_ENV?.toLowerCase();
     const isDevEnvironment = env === "dev";
-    return (_jsxs(Box, { marginBottom: 1, paddingX: 1, paddingY: 0, flexDirection: "column", 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: "redBright", bold: true, children: [" ", "(dev)"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u203A", " "] }), items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.text : colors.textDim, bold: item.active, dimColor: !item.active, children: item.label }), index < items.length - 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u203A", " "] }))] }, index)))] }), showVersionCheck && (_jsx(Box, { paddingX: 2, marginTop: 0, children: _jsx(VersionCheck, {}) }))] }));
-});
+    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, {}) }))] }));
+};