@runloop/rl-cli 1.2.0 → 1.3.0

package/dist/commands/snapshot/list.js

@@ -8,6 +8,7 @@ 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 { NavigationTips } from "../../components/NavigationTips.js";
 import { Table, createTextColumn } from "../../components/Table.js";
 import { ActionsPopup } from "../../components/ActionsPopup.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
@@ -18,6 +19,7 @@ import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
 import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
 import { useNavigation } from "../../store/navigationStore.js";
+import { ConfirmationPrompt } from "../../components/ConfirmationPrompt.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const { exit: inkExit } = useApp();
@@ -32,6 +34,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const [operationError, setOperationError] = React.useState(null);
     const [operationLoading, setOperationLoading] = React.useState(false);
     const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     // Calculate overhead for viewport height
     const overhead = 13;
     const { viewportHeight, terminalWidth } = useViewportHeight({
@@ -40,11 +43,16 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     });
     const PAGE_SIZE = viewportHeight;
     // All width constants
+    const fixedWidth = 6; // border + padding
     const idWidth = 25;
-    const nameWidth = Math.max(15, terminalWidth >= 120 ? 30 : 25);
     const devboxWidth = 15;
     const timeWidth = 20;
     const showDevboxIdColumn = terminalWidth >= 100 && !devboxId;
+    // Name width uses remaining space after fixed columns
+    const baseWidth = fixedWidth + idWidth + timeWidth;
+    const optionalWidth = showDevboxIdColumn ? devboxWidth : 0;
+    const remainingWidth = terminalWidth - baseWidth - optionalWidth;
+    const nameWidth = Math.min(80, Math.max(15, remainingWidth));
     // Fetch function for pagination hook
     const fetchPage = React.useCallback(async (params) => {
         const client = getClient();
@@ -81,16 +89,25 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         return result;
     }, [devboxId]);
     // Use the shared pagination hook
-    const { items: snapshots, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, } = useCursorPagination({
+    const { items: snapshots, loading, navigating, error, currentPage, hasMore, hasPrev, totalCount, nextPage, prevPage, refresh, } = useCursorPagination({
         fetchPage,
         pageSize: PAGE_SIZE,
         getItemId: (snapshot) => snapshot.id,
         pollInterval: 2000,
-        pollingEnabled: !showPopup && !executingOperation && !showCreateDevbox,
+        pollingEnabled: !showPopup &&
+            !executingOperation &&
+            !showCreateDevbox &&
+            !showDeleteConfirm,
         deps: [devboxId, PAGE_SIZE],
     });
     // Operations for snapshots
     const operations = React.useMemo(() => [
+        {
+            key: "view_details",
+            label: "View Details",
+            color: colors.primary,
+            icon: figures.pointer,
+        },
         {
             key: "create_devbox",
             label: "Create Devbox from Snapshot",
@@ -142,14 +159,13 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
     const startIndex = currentPage * PAGE_SIZE;
     const endIndex = startIndex + snapshots.length;
-    const executeOperation = async () => {
+    const executeOperation = async (snapshot, operationKey) => {
         const client = getClient();
-        const snapshot = selectedSnapshot;
         if (!snapshot)
             return;
         try {
             setOperationLoading(true);
-            switch (executingOperation) {
+            switch (operationKey) {
                 case "delete":
                     await client.devboxes.deleteDiskSnapshot(snapshot.id);
                     setOperationResult(`Snapshot ${snapshot.id} deleted successfully`);
@@ -167,10 +183,16 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         // Handle operation result display
         if (operationResult || operationError) {
             if (input === "q" || key.escape || key.return) {
+                const wasDelete = executingOperation === "delete";
+                const hadError = operationError !== null;
                 setOperationResult(null);
                 setOperationError(null);
                 setExecutingOperation(null);
                 setSelectedSnapshot(null);
+                // Refresh the list after delete to show updated data
+                if (wasDelete && !hadError) {
+                    setTimeout(() => refresh(), 0);
+                }
             }
             return;
         }
@@ -189,17 +211,34 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             else if (key.return) {
                 setShowPopup(false);
                 const operationKey = operations[selectedOperation].key;
-                if (operationKey === "create_devbox") {
+                if (operationKey === "view_details") {
+                    navigate("snapshot-detail", {
+                        snapshotId: selectedSnapshotItem.id,
+                    });
+                }
+                else if (operationKey === "create_devbox") {
                     setSelectedSnapshot(selectedSnapshotItem);
                     setShowCreateDevbox(true);
                 }
+                else if (operationKey === "delete") {
+                    // Show delete confirmation
+                    setSelectedSnapshot(selectedSnapshotItem);
+                    setShowDeleteConfirm(true);
+                }
                 else {
                     setSelectedSnapshot(selectedSnapshotItem);
                     setExecutingOperation(operationKey);
-                    // Execute immediately after state update
-                    setTimeout(() => executeOperation(), 0);
+                    // Execute immediately with values passed directly
+                    executeOperation(selectedSnapshotItem, operationKey);
                 }
             }
+            else if (input === "v" && selectedSnapshotItem) {
+                // View details hotkey
+                setShowPopup(false);
+                navigate("snapshot-detail", {
+                    snapshotId: selectedSnapshotItem.id,
+                });
+            }
             else if (key.escape || input === "q") {
                 setShowPopup(false);
                 setSelectedOperation(0);
@@ -211,11 +250,10 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                 setShowCreateDevbox(true);
             }
             else if (input === "d") {
-                // Delete hotkey
+                // Delete hotkey - show confirmation
                 setShowPopup(false);
                 setSelectedSnapshot(selectedSnapshotItem);
-                setExecutingOperation("delete");
-                setTimeout(() => executeOperation(), 0);
+                setShowDeleteConfirm(true);
             }
             return;
         }
@@ -241,6 +279,12 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             prevPage();
             setSelectedIndex(0);
         }
+        else if (key.return && selectedSnapshotItem) {
+            // Enter key navigates to detail view
+            navigate("snapshot-detail", {
+                snapshotId: selectedSnapshotItem.id,
+            });
+        }
         else if (input === "a" && selectedSnapshotItem) {
             setShowPopup(true);
             setSelectedOperation(0);
@@ -267,7 +311,22 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                             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" }) })] }));
+                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Continue" }] })] }));
+    }
+    // Delete confirmation
+    if (showDeleteConfirm && selectedSnapshot) {
+        return (_jsx(ConfirmationPrompt, { title: "Delete Snapshot", message: `Are you sure you want to delete "${selectedSnapshot.name || selectedSnapshot.id}"?`, details: "This action cannot be undone.", breadcrumbItems: [
+                { label: "Snapshots" },
+                { label: selectedSnapshot.name || selectedSnapshot.id },
+                { label: "Delete", active: true },
+            ], onConfirm: () => {
+                setShowDeleteConfirm(false);
+                setExecutingOperation("delete");
+                executeOperation(selectedSnapshot, "delete");
+            }, onCancel: () => {
+                setShowDeleteConfirm(false);
+                setSelectedSnapshot(null);
+            } }));
     }
     // Operation loading state
     if (operationLoading && selectedSnapshot) {
@@ -311,30 +370,32 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                             : []),
                     ] }), _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) => ({
+                ] }), !showPopup && (_jsx(Table, { data: snapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, title: `snapshots[${totalCount}]`, columns: columns, emptyState: _jsxs(Text, { color: colors.textDim, children: [figures.info, " No snapshots found. Try: rli snapshot create", " ", "<devbox-id>"] }) })), !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 === "create_devbox"
-                            ? "c"
-                            : 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"] })] })] }));
+                        shortcut: op.key === "view_details"
+                            ? "v"
+                            : op.key === "create_devbox"
+                                ? "c"
+                                : op.key === "delete"
+                                    ? "d"
+                                    : "",
+                    })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsx(NavigationTips, { showArrows: true, tips: [
+                    {
+                        icon: `${figures.arrowLeft}${figures.arrowRight}`,
+                        label: "Page",
+                        condition: hasMore || hasPrev,
+                    },
+                    { key: "Enter", label: "Details" },
+                    { key: "a", label: "Actions" },
+                    { key: "Esc", label: "Back" },
+                ] })] }));
 };
 // Export the UI component for use in the main menu
 export { ListSnapshotsUI };

package/dist/components/Banner.js

@@ -1,14 +1,115 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { Box } from "ink";
+import React, { useState, useEffect, useRef } from "react";
+import { Box, Text } 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
+    "#035544", //
+    "#036050", //
+    "#046C54", //
+    "#04765C", //
+    "#058164", //
+    "#058C6D", //
+    "#059669", // Deep emerald
+    "#08A076", //
+    "#0BA67B", //
+    "#0EAE84", //
+    "#10B981", // Runloop success green
+    "#14C793", // Lighter emerald
+    "#1CD7A7", //
+    "#24E0B5", //
+    "#30EAC0", //
+    "#40F5CC", // Very bright emerald
+    "#30EAC0", //
+    "#24E0B5", //
+    "#1CD7A7", //
+    "#14C793", // Lighter emerald
+    "#10B981", // Runloop success green
+    "#0EAE84", //
+    "#0BA67B", //
+    "#08A076", //
+    "#059669", // Deep emerald
+    "#058C6D", //
+    "#058164", //
+    "#04765C", //
+    "#046C54", //
+    "#036050", //
+    "#035544", //
+];
+const LIGHT_SHIMMER_COLORS = [
+    "#034D3A", // Very very deep emerald
+    "#045540", //
+    "#055D46", //
+    "#065F46", //
+    "#046A50", //
+    "#047857", // Deep emerald
+    "#058360", //
+    "#058C68", //
+    "#059669", // Runloop light success green
+    "#08A076", //
+    "#0BA67B", //
+    "#0EAE84", //
+    "#10B981", // Medium emerald
+    "#14C793", // Lighter emerald
+    "#18D29F", //
+    "#1CDCA9", //
+    "#20E5B3", //
+    "#1CDCA9", //
+    "#18D29F", //
+    "#14C793", // Lighter emerald
+    "#10B981", // Medium emerald
+    "#0EAE84", //
+    "#0BA67B", //
+    "#08A076", //
+    "#059669", // Runloop light success green
+    "#058C68", //
+    "#058360", //
+    "#047857", // Deep emerald
+    "#046A50", //
+    "#065F46", //
+    "#055D46", //
+    "#045540", //
+];
+// Pre-compute all rotated color frames at module load time
+const precomputeFrames = (colors) => {
+    return colors.map((_, i) => [...colors.slice(i), ...colors.slice(0, i)]);
+};
+// Use every 2nd color to reduce frame count and minimize flickering
+const DARK_FRAMES = precomputeFrames(DARK_SHIMMER_COLORS.filter((_, i) => i % 2 === 0));
+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;
+// Animation interval in ms
+const SHIMMER_INTERVAL = 400;
 export const Banner = React.memo(() => {
-    // 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" }) }) }));
+    const [frameIndex, setFrameIndex] = useState(0);
+    const frames = isLightMode() ? LIGHT_FRAMES : DARK_FRAMES;
+    const { terminalWidth } = useViewportHeight();
+    const timeoutRef = useRef(null);
+    // Determine if we should show compact mode
+    const isCompact = terminalWidth < MIN_WIDTH_FOR_BIG_BANNER;
+    useEffect(() => {
+        const tick = () => {
+            setFrameIndex((prev) => (prev + 1) % frames.length);
+            timeoutRef.current = setTimeout(tick, SHIMMER_INTERVAL);
+        };
+        timeoutRef.current = setTimeout(tick, SHIMMER_INTERVAL);
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [frames.length]);
+    // Use pre-computed frame - no array operations during render
+    const currentColors = frames[frameIndex];
+    // Compact banner for narrow terminals
+    if (isCompact) {
+        return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", paddingX: 1, children: _jsx(Gradient, { colors: currentColors, children: _jsx(Text, { bold: true, children: "\u25C6 RUNLOOP.ai" }) }) }));
+    }
+    // Full banner for wide terminals
+    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", paddingX: 1, children: _jsx(Gradient, { colors: currentColors, children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
 });

package/dist/components/ConfirmationPrompt.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ConfirmationPrompt - Reusable confirmation dialog for destructive actions
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { Header } from "./Header.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { colors } from "../utils/theme.js";
+export const ConfirmationPrompt = ({ title, message, details, breadcrumbItems, onConfirm, onCancel, confirmLabel = "Yes, delete", cancelLabel = "No, cancel", confirmColor = colors.error, }) => {
+    // Default to "No" (index 1)
+    const [selectedIndex, setSelectedIndex] = React.useState(1);
+    useInput((input, key) => {
+        if (key.upArrow || key.leftArrow) {
+            setSelectedIndex(0);
+        }
+        else if (key.downArrow || key.rightArrow) {
+            setSelectedIndex(1);
+        }
+        else if (key.return) {
+            if (selectedIndex === 0) {
+                onConfirm();
+            }
+            else {
+                onCancel();
+            }
+        }
+        else if (key.escape || input === "q") {
+            onCancel();
+        }
+        else if (input === "y" || input === "Y") {
+            onConfirm();
+        }
+        else if (input === "n" || input === "N") {
+            onCancel();
+        }
+    });
+    return (_jsxs(_Fragment, { children: [breadcrumbItems && _jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Header, { title: title }), _jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.warning, children: [figures.warning, " ", message] }) }), details && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: details }) })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: selectedIndex === 0 ? confirmColor : colors.textDim, children: [selectedIndex === 0 ? figures.pointer : " ", " "] }), _jsx(Text, { color: selectedIndex === 0 ? confirmColor : colors.textDim, bold: selectedIndex === 0, children: confirmLabel }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[y]"] })] }), _jsxs(Box, { children: [_jsxs(Text, { color: selectedIndex === 1 ? colors.success : colors.textDim, children: [selectedIndex === 1 ? figures.pointer : " ", " "] }), _jsx(Text, { color: selectedIndex === 1 ? colors.success : colors.textDim, bold: selectedIndex === 1, children: cancelLabel }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[n]"] })] })] }), _jsx(NavigationTips, { showArrows: true, arrowLabel: "Select", marginTop: 1, paddingX: 0, tips: [
+                            { key: "Enter", label: "Confirm" },
+                            { key: "y/n", label: "Quick select" },
+                            { key: "Esc", label: "Cancel" },
+                        ] })] })] }));
+};

package/dist/components/DevboxActionsMenu.js

@@ -8,6 +8,8 @@ import { SpinnerComponent } from "./Spinner.js";
 import { ErrorMessage } from "./ErrorMessage.js";
 import { SuccessMessage } from "./SuccessMessage.js";
 import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { ConfirmationPrompt } from "./ConfirmationPrompt.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useNavigation } from "../store/navigationStore.js";
@@ -27,6 +29,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
     const [operationError, setOperationError] = React.useState(null);
     const [execScroll, setExecScroll] = React.useState(0);
     const [copyStatus, setCopyStatus] = React.useState(null);
+    const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     // Calculate viewport for exec output:
     // - Breadcrumb (3 lines + marginBottom): 4 lines
     // - Command header (border + 2 content + border + marginBottom): 5 lines
@@ -144,15 +147,22 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
             return op.key === "logs" || op.key === "delete";
         })
         : allOperations;
-    // Auto-execute operations that don't need input
+    // Auto-execute operations that don't need input (except delete which needs confirmation)
     React.useEffect(() => {
-        const autoExecuteOps = ["delete", "ssh", "logs", "suspend", "resume"];
+        const autoExecuteOps = ["ssh", "logs", "suspend", "resume"];
         if (executingOperation &&
             autoExecuteOps.includes(executingOperation) &&
             !loading &&
             devbox) {
             executeOperation();
         }
+        // Show confirmation for delete
+        if (executingOperation === "delete" &&
+            !loading &&
+            devbox &&
+            !showDeleteConfirm) {
+            setShowDeleteConfirm(true);
+        }
     }, [executingOperation]);
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
@@ -415,6 +425,21 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
         }
     };
     const operationLabel = operations.find((o) => o.key === executingOperation)?.label || "Operation";
+    // Show delete confirmation
+    if (showDeleteConfirm) {
+        return (_jsx(ConfirmationPrompt, { title: "Shutdown Devbox", message: `Are you sure you want to shutdown "${devbox.name || devbox.id}"?`, details: "The devbox will be terminated and all unsaved data will be lost.", breadcrumbItems: [
+                ...breadcrumbItems.slice(0, -1),
+                { label: devbox.name || devbox.id },
+                { label: "Shutdown", active: true },
+            ], confirmLabel: "Yes, shutdown", onConfirm: () => {
+                setShowDeleteConfirm(false);
+                executeOperation();
+            }, onCancel: () => {
+                setShowDeleteConfirm(false);
+                setExecutingOperation(null);
+                onBack();
+            } }));
+    }
     // Operation result display
     if (operationResult || operationError) {
         // Check for custom exec rendering
@@ -445,7 +470,12 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                                 const isStderr = actualIndex >= stdoutLines.length;
                                 const lineColor = isStderr ? colors.error : colors.text;
                                 return (_jsx(Box, { children: _jsx(Text, { color: lineColor, children: line }) }, index));
-                            })] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", allLines.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "lines"] }), allLines.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, allLines.length), " of", " ", allLines.length] }), hasLess && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] })), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), stdout && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.success, dimColor: true, children: ["stdout: ", stdoutLines.length, " lines"] })] })), stderr && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.error, dimColor: true, children: ["stderr: ", stderrLines.length, " lines"] })] })), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [g] Top \u2022 [G] Bottom \u2022 [c] Copy \u2022 [Enter], [q], or [esc] Back"] }) })] }));
+                            })] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", allLines.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "lines"] }), allLines.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, allLines.length), " of", " ", allLines.length] }), hasLess && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] })), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), stdout && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.success, dimColor: true, children: ["stdout: ", stdoutLines.length, " lines"] })] })), stderr && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.error, dimColor: true, children: ["stderr: ", stderrLines.length, " lines"] })] })), 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: "c", label: "Copy" },
+                            { key: "Enter/q/esc", label: "Back" },
+                        ] })] }));
         }
         // Check for custom logs rendering
         if (operationResult &&
@@ -470,7 +500,7 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                     }
                 }, title: "Logs" }));
         }
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: operationLabel, active: true }] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [...breadcrumbItems, { label: operationLabel, active: true }] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && (_jsx(ErrorMessage, { message: "Operation failed", error: operationError })), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Continue" }] })] }));
     }
     // Operation input mode
     if (executingOperation && devbox) {
@@ -514,14 +544,20 @@ export const DevboxActionsMenu = ({ devbox, onBack, breadcrumbItems = [
                                         ? "/path/to/file"
                                         : executingOperation === "tunnel"
                                             ? "8080"
-                                            : "my-snapshot" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+                                            : "my-snapshot" }) }), _jsx(NavigationTips, { tips: [
+                                { key: "Enter", label: "Execute" },
+                                { key: "q/esc", label: "Cancel" },
+                            ] })] })] }));
     }
     // Operations selection mode - only show if not skipping
     if (!skipOperationsMenu || !executingOperation) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", 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(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022 [q] Back"] }) })] }));
+                            }) })] }), _jsx(NavigationTips, { showArrows: true, paddingX: 0, tips: [
+                        { key: "Enter", label: "Select" },
+                        { key: "q", label: "Back" },
+                    ] })] }));
     }
     // If skipOperationsMenu is true and executingOperation is set, show loading while it executes
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(SpinnerComponent, { message: "Loading..." })] }));

package/dist/components/DevboxCard.js

@@ -14,7 +14,7 @@ export const DevboxCard = ({ id, name, status, createdAt, }) => {
             case "suspended":
                 return { icon: figures.circle, color: colors.textDim };
             case "failed":
-                return { icon: figures.cross, color: colors.error };
+                return { icon: figures.warning, color: colors.error };
             default:
                 return { icon: figures.circle, color: colors.textDim };
         }