@runloop/rl-cli 0.1.2 → 0.3.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,104 @@
+/**
+ * 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 { showCursor, clearScreen, enterAlternateScreenBuffer, } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.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 (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.stdin.setRawMode(false);
+    }
+    // Reset terminal attributes (SGR reset) - clears any colors/styles Ink may have set
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("\x1b[0m");
+    }
+    // Show cursor - Ink may have hidden it, and subprocesses expect it to be visible
+    showCursor();
+    // Flush stdout to ensure all pending writes are complete before handoff
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("");
+    }
+}
+/**
+ * Restores terminal control to Ink after subprocess exits.
+ */
+function restoreTerminal() {
+    // Clear the screen to remove subprocess output before Ink renders
+    clearScreen();
+    // Re-enter alternate screen buffer for Ink's fullscreen UI
+    enterAlternateScreenBuffer();
+    // Re-enable raw mode for Ink's input handling
+    if (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.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;
+        // Release terminal from Ink's control
+        releaseTerminal();
+        // Use setImmediate to ensure terminal state is released without noticeable delay
+        // This is faster than setTimeout and ensures the event loop has processed the release
+        setImmediate(() => {
+            // 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();
+                if (onExit) {
+                    onExit(code);
+                }
+            });
+            // Handle spawn errors
+            child.on("error", (error) => {
+                processRef.current = null;
+                hasSpawnedRef.current = false;
+                // Restore terminal control to Ink
+                restoreTerminal();
+                if (onError) {
+                    onError(error);
+                }
+            });
+        });
+        // 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/LogsViewer.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * LogsViewer - Shared component for viewing logs (devbox or blueprint)
+ * Extracted from DevboxActionsMenu for reuse
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { parseAnyLogEntry } from "../utils/logFormatter.js";
+export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: true }], onBack, title = "Logs", }) => {
+    const [logsWrapMode, setLogsWrapMode] = React.useState(false);
+    const [logsScroll, setLogsScroll] = React.useState(0);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    // Calculate viewport for logs output:
+    // - Breadcrumb (3 lines + marginBottom): 4 lines
+    // - Log box borders: 2 lines
+    // - Stats bar (marginTop + content): 2 lines
+    // - Help bar (marginTop + content): 2 lines
+    // - Safety buffer: 1 line
+    // Total: 11 lines
+    const logsViewport = useViewportHeight({ overhead: 11, minHeight: 10 });
+    // Handle input for logs navigation
+    useInput((input, key) => {
+        if (key.upArrow || input === "k") {
+            setLogsScroll(Math.max(0, logsScroll - 1));
+        }
+        else if (key.downArrow || input === "j") {
+            setLogsScroll(logsScroll + 1);
+        }
+        else if (key.pageUp) {
+            setLogsScroll(Math.max(0, logsScroll - 10));
+        }
+        else if (key.pageDown) {
+            setLogsScroll(logsScroll + 10);
+        }
+        else if (input === "g") {
+            setLogsScroll(0);
+        }
+        else if (input === "G") {
+            const maxScroll = Math.max(0, logs.length - logsViewport.viewportHeight);
+            setLogsScroll(maxScroll);
+        }
+        else if (input === "w") {
+            setLogsWrapMode(!logsWrapMode);
+        }
+        else if (input === "c") {
+            // Copy logs to clipboard using shared formatter
+            const logsText = logs
+                .map((log) => {
+                const parts = parseAnyLogEntry(log);
+                const cmd = parts.cmd ? `$ ${parts.cmd} ` : "";
+                const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                const shell = parts.shellName ? `(${parts.shellName}) ` : "";
+                return `${parts.timestamp} ${parts.level} [${parts.source}] ${shell}${cmd}${parts.message} ${exitCode}`.trim();
+            })
+                .join("\n");
+            const copyToClipboard = async (text) => {
+                const { spawn } = await import("child_process");
+                const platform = process.platform;
+                let command;
+                let args;
+                if (platform === "darwin") {
+                    command = "pbcopy";
+                    args = [];
+                }
+                else if (platform === "win32") {
+                    command = "clip";
+                    args = [];
+                }
+                else {
+                    command = "xclip";
+                    args = ["-selection", "clipboard"];
+                }
+                const proc = spawn(command, args);
+                proc.stdin.write(text);
+                proc.stdin.end();
+                proc.on("exit", (code) => {
+                    if (code === 0) {
+                        setCopyStatus("Copied to clipboard!");
+                        setTimeout(() => setCopyStatus(null), 2000);
+                    }
+                    else {
+                        setCopyStatus("Failed to copy");
+                        setTimeout(() => setCopyStatus(null), 2000);
+                    }
+                });
+                proc.on("error", () => {
+                    setCopyStatus("Copy not supported");
+                    setTimeout(() => setCopyStatus(null), 2000);
+                });
+            };
+            copyToClipboard(logsText);
+        }
+        else if (input === "q" || key.escape || key.return) {
+            onBack();
+        }
+    });
+    const viewportHeight = Math.max(1, logsViewport.viewportHeight);
+    const terminalWidth = logsViewport.terminalWidth;
+    const maxScroll = Math.max(0, logs.length - viewportHeight);
+    const actualScroll = Math.min(logsScroll, maxScroll);
+    const visibleLogs = logs.slice(actualScroll, actualScroll + viewportHeight);
+    const hasMore = actualScroll + viewportHeight < logs.length;
+    const hasLess = actualScroll > 0;
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, children: logs.length === 0 ? (_jsx(Text, { color: colors.textDim, dimColor: true, children: "No logs available" })) : (visibleLogs.map((log, index) => {
+                    const parts = parseAnyLogEntry(log);
+                    // Sanitize message: escape special chars to prevent layout breaks
+                    const escapedMessage = parts.message
+                        .replace(/\r\n/g, "\\n")
+                        .replace(/\n/g, "\\n")
+                        .replace(/\r/g, "\\r")
+                        .replace(/\t/g, "\\t");
+                    // Limit message length to prevent Yoga layout engine errors
+                    const MAX_MESSAGE_LENGTH = 1000;
+                    const fullMessage = escapedMessage.length > MAX_MESSAGE_LENGTH
+                        ? escapedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
+                        : escapedMessage;
+                    const cmd = parts.cmd
+                        ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
+                        : "";
+                    const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                    // Map color names to theme colors
+                    const levelColorMap = {
+                        red: colors.error,
+                        yellow: colors.warning,
+                        blue: colors.primary,
+                        gray: colors.textDim,
+                    };
+                    const sourceColorMap = {
+                        magenta: "#d33682",
+                        cyan: colors.info,
+                        green: colors.success,
+                        yellow: colors.warning,
+                        gray: colors.textDim,
+                        white: colors.text,
+                    };
+                    const levelColor = levelColorMap[parts.levelColor] || colors.textDim;
+                    const sourceColor = sourceColorMap[parts.sourceColor] || colors.textDim;
+                    if (logsWrapMode) {
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: fullMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }, index));
+                    }
+                    else {
+                        // Calculate available width for message truncation
+                        const timestampLen = parts.timestamp.length;
+                        const levelLen = parts.level.length;
+                        const sourceLen = parts.source.length + 2; // brackets
+                        const shellLen = parts.shellName ? parts.shellName.length + 3 : 0;
+                        const cmdLen = cmd.length;
+                        const exitLen = exitCode.length;
+                        const spacesLen = 5; // spaces between elements
+                        const metadataWidth = timestampLen +
+                            levelLen +
+                            sourceLen +
+                            shellLen +
+                            cmdLen +
+                            exitLen +
+                            spacesLen;
+                        const safeTerminalWidth = Math.max(80, terminalWidth);
+                        const availableMessageWidth = Math.max(20, safeTerminalWidth - metadataWidth);
+                        const truncatedMessage = fullMessage.length > availableMessageWidth
+                            ? fullMessage.substring(0, Math.max(1, availableMessageWidth - 3)) + "..."
+                            : fullMessage;
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: truncatedMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }, index));
+                    }
+                })) }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total logs"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Viewing ", actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(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 [w] Toggle Wrap \u2022 [c] Copy \u2022 [Enter], [q], or [esc] Back"] }) })] }));
+};