@runloop/rl-cli 0.1.1 → 0.2.0

package/dist/components/DevboxDetailPage.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, useStdout } from "ink";
+import { Box, Text, useInput } from "ink";
 import figures from "figures";
 import { Header } from "./Header.js";
 import { StatusBadge } from "./StatusBadge.js";
@@ -9,6 +9,9 @@ import { Breadcrumb } from "./Breadcrumb.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { getDevbox } from "../services/devboxService.js";
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -29,13 +32,53 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest, }) => {
-    const { stdout } = useStdout();
+export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
+    const isMounted = React.useRef(true);
+    // Track mounted state
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Local state for devbox data (updated by polling)
+    const [currentDevbox, setCurrentDevbox] = React.useState(initialDevbox);
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
     const [showActions, setShowActions] = React.useState(false);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
-    const selectedDevbox = initialDevbox;
+    // Background polling for devbox details
+    React.useEffect(() => {
+        // Skip polling if showing actions, detailed info, or not mounted
+        if (showActions || showDetailedInfo)
+            return;
+        const interval = setInterval(async () => {
+            // Only poll when not in actions/detail mode and component is mounted
+            if (!showActions && !showDetailedInfo && isMounted.current) {
+                try {
+                    const updatedDevbox = await getDevbox(initialDevbox.id);
+                    // Only update if still mounted
+                    if (isMounted.current) {
+                        setCurrentDevbox(updatedDevbox);
+                    }
+                }
+                catch {
+                    // Silently ignore polling errors to avoid disrupting user experience
+                }
+            }
+        }, 3000); // Poll every 3 seconds
+        return () => clearInterval(interval);
+    }, [initialDevbox.id, showActions, showDetailedInfo]);
+    // Calculate viewport for detailed info view:
+    // - Breadcrumb (3 lines + marginBottom): 4 lines
+    // - Header (title + underline + marginBottom): 3 lines
+    // - Status box (content + marginBottom): 2 lines
+    // - Content box (marginTop + border + paddingY top/bottom + border + marginBottom): 6 lines
+    // - Help bar (marginTop + content): 2 lines
+    // - Safety buffer: 1 line
+    // Total: 18 lines
+    const detailViewport = useViewportHeight({ overhead: 18, minHeight: 10 });
+    const selectedDevbox = currentDevbox;
     const allOperations = [
         {
             key: "logs",
@@ -123,14 +166,18 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             return op.key === "logs" || op.key === "delete";
         })
         : allOperations;
-    // Memoize time-based values to prevent re-rendering on every tick
-    const formattedCreateTime = React.useMemo(() => selectedDevbox.create_time_ms
+    const formattedCreateTime = selectedDevbox.create_time_ms
         ? new Date(selectedDevbox.create_time_ms).toLocaleString()
-        : "", [selectedDevbox.create_time_ms]);
-    const createTimeAgo = React.useMemo(() => selectedDevbox.create_time_ms
+        : "";
+    const createTimeAgo = selectedDevbox.create_time_ms
         ? formatTimeAgo(selectedDevbox.create_time_ms)
-        : "", [selectedDevbox.create_time_ms]);
+        : "";
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     useInput((input, key) => {
+        // Don't process input if unmounting
+        if (!isMounted.current)
+            return;
         // Skip input handling when in actions view
         if (showActions) {
             return;
@@ -161,7 +208,6 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
         }
         // Main view input handling
         if (input === "q" || key.escape) {
-            console.clear();
             onBack();
         }
         else if (input === "i") {
@@ -175,7 +221,6 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             setSelectedOperation(selectedOperation + 1);
         }
         else if (key.return || input === "a") {
-            console.clear();
             setShowActions(true);
         }
         else if (input) {
@@ -183,7 +228,6 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
             if (matchedOpIndex !== -1) {
                 setSelectedOperation(matchedOpIndex);
-                console.clear();
                 setShowActions(true);
             }
         }
@@ -217,10 +261,12 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
         const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
         // Core Information
         lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Devbox Details" }, "core-title"));
-        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "ID: ", selectedDevbox.id] }, "core-id"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", selectedDevbox.id] }, "core-id"));
         lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", selectedDevbox.name || "(none)"] }, "core-name"));
         lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", capitalize(selectedDevbox.status)] }, "core-status"));
-        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(selectedDevbox.create_time_ms).toLocaleString()] }, "core-created"));
+        if (selectedDevbox.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(selectedDevbox.create_time_ms).toLocaleString()] }, "core-created"));
+        }
         if (selectedDevbox.end_time_ms) {
             lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Ended: ", new Date(selectedDevbox.end_time_ms).toLocaleString()] }, "core-ended"));
         }
@@ -263,9 +309,14 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             }
             if (lp.launch_commands && lp.launch_commands.length > 0) {
                 lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Launch Commands:"] }, "launch-launch-cmds"));
-                lp.launch_commands.forEach((cmd, idx) => {
-                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", figures.pointer, " ", cmd] }, `launch-cmd-${idx}`));
-                });
+                // lp.launch_commands.forEach((cmd: string, idx: number) => {
+                //   lines.push(
+                //     <Text key={`launch-cmd-${idx}`} dimColor>
+                //       {" "}
+                //       {figures.pointer} {cmd}
+                //     </Text>,
+                //   );
+                // });
             }
             if (lp.required_services && lp.required_services.length > 0) {
                 lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Required Services: ", lp.required_services.join(", ")] }, "launch-services"));
@@ -285,10 +336,10 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
         if (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Source" }, "source-title"));
             if (selectedDevbox.blueprint_id) {
-                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Blueprint: ", selectedDevbox.blueprint_id] }, "source-bp"));
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", selectedDevbox.blueprint_id] }, "source-bp"));
             }
             if (selectedDevbox.snapshot_id) {
-                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Snapshot: ", selectedDevbox.snapshot_id] }, "source-snap"));
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", selectedDevbox.snapshot_id] }, "source-snap"));
             }
             lines.push(_jsx(Text, { children: " " }, "source-space"));
         }
@@ -297,7 +348,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Initiator" }, "init-title"));
             lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Type: ", selectedDevbox.initiator_type] }, "init-type"));
             if (selectedDevbox.initiator_id) {
-                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "ID: ", selectedDevbox.initiator_id] }, "init-id"));
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", selectedDevbox.initiator_id] }, "init-id"));
             }
             lines.push(_jsx(Text, { children: " " }, "init-space"));
         }
@@ -348,13 +399,12 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
             }, breadcrumbItems: [
                 { label: "Devboxes" },
                 { label: selectedDevbox.name || selectedDevbox.id },
-            ], initialOperation: selectedOp?.key, skipOperationsMenu: true, onSSHRequest: onSSHRequest }));
+            ], initialOperation: selectedOp?.key, skipOperationsMenu: true }));
     }
     // Detailed info mode - full screen
     if (showDetailedInfo) {
         const detailLines = buildDetailLines();
-        const terminalHeight = stdout?.rows || 30;
-        const viewportHeight = Math.max(10, terminalHeight - 12); // Reserve space for header/footer
+        const viewportHeight = detailViewport.viewportHeight;
         const maxScroll = Math.max(0, detailLines.length - viewportHeight);
         const actualScroll = Math.min(detailScroll, maxScroll);
         const visibleLines = detailLines.slice(actualScroll, actualScroll + viewportHeight);
@@ -364,7 +414,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
                         { label: "Devboxes" },
                         { label: selectedDevbox.name || selectedDevbox.id },
                         { label: "Full Details", active: true },
-                    ] }), _jsx(Header, { title: `${selectedDevbox.name || selectedDevbox.id} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: selectedDevbox.status }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: selectedDevbox.id })] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: colors.border, paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: visibleLines }), hasLess && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.primary, children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { marginTop: hasLess ? 0 : 1, children: _jsxs(Text, { color: colors.primary, children: [figures.arrowDown, " More below"] }) }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 [q or esc] Back to Details \u2022 Line", " ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of", " ", detailLines.length] }) })] }));
+                    ] }), _jsx(Header, { title: `${selectedDevbox.name || selectedDevbox.id} - Complete Information` }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsxs(Box, { marginBottom: 1, children: [_jsx(StatusBadge, { status: selectedDevbox.status }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.idColor, children: selectedDevbox.id })] }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: colors.border, paddingX: 2, paddingY: 1, children: _jsx(Box, { flexDirection: "column", children: visibleLines }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Scroll \u2022 Line ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, detailLines.length), " of", " ", detailLines.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 [q or esc] Back to Details"] })] })] }));
     }
     // Main detail view
     const lp = selectedDevbox.launch_parameters;
@@ -374,7 +424,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
                     { label: "Devboxes" },
                     { label: selectedDevbox.name || selectedDevbox.id, active: true },
-                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Box, { children: [_jsxs(Text, { color: colors.success, dimColor: true, children: ["Uptime:", " ", uptime < 60
+                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: colors.primary, bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: colors.idColor, children: [" \u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Box, { children: [_jsxs(Text, { color: colors.success, dimColor: true, children: ["Uptime:", " ", uptime < 60
                                         ? `${uptime}m`
                                         : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] }), lp?.keep_alive_time_seconds && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Keep-alive: ", Math.floor(lp.keep_alive_time_seconds / 60), "m"] }))] }))] }), _jsxs(Box, { flexDirection: "row", gap: 1, marginBottom: 1, children: [(lp?.resource_size_request ||
                         lp?.custom_cpu_cores ||
@@ -382,9 +432,7 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest,
                         lp?.custom_disk_size ||
                         lp?.architecture) && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.warning, bold: true, children: [figures.squareSmallFilled, " Resources"] }), _jsxs(Text, { dimColor: true, children: [lp?.resource_size_request && `${lp.resource_size_request}`, lp?.architecture && ` • ${lp.architecture}`, lp?.custom_cpu_cores && ` • ${lp.custom_cpu_cores}VCPU`, lp?.custom_gb_memory && ` • ${lp.custom_gb_memory}GB RAM`, lp?.custom_disk_size && ` • ${lp.custom_disk_size}GB DISC`] })] })), hasCapabilities && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.info, bold: true, children: [figures.tick, " Capabilities"] }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities
                                     .filter((c) => c !== "unknown")
-                                    .join(", ") })] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.secondary, bold: true, children: [figures.circleFilled, " Source"] }), _jsxs(Text, { dimColor: true, children: [selectedDevbox.blueprint_id &&
-                                        `BP: ${selectedDevbox.blueprint_id}`, selectedDevbox.snapshot_id &&
-                                        `Snap: ${selectedDevbox.snapshot_id}`] })] }))] }), selectedDevbox.metadata &&
+                                    .join(", ") })] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [_jsxs(Text, { color: colors.secondary, bold: true, children: [figures.circleFilled, " Source"] }), selectedDevbox.blueprint_id && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "BP: " }), _jsx(Text, { color: colors.idColor, children: selectedDevbox.blueprint_id })] })), selectedDevbox.snapshot_id && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Snap: " }), _jsx(Text, { color: colors.idColor, children: selectedDevbox.snapshot_id })] }))] }))] }), selectedDevbox.metadata &&
                 Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { marginBottom: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: colors.error, dimColor: true, children: selectedDevbox.failure_reason })] })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _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));

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,29 @@
+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";
+/**
+ * ErrorBoundary to catch and handle React errors gracefully
+ * Particularly useful for catching Yoga WASM layout errors
+ */
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("ErrorBoundary caught an error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { color: colors.error, bold: true, children: "\u26A0\uFE0F Rendering Error" }), _jsx(Text, { color: colors.textDim, children: this.state.error?.message || "An unexpected error occurred" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press Ctrl+C to exit" }) })] }));
+        }
+        return this.props.children;
+    }
+}

package/dist/components/ErrorMessage.js

@@ -2,6 +2,14 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
-export const ErrorMessage = ({ message, error, }) => {
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " ", message] }) }), error && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: error.message }) }))] }));
+export const ErrorMessage = ({ message, error }) => {
+    // Limit message length to prevent Yoga layout engine errors
+    const MAX_LENGTH = 500;
+    const truncatedMessage = message.length > MAX_LENGTH
+        ? message.substring(0, MAX_LENGTH) + "..."
+        : message;
+    const truncatedError = error?.message && error.message.length > MAX_LENGTH
+        ? error.message.substring(0, MAX_LENGTH) + "..."
+        : error?.message;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " ", truncatedMessage] }) }), truncatedError && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: truncatedError }) }))] }));
 };

package/dist/components/Header.js

@@ -1,7 +1,15 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
 import { Box, Text } from "ink";
 import { colors } from "../utils/theme.js";
-export const Header = React.memo(({ title, subtitle }) => {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: colors.accent3, children: ["\u258C", title] }), subtitle && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: subtitle })] }))] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: colors.accent3, children: "─".repeat(title.length + 1) }) })] }));
-});
+export const Header = ({ title, subtitle }) => {
+    // Limit lengths to prevent Yoga layout engine errors
+    const MAX_TITLE_LENGTH = 100;
+    const MAX_SUBTITLE_LENGTH = 150;
+    const truncatedTitle = title.length > MAX_TITLE_LENGTH
+        ? title.substring(0, MAX_TITLE_LENGTH) + "..."
+        : title;
+    const truncatedSubtitle = subtitle && subtitle.length > MAX_SUBTITLE_LENGTH
+        ? subtitle.substring(0, MAX_SUBTITLE_LENGTH) + "..."
+        : subtitle;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: colors.accent3, children: ["\u258C", truncatedTitle] }), truncatedSubtitle && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: truncatedSubtitle })] }))] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: colors.accent3, children: "─".repeat(Math.max(0, Math.floor(Math.min(truncatedTitle.length + 1, MAX_TITLE_LENGTH + 1)))) }) })] }));
+};

package/dist/components/InteractiveSpawn.js

@@ -0,0 +1,94 @@
+/**
+ * InteractiveSpawn - Custom component for running interactive subprocesses
+ * Based on Ink's subprocess-output example pattern
+ * Handles proper TTY allocation for interactive commands like SSH
+ */
+import React from "react";
+import { spawn } from "child_process";
+import { exitAlternateScreenBuffer, enterAlternateScreenBuffer, } from "../utils/screen.js";
+/**
+ * Releases terminal control from Ink so a subprocess can take over.
+ * This directly manipulates stdin to bypass Ink's input handling.
+ */
+function releaseTerminal() {
+    // Pause stdin to stop Ink from reading input
+    process.stdin.pause();
+    // Disable raw mode so the subprocess can control terminal echo and line buffering
+    // SSH needs to set its own terminal modes
+    if (process.stdin.isTTY && process.stdin.setRawMode) {
+        process.stdin.setRawMode(false);
+    }
+}
+/**
+ * Restores terminal control to Ink after subprocess exits.
+ */
+function restoreTerminal() {
+    // Re-enable raw mode for Ink's input handling
+    if (process.stdin.isTTY && process.stdin.setRawMode) {
+        process.stdin.setRawMode(true);
+    }
+    // Resume stdin so Ink can read input again
+    process.stdin.resume();
+}
+export const InteractiveSpawn = ({ command, args, onExit, onError, }) => {
+    const processRef = React.useRef(null);
+    const hasSpawnedRef = React.useRef(false);
+    // Use a stable string representation of args for dependency comparison
+    const argsKey = React.useMemo(() => JSON.stringify(args), [args]);
+    React.useEffect(() => {
+        // Only spawn once - prevent re-spawning if component re-renders
+        if (hasSpawnedRef.current) {
+            return;
+        }
+        hasSpawnedRef.current = true;
+        // Exit alternate screen so subprocess gets a clean terminal
+        exitAlternateScreenBuffer();
+        // Release terminal from Ink's control
+        releaseTerminal();
+        // Small delay to ensure terminal state is fully released
+        setTimeout(() => {
+            // Spawn the process with inherited stdio for proper TTY allocation
+            const child = spawn(command, args, {
+                stdio: "inherit", // This allows the process to use the terminal directly
+                shell: false,
+            });
+            processRef.current = child;
+            // Handle process exit
+            child.on("exit", (code, _signal) => {
+                processRef.current = null;
+                hasSpawnedRef.current = false;
+                // Restore terminal control to Ink
+                restoreTerminal();
+                // Re-enter alternate screen after process exits
+                enterAlternateScreenBuffer();
+                if (onExit) {
+                    onExit(code);
+                }
+            });
+            // Handle spawn errors
+            child.on("error", (error) => {
+                processRef.current = null;
+                hasSpawnedRef.current = false;
+                // Restore terminal control to Ink
+                restoreTerminal();
+                // Re-enter alternate screen on error
+                enterAlternateScreenBuffer();
+                if (onError) {
+                    onError(error);
+                }
+            });
+        }, 50);
+        // Cleanup function - kill the process if component unmounts
+        return () => {
+            if (processRef.current && !processRef.current.killed) {
+                processRef.current.kill("SIGTERM");
+            }
+            // Restore terminal state on cleanup
+            restoreTerminal();
+            hasSpawnedRef.current = false;
+        };
+    }, [command, argsKey, onExit, onError]);
+    // This component doesn't render anything - it just manages the subprocess
+    // The subprocess output goes directly to the terminal via stdio: "inherit"
+    return null;
+};

package/dist/components/MainMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 figures from "figures";
@@ -6,34 +6,38 @@ import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { VERSION } from "../cli.js";
 import { colors } from "../utils/theme.js";
-export const MainMenu = React.memo(({ onSelect }) => {
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+const menuItems = [
+    {
+        key: "devboxes",
+        label: "Devboxes",
+        description: "Manage cloud development environments",
+        icon: "◉",
+        color: colors.accent1,
+    },
+    {
+        key: "blueprints",
+        label: "Blueprints",
+        description: "Create and manage devbox templates",
+        icon: "▣",
+        color: colors.accent2,
+    },
+    {
+        key: "snapshots",
+        label: "Snapshots",
+        description: "Save and restore devbox states",
+        icon: "◈",
+        color: colors.accent3,
+    },
+];
+export const MainMenu = ({ onSelect }) => {
     const { exit } = useApp();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
-    // Calculate terminal height once at mount and memoize
-    const terminalHeight = React.useMemo(() => process.stdout.rows || 24, []);
-    const menuItems = React.useMemo(() => [
-        {
-            key: "devboxes",
-            label: "Devboxes",
-            description: "Manage cloud development environments",
-            icon: "◉",
-            color: colors.accent1,
-        },
-        {
-            key: "blueprints",
-            label: "Blueprints",
-            description: "Create and manage devbox templates",
-            icon: "▣",
-            color: colors.accent2,
-        },
-        {
-            key: "snapshots",
-            label: "Snapshots",
-            description: "Save and restore devbox states",
-            icon: "◈",
-            color: colors.accent3,
-        },
-    ], []);
+    // Use centralized viewport hook for consistent layout
+    const { terminalHeight } = useViewportHeight({ overhead: 0 });
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     useInput((input, key) => {
         if (key.upArrow && selectedIndex > 0) {
             setSelectedIndex(selectedIndex - 1);
@@ -58,15 +62,15 @@ export const MainMenu = React.memo(({ onSelect }) => {
         }
     });
     // Use compact layout if terminal height is less than 20 lines (memoized)
-    const useCompactLayout = React.useMemo(() => terminalHeight < 20, [terminalHeight]);
+    const useCompactLayout = terminalHeight < 20;
     if (useCompactLayout) {
-        return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_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) => {
+        return (_jsxs(Box, { flexDirection: "column", children: [_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 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(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Box, { flexShrink: 0, children: _jsx(Banner, {}) }), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }] }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
-                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: isSelected ? "round" : "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, 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));
+                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: figures.pointer }), _jsx(Text, { children: " " })] })), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
                     })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));
-});
+};

package/dist/components/MetadataDisplay.js

@@ -1,8 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { Badge } from "@inkjs/ui";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
+const renderKeyValueBadge = (keyText, value, color) => (_jsxs(Box, { borderStyle: "round", borderColor: color, paddingX: 1, marginRight: 1, children: [_jsx(Text, { color: color, bold: true, children: keyText }), _jsx(Text, { color: color, children: ": " }), _jsx(Text, { color: color, children: value })] }));
 // Generate color for each key based on hash
 const getColorForKey = (key, index) => {
     const colorList = [
@@ -20,10 +20,10 @@ export const MetadataDisplay = ({ metadata, title = "Metadata", showBorder = fal
     if (entries.length === 0) {
         return null;
     }
-    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.info, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
+    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 1, children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.accent3, bold: true, children: [figures.identical, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
                 const color = getColorForKey(key, index);
                 const isSelected = selectedKey === key;
-                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " "] })), _jsx(Badge, { color: isSelected ? colors.primary : color, children: `${key}: ${value}` })] }, key));
+                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: colors.primary, bold: true, children: [figures.pointer, " "] })), renderKeyValueBadge(key, value, isSelected ? colors.primary : color)] }, key));
             })] }));
     if (showBorder) {
         return (_jsx(Box, { borderStyle: "round", borderColor: colors.accent3, paddingX: 2, paddingY: 1, flexDirection: "column", children: content }));

package/dist/components/OperationsMenu.js

@@ -6,7 +6,7 @@ import { colors } from "../utils/theme.js";
  * Reusable operations menu component for detail pages
  * Displays a list of available operations with keyboard navigation
  */
-export const OperationsMenu = ({ operations, selectedIndex, onNavigate, onSelect, onBack, additionalActions = [], }) => {
+export const OperationsMenu = ({ operations, selectedIndex, onNavigate: _onNavigate, onSelect: _onSelect, onBack: _onBack, additionalActions = [], }) => {
     return (_jsxs(_Fragment, { children: [_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 === selectedIndex;
                             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] })] }, op.key));

package/dist/components/ResourceActionsMenu.js

@@ -8,8 +8,8 @@ import { ActionsPopup } from "./ActionsPopup.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 export const ResourceActionsMenu = (props) => {
     if (props.resourceType === "devbox") {
-        const { resource, onBack, breadcrumbItems, initialOperation, initialOperationIndex, skipOperationsMenu, onSSHRequest, } = props;
-        return (_jsx(DevboxActionsMenu, { devbox: resource, onBack: onBack, breadcrumbItems: breadcrumbItems, initialOperation: initialOperation, initialOperationIndex: initialOperationIndex, skipOperationsMenu: skipOperationsMenu, onSSHRequest: onSSHRequest }));
+        const { resource, onBack, breadcrumbItems, initialOperation, initialOperationIndex, skipOperationsMenu, } = props;
+        return (_jsx(DevboxActionsMenu, { devbox: resource, onBack: onBack, breadcrumbItems: breadcrumbItems, initialOperation: initialOperation, initialOperationIndex: initialOperationIndex, skipOperationsMenu: skipOperationsMenu }));
     }
     // Blueprint generic actions menu
     const { resource, onBack, breadcrumbItems = [
@@ -101,10 +101,10 @@ export const ResourceActionsMenu = (props) => {
     // Screens
     if (operationResult || operationError) {
         const label = operations.find((o) => o.key === executingOperation)?.label;
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: operationError ? colors.error : colors.success, children: operationError ? `${label} failed` : `${label} completed` }), !!operationResult && (_jsx(Text, { color: colors.textDim, dimColor: true, children: operationResult })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointerSmall, " Press [Enter] to go back"] })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: operationError ? colors.error : colors.success, children: operationError ? `${label} failed` : `${label} completed` }), !!operationResult && (_jsx(Text, { color: colors.textDim, dimColor: true, children: operationResult })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.pointerSmall, " Press [Enter] to go back"] })] })] }));
     }
     if (executingOperation && selectedOp?.needsInput) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems, showVersionCheck: true }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, children: [selectedOp.inputPrompt || "Input:", " "] }), _jsxs(Text, { children: [" ", operationInput] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: colors.textDim, children: [selectedOp.inputPrompt || "Input:", " "] }), _jsxs(Text, { children: [" ", operationInput] }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" })] })] }));
     }
     // Operations menu
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(ActionsPopup, { devbox: resource, operations: operations.map((op) => ({