@runloop/rl-cli 0.0.2 → 0.1.0

package/dist/components/DevboxDetailPage.js

@@ -1,12 +1,14 @@
 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 figures from 'figures';
-import { Header } from './Header.js';
-import { StatusBadge } from './StatusBadge.js';
-import { MetadataDisplay } from './MetadataDisplay.js';
-import { Breadcrumb } from './Breadcrumb.js';
-import { DevboxActionsMenu } from './DevboxActionsMenu.js';
+import React from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import figures from "figures";
+import { Header } from "./Header.js";
+import { StatusBadge } from "./StatusBadge.js";
+import { MetadataDisplay } from "./MetadataDisplay.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
+import { getDevboxUrl } from "../utils/url.js";
+import { colors } from "../utils/theme.js";
 // Format time ago in a succinct way
 const formatTimeAgo = (timestamp) => {
     const seconds = Math.floor((Date.now() - timestamp) / 1000);
@@ -27,7 +29,7 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
+export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, onSSHRequest, }) => {
     const { stdout } = useStdout();
     const [showDetailedInfo, setShowDetailedInfo] = React.useState(false);
     const [detailScroll, setDetailScroll] = React.useState(0);
@@ -35,37 +37,99 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
     const [selectedOperation, setSelectedOperation] = React.useState(0);
     const selectedDevbox = initialDevbox;
     const allOperations = [
-        { key: 'logs', label: 'View Logs', color: 'blue', icon: figures.info, shortcut: 'l' },
-        { key: 'exec', label: 'Execute Command', color: 'green', icon: figures.play, shortcut: 'e' },
-        { key: 'upload', label: 'Upload File', color: 'green', icon: figures.arrowUp, shortcut: 'u' },
-        { key: 'snapshot', label: 'Create Snapshot', color: 'yellow', icon: figures.circleFilled, shortcut: 'n' },
-        { key: 'ssh', label: 'SSH onto the box', color: 'cyan', icon: figures.arrowRight, shortcut: 's' },
-        { key: 'tunnel', label: 'Open Tunnel', color: 'magenta', icon: figures.pointerSmall, shortcut: 't' },
-        { key: 'suspend', label: 'Suspend Devbox', color: 'yellow', icon: figures.squareSmallFilled, shortcut: 'p' },
-        { key: 'resume', label: 'Resume Devbox', color: 'green', icon: figures.play, shortcut: 'r' },
-        { key: 'delete', label: 'Shutdown Devbox', color: 'red', icon: figures.cross, shortcut: 'd' },
+        {
+            key: "logs",
+            label: "View Logs",
+            color: colors.info,
+            icon: figures.info,
+            shortcut: "l",
+        },
+        {
+            key: "exec",
+            label: "Execute Command",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "e",
+        },
+        {
+            key: "upload",
+            label: "Upload File",
+            color: colors.success,
+            icon: figures.arrowUp,
+            shortcut: "u",
+        },
+        {
+            key: "snapshot",
+            label: "Create Snapshot",
+            color: colors.warning,
+            icon: figures.circleFilled,
+            shortcut: "n",
+        },
+        {
+            key: "ssh",
+            label: "SSH onto the box",
+            color: colors.primary,
+            icon: figures.arrowRight,
+            shortcut: "s",
+        },
+        {
+            key: "tunnel",
+            label: "Open Tunnel",
+            color: colors.secondary,
+            icon: figures.pointerSmall,
+            shortcut: "t",
+        },
+        {
+            key: "suspend",
+            label: "Suspend Devbox",
+            color: colors.warning,
+            icon: figures.squareSmallFilled,
+            shortcut: "p",
+        },
+        {
+            key: "resume",
+            label: "Resume Devbox",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "r",
+        },
+        {
+            key: "delete",
+            label: "Shutdown Devbox",
+            color: colors.error,
+            icon: figures.cross,
+            shortcut: "d",
+        },
     ];
     // Filter operations based on devbox status
-    const operations = selectedDevbox ? allOperations.filter(op => {
-        const status = selectedDevbox.status;
-        // When suspended: logs and resume
-        if (status === 'suspended') {
-            return op.key === 'resume' || op.key === 'logs';
-        }
-        // When not running (shutdown, failure, etc): only logs
-        if (status !== 'running' && status !== 'provisioning' && status !== 'initializing') {
-            return op.key === 'logs';
-        }
-        // When running: everything except resume
-        if (status === 'running') {
-            return op.key !== 'resume';
-        }
-        // Default for transitional states (provisioning, initializing)
-        return op.key === 'logs' || op.key === 'delete';
-    }) : allOperations;
+    const operations = selectedDevbox
+        ? allOperations.filter((op) => {
+            const status = selectedDevbox.status;
+            // When suspended: logs and resume
+            if (status === "suspended") {
+                return op.key === "resume" || op.key === "logs";
+            }
+            // When not running (shutdown, failure, etc): only logs
+            if (status !== "running" &&
+                status !== "provisioning" &&
+                status !== "initializing") {
+                return op.key === "logs";
+            }
+            // When running: everything except resume
+            if (status === "running") {
+                return op.key !== "resume";
+            }
+            // Default for transitional states (provisioning, initializing)
+            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 ? new Date(selectedDevbox.create_time_ms).toLocaleString() : '', [selectedDevbox.create_time_ms]);
-    const createTimeAgo = React.useMemo(() => selectedDevbox.create_time_ms ? formatTimeAgo(selectedDevbox.create_time_ms) : '', [selectedDevbox.create_time_ms]);
+    const formattedCreateTime = React.useMemo(() => selectedDevbox.create_time_ms
+        ? new Date(selectedDevbox.create_time_ms).toLocaleString()
+        : "", [selectedDevbox.create_time_ms]);
+    const createTimeAgo = React.useMemo(() => selectedDevbox.create_time_ms
+        ? formatTimeAgo(selectedDevbox.create_time_ms)
+        : "", [selectedDevbox.create_time_ms]);
     useInput((input, key) => {
         // Skip input handling when in actions view
         if (showActions) {
@@ -73,15 +137,15 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         }
         // Handle detailed info mode
         if (showDetailedInfo) {
-            if (input === 'q' || key.escape) {
+            if (input === "q" || key.escape) {
                 setShowDetailedInfo(false);
                 setDetailScroll(0);
             }
-            else if (input === 'j' || input === 's' || key.downArrow) {
+            else if (input === "j" || input === "s" || key.downArrow) {
                 // Scroll down in detailed info
                 setDetailScroll(detailScroll + 1);
             }
-            else if (input === 'k' || input === 'w' || key.upArrow) {
+            else if (input === "k" || input === "w" || key.upArrow) {
                 // Scroll up in detailed info
                 setDetailScroll(Math.max(0, detailScroll - 1));
             }
@@ -96,11 +160,11 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
             return;
         }
         // Main view input handling
-        if (input === 'q' || key.escape) {
+        if (input === "q" || key.escape) {
             console.clear();
             onBack();
         }
-        else if (input === 'i') {
+        else if (input === "i") {
             setShowDetailedInfo(true);
             setDetailScroll(0);
         }
@@ -110,30 +174,30 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         else if (key.downArrow && selectedOperation < operations.length - 1) {
             setSelectedOperation(selectedOperation + 1);
         }
-        else if (key.return || input === 'a') {
+        else if (key.return || input === "a") {
             console.clear();
             setShowActions(true);
         }
         else if (input) {
             // Check if input matches any operation shortcut
-            const matchedOpIndex = operations.findIndex(op => op.shortcut === input);
+            const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
             if (matchedOpIndex !== -1) {
                 setSelectedOperation(matchedOpIndex);
                 console.clear();
                 setShowActions(true);
             }
         }
-        if (input === 'o') {
+        if (input === "o") {
             // Open in browser
-            const url = `https://platform.runloop.ai/devboxes/${selectedDevbox.id}`;
+            const url = getDevboxUrl(selectedDevbox.id);
             const openBrowser = async () => {
-                const { exec } = await import('child_process');
+                const { exec } = await import("child_process");
                 const platform = process.platform;
                 let openCommand;
-                if (platform === 'darwin') {
+                if (platform === "darwin") {
                     openCommand = `open "${url}"`;
                 }
-                else if (platform === 'win32') {
+                else if (platform === "win32") {
                     openCommand = `start "${url}"`;
                 }
                 else {
@@ -152,137 +216,139 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         const lines = [];
         const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
         // Core Information
-        lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Devbox Details" }, "core-title"));
-        lines.push(_jsxs(Text, { dimColor: true, 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"));
+        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, { 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.end_time_ms) {
-            lines.push(_jsxs(Text, { dimColor: true, children: ["  Ended: ", new Date(selectedDevbox.end_time_ms).toLocaleString()] }, "core-ended"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Ended: ", new Date(selectedDevbox.end_time_ms).toLocaleString()] }, "core-ended"));
         }
         lines.push(_jsx(Text, { children: " " }, "core-space"));
         // Capabilities
         if (selectedDevbox.capabilities && selectedDevbox.capabilities.length > 0) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Capabilities" }, "cap-title"));
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Capabilities" }, "cap-title"));
             selectedDevbox.capabilities.forEach((cap, idx) => {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", figures.pointer, " ", cap] }, `cap-${idx}`));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", figures.pointer, " ", cap] }, `cap-${idx}`));
             });
             lines.push(_jsx(Text, { children: " " }, "cap-space"));
         }
         // Launch Parameters
         if (selectedDevbox.launch_parameters) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Launch Parameters" }, "launch-title"));
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Launch Parameters" }, "launch-title"));
             const lp = selectedDevbox.launch_parameters;
             if (lp.resource_size_request) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Resource Size Request: ", lp.resource_size_request] }, "launch-size-req"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Resource Size Request: ", lp.resource_size_request] }, "launch-size-req"));
             }
             if (lp.architecture) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Architecture: ", lp.architecture] }, "launch-arch"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Architecture: ", lp.architecture] }, "launch-arch"));
             }
             if (lp.custom_cpu_cores) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  CPU Cores: ", lp.custom_cpu_cores] }, "launch-cpu"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "CPU Cores: ", lp.custom_cpu_cores] }, "launch-cpu"));
             }
             if (lp.custom_gb_memory) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Memory: ", lp.custom_gb_memory, "GB"] }, "launch-memory"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Memory: ", lp.custom_gb_memory, "GB"] }, "launch-memory"));
             }
             if (lp.custom_disk_size) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Disk Size: ", lp.custom_disk_size, "GB"] }, "launch-disk"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Disk Size: ", lp.custom_disk_size, "GB"] }, "launch-disk"));
             }
             if (lp.keep_alive_time_seconds) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Keep Alive: ", lp.keep_alive_time_seconds, "s (", Math.floor(lp.keep_alive_time_seconds / 60), "m)"] }, "launch-keepalive"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Keep Alive: ", lp.keep_alive_time_seconds, "s (", Math.floor(lp.keep_alive_time_seconds / 60), "m)"] }, "launch-keepalive"));
             }
             if (lp.after_idle) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  After Idle: ", lp.after_idle.on_idle, " after ", lp.after_idle.idle_time_seconds, "s"] }, "launch-afteridle"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "After Idle: ", lp.after_idle.on_idle, " after", " ", lp.after_idle.idle_time_seconds, "s"] }, "launch-afteridle"));
             }
             if (lp.available_ports && lp.available_ports.length > 0) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Available Ports: ", lp.available_ports.join(', ')] }, "launch-ports"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Available Ports: ", lp.available_ports.join(", ")] }, "launch-ports"));
             }
             if (lp.launch_commands && lp.launch_commands.length > 0) {
-                lines.push(_jsx(Text, { dimColor: true, children: "  Launch Commands:" }, "launch-launch-cmds"));
+                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}`));
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", figures.pointer, " ", cmd] }, `launch-cmd-${idx}`));
                 });
             }
             if (lp.required_services && lp.required_services.length > 0) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Required Services: ", lp.required_services.join(', ')] }, "launch-services"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Required Services: ", lp.required_services.join(", ")] }, "launch-services"));
             }
             if (lp.user_parameters) {
-                lines.push(_jsx(Text, { dimColor: true, children: "  User Parameters:" }, "launch-user"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "User Parameters:"] }, "launch-user"));
                 if (lp.user_parameters.username) {
-                    lines.push(_jsxs(Text, { dimColor: true, children: ["    Username: ", lp.user_parameters.username] }, "user-name"));
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Username: ", lp.user_parameters.username] }, "user-name"));
                 }
                 if (lp.user_parameters.uid) {
-                    lines.push(_jsxs(Text, { dimColor: true, children: ["    UID: ", lp.user_parameters.uid] }, "user-uid"));
+                    lines.push(_jsxs(Text, { dimColor: true, children: [" ", "UID: ", lp.user_parameters.uid] }, "user-uid"));
                 }
             }
             lines.push(_jsx(Text, { children: " " }, "launch-space"));
         }
         // Source
         if (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Source" }, "source-title"));
+            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, { dimColor: true, children: [" ", "Blueprint: ", 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, { dimColor: true, children: [" ", "Snapshot: ", selectedDevbox.snapshot_id] }, "source-snap"));
             }
             lines.push(_jsx(Text, { children: " " }, "source-space"));
         }
         // Initiator
         if (selectedDevbox.initiator_type) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Initiator" }, "init-title"));
-            lines.push(_jsxs(Text, { dimColor: true, children: ["  Type: ", selectedDevbox.initiator_type] }, "init-type"));
+            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, { dimColor: true, children: [" ", "ID: ", selectedDevbox.initiator_id] }, "init-id"));
             }
             lines.push(_jsx(Text, { children: " " }, "init-space"));
         }
         // Status Details
         if (selectedDevbox.failure_reason || selectedDevbox.shutdown_reason) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Status Details" }, "status-title"));
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Status Details" }, "status-title"));
             if (selectedDevbox.failure_reason) {
-                lines.push(_jsxs(Text, { color: "red", dimColor: true, children: ["  Failure Reason: ", selectedDevbox.failure_reason] }, "status-fail"));
+                lines.push(_jsxs(Text, { color: colors.error, dimColor: true, children: [" ", "Failure Reason: ", selectedDevbox.failure_reason] }, "status-fail"));
             }
             if (selectedDevbox.shutdown_reason) {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  Shutdown Reason: ", selectedDevbox.shutdown_reason] }, "status-shut"));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Shutdown Reason: ", selectedDevbox.shutdown_reason] }, "status-shut"));
             }
             lines.push(_jsx(Text, { children: " " }, "status-space"));
         }
         // Metadata
-        if (selectedDevbox.metadata && Object.keys(selectedDevbox.metadata).length > 0) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Metadata" }, "meta-title"));
+        if (selectedDevbox.metadata &&
+            Object.keys(selectedDevbox.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
             Object.entries(selectedDevbox.metadata).forEach(([key, value], idx) => {
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", key, ": ", value] }, `meta-${idx}`));
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
             });
             lines.push(_jsx(Text, { children: " " }, "meta-space"));
         }
         // State Transitions
-        if (selectedDevbox.state_transitions && selectedDevbox.state_transitions.length > 0) {
-            lines.push(_jsx(Text, { color: "yellow", bold: true, children: "State History" }, "state-title"));
+        if (selectedDevbox.state_transitions &&
+            selectedDevbox.state_transitions.length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "State History" }, "state-title"));
             selectedDevbox.state_transitions.forEach((transition, idx) => {
-                const text = `${idx + 1}. ${capitalize(transition.status)}${transition.transition_time_ms ? ` at ${new Date(transition.transition_time_ms).toLocaleString()}` : ''}`;
-                lines.push(_jsxs(Text, { dimColor: true, children: ["  ", text] }, `state-${idx}`));
+                const text = `${idx + 1}. ${capitalize(transition.status)}${transition.transition_time_ms ? ` at ${new Date(transition.transition_time_ms).toLocaleString()}` : ""}`;
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", text] }, `state-${idx}`));
             });
             lines.push(_jsx(Text, { children: " " }, "state-space"));
         }
         // Raw JSON (full)
-        lines.push(_jsx(Text, { color: "yellow", bold: true, children: "Raw JSON" }, "json-title"));
-        const jsonLines = JSON.stringify(selectedDevbox, null, 2).split('\n');
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(selectedDevbox, null, 2).split("\n");
         jsonLines.forEach((line, idx) => {
-            lines.push(_jsxs(Text, { dimColor: true, children: ["  ", line] }, `json-${idx}`));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
         });
         return lines;
     };
     // Actions view - show the DevboxActionsMenu when an action is triggered
     if (showActions) {
+        const selectedOp = operations[selectedOperation];
         return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
                 setShowActions(false);
                 setSelectedOperation(0);
             }, breadcrumbItems: [
-                { label: 'Devboxes' },
+                { label: "Devboxes" },
                 { label: selectedDevbox.name || selectedDevbox.id },
-                { label: 'Actions', active: true }
-            ] }));
+            ], initialOperation: selectedOp?.key, skipOperationsMenu: true, onSSHRequest: onSSHRequest }));
     }
     // Detailed info mode - full screen
     if (showDetailedInfo) {
@@ -295,19 +361,32 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack }) => {
         const hasMore = actualScroll + viewportHeight < detailLines.length;
         const hasLess = actualScroll > 0;
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes' },
+                        { 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: "gray", dimColor: true, children: selectedDevbox.id })] }) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, borderStyle: "round", borderColor: "gray", paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: visibleLines }), hasLess && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowUp, " More above"] }) })), hasMore && (_jsx(Box, { marginTop: hasLess ? 0 : 1, children: _jsxs(Text, { color: "cyan", children: [figures.arrowDown, " More below"] }) }))] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", 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] }) })] }));
+                        { 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] }) })] }));
     }
     // Main detail view
     const lp = selectedDevbox.launch_parameters;
-    const hasCapabilities = selectedDevbox.capabilities && selectedDevbox.capabilities.filter((c) => c !== 'unknown').length > 0;
+    const hasCapabilities = selectedDevbox.capabilities &&
+        selectedDevbox.capabilities.filter((c) => c !== "unknown").length >
+            0;
     return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                    { label: 'Devboxes' },
-                    { label: selectedDevbox.name || selectedDevbox.id, active: true }
-                ] }), _jsx(Header, { title: "Devbox Details" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: selectedDevbox.name || selectedDevbox.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedDevbox.status }), _jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 ", selectedDevbox.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: formattedCreateTime }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", createTimeAgo, ")"] })] }), uptime !== null && selectedDevbox.status === 'running' && (_jsxs(Box, { children: [_jsxs(Text, { color: "green", dimColor: true, children: ["Uptime: ", uptime < 60 ? `${uptime}m` : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] }), lp?.keep_alive_time_seconds && (_jsxs(Text, { color: "gray", dimColor: true, children: [" \u2022 Keep-alive: ", Math.floor(lp.keep_alive_time_seconds / 60), "m"] }))] }))] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [(lp?.resource_size_request || lp?.custom_cpu_cores || lp?.custom_gb_memory || lp?.custom_disk_size || lp?.architecture) && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "yellow", 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", borderStyle: "round", borderColor: "blue", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "blue", 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", borderStyle: "round", borderColor: "magenta", paddingX: 1, paddingY: 0, flexGrow: 1, children: [_jsxs(Text, { color: "magenta", 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 && Object.keys(selectedDevbox.metadata).length > 0 && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, children: _jsx(MetadataDisplay, { metadata: selectedDevbox.metadata, showBorder: false }) })), selectedDevbox.failure_reason && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, " "] }), _jsx(Text, { color: "red", dimColor: true, children: selectedDevbox.failure_reason })] })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+                    { 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
+                                        ? `${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 ||
+                        lp?.custom_gb_memory ||
+                        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 &&
+                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 ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', " "] }), _jsxs(Text, { color: isSelected ? op.color : 'gray', bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: "gray", dimColor: true, children: [" [", op.shortcut, "]"] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Execute \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));
+                            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] Execute \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));
 };

package/dist/components/ErrorMessage.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import figures from 'figures';
-export const ErrorMessage = ({ message, error }) => {
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: "red", bold: true, children: [figures.cross, " ", message] }) }), error && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: error.message }) }))] }));
+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 }) }))] }));
 };

package/dist/components/Header.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text } from 'ink';
+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: "#0a4d3a", children: ["\u258C", title] }), subtitle && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: subtitle })] }))] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: "#0a4d3a", children: '─'.repeat(title.length + 1) }) })] }));
+    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) }) })] }));
 });

package/dist/components/MainMenu.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import figures from "figures";
+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 }) => {
+    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,
+        },
+    ], []);
+    useInput((input, key) => {
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < menuItems.length - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            onSelect(menuItems[selectedIndex].key);
+        }
+        else if (key.escape) {
+            exit();
+        }
+        else if (input === "d" || input === "1") {
+            onSelect("devboxes");
+        }
+        else if (input === "b" || input === "2") {
+            onSelect("blueprints");
+        }
+        else if (input === "s" || input === "3") {
+            onSelect("snapshots");
+        }
+    });
+    // Use compact layout if terminal height is less than 20 lines (memoized)
+    const useCompactLayout = React.useMemo(() => terminalHeight < 20, [terminalHeight]);
+    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) => {
+                        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 }] }), _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) => {
+                        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));
+                    })] }), _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"] }) }) })] }));
+});