@runloop/rl-cli 1.2.0 → 1.3.0

package/dist/components/DevboxDetailPage.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DevboxDetailPage - Detail page for devboxes
+ * Uses the generic ResourceDetailPage component with devbox-specific customizations
+ */
 import React from "react";
-import { Box, Text, useInput } from "ink";
+import { Text } from "ink";
 import figures from "figures";
-import { Header } from "./Header.js";
-import { StatusBadge } from "./StatusBadge.js";
-import { Breadcrumb } from "./Breadcrumb.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
 import { StateHistory } from "./StateHistory.js";
+import { ResourceDetailPage, } from "./ResourceDetailPage.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) => {
@@ -32,59 +32,11 @@ const formatTimeAgo = (timestamp) => {
     const years = Math.floor(months / 12);
     return `${years}y ago`;
 };
-// Truncate long strings to prevent layout issues
-const truncateString = (str, maxLength) => {
-    if (str.length <= maxLength)
-        return str;
-    return str.substring(0, maxLength - 3) + "...";
-};
 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);
-    // 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 [selectedOperationKey, setSelectedOperationKey] = React.useState(null);
+    const [currentDevbox, setCurrentDevbox] = React.useState(initialDevbox);
+    // All possible operations for devboxes
     const allOperations = [
         {
             key: "logs",
@@ -151,9 +103,9 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
         },
     ];
     // Filter operations based on devbox status
-    const operations = selectedDevbox
-        ? allOperations.filter((op) => {
-            const status = selectedDevbox.status;
+    const getFilteredOperations = (devbox) => {
+        return allOperations.filter((op) => {
+            const status = devbox.status;
             // When suspended: logs and resume
             if (status === "suspended") {
                 return op.key === "resume" || op.key === "logs";
@@ -170,125 +122,190 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             // Default for transitional states (provisioning, initializing)
             return op.key === "logs" || op.key === "delete";
-        })
-        : allOperations;
-    const formattedCreateTime = selectedDevbox.create_time_ms
-        ? new Date(selectedDevbox.create_time_ms).toLocaleString()
-        : "";
-    const createTimeAgo = selectedDevbox.create_time_ms
-        ? formatTimeAgo(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;
-        }
-        // Handle detailed info mode
-        if (showDetailedInfo) {
-            if (input === "q" || key.escape) {
-                setShowDetailedInfo(false);
-                setDetailScroll(0);
-            }
-            else if (input === "j" || input === "s" || key.downArrow) {
-                // Scroll down in detailed info
-                setDetailScroll(detailScroll + 1);
-            }
-            else if (input === "k" || input === "w" || key.upArrow) {
-                // Scroll up in detailed info
-                setDetailScroll(Math.max(0, detailScroll - 1));
+        });
+    };
+    // Build detail sections for the devbox
+    const buildDetailSections = (devbox) => {
+        const sections = [];
+        const lp = devbox.launch_parameters;
+        // Calculate uptime
+        const uptime = devbox.create_time_ms
+            ? Math.floor((Date.now() - devbox.create_time_ms) / 1000 / 60)
+            : null;
+        // Details section
+        const detailFields = [];
+        // Created / Ended time
+        if (devbox.create_time_ms) {
+            const createTime = new Date(devbox.create_time_ms).toLocaleString();
+            const timeAgo = formatTimeAgo(devbox.create_time_ms);
+            if (devbox.end_time_ms) {
+                const endTime = new Date(devbox.end_time_ms).toLocaleString();
+                detailFields.push({
+                    label: "Created",
+                    value: `${createTime} → ${endTime}`,
+                });
             }
-            else if (key.pageDown) {
-                // Page down
-                setDetailScroll(detailScroll + 10);
+            else {
+                detailFields.push({
+                    label: "Created",
+                    value: `${createTime} (${timeAgo})`,
+                });
             }
-            else if (key.pageUp) {
-                // Page up
-                setDetailScroll(Math.max(0, detailScroll - 10));
+        }
+        // Resources
+        if (lp?.resource_size_request ||
+            lp?.custom_cpu_cores ||
+            lp?.custom_gb_memory ||
+            lp?.custom_disk_size ||
+            lp?.architecture) {
+            const resources = [
+                lp?.resource_size_request,
+                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`,
+            ]
+                .filter(Boolean)
+                .join(" • ");
+            detailFields.push({
+                label: "Resources",
+                value: resources,
+            });
+        }
+        // Lifetime with remaining time
+        if (lp?.keep_alive_time_seconds) {
+            const lifetimeStr = lp.keep_alive_time_seconds < 3600
+                ? `${Math.floor(lp.keep_alive_time_seconds / 60)}m`
+                : `${Math.floor(lp.keep_alive_time_seconds / 3600)}h ${Math.floor((lp.keep_alive_time_seconds % 3600) / 60)}m`;
+            let remainingText = "";
+            if (uptime !== null && devbox.status === "running") {
+                const maxLifetimeMinutes = Math.floor(lp.keep_alive_time_seconds / 60);
+                const remainingMinutes = maxLifetimeMinutes - uptime;
+                if (remainingMinutes <= 0) {
+                    remainingText = " (Expired)";
+                }
+                else if (remainingMinutes < 60) {
+                    remainingText = ` (${remainingMinutes}m remaining)`;
+                }
+                else {
+                    const hours = Math.floor(remainingMinutes / 60);
+                    const mins = remainingMinutes % 60;
+                    remainingText = ` (${hours}h ${mins}m remaining)`;
+                }
             }
-            return;
+            detailFields.push({
+                label: "Lifetime",
+                value: lifetimeStr + remainingText,
+            });
         }
-        // Main view input handling
-        if (input === "q" || key.escape) {
-            onBack();
+        // User
+        if (lp?.user_parameters) {
+            const username = lp.user_parameters.username || "default";
+            const uid = lp.user_parameters.uid != null && lp.user_parameters.uid !== 0
+                ? ` (UID: ${lp.user_parameters.uid})`
+                : "";
+            detailFields.push({
+                label: "User",
+                value: username + uid,
+            });
         }
-        else if (input === "i") {
-            setShowDetailedInfo(true);
-            setDetailScroll(0);
+        // Source
+        if (devbox.blueprint_id || devbox.snapshot_id) {
+            detailFields.push({
+                label: "Source",
+                value: (_jsx(Text, { color: colors.success, children: devbox.blueprint_id || devbox.snapshot_id })),
+            });
         }
-        else if (key.upArrow && selectedOperation > 0) {
-            setSelectedOperation(selectedOperation - 1);
+        // Network Policy
+        if (lp?.network_policy_id) {
+            detailFields.push({
+                label: "Network Policy",
+                value: _jsx(Text, { color: colors.info, children: lp.network_policy_id }),
+            });
         }
-        else if (key.downArrow && selectedOperation < operations.length - 1) {
-            setSelectedOperation(selectedOperation + 1);
+        // Initiator
+        if (devbox.initiator_id) {
+            detailFields.push({
+                label: "Initiator",
+                value: _jsx(Text, { color: colors.secondary, children: devbox.initiator_id }),
+            });
         }
-        else if (key.return || input === "a") {
-            setShowActions(true);
+        // Capabilities
+        const hasCapabilities = devbox.capabilities &&
+            devbox.capabilities.filter((c) => c !== "unknown").length > 0;
+        if (hasCapabilities) {
+            detailFields.push({
+                label: "Capabilities",
+                value: devbox.capabilities
+                    .filter((c) => c !== "unknown")
+                    .join(", "),
+            });
         }
-        else if (input) {
-            // Check if input matches any operation shortcut
-            const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
-            if (matchedOpIndex !== -1) {
-                setSelectedOperation(matchedOpIndex);
-                setShowActions(true);
-            }
+        if (detailFields.length > 0) {
+            sections.push({
+                title: "Details",
+                icon: figures.squareSmallFilled,
+                color: colors.warning,
+                fields: detailFields,
+            });
         }
-        if (input === "o") {
-            // Open in browser
-            const url = getDevboxUrl(selectedDevbox.id);
-            const openBrowser = async () => {
-                const { exec } = await import("child_process");
-                const platform = process.platform;
-                let openCommand;
-                if (platform === "darwin") {
-                    openCommand = `open "${url}"`;
-                }
-                else if (platform === "win32") {
-                    openCommand = `start "${url}"`;
-                }
-                else {
-                    openCommand = `xdg-open "${url}"`;
-                }
-                exec(openCommand);
-            };
-            openBrowser();
+        // Metadata section
+        if (devbox.metadata && Object.keys(devbox.metadata).length > 0) {
+            sections.push({
+                title: "Metadata",
+                icon: figures.identical,
+                color: colors.secondary,
+                fields: Object.entries(devbox.metadata).map(([key, value]) => ({
+                    label: key,
+                    value: value,
+                })),
+            });
         }
-    });
-    const uptime = selectedDevbox.create_time_ms
-        ? Math.floor((Date.now() - selectedDevbox.create_time_ms) / 1000 / 60)
-        : null;
-    // Build detailed info lines for scrolling
-    const buildDetailLines = () => {
+        // Error section
+        if (devbox.failure_reason) {
+            sections.push({
+                title: "Error",
+                icon: figures.cross,
+                color: colors.error,
+                fields: [
+                    {
+                        label: "Failure Reason",
+                        value: devbox.failure_reason,
+                        color: colors.error,
+                    },
+                ],
+            });
+        }
+        return sections;
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (devbox) => {
         const lines = [];
         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, { 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"));
-        if (selectedDevbox.create_time_ms) {
-            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(selectedDevbox.create_time_ms).toLocaleString()] }, "core-created"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", devbox.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", devbox.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", capitalize(devbox.status)] }, "core-status"));
+        if (devbox.create_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(devbox.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"));
+        if (devbox.end_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Ended: ", new Date(devbox.end_time_ms).toLocaleString()] }, "core-ended"));
         }
         lines.push(_jsx(Text, { children: " " }, "core-space"));
         // Capabilities
-        if (selectedDevbox.capabilities && selectedDevbox.capabilities.length > 0) {
+        if (devbox.capabilities && devbox.capabilities.length > 0) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Capabilities" }, "cap-title"));
-            selectedDevbox.capabilities.forEach((cap, idx) => {
+            devbox.capabilities.forEach((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) {
+        if (devbox.launch_parameters) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Launch Parameters" }, "launch-title"));
-            const lp = selectedDevbox.launch_parameters;
+            const lp = devbox.launch_parameters;
             if (lp.resource_size_request) {
                 lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Resource Size Request: ", lp.resource_size_request] }, "launch-size-req"));
             }
@@ -315,14 +332,9 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             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: string, idx: number) => {
-                //   lines.push(
-                //     <Text key={`launch-cmd-${idx}`} dimColor>
-                //       {" "}
-                //       {figures.pointer} {cmd}
-                //     </Text>,
-                //   );
-                // });
+                lp.launch_commands.forEach((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"));
@@ -330,59 +342,57 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             if (lp.user_parameters) {
                 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) {
+        if (devbox.blueprint_id || devbox.snapshot_id) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Source" }, "source-title"));
-            if (selectedDevbox.blueprint_id) {
-                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", selectedDevbox.blueprint_id] }, "source-bp"));
+            if (devbox.blueprint_id) {
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Blueprint: ", devbox.blueprint_id] }, "source-bp"));
             }
-            if (selectedDevbox.snapshot_id) {
-                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", selectedDevbox.snapshot_id] }, "source-snap"));
+            if (devbox.snapshot_id) {
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Snapshot: ", devbox.snapshot_id] }, "source-snap"));
             }
             lines.push(_jsx(Text, { children: " " }, "source-space"));
         }
         // Initiator
-        if (selectedDevbox.initiator_type) {
+        if (devbox.initiator_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, { color: colors.idColor, children: [" ", "ID: ", selectedDevbox.initiator_id] }, "init-id"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Type: ", devbox.initiator_type] }, "init-type"));
+            if (devbox.initiator_id) {
+                lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", devbox.initiator_id] }, "init-id"));
             }
             lines.push(_jsx(Text, { children: " " }, "init-space"));
         }
         // Status Details
-        if (selectedDevbox.failure_reason || selectedDevbox.shutdown_reason) {
+        if (devbox.failure_reason || devbox.shutdown_reason) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Status Details" }, "status-title"));
-            if (selectedDevbox.failure_reason) {
-                lines.push(_jsxs(Text, { color: colors.error, dimColor: true, children: [" ", "Failure Reason: ", selectedDevbox.failure_reason] }, "status-fail"));
+            if (devbox.failure_reason) {
+                lines.push(_jsxs(Text, { color: colors.error, children: [" ", "Failure Reason: ", devbox.failure_reason] }, "status-fail"));
             }
-            if (selectedDevbox.shutdown_reason) {
-                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Shutdown Initiator: ", selectedDevbox.shutdown_reason] }, "status-shut"));
+            if (devbox.shutdown_reason) {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Shutdown Initiator: ", devbox.shutdown_reason] }, "status-shut"));
             }
             lines.push(_jsx(Text, { children: " " }, "status-space"));
         }
         // Metadata
-        if (selectedDevbox.metadata &&
-            Object.keys(selectedDevbox.metadata).length > 0) {
+        if (devbox.metadata && Object.keys(devbox.metadata).length > 0) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
-            Object.entries(selectedDevbox.metadata).forEach(([key, value], idx) => {
+            Object.entries(devbox.metadata).forEach(([key, value], 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) {
+        if (devbox.state_transitions && devbox.state_transitions.length > 0) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "State History" }, "state-title"));
-            selectedDevbox.state_transitions.forEach((transition, idx) => {
+            devbox.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}`));
             });
@@ -390,102 +400,38 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
         }
         // Raw JSON (full)
         lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
-        const jsonLines = JSON.stringify(selectedDevbox, null, 2).split("\n");
+        const jsonLines = JSON.stringify(devbox, null, 2).split("\n");
         jsonLines.forEach((line, idx) => {
             lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
         });
         return lines;
     };
-    // Actions view - show the DevboxActionsMenu when an action is triggered
+    // Handle operation selection
+    const handleOperation = (operation, _devbox) => {
+        setSelectedOperationKey(operation);
+        setShowActions(true);
+    };
+    // Polling function
+    const pollDevbox = React.useCallback(async () => {
+        const updated = await getDevbox(initialDevbox.id);
+        setCurrentDevbox(updated);
+        return updated;
+    }, [initialDevbox.id]);
+    // Show DevboxActionsMenu when an action is selected
     if (showActions) {
-        const selectedOp = operations[selectedOperation];
-        return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
+        return (_jsx(DevboxActionsMenu, { devbox: currentDevbox, onBack: () => {
                 setShowActions(false);
-                setSelectedOperation(0);
+                setSelectedOperationKey(null);
             }, breadcrumbItems: [
                 { label: "Devboxes" },
-                { label: selectedDevbox.name || selectedDevbox.id },
-            ], initialOperation: selectedOp?.key, skipOperationsMenu: true }));
-    }
-    // Detailed info mode - full screen
-    if (showDetailedInfo) {
-        const detailLines = buildDetailLines();
-        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);
-        const hasMore = actualScroll + viewportHeight < detailLines.length;
-        const hasLess = actualScroll > 0;
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { 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.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"] })] })] }));
+                { label: currentDevbox.name || currentDevbox.id },
+            ], initialOperation: selectedOperationKey || undefined, skipOperationsMenu: true }));
     }
-    // Main detail view
-    const lp = selectedDevbox.launch_parameters;
-    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 },
-                ] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, paddingX: 1, children: [_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", children: [_jsx(Text, { color: colors.primary, bold: true, children: truncateString(selectedDevbox.name || selectedDevbox.id, Math.max(20, detailViewport.terminalWidth - 35)) }), selectedDevbox.name && (_jsxs(Text, { color: colors.idColor, children: [" \u2022 ", selectedDevbox.id] }))] }), _jsxs(Box, { children: [_jsx(StatusBadge, { status: selectedDevbox.status, fullText: true }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Text, { color: colors.success, dimColor: true, children: [" ", "\u2022 Uptime:", " ", uptime < 60
-                                        ? `${uptime}m`
-                                        : `${Math.floor(uptime / 60)}h ${uptime % 60}m`] })), selectedDevbox.status !== "running" &&
-                                selectedDevbox.create_time_ms &&
-                                selectedDevbox.end_time_ms && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 Ran for:", " ", (() => {
-                                        const runtime = Math.floor((selectedDevbox.end_time_ms -
-                                            selectedDevbox.create_time_ms) /
-                                            1000);
-                                        if (runtime < 60)
-                                            return `${runtime}s`;
-                                        const mins = Math.floor(runtime / 60);
-                                        if (mins < 60)
-                                            return `${mins}m ${runtime % 60}s`;
-                                        const hours = Math.floor(mins / 60);
-                                        return `${hours}h ${mins % 60}m`;
-                                    })()] }))] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.warning, bold: true, children: [figures.squareSmallFilled, " Details"] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [selectedDevbox.create_time_ms && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Created " }), _jsx(Text, { dimColor: true, children: formattedCreateTime }), selectedDevbox.end_time_ms ? (_jsxs(Text, { dimColor: true, children: [" ", figures.arrowRight, " ", new Date(selectedDevbox.end_time_ms).toLocaleString()] })) : (_jsxs(Text, { dimColor: true, children: [" (", createTimeAgo, ")"] }))] })), (lp?.resource_size_request ||
-                                lp?.custom_cpu_cores ||
-                                lp?.custom_gb_memory ||
-                                lp?.custom_disk_size ||
-                                lp?.architecture) && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Resources " }), _jsx(Text, { dimColor: true, children: [
-                                            lp?.resource_size_request,
-                                            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`,
-                                        ]
-                                            .filter(Boolean)
-                                            .join(" • ") })] })), (lp?.keep_alive_time_seconds || lp?.user_parameters) && (_jsxs(Box, { children: [lp?.keep_alive_time_seconds && (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.textDim, children: "Lifetime " }), _jsx(Text, { dimColor: true, children: lp.keep_alive_time_seconds < 3600
-                                                    ? `${Math.floor(lp.keep_alive_time_seconds / 60)}m`
-                                                    : `${Math.floor(lp.keep_alive_time_seconds / 3600)}h ${Math.floor((lp.keep_alive_time_seconds % 3600) / 60)}m` }), uptime !== null && selectedDevbox.status === "running" && (_jsxs(Text, { children: [" ", "\u2022", " ", (() => {
-                                                        const maxLifetimeMinutes = Math.floor(lp.keep_alive_time_seconds / 60);
-                                                        const remainingMinutes = maxLifetimeMinutes - uptime;
-                                                        if (remainingMinutes <= 0) {
-                                                            return _jsx(Text, { color: colors.error, children: "Expired" });
-                                                        }
-                                                        else if (remainingMinutes < 5) {
-                                                            return (_jsxs(Text, { color: colors.error, children: [remainingMinutes, "m remaining"] }));
-                                                        }
-                                                        else if (remainingMinutes < 15) {
-                                                            return (_jsxs(Text, { color: colors.warning, children: [remainingMinutes, "m remaining"] }));
-                                                        }
-                                                        else if (remainingMinutes < 60) {
-                                                            return (_jsxs(Text, { color: colors.success, children: [remainingMinutes, "m remaining"] }));
-                                                        }
-                                                        else {
-                                                            const hours = Math.floor(remainingMinutes / 60);
-                                                            const mins = remainingMinutes % 60;
-                                                            return (_jsxs(Text, { color: colors.success, children: [hours, "h ", mins, "m remaining"] }));
-                                                        }
-                                                    })()] })), lp?.user_parameters && (_jsx(Text, { color: colors.textDim, children: " \u2022 " }))] })), lp?.user_parameters && (_jsxs(_Fragment, { children: [!lp?.keep_alive_time_seconds && (_jsx(Text, { color: colors.textDim, children: "User " })), _jsx(Text, { color: colors.textDim, children: "User: " }), _jsxs(Text, { dimColor: true, children: [lp.user_parameters.username || "default", lp.user_parameters.uid != null &&
-                                                        lp.user_parameters.uid !== 0 &&
-                                                        ` (UID: ${lp.user_parameters.uid})`] })] }))] })), (selectedDevbox.blueprint_id || selectedDevbox.snapshot_id) && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Source " }), _jsx(Text, { color: colors.success, children: selectedDevbox.blueprint_id || selectedDevbox.snapshot_id })] })), selectedDevbox.initiator_id && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Initiator " }), _jsx(Text, { color: colors.secondary, children: selectedDevbox.initiator_id })] })), hasCapabilities && (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: "Capabilities " }), _jsx(Text, { dimColor: true, children: selectedDevbox.capabilities
-                                            .filter((c) => c !== "unknown")
-                                            .join(", ") })] }))] })] }), selectedDevbox.metadata &&
-                Object.keys(selectedDevbox.metadata).length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.secondary, bold: true, children: [figures.identical, " Metadata"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: Object.entries(selectedDevbox.metadata).map(([key, value]) => (_jsxs(Box, { children: [_jsx(Text, { color: colors.textDim, children: key }), _jsx(Text, { color: colors.textDim, children: ": " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: value })] }, key))) })] })), selectedDevbox.failure_reason && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { color: colors.error, bold: true, children: [figures.cross, " Error"] }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: colors.error, children: selectedDevbox.failure_reason }) })] })), _jsx(StateHistory, { stateTransitions: selectedDevbox.state_transitions, shutdownReason: selectedDevbox.shutdown_reason ?? undefined }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Actions"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, children: operations.map((op, index) => {
-                            const isSelected = index === selectedOperation;
-                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? colors.primary : colors.textDim, children: [isSelected ? figures.pointer : " ", " "] }), _jsxs(Text, { color: isSelected ? op.color : colors.textDim, bold: isSelected, children: [op.icon, " ", op.label] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", op.shortcut, "]"] })] }, op.key));
-                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Execute \u2022 [i] Full Details \u2022 [o] Browser \u2022 [q] Back"] }) })] }));
+    // Determine if we should poll based on status
+    const shouldPoll = currentDevbox.status === "running" ||
+        currentDevbox.status === "provisioning" ||
+        currentDevbox.status === "initializing" ||
+        currentDevbox.status === "resuming" ||
+        currentDevbox.status === "suspending";
+    return (_jsx(ResourceDetailPage, { resource: currentDevbox, resourceType: "Devboxes", getDisplayName: (d) => d.name || d.id, getId: (d) => d.id, getStatus: (d) => d.status, getUrl: (d) => getDevboxUrl(d.id), detailSections: buildDetailSections(currentDevbox), operations: getFilteredOperations(currentDevbox), onOperation: handleOperation, onBack: onBack, buildDetailLines: buildDetailLines, additionalContent: _jsx(StateHistory, { stateTransitions: currentDevbox.state_transitions, shutdownReason: currentDevbox.shutdown_reason ?? undefined }), pollResource: shouldPoll ? pollDevbox : undefined, pollInterval: 3000 }));
 };