@runloop/rl-cli 0.1.1 → 0.2.0

package/dist/commands/snapshot/list.js

@@ -1,90 +1,319 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useStdout } from "ink";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import figures from "figures";
 import { getClient } from "../../utils/client.js";
-import { createTextColumn, } from "../../components/Table.js";
-import { ResourceListView, formatTimeAgo, } from "../../components/ResourceListView.js";
-import { createExecutor } from "../../utils/CommandExecutor.js";
+import { Header } from "../../components/Header.js";
+import { SpinnerComponent } from "../../components/Spinner.js";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
+import { SuccessMessage } from "../../components/SuccessMessage.js";
+import { Breadcrumb } from "../../components/Breadcrumb.js";
+import { Table, createTextColumn } from "../../components/Table.js";
+import { ActionsPopup } from "../../components/ActionsPopup.js";
+import { formatTimeAgo } from "../../components/ResourceListView.js";
+import { output, outputError } from "../../utils/output.js";
 import { colors } from "../../utils/theme.js";
-const PAGE_SIZE = 10;
-const MAX_FETCH = 100;
-const ListSnapshotsUI = ({ devboxId, onBack, onExit }) => {
-    const { stdout } = useStdout();
-    // Calculate responsive column widths
-    const terminalWidth = stdout?.columns || 120;
-    const showDevboxId = terminalWidth >= 100 && !devboxId; // Hide devbox column if filtering by devbox
-    const showFullId = terminalWidth >= 80;
-    const statusIconWidth = 2;
-    const statusTextWidth = 10;
+import { useViewportHeight } from "../../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
+import { useCursorPagination } from "../../hooks/useCursorPagination.js";
+const DEFAULT_PAGE_SIZE = 10;
+const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
+    const { exit: inkExit } = useApp();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [showPopup, setShowPopup] = React.useState(false);
+    const [selectedOperation, setSelectedOperation] = React.useState(0);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [selectedSnapshot, setSelectedSnapshot] = React.useState(null);
+    const [executingOperation, setExecutingOperation] = React.useState(null);
+    const [operationResult, setOperationResult] = React.useState(null);
+    const [operationError, setOperationError] = React.useState(null);
+    const [operationLoading, setOperationLoading] = React.useState(false);
+    // Calculate overhead for viewport height
+    const overhead = 13;
+    const { viewportHeight, terminalWidth } = useViewportHeight({
+        overhead,
+        minHeight: 5,
+    });
+    const PAGE_SIZE = viewportHeight;
+    // All width constants
     const idWidth = 25;
-    const nameWidth = terminalWidth >= 120 ? 30 : 25;
+    const nameWidth = Math.max(15, terminalWidth >= 120 ? 30 : 25);
     const devboxWidth = 15;
     const timeWidth = 20;
-    return (_jsx(ResourceListView, { config: {
-            resourceName: "Snapshot",
-            resourceNamePlural: "Snapshots",
-            fetchResources: async () => {
-                const client = getClient();
-                const allSnapshots = [];
-                let count = 0;
-                const params = devboxId ? { devbox_id: devboxId } : {};
-                for await (const snapshot of client.devboxes.listDiskSnapshots(params)) {
-                    allSnapshots.push(snapshot);
-                    count++;
-                    if (count >= MAX_FETCH)
-                        break;
-                }
-                return allSnapshots;
-            },
-            columns: [
-                createTextColumn("id", "ID", (snapshot) => snapshot.id, {
-                    width: idWidth,
-                    color: colors.textDim,
-                    dimColor: false,
-                    bold: false,
-                }),
-                createTextColumn("name", "Name", (snapshot) => snapshot.name || "(unnamed)", {
-                    width: nameWidth,
-                }),
-                createTextColumn("devbox", "Devbox", (snapshot) => snapshot.source_devbox_id || "", {
-                    width: devboxWidth,
-                    color: colors.primary,
-                    dimColor: false,
-                    bold: false,
-                    visible: showDevboxId,
-                }),
-                createTextColumn("created", "Created", (snapshot) => snapshot.create_time_ms
-                    ? formatTimeAgo(snapshot.create_time_ms)
-                    : "", {
-                    width: timeWidth,
-                    color: colors.textDim,
-                    dimColor: false,
-                    bold: false,
-                }),
-            ],
-            keyExtractor: (snapshot) => snapshot.id,
-            emptyState: {
-                message: "No snapshots found. Try:",
-                command: "rli snapshot create <devbox-id>",
-            },
-            pageSize: PAGE_SIZE,
-            maxFetch: MAX_FETCH,
-            onBack: onBack,
-            onExit: onExit,
-            breadcrumbItems: [
-                { label: "Snapshots", active: !devboxId },
-                ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
-            ],
-        } }));
+    const showDevboxIdColumn = terminalWidth >= 100 && !devboxId;
+    // Fetch function for pagination hook
+    const fetchPage = React.useCallback(async (params) => {
+        const client = getClient();
+        const pageSnapshots = [];
+        // Build query params
+        const queryParams = {
+            limit: params.limit,
+        };
+        if (params.startingAt) {
+            queryParams.starting_after = params.startingAt;
+        }
+        if (devboxId) {
+            queryParams.devbox_id = devboxId;
+        }
+        // Fetch ONE page only
+        const page = (await client.devboxes.listDiskSnapshots(queryParams));
+        // Extract data and create defensive copies
+        if (page.snapshots && Array.isArray(page.snapshots)) {
+            page.snapshots.forEach((s) => {
+                pageSnapshots.push({
+                    id: s.id,
+                    name: s.name,
+                    status: s.status,
+                    create_time_ms: s.create_time_ms,
+                    source_devbox_id: s.source_devbox_id,
+                });
+            });
+        }
+        const result = {
+            items: pageSnapshots,
+            hasMore: page.has_more || false,
+            totalCount: page.total_count || pageSnapshots.length,
+        };
+        return result;
+    }, [devboxId]);
+    // Use the shared pagination hook
+    const { items: snapshots, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, } = useCursorPagination({
+        fetchPage,
+        pageSize: PAGE_SIZE,
+        getItemId: (snapshot) => snapshot.id,
+        pollInterval: 2000,
+        pollingEnabled: !showPopup && !executingOperation,
+        deps: [devboxId, PAGE_SIZE],
+    });
+    // Operations for snapshots
+    const operations = React.useMemo(() => [
+        {
+            key: "delete",
+            label: "Delete Snapshot",
+            color: colors.error,
+            icon: figures.cross,
+        },
+    ], []);
+    // Build columns
+    const columns = React.useMemo(() => [
+        createTextColumn("id", "ID", (snapshot) => snapshot.id, {
+            width: idWidth + 1,
+            color: colors.idColor,
+            dimColor: false,
+            bold: false,
+        }),
+        createTextColumn("name", "Name", (snapshot) => snapshot.name || "", {
+            width: nameWidth,
+        }),
+        createTextColumn("devbox", "Devbox", (snapshot) => snapshot.source_devbox_id || "", {
+            width: devboxWidth,
+            color: colors.idColor,
+            dimColor: false,
+            bold: false,
+            visible: showDevboxIdColumn,
+        }),
+        createTextColumn("created", "Created", (snapshot) => snapshot.create_time_ms ? formatTimeAgo(snapshot.create_time_ms) : "", {
+            width: timeWidth,
+            color: colors.textDim,
+            dimColor: false,
+            bold: false,
+        }),
+    ], [idWidth, nameWidth, devboxWidth, timeWidth, showDevboxIdColumn]);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Ensure selected index is within bounds
+    React.useEffect(() => {
+        if (snapshots.length > 0 && selectedIndex >= snapshots.length) {
+            setSelectedIndex(Math.max(0, snapshots.length - 1));
+        }
+    }, [snapshots.length, selectedIndex]);
+    const selectedSnapshotItem = snapshots[selectedIndex];
+    // Calculate pagination info for display
+    const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = startIndex + snapshots.length;
+    const executeOperation = async () => {
+        const client = getClient();
+        const snapshot = selectedSnapshot;
+        if (!snapshot)
+            return;
+        try {
+            setOperationLoading(true);
+            switch (executingOperation) {
+                case "delete":
+                    await client.devboxes.deleteDiskSnapshot(snapshot.id);
+                    setOperationResult(`Snapshot ${snapshot.id} deleted successfully`);
+                    break;
+            }
+        }
+        catch (err) {
+            setOperationError(err);
+        }
+        finally {
+            setOperationLoading(false);
+        }
+    };
+    useInput((input, key) => {
+        // Handle operation result display
+        if (operationResult || operationError) {
+            if (input === "q" || key.escape || key.return) {
+                setOperationResult(null);
+                setOperationError(null);
+                setExecutingOperation(null);
+                setSelectedSnapshot(null);
+            }
+            return;
+        }
+        // Handle popup navigation
+        if (showPopup) {
+            if (key.upArrow && selectedOperation > 0) {
+                setSelectedOperation(selectedOperation - 1);
+            }
+            else if (key.downArrow && selectedOperation < operations.length - 1) {
+                setSelectedOperation(selectedOperation + 1);
+            }
+            else if (key.return) {
+                setShowPopup(false);
+                const operationKey = operations[selectedOperation].key;
+                setSelectedSnapshot(selectedSnapshotItem);
+                setExecutingOperation(operationKey);
+                // Execute immediately after state update
+                setTimeout(() => executeOperation(), 0);
+            }
+            else if (key.escape || input === "q") {
+                setShowPopup(false);
+                setSelectedOperation(0);
+            }
+            else if (input === "d") {
+                // Delete hotkey
+                setShowPopup(false);
+                setSelectedSnapshot(selectedSnapshotItem);
+                setExecutingOperation("delete");
+                setTimeout(() => executeOperation(), 0);
+            }
+            return;
+        }
+        const pageSnapshots = snapshots.length;
+        // Handle list view navigation
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageSnapshots - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === "n" || key.rightArrow) &&
+            !loading &&
+            !navigating &&
+            hasMore) {
+            nextPage();
+            setSelectedIndex(0);
+        }
+        else if ((input === "p" || key.leftArrow) &&
+            !loading &&
+            !navigating &&
+            hasPrev) {
+            prevPage();
+            setSelectedIndex(0);
+        }
+        else if (input === "a" && selectedSnapshotItem) {
+            setShowPopup(true);
+            setSelectedOperation(0);
+        }
+        else if (key.escape) {
+            if (onBack) {
+                onBack();
+            }
+            else if (onExit) {
+                onExit();
+            }
+            else {
+                inkExit();
+            }
+        }
+    });
+    // Operation result display
+    if (operationResult || operationError) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots" },
+                        {
+                            label: selectedSnapshot?.name || selectedSnapshot?.id || "Snapshot",
+                        },
+                        { 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" }) })] }));
+    }
+    // Operation loading state
+    if (operationLoading && selectedSnapshot) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label ||
+            "Operation";
+        const messages = {
+            delete: "Deleting snapshot...",
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots" },
+                        { label: selectedSnapshot.name || selectedSnapshot.id },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
+    }
+    // Loading state
+    if (loading && snapshots.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots", active: !devboxId },
+                        ...(devboxId
+                            ? [{ label: `Devbox: ${devboxId}`, active: true }]
+                            : []),
+                    ] }), _jsx(SpinnerComponent, { message: "Loading snapshots..." })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots", active: !devboxId },
+                        ...(devboxId
+                            ? [{ label: `Devbox: ${devboxId}`, active: true }]
+                            : []),
+                    ] }), _jsx(ErrorMessage, { message: "Failed to list snapshots", error: error })] }));
+    }
+    // Empty state
+    if (snapshots.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Snapshots", active: !devboxId },
+                        ...(devboxId
+                            ? [{ label: `Devbox: ${devboxId}`, active: true }]
+                            : []),
+                    ] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.warning, children: figures.info }), _jsx(Text, { children: " No snapshots found. Try: " }), _jsxs(Text, { color: colors.primary, bold: true, children: ["rli snapshot create ", "<devbox-id>"] })] })] }));
+    }
+    // Main list view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "Snapshots", active: !devboxId },
+                    ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
+                ] }), !showPopup && (_jsx(Table, { data: snapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, title: `snapshots[${totalCount}]`, columns: columns })), !showPopup && (_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"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), navigating ? (_jsxs(Text, { color: colors.warning, children: [figures.pointer, " Loading page ", currentPage + 1, "..."] })) : (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] })] })), showPopup && selectedSnapshotItem && (_jsx(Box, { marginTop: 2, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedSnapshotItem, operations: operations.map((op) => ({
+                        key: op.key,
+                        label: op.label,
+                        color: op.color,
+                        icon: op.icon,
+                        shortcut: op.key === "delete" ? "d" : "",
+                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 };
 // Export the UI component for use in the main menu
 export { ListSnapshotsUI };
 export async function listSnapshots(options) {
-    const executor = createExecutor(options);
-    await executor.executeList(async () => {
-        const client = executor.getClient();
-        const params = options.devbox ? { devbox_id: options.devbox } : {};
-        return executor.fetchFromIterator(client.devboxes.listDiskSnapshots(params), {
-            limit: PAGE_SIZE,
-        });
-    }, () => _jsx(ListSnapshotsUI, { devboxId: options.devbox }), PAGE_SIZE);
+    try {
+        const client = getClient();
+        // Build query params
+        const queryParams = {
+            limit: DEFAULT_PAGE_SIZE,
+        };
+        if (options.devbox) {
+            queryParams.devbox_id = options.devbox;
+        }
+        // Fetch snapshots
+        const page = (await client.devboxes.listDiskSnapshots(queryParams));
+        // Extract snapshots array
+        const snapshots = page.snapshots || [];
+        output(snapshots, { format: options.output, defaultFormat: "json" });
+    }
+    catch (error) {
+        outputError("Failed to list snapshots", error);
+    }
 }

package/dist/commands/snapshot/status.js

@@ -1,37 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+/**
+ * Get snapshot status command
+ */
 import { getClient } from "../../utils/client.js";
-import { Banner } from "../../components/Banner.js";
-import { SpinnerComponent } from "../../components/Spinner.js";
-import { SuccessMessage } from "../../components/SuccessMessage.js";
-import { ErrorMessage } from "../../components/ErrorMessage.js";
-import { createExecutor } from "../../utils/CommandExecutor.js";
-const SnapshotStatusUI = ({ snapshotId }) => {
-    const [loading, setLoading] = React.useState(true);
-    const [result, setResult] = React.useState(null);
-    const [error, setError] = React.useState(null);
-    React.useEffect(() => {
-        const getSnapshotStatus = async () => {
-            try {
-                const client = getClient();
-                const status = await client.devboxes.diskSnapshots.queryStatus(snapshotId);
-                setResult(status);
-            }
-            catch (err) {
-                setError(err);
-            }
-            finally {
-                setLoading(false);
-            }
-        };
-        getSnapshotStatus();
-    }, [snapshotId]);
-    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Getting snapshot status..." }), result && (_jsx(SuccessMessage, { message: "Snapshot status retrieved", details: `Snapshot ID: ${result.id}\nStatus: ${result.status}\nCreated: ${new Date(result.createdAt).toLocaleString()}` })), error && (_jsx(ErrorMessage, { message: "Failed to get snapshot status", error: error }))] }));
-};
+import { output, outputError } from "../../utils/output.js";
 export async function getSnapshotStatus(options) {
-    const executor = createExecutor({ output: options.outputFormat });
-    await executor.executeAction(async () => {
-        const client = executor.getClient();
-        return client.devboxes.diskSnapshots.queryStatus(options.snapshotId);
-    }, () => _jsx(SnapshotStatusUI, { snapshotId: options.snapshotId }));
+    try {
+        const client = getClient();
+        const status = await client.devboxes.diskSnapshots.queryStatus(options.snapshotId);
+        output(status, { format: options.output, defaultFormat: "json" });
+    }
+    catch (error) {
+        outputError("Failed to get snapshot status", error);
+    }
 }

package/dist/components/ActionsPopup.js

@@ -2,44 +2,68 @@ 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 { isLightMode } 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 - inverted for contrast
+    // In light mode (light terminal), use black background for popup
+    // In dark mode (dark terminal), use white background for popup
+    const bgColor = isLightMode() ? chalk.bgBlack : chalk.bgWhite;
+    const textColor = isLightMode() ? chalk.white : chalk.black;
+    // 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 bgColor("  " + 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 = bgColor(" ".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 = isLightMode() ? chalk.cyan : chalk.blue;
+    const borderTop = bgColor(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
+    // CRITICAL: Validate contentWidth is a positive integer
+    const borderBottom = bgColor(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
+    const borderSide = (content) => {
+        return bgColor(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] || textColor;
+                        styledLine = `${textColor(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColor(`[${op.shortcut}]`)}`;
+                    }
+                    else {
+                        // Unselected: gray/dim text for everything
+                        const dimFn = isLightMode() ? chalk.gray : chalk.gray;
+                        styledLine = `${dimFn(pointer)} ${dimFn(op.icon)} ${dimFn(op.label)} ${dimFn(`[${op.shortcut}]`)}`;
+                    }
+                    return (_jsx(Text, { children: borderSide(createBgLine(styledLine, lineText)) }, op.key));
+                }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderSide(createBgLine(textColor(`${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`), `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`)) }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderBottom })] }) }));
 };

package/dist/components/Breadcrumb.js

@@ -2,57 +2,15 @@ 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 {
-                const currentVersion = process.env.npm_package_version || "0.0.1";
-                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 (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 }) => {
+export const Breadcrumb = ({ items }) => {
     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 (_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));
+                })] }) }));
+};