@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/commands/devbox/list.js

@@ -1,46 +1,28 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text, useInput, useApp, useStdout } from 'ink';
-import TextInput from 'ink-text-input';
-import figures from 'figures';
-import { getClient } from '../../utils/client.js';
-import { SpinnerComponent } from '../../components/Spinner.js';
-import { ErrorMessage } from '../../components/ErrorMessage.js';
-import { getStatusDisplay } from '../../components/StatusBadge.js';
-import { Breadcrumb } from '../../components/Breadcrumb.js';
-import { Table, createTextColumn } from '../../components/Table.js';
-import { createExecutor } from '../../utils/CommandExecutor.js';
-import { DevboxDetailPage } from '../../components/DevboxDetailPage.js';
-import { DevboxCreatePage } from '../../components/DevboxCreatePage.js';
-import { DevboxActionsMenu } from '../../components/DevboxActionsMenu.js';
-import { ActionsPopup } from '../../components/ActionsPopup.js';
-import { getDevboxUrl } from '../../utils/url.js';
-import { runSSHSession } from '../../utils/sshSession.js';
-// Format time ago in a succinct way
-const formatTimeAgo = (timestamp) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24)
-        return `${hours}h ago`;
-    const days = Math.floor(hours / 24);
-    if (days < 30)
-        return `${days}d ago`;
-    const months = Math.floor(days / 30);
-    if (months < 12)
-        return `${months}mo ago`;
-    const years = Math.floor(months / 12);
-    return `${years}y ago`;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput, useApp, useStdout } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { getClient } from "../../utils/client.js";
+import { SpinnerComponent } from "../../components/Spinner.js";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
+import { getStatusDisplay } from "../../components/StatusBadge.js";
+import { Breadcrumb } from "../../components/Breadcrumb.js";
+import { Table, createTextColumn } from "../../components/Table.js";
+import { formatTimeAgo } from "../../components/ResourceListView.js";
+import { createExecutor } from "../../utils/CommandExecutor.js";
+import { DevboxDetailPage } from "../../components/DevboxDetailPage.js";
+import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
+import { ResourceActionsMenu } from "../../components/ResourceActionsMenu.js";
+import { ActionsPopup } from "../../components/ActionsPopup.js";
+import { getDevboxUrl } from "../../utils/url.js";
+import { runSSHSession, } from "../../utils/sshSession.js";
+import { colors } from "../../utils/theme.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit }) => {
     const { exit: inkExit } = useApp();
     const { stdout } = useStdout();
-    const [loading, setLoading] = React.useState(true);
+    const [initialLoading, setInitialLoading] = React.useState(true);
     const [devboxes, setDevboxes] = React.useState([]);
     const [error, setError] = React.useState(null);
     const [currentPage, setCurrentPage] = React.useState(0);
@@ -52,8 +34,9 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     const [selectedOperation, setSelectedOperation] = React.useState(0);
     const [refreshing, setRefreshing] = React.useState(false);
     const [refreshIcon, setRefreshIcon] = React.useState(0);
+    const isNavigating = React.useRef(false);
     const [searchMode, setSearchMode] = React.useState(false);
-    const [searchQuery, setSearchQuery] = React.useState('');
+    const [searchQuery, setSearchQuery] = React.useState("");
     const [totalCount, setTotalCount] = React.useState(0);
     const [hasMore, setHasMore] = React.useState(false);
     const pageCache = React.useRef(new Map());
@@ -69,66 +52,155 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     const statusTextWidth = 10;
     const timeWidth = 20;
     const capabilitiesWidth = 18;
-    const tagWidth = 6;
+    const sourceWidth = 26;
     // ID is always full width (25 chars for dbx_31CYd5LLFbBxst8mqnUjO format)
     const idWidth = 26;
     // Responsive layout based on terminal width
-    const showCapabilities = terminalWidth >= 120;
-    const showTags = terminalWidth >= 110;
+    const showCapabilities = terminalWidth >= 140;
+    const showSource = terminalWidth >= 120;
     // Name width is flexible and uses remaining space
     let nameWidth = 15;
     if (terminalWidth >= 120) {
-        const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - capabilitiesWidth - tagWidth - 12;
+        const remainingWidth = terminalWidth -
+            fixedWidth -
+            statusIconWidth -
+            idWidth -
+            statusTextWidth -
+            timeWidth -
+            capabilitiesWidth -
+            sourceWidth -
+            12;
         nameWidth = Math.max(15, remainingWidth);
     }
     else if (terminalWidth >= 110) {
-        const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - tagWidth - 10;
+        const remainingWidth = terminalWidth -
+            fixedWidth -
+            statusIconWidth -
+            idWidth -
+            statusTextWidth -
+            timeWidth -
+            sourceWidth -
+            10;
         nameWidth = Math.max(12, remainingWidth);
     }
     else {
-        const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - 10;
+        const remainingWidth = terminalWidth -
+            fixedWidth -
+            statusIconWidth -
+            idWidth -
+            statusTextWidth -
+            timeWidth -
+            10;
         nameWidth = Math.max(8, remainingWidth);
     }
     // Define allOperations
     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",
+        },
     ];
     // Check if we need to focus on a specific devbox after returning from SSH
     React.useEffect(() => {
-        if (focusDevboxId && devboxes.length > 0 && !loading) {
+        if (focusDevboxId && devboxes.length > 0 && !initialLoading) {
             // Find the devbox in the current page
-            const devboxIndex = devboxes.findIndex(d => d.id === focusDevboxId);
+            const devboxIndex = devboxes.findIndex((d) => d.id === focusDevboxId);
             if (devboxIndex !== -1) {
                 setSelectedIndex(devboxIndex);
                 setShowDetails(true);
             }
         }
-    }, [devboxes, loading, focusDevboxId]);
+    }, [devboxes, initialLoading, focusDevboxId]);
+    // Clear cache when search query changes
+    React.useEffect(() => {
+        pageCache.current.clear();
+        lastIdCache.current.clear();
+        setCurrentPage(0);
+    }, [searchQuery]);
     React.useEffect(() => {
-        const list = async (isInitialLoad = false) => {
+        const list = async (isInitialLoad = false, isBackgroundRefresh = false) => {
             try {
+                // Set navigating flag at the start (but not for background refresh)
+                if (!isBackgroundRefresh) {
+                    isNavigating.current = true;
+                }
                 // Only show refreshing indicator on initial load
                 if (isInitialLoad) {
                     setRefreshing(true);
                 }
                 // Check if we have cached data for this page
-                if (!isInitialLoad && pageCache.current.has(currentPage)) {
+                if (!isInitialLoad &&
+                    !isBackgroundRefresh &&
+                    pageCache.current.has(currentPage)) {
                     setDevboxes(pageCache.current.get(currentPage) || []);
-                    setLoading(false);
+                    isNavigating.current = false;
                     return;
                 }
                 const client = getClient();
                 const pageDevboxes = [];
                 // Get starting_after cursor from previous page's last ID
-                const startingAfter = currentPage > 0 ? lastIdCache.current.get(currentPage - 1) : undefined;
+                const startingAfter = currentPage > 0
+                    ? lastIdCache.current.get(currentPage - 1)
+                    : undefined;
                 // Build query params
                 const queryParams = {
                     limit: PAGE_SIZE,
@@ -139,6 +211,9 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
                 if (status) {
                     queryParams.status = status;
                 }
+                if (searchQuery) {
+                    queryParams.search = searchQuery;
+                }
                 // Fetch only the current page
                 const page = await client.devboxes.list(queryParams);
                 // Collect items from the page - only get PAGE_SIZE items, don't auto-paginate
@@ -172,25 +247,31 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
                 setError(err);
             }
             finally {
-                setLoading(false);
-                // Show refresh indicator briefly
+                if (!isBackgroundRefresh) {
+                    isNavigating.current = false;
+                }
+                // Only set initialLoading to false after first successful load
                 if (isInitialLoad) {
+                    setInitialLoading(false);
                     setTimeout(() => setRefreshing(false), 300);
                 }
             }
         };
-        list(true);
-        // Poll every 3 seconds (increased from 2), but only when in list view
+        // Only treat as initial load on first mount
+        const isFirstMount = initialLoading;
+        list(isFirstMount, false);
+        // Poll every 3 seconds (increased from 2), but only when in list view and not navigating
         const interval = setInterval(() => {
-            if (!showDetails && !showCreate && !showActions) {
-                // Clear cache on refresh to get latest data
-                pageCache.current.clear();
-                lastIdCache.current.clear();
-                list(false);
+            if (!showDetails &&
+                !showCreate &&
+                !showActions &&
+                !isNavigating.current) {
+                // Don't clear cache on background refresh - just update the current page
+                list(false, true);
             }
         }, 3000);
         return () => clearInterval(interval);
-    }, [showDetails, showCreate, showActions, currentPage]);
+    }, [showDetails, showCreate, showActions, currentPage, searchQuery]);
     // Animate refresh icon only when in list view
     React.useEffect(() => {
         if (showDetails || showCreate || showActions) {
@@ -203,8 +284,8 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     }, [showDetails, showCreate, showActions]);
     useInput((input, key) => {
         // Handle Ctrl+C to force exit
-        if (key.ctrl && input === 'c') {
-            process.stdout.write('\x1b[?1049l'); // Exit alternate screen
+        if (key.ctrl && input === "c") {
+            process.stdout.write("\x1b[?1049l"); // Exit alternate screen
             process.exit(130);
         }
         const pageDevboxes = currentDevboxes.length;
@@ -212,7 +293,7 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
         if (searchMode) {
             if (key.escape) {
                 setSearchMode(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
             return;
         }
@@ -230,7 +311,7 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
         }
         // Handle popup navigation
         if (showPopup) {
-            if (key.escape || input === 'q') {
+            if (key.escape || input === "q") {
                 console.clear();
                 setShowPopup(false);
                 setSelectedOperation(0);
@@ -249,7 +330,7 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
             }
             else if (input) {
                 // Check for shortcut match
-                const matchedOpIndex = operations.findIndex(op => op.shortcut === input);
+                const matchedOpIndex = operations.findIndex((op) => op.shortcut === input);
                 if (matchedOpIndex !== -1) {
                     setSelectedOperation(matchedOpIndex);
                     console.clear();
@@ -266,11 +347,15 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
         else if (key.downArrow && selectedIndex < pageDevboxes - 1) {
             setSelectedIndex(selectedIndex + 1);
         }
-        else if ((input === 'n' || key.rightArrow) && currentPage < totalPages - 1) {
+        else if ((input === "n" || key.rightArrow) &&
+            !isNavigating.current &&
+            currentPage < totalPages - 1) {
             setCurrentPage(currentPage + 1);
             setSelectedIndex(0);
         }
-        else if ((input === 'p' || key.leftArrow) && currentPage > 0) {
+        else if ((input === "p" || key.leftArrow) &&
+            !isNavigating.current &&
+            currentPage > 0) {
             setCurrentPage(currentPage - 1);
             setSelectedIndex(0);
         }
@@ -278,26 +363,26 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
             console.clear();
             setShowDetails(true);
         }
-        else if (input === 'a') {
+        else if (input === "a") {
             console.clear();
             setShowPopup(true);
             setSelectedOperation(0);
         }
-        else if (input === 'c') {
+        else if (input === "c") {
             console.clear();
             setShowCreate(true);
         }
-        else if (input === 'o' && selectedDevbox) {
+        else if (input === "o" && selectedDevbox) {
             // Open in browser
             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 {
@@ -307,13 +392,13 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
             };
             openBrowser();
         }
-        else if (input === '/') {
+        else if (input === "/") {
             setSearchMode(true);
         }
         else if (key.escape) {
             if (searchQuery) {
                 // Clear search when Esc is pressed and there's an active search
-                setSearchQuery('');
+                setSearchQuery("");
                 setCurrentPage(0);
                 setSelectedIndex(0);
             }
@@ -331,19 +416,8 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
             }
         }
     });
-    // Filter devboxes based on search query (client-side only for current page)
-    const filteredDevboxes = React.useMemo(() => {
-        if (!searchQuery.trim())
-            return devboxes;
-        const query = searchQuery.toLowerCase();
-        return devboxes.filter(devbox => {
-            return (devbox.id?.toLowerCase().includes(query) ||
-                devbox.name?.toLowerCase().includes(query) ||
-                devbox.status?.toLowerCase().includes(query));
-        });
-    }, [devboxes, searchQuery]);
-    // Current page is already fetched, no need to slice
-    const currentDevboxes = filteredDevboxes;
+    // No client-side filtering - search is handled server-side
+    const currentDevboxes = devboxes;
     // Ensure selected index is within bounds after filtering
     React.useEffect(() => {
         if (currentDevboxes.length > 0 && selectedIndex >= currentDevboxes.length) {
@@ -356,23 +430,27 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     const startIndex = currentPage * PAGE_SIZE;
     const endIndex = startIndex + currentDevboxes.length;
     // 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;
     // Create view
     if (showCreate) {
         return (_jsx(DevboxCreatePage, { onBack: () => {
@@ -386,12 +464,12 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     // Actions view
     if (showActions && selectedDevbox) {
         const selectedOp = operations[selectedOperation];
-        return (_jsx(DevboxActionsMenu, { devbox: selectedDevbox, onBack: () => {
+        return (_jsx(ResourceActionsMenu, { resourceType: "devbox", resource: selectedDevbox, onBack: () => {
                 setShowActions(false);
                 setSelectedOperation(0);
             }, breadcrumbItems: [
-                { label: 'Devboxes' },
-                { label: selectedDevbox.name || selectedDevbox.id, active: true }
+                { label: "Devboxes" },
+                { label: selectedDevbox.name || selectedDevbox.id, active: true },
             ], initialOperation: selectedOp?.key, skipOperationsMenu: true, onSSHRequest: onSSHRequest }));
     }
     // Details view
@@ -400,108 +478,166 @@ const ListDevboxesUI = ({ status, onSSHRequest, focusDevboxId, onBack, onExit })
     }
     // Show popup with table in background
     if (showPopup && selectedDevbox) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes', active: true }
-                    ] }), !loading && !error && devboxes.length > 0 && (_jsx(_Fragment, { children: _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${totalCount}]`, columns: [
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes", active: true }], showVersionCheck: true }), !initialLoading && !error && devboxes.length > 0 && (_jsx(_Fragment, { children: _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${totalCount}]`, columns: [
                             {
-                                key: 'statusIcon',
-                                label: '',
+                                key: "statusIcon",
+                                label: "",
                                 width: statusIconWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
-                                    // Truncate icon to fit width and pad
-                                    const icon = statusDisplay.icon.slice(0, statusIconWidth);
-                                    const padded = icon.padEnd(statusIconWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
-                                }
+                                    return (_jsxs(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                                },
                             },
-                            createTextColumn('id', 'ID', (devbox) => devbox.id, { width: idWidth, color: 'gray', dimColor: true, bold: false }),
+                            createTextColumn("id", "ID", (devbox) => devbox.id, {
+                                width: idWidth,
+                                color: colors.textDim,
+                                dimColor: false,
+                                bold: false,
+                            }),
                             {
-                                key: 'statusText',
-                                label: 'Status',
+                                key: "statusText",
+                                label: "Status",
                                 width: statusTextWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
                                     const truncated = statusDisplay.text.slice(0, statusTextWidth);
-                                    const padded = truncated.padEnd(statusTextWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
-                                }
+                                    const padded = truncated.padEnd(statusTextWidth, " ");
+                                    return (_jsx(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: padded }));
+                                },
                             },
-                            createTextColumn('name', 'Name', (devbox) => devbox.name || '', { width: nameWidth, dimColor: true }),
-                            createTextColumn('capabilities', 'Capabilities', (devbox) => {
-                                const hasCapabilities = devbox.capabilities && devbox.capabilities.filter((c) => c !== 'unknown').length > 0;
+                            createTextColumn("name", "Name", (devbox) => devbox.name || "", {
+                                width: nameWidth,
+                                dimColor: false,
+                            }),
+                            createTextColumn("capabilities", "Capabilities", (devbox) => {
+                                const hasCapabilities = devbox.capabilities &&
+                                    devbox.capabilities.filter((c) => c !== "unknown")
+                                        .length > 0;
                                 return hasCapabilities
                                     ? `[${devbox.capabilities
-                                        .filter((c) => c !== 'unknown')
-                                        .map((c) => c === 'computer_usage' ? 'comp' : c === 'browser_usage' ? 'browser' : c === 'docker_in_docker' ? 'docker' : c)
-                                        .join(',')}]`
-                                    : '';
-                            }, { width: capabilitiesWidth, color: 'blue', dimColor: true, bold: false, visible: showCapabilities }),
-                            createTextColumn('tags', 'Tags', (devbox) => devbox.blueprint_id ? '[bp]' : devbox.snapshot_id ? '[snap]' : '', { width: tagWidth, color: 'yellow', dimColor: true, bold: false, visible: showTags }),
-                            createTextColumn('created', 'Created', (devbox) => devbox.create_time_ms ? formatTimeAgo(devbox.create_time_ms) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
+                                        .filter((c) => c !== "unknown")
+                                        .map((c) => c === "computer_usage"
+                                        ? "comp"
+                                        : c === "browser_usage"
+                                            ? "browser"
+                                            : c === "docker_in_docker"
+                                                ? "docker"
+                                                : c)
+                                        .join(",")}]`
+                                    : "";
+                            }, {
+                                width: capabilitiesWidth,
+                                color: colors.info,
+                                dimColor: false,
+                                bold: false,
+                                visible: showCapabilities,
+                            }),
+                            createTextColumn("source", "Source", (devbox) => devbox.blueprint_id
+                                ? devbox.blueprint_id
+                                : devbox.snapshot_id
+                                    ? devbox.snapshot_id
+                                    : "", {
+                                width: sourceWidth,
+                                color: colors.info,
+                                dimColor: false,
+                                bold: false,
+                                visible: showSource,
+                            }),
+                            createTextColumn("created", "Created", (devbox) => devbox.create_time_ms
+                                ? formatTimeAgo(devbox.create_time_ms)
+                                : "", {
+                                width: timeWidth,
+                                color: colors.textDim,
+                                dimColor: false,
+                                bold: false,
+                            }),
                         ] }) })), _jsx(Box, { marginTop: -Math.min(operations.length + 10, PAGE_SIZE + 5), justifyContent: "center", children: _jsx(ActionsPopup, { devbox: selectedDevbox, operations: operations, selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })] }));
     }
-    // If loading or error, show that first
-    if (loading) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes', active: true }
-                    ] }), _jsx(SpinnerComponent, { message: "Loading..." })] }));
+    // If initial loading or error, show that first
+    if (initialLoading) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes", active: true }], showVersionCheck: true }), _jsx(SpinnerComponent, { message: "Loading..." })] }));
     }
     if (error) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes', active: true }
-                    ] }), _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
-    }
-    if (!loading && !error && devboxes.length === 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                        { label: 'Devboxes', active: true }
-                    ] }), _jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No devboxes found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln devbox create" })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes", active: true }], showVersionCheck: true }), _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
     }
-    // List view with data
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
-                    { label: 'Devboxes', active: true }
-                ] }), currentDevboxes && currentDevboxes.length >= 0 && (_jsxs(_Fragment, { children: [searchMode && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "cyan", children: [figures.pointerSmall, " Search: "] }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search (name, id, status)...", onSubmit: () => {
+    // List view with data (always show, even if empty)
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: "Devboxes", active: true }] }), currentDevboxes && currentDevboxes.length >= 0 && (_jsxs(_Fragment, { children: [searchMode && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.pointerSmall, " Search:", " "] }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search (name, id, status)...", onSubmit: () => {
                                     setSearchMode(false);
                                     setCurrentPage(0);
                                     setSelectedIndex(0);
-                                } }), _jsx(Text, { color: "gray", dimColor: true, children: " [Esc to cancel]" })] })), !searchMode && searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "cyan", children: [figures.info, " Searching for: "] }), _jsx(Text, { color: "yellow", bold: true, children: searchQuery }), _jsxs(Text, { color: "gray", dimColor: true, children: [" (", currentDevboxes.length, " results) [/ to edit, Esc to clear]"] })] })), _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${searchQuery ? currentDevboxes.length : totalCount}]`, columns: [
+                                } }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Esc to cancel]"] })] })), !searchMode && searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: searchQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", totalCount, " results) [/ to edit, Esc to clear]"] })] })), _jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${totalCount}]`, columns: [
                             {
-                                key: 'statusIcon',
-                                label: '',
+                                key: "statusIcon",
+                                label: "",
                                 width: statusIconWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
-                                    // Truncate icon to fit width and pad
-                                    const icon = statusDisplay.icon.slice(0, statusIconWidth);
-                                    const padded = icon.padEnd(statusIconWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
-                                }
+                                    return (_jsxs(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: [statusDisplay.icon, " "] }));
+                                },
                             },
-                            createTextColumn('id', 'ID', (devbox) => devbox.id, { width: idWidth, color: 'gray', dimColor: true, bold: false }),
+                            createTextColumn("id", "ID", (devbox) => devbox.id, {
+                                width: idWidth,
+                                color: colors.textDim,
+                                dimColor: false,
+                                bold: false,
+                            }),
                             {
-                                key: 'statusText',
-                                label: 'Status',
+                                key: "statusText",
+                                label: "Status",
                                 width: statusTextWidth,
                                 render: (devbox, index, isSelected) => {
                                     const statusDisplay = getStatusDisplay(devbox.status);
                                     const truncated = statusDisplay.text.slice(0, statusTextWidth);
-                                    const padded = truncated.padEnd(statusTextWidth, ' ');
-                                    return (_jsx(Text, { color: isSelected ? 'white' : statusDisplay.color, bold: true, inverse: isSelected, children: padded }));
-                                }
+                                    const padded = truncated.padEnd(statusTextWidth, " ");
+                                    return (_jsx(Text, { color: isSelected ? "white" : statusDisplay.color, bold: true, inverse: isSelected, wrap: "truncate", children: padded }));
+                                },
                             },
-                            createTextColumn('name', 'Name', (devbox) => devbox.name || '', { width: nameWidth }),
-                            createTextColumn('capabilities', 'Capabilities', (devbox) => {
-                                const hasCapabilities = devbox.capabilities && devbox.capabilities.filter((c) => c !== 'unknown').length > 0;
+                            createTextColumn("name", "Name", (devbox) => devbox.name || "", {
+                                width: nameWidth,
+                            }),
+                            createTextColumn("capabilities", "Capabilities", (devbox) => {
+                                const hasCapabilities = devbox.capabilities &&
+                                    devbox.capabilities.filter((c) => c !== "unknown")
+                                        .length > 0;
                                 return hasCapabilities
                                     ? `[${devbox.capabilities
-                                        .filter((c) => c !== 'unknown')
-                                        .map((c) => c === 'computer_usage' ? 'comp' : c === 'browser_usage' ? 'browser' : c === 'docker_in_docker' ? 'docker' : c)
-                                        .join(',')}]`
-                                    : '';
-                            }, { width: capabilitiesWidth, color: 'blue', dimColor: true, bold: false, visible: showCapabilities }),
-                            createTextColumn('tags', 'Tags', (devbox) => devbox.blueprint_id ? '[bp]' : devbox.snapshot_id ? '[snap]' : '', { width: tagWidth, color: 'yellow', dimColor: true, bold: false, visible: showTags }),
-                            createTextColumn('created', 'Created', (devbox) => devbox.create_time_ms ? formatTimeAgo(devbox.create_time_ms) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
-                        ] }, `table-${searchQuery}-${currentPage}`), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " ", totalCount] }), _jsx(Text, { color: "gray", dimColor: true, children: " total" }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] })] })), _jsx(Text, { color: "gray", dimColor: true, children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), hasMore && (_jsx(Text, { color: "gray", dimColor: true, children: " (more available)" })), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: "cyan", children: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][refreshIcon % 10] })) : (_jsx(Text, { color: "green", children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 [Enter] Details \u2022 [a] Actions \u2022 [c] Create \u2022 [/] Search \u2022 [o] Browser \u2022 [Esc] Back"] })] })] }))] }));
+                                        .filter((c) => c !== "unknown")
+                                        .map((c) => c === "computer_usage"
+                                        ? "comp"
+                                        : c === "browser_usage"
+                                            ? "browser"
+                                            : c === "docker_in_docker"
+                                                ? "docker"
+                                                : c)
+                                        .join(",")}]`
+                                    : "";
+                            }, {
+                                width: capabilitiesWidth,
+                                color: colors.info,
+                                dimColor: false,
+                                bold: false,
+                                visible: showCapabilities,
+                            }),
+                            createTextColumn("source", "Source", (devbox) => devbox.blueprint_id
+                                ? devbox.blueprint_id
+                                : devbox.snapshot_id
+                                    ? devbox.snapshot_id
+                                    : "", {
+                                width: sourceWidth,
+                                color: colors.info,
+                                dimColor: false,
+                                bold: false,
+                                visible: showSource,
+                            }),
+                            createTextColumn("created", "Created", (devbox) => devbox.create_time_ms
+                                ? formatTimeAgo(devbox.create_time_ms)
+                                : "", {
+                                width: timeWidth,
+                                color: colors.textDim,
+                                dimColor: false,
+                                bold: false,
+                            }),
+                        ] }, `table-${searchQuery}-${currentPage}`), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", totalCount] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "total"] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Page ", currentPage + 1, " of ", totalPages] })] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Showing ", startIndex + 1, "-", endIndex, " of ", totalCount] }), hasMore && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(more available)"] })), _jsx(Text, { children: " " }), refreshing ? (_jsx(Text, { color: colors.primary, children: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"][refreshIcon % 10] })) : (_jsx(Text, { color: colors.success, children: figures.circleFilled }))] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), totalPages > 1 && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Enter] Details \u2022 [a] Actions \u2022 [c] Create \u2022 [/] Search \u2022 [o] Browser \u2022 [Esc] Back"] })] })] }))] }));
 };
 // Export the UI component for use in the main menu
 export { ListDevboxesUI };
@@ -511,7 +647,9 @@ export async function listDevboxes(options, focusDevboxId) {
     await executor.executeList(async () => {
         const client = executor.getClient();
         return executor.fetchFromIterator(client.devboxes.list(), {
-            filter: options.status ? (devbox) => devbox.status === options.status : undefined,
+            filter: options.status
+                ? (devbox) => devbox.status === options.status
+                : undefined,
             limit: DEFAULT_PAGE_SIZE,
         });
     }, () => (_jsx(ListDevboxesUI, { status: options.status, focusDevboxId: focusDevboxId, onSSHRequest: (config) => {
@@ -523,7 +661,7 @@ export async function listDevboxes(options, focusDevboxId) {
         if (result.shouldRestart) {
             console.clear();
             console.log(`\nSSH session ended. Returning to CLI...\n`);
-            await new Promise(resolve => setTimeout(resolve, 500));
+            await new Promise((resolve) => setTimeout(resolve, 500));
             // Restart the list view with the devbox ID to focus on
             await listDevboxes(options, result.returnToDevboxId);
         }