@runloop/rl-cli 0.0.1

package/dist/commands/devbox/list.js

@@ -0,0 +1,302 @@
+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 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';
+// 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`;
+};
+const MAX_FETCH = 100;
+const DEFAULT_PAGE_SIZE = 10;
+const ListDevboxesUI = ({ status }) => {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const [loading, setLoading] = React.useState(true);
+    const [devboxes, setDevboxes] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [showDetails, setShowDetails] = React.useState(false);
+    const [showCreate, setShowCreate] = React.useState(false);
+    const [refreshing, setRefreshing] = React.useState(false);
+    const [refreshIcon, setRefreshIcon] = React.useState(0);
+    // Calculate responsive dimensions
+    const terminalWidth = stdout?.columns || 120;
+    const terminalHeight = stdout?.rows || 30;
+    // Calculate dynamic page size based on terminal height
+    // Account for: Banner (3-4 lines) + Breadcrumb (1) + Header (1) + Stats (2) + Help text (2) + Margins (2) + Header row (1) = ~12 lines
+    const PAGE_SIZE = Math.max(5, terminalHeight - 12);
+    const fixedWidth = 4; // pointer + spaces
+    const statusIconWidth = 2;
+    const statusTextWidth = 10;
+    const timeWidth = 20;
+    const capabilitiesWidth = 18;
+    const tagWidth = 6;
+    // 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;
+    // 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;
+        nameWidth = Math.max(15, remainingWidth);
+    }
+    else if (terminalWidth >= 110) {
+        const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - tagWidth - 10;
+        nameWidth = Math.max(12, remainingWidth);
+    }
+    else {
+        const remainingWidth = terminalWidth - fixedWidth - statusIconWidth - idWidth - statusTextWidth - timeWidth - 10;
+        nameWidth = Math.max(8, remainingWidth);
+    }
+    React.useEffect(() => {
+        const list = async (isInitialLoad = false) => {
+            try {
+                // Only show refreshing indicator on initial load
+                if (isInitialLoad) {
+                    setRefreshing(true);
+                }
+                const client = getClient();
+                const allDevboxes = [];
+                let count = 0;
+                for await (const devbox of client.devboxes.list()) {
+                    if (!status || devbox.status === status) {
+                        allDevboxes.push(devbox);
+                    }
+                    count++;
+                    if (count >= MAX_FETCH) {
+                        break;
+                    }
+                }
+                // Only update if data actually changed
+                setDevboxes((prev) => {
+                    const hasChanged = JSON.stringify(prev) !== JSON.stringify(allDevboxes);
+                    return hasChanged ? allDevboxes : prev;
+                });
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+                // Show refresh indicator briefly
+                if (isInitialLoad) {
+                    setTimeout(() => setRefreshing(false), 300);
+                }
+            }
+        };
+        list(true);
+        // Poll every 3 seconds (increased from 2), but only when in list view
+        const interval = setInterval(() => {
+            if (!showDetails && !showCreate) {
+                list(false);
+            }
+        }, 3000);
+        return () => clearInterval(interval);
+    }, [showDetails, showCreate]);
+    // Animate refresh icon only when in list view
+    React.useEffect(() => {
+        if (showDetails || showCreate) {
+            return; // Don't animate when not in list view
+        }
+        const interval = setInterval(() => {
+            setRefreshIcon((prev) => (prev + 1) % 10);
+        }, 80);
+        return () => clearInterval(interval);
+    }, [showDetails, showCreate]);
+    useInput((input, key) => {
+        const pageDevboxes = currentDevboxes.length;
+        // Skip input handling when in details view - let DevboxDetailPage handle it
+        if (showDetails) {
+            return;
+        }
+        // Skip input handling when in create view - let DevboxCreatePage handle it
+        if (showCreate) {
+            return;
+        }
+        // Handle list view
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageDevboxes - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === 'n' || key.rightArrow) && currentPage < totalPages - 1) {
+            setCurrentPage(currentPage + 1);
+            setSelectedIndex(0);
+        }
+        else if ((input === 'p' || key.leftArrow) && currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+            setSelectedIndex(0);
+        }
+        else if (key.return) {
+            console.clear();
+            setShowDetails(true);
+        }
+        else if (input === 'c') {
+            console.clear();
+            setShowCreate(true);
+        }
+        else if (input === 'o' && selectedDevbox) {
+            // Open in browser
+            const url = `https://platform.runloop.ai/devboxes/${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();
+        }
+        else if (input === 'q') {
+            process.exit(0);
+        }
+    });
+    const running = devboxes.filter((d) => d.status === 'running').length;
+    const stopped = devboxes.filter((d) => ['stopped', 'suspended'].includes(d.status)).length;
+    const totalPages = Math.ceil(devboxes.length / PAGE_SIZE);
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, devboxes.length);
+    const currentDevboxes = devboxes.slice(startIndex, endIndex);
+    const selectedDevbox = currentDevboxes[selectedIndex];
+    // Create view
+    if (showCreate) {
+        return (_jsx(DevboxCreatePage, { onBack: () => {
+                setShowCreate(false);
+            }, onCreate: (devbox) => {
+                // Refresh the list after creation
+                setShowCreate(false);
+                // The list will auto-refresh via the polling effect
+            } }));
+    }
+    // Details view
+    if (showDetails && selectedDevbox) {
+        return _jsx(DevboxDetailPage, { devbox: selectedDevbox, onBack: () => setShowDetails(false) });
+    }
+    // List view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: 'Devboxes', active: true }
+                ] }), loading && _jsx(SpinnerComponent, { message: "Loading..." }), !loading && !error && devboxes.length === 0 && (_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" })] })), !loading && !error && devboxes.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Table, { data: currentDevboxes, keyExtractor: (devbox) => devbox.id, selectedIndex: selectedIndex, title: `devboxes[${devboxes.length}]`, columns: [
+                            {
+                                key: 'statusIcon',
+                                label: '',
+                                width: statusIconWidth,
+                                render: (devbox, index, isSelected) => {
+                                    const statusDisplay = getStatusDisplay(devbox.status);
+                                    const status = devbox.status;
+                                    let color = 'gray';
+                                    if (status === 'running')
+                                        color = 'green';
+                                    else if (status === 'stopped' || status === 'suspended')
+                                        color = 'gray';
+                                    else if (status === 'starting' || status === 'stopping')
+                                        color = 'yellow';
+                                    else if (status === 'failed')
+                                        color = 'red';
+                                    const padded = statusDisplay.icon.padEnd(statusIconWidth, ' ');
+                                    return (_jsx(Text, { color: isSelected ? 'white' : color, bold: true, inverse: isSelected, children: padded }));
+                                }
+                            },
+                            createTextColumn('id', 'ID', (devbox) => devbox.id, { width: idWidth, color: 'gray', dimColor: true, bold: false }),
+                            {
+                                key: 'statusText',
+                                label: 'Status',
+                                width: statusTextWidth,
+                                render: (devbox, index, isSelected) => {
+                                    const statusDisplay = getStatusDisplay(devbox.status);
+                                    const status = devbox.status;
+                                    let color = 'gray';
+                                    if (status === 'running')
+                                        color = 'green';
+                                    else if (status === 'stopped' || status === 'suspended')
+                                        color = 'gray';
+                                    else if (status === 'starting' || status === 'stopping')
+                                        color = 'yellow';
+                                    else if (status === 'failed')
+                                        color = 'red';
+                                    const truncated = statusDisplay.text.slice(0, statusTextWidth);
+                                    const padded = truncated.padEnd(statusTextWidth, ' ');
+                                    return (_jsx(Text, { color: isSelected ? 'white' : color, bold: true, inverse: isSelected, 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;
+                                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 }),
+                        ] }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.hamburger, " ", devboxes.length, devboxes.length >= MAX_FETCH && '+'] }), _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 ", devboxes.length] }), _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] Operations \u2022 [c] Create \u2022 [o] Browser \u2022 [q] Quit"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
+};
+export async function listDevboxes(options) {
+    const executor = createExecutor(options);
+    await executor.executeList(async () => {
+        const client = executor.getClient();
+        return executor.fetchFromIterator(client.devboxes.list(), {
+            filter: options.status ? (devbox) => devbox.status === options.status : undefined,
+            limit: DEFAULT_PAGE_SIZE,
+        });
+    }, () => _jsx(ListDevboxesUI, { status: options.status }), DEFAULT_PAGE_SIZE);
+    // Check if we need to spawn SSH after Ink exit
+    const sshCommand = global.__sshCommand;
+    if (sshCommand) {
+        delete global.__sshCommand;
+        // Import spawn
+        const { spawnSync } = await import('child_process');
+        // Clear and show connection message
+        console.clear();
+        console.log(`\nConnecting to devbox ${sshCommand.devboxName}...\n`);
+        // Spawn SSH in foreground
+        const result = spawnSync('ssh', [
+            '-i', sshCommand.keyPath,
+            '-o', `ProxyCommand=${sshCommand.proxyCommand}`,
+            '-o', 'StrictHostKeyChecking=no',
+            '-o', 'UserKnownHostsFile=/dev/null',
+            `${sshCommand.sshUser}@${sshCommand.url}`
+        ], {
+            stdio: 'inherit'
+        });
+        process.exit(result.status || 0);
+    }
+}

package/dist/commands/devbox/upload.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { render } from 'ink';
+import { createReadStream } from 'fs';
+import { getClient } from '../../utils/client.js';
+import { Header } from '../../components/Header.js';
+import { SpinnerComponent } from '../../components/Spinner.js';
+import { SuccessMessage } from '../../components/SuccessMessage.js';
+import { ErrorMessage } from '../../components/ErrorMessage.js';
+const UploadFileUI = ({ id, file, targetPath }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [success, setSuccess] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const upload = async () => {
+            try {
+                const client = getClient();
+                const fileStream = createReadStream(file);
+                const filename = file.split('/').pop() || 'uploaded-file';
+                await client.devboxes.uploadFile(id, {
+                    path: targetPath || filename,
+                    file: fileStream,
+                });
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        upload();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Upload File", subtitle: `Uploading to devbox: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Uploading file..." }), success && (_jsx(SuccessMessage, { message: "File uploaded successfully!", details: `File: ${file}${targetPath ? `\nTarget: ${targetPath}` : ''}` })), error && _jsx(ErrorMessage, { message: "Failed to upload file", error: error })] }));
+};
+export async function uploadFile(id, file, options) {
+    const { waitUntilExit } = render(_jsx(UploadFileUI, { id: id, file: file, targetPath: options.path }));
+    await waitUntilExit();
+}

package/dist/commands/exec.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { render, Box, Text } from 'ink';
+import { getClient } from '../utils/client.js';
+import { Header } from '../components/Header.js';
+import { SpinnerComponent } from '../components/Spinner.js';
+import { ErrorMessage } from '../components/ErrorMessage.js';
+const ExecCommandUI = ({ id, command, }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [output, setOutput] = React.useState('');
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const exec = async () => {
+            try {
+                const client = getClient();
+                const result = await client.devboxes.executeSync(id, {
+                    command: command.join(' '),
+                });
+                setOutput(result.stdout || result.stderr || 'Command executed successfully');
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        exec();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Execute Command", subtitle: `Running in devbox: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Executing command..." }), !loading && !error && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(Box, { borderStyle: "round", borderColor: "green", padding: 1, children: _jsx(Text, { children: output }) }) })), error && _jsx(ErrorMessage, { message: "Failed to execute command", error: error })] }));
+};
+export async function execCommand(id, command) {
+    const { waitUntilExit } = render(_jsx(ExecCommandUI, { id: id, command: command }));
+    await waitUntilExit();
+}

package/dist/commands/list.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { render, Box, Text, useInput } from 'ink';
+import Gradient from 'ink-gradient';
+import figures from 'figures';
+import { getClient } from '../utils/client.js';
+import { Header } from '../components/Header.js';
+import { SpinnerComponent } from '../components/Spinner.js';
+import { DevboxCard } from '../components/DevboxCard.js';
+import { ErrorMessage } from '../components/ErrorMessage.js';
+const PAGE_SIZE = 10;
+const ListDevboxesUI = ({ status }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [devboxes, setDevboxes] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    React.useEffect(() => {
+        const list = async () => {
+            try {
+                const client = getClient();
+                const allDevboxes = [];
+                for await (const devbox of client.devboxes.list()) {
+                    if (!status || devbox.status === status) {
+                        allDevboxes.push(devbox);
+                    }
+                }
+                setDevboxes(allDevboxes);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        list();
+    }, []);
+    useInput((input, key) => {
+        if (input === 'n' && currentPage < totalPages - 1) {
+            setCurrentPage(currentPage + 1);
+        }
+        else if (input === 'p' && currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+        }
+        else if (input === 'q') {
+            process.exit(0);
+        }
+    });
+    const getStatusCount = (status) => devboxes.filter((d) => d.status === status).length;
+    const totalPages = Math.ceil(devboxes.length / PAGE_SIZE);
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, devboxes.length);
+    const currentDevboxes = devboxes.slice(startIndex, endIndex);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Your Devboxes", subtitle: status ? `Filtering by status: ${status}` : 'Showing all devboxes' }), loading && _jsx(SpinnerComponent, { message: "Fetching your devboxes..." }), !loading && !error && devboxes.length === 0 && (_jsxs(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 3, paddingY: 2, marginY: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellow", bold: true, children: [figures.info, " No devboxes found"] }) }), _jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: "gray", children: "Create your first devbox with: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln create" })] })] })), !loading && !error && devboxes.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { borderStyle: "round", borderColor: "magenta", paddingX: 3, paddingY: 1, marginY: 1, flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Box, { children: _jsx(Gradient, { name: "passion", children: _jsxs(Text, { bold: true, children: [figures.star, " Summary"] }) }) }), _jsx(Box, { children: _jsxs(Text, { color: "cyan", children: ["Page ", currentPage + 1, "/", totalPages, " (", startIndex + 1, "-", endIndex, " of", ' ', devboxes.length, ")"] }) })] }), _jsxs(Box, { marginTop: 1, gap: 3, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "green", bold: true, children: figures.tick }), _jsx(Text, { color: "gray", children: "Running:" }), _jsx(Text, { color: "green", bold: true, children: getStatusCount('running') })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: figures.ellipsis }), _jsx(Text, { color: "gray", children: "Provisioning:" }), _jsx(Text, { color: "yellow", bold: true, children: getStatusCount('provisioning') + getStatusCount('initializing') })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "gray", bold: true, children: figures.circleDotted }), _jsx(Text, { color: "gray", children: "Stopped:" }), _jsx(Text, { color: "gray", bold: true, children: getStatusCount('stopped') + getStatusCount('suspended') })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: figures.hamburger }), _jsx(Text, { color: "gray", children: "Total:" }), _jsx(Text, { color: "cyan", bold: true, children: devboxes.length })] })] })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: currentDevboxes.map((devbox, index) => (_jsx(DevboxCard, { id: devbox.id, name: devbox.name, status: devbox.status, createdAt: devbox.created_at, index: startIndex + index }, devbox.id))) }), totalPages > 1 && (_jsx(Box, { borderStyle: "round", borderColor: "blue", paddingX: 3, paddingY: 1, marginTop: 1, flexDirection: "column", children: _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { gap: 3, children: [currentPage > 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "[p]" }), _jsx(Text, { color: "gray", children: " Previous" })] })), currentPage < totalPages - 1 && (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "[n]" }), _jsx(Text, { color: "gray", children: " Next" })] })), _jsxs(Box, { children: [_jsx(Text, { color: "red", bold: true, children: "[q]" }), _jsx(Text, { color: "gray", children: " Quit" })] })] }), _jsx(Box, { children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowRight, " Press a key to navigate"] }) })] }) }))] })), error && _jsx(ErrorMessage, { message: "Failed to list devboxes", error: error })] }));
+};
+export async function listDevboxes(options) {
+    const { waitUntilExit } = render(_jsx(ListDevboxesUI, { status: options.status }));
+    await waitUntilExit();
+}

package/dist/commands/snapshot/create.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { render, Box, Text } from 'ink';
+import Gradient from 'ink-gradient';
+import figures from 'figures';
+import { getClient } from '../../utils/client.js';
+import { Header } from '../../components/Header.js';
+import { Banner } from '../../components/Banner.js';
+import { SpinnerComponent } from '../../components/Spinner.js';
+import { SuccessMessage } from '../../components/SuccessMessage.js';
+import { ErrorMessage } from '../../components/ErrorMessage.js';
+const CreateSnapshotUI = ({ devboxId, name }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const create = async () => {
+            try {
+                const client = getClient();
+                const snapshot = await client.devboxes.snapshotDisk(devboxId, {
+                    ...(name && { name }),
+                });
+                setResult(snapshot);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        create();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Header, { title: "Create Snapshot", subtitle: "Taking a snapshot of your devbox..." }), loading && (_jsxs(_Fragment, { children: [_jsx(SpinnerComponent, { message: "Creating snapshot..." }), _jsxs(Box, { borderStyle: "round", borderColor: "blue", paddingX: 3, paddingY: 1, marginY: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "cyan", bold: true, children: [figures.info, " Configuration"] }) }), _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.pointer, " Devbox ID: "] }), _jsx(Text, { color: "white", children: devboxId })] }), name && (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.pointer, " Name: "] }), _jsx(Text, { color: "white", children: name })] }))] })] })] })), result && (_jsxs(_Fragment, { children: [_jsx(SuccessMessage, { message: "Snapshot created successfully!", details: `ID: ${result.id}\nName: ${result.name || '(unnamed)'}\nStatus: ${result.status}` }), _jsxs(Box, { borderStyle: "double", borderColor: "green", paddingX: 3, paddingY: 1, marginY: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Gradient, { name: "summer", children: _jsxs(Text, { bold: true, children: [figures.star, " Next Steps"] }) }) }), _jsxs(Box, { flexDirection: "column", gap: 1, marginLeft: 2, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.tick, " View snapshots: "] }), _jsx(Text, { color: "cyan", children: "rln snapshot list" })] }), _jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.tick, " Create devbox from snapshot: "] }), _jsxs(Text, { color: "cyan", children: ["rln devbox create -t ", result.id] })] })] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to create snapshot", error: error })] }));
+};
+export async function createSnapshot(devboxId, options) {
+    console.clear();
+    const { waitUntilExit } = render(_jsx(CreateSnapshotUI, { devboxId: devboxId, name: options.name }));
+    await waitUntilExit();
+}

package/dist/commands/snapshot/delete.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { getClient } from '../../utils/client.js';
+import { Header } from '../../components/Header.js';
+import { SpinnerComponent } from '../../components/Spinner.js';
+import { SuccessMessage } from '../../components/SuccessMessage.js';
+import { ErrorMessage } from '../../components/ErrorMessage.js';
+import { createExecutor } from '../../utils/CommandExecutor.js';
+const DeleteSnapshotUI = ({ id }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [success, setSuccess] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const deleteSnapshot = async () => {
+            try {
+                const client = getClient();
+                await client.devboxes.diskSnapshots.delete(id);
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        deleteSnapshot();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Delete Snapshot", subtitle: `Deleting snapshot: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Deleting snapshot..." }), success && (_jsx(SuccessMessage, { message: "Snapshot deleted successfully!", details: `ID: ${id}` })), error && _jsx(ErrorMessage, { message: "Failed to delete snapshot", error: error })] }));
+};
+export async function deleteSnapshot(id, options = {}) {
+    const executor = createExecutor(options);
+    await executor.executeDelete(async () => {
+        const client = executor.getClient();
+        await client.devboxes.diskSnapshots.delete(id);
+    }, id, () => _jsx(DeleteSnapshotUI, { id: id }));
+}

package/dist/commands/snapshot/list.js

@@ -0,0 +1,122 @@
+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 { getClient } from '../../utils/client.js';
+import { Header } from '../../components/Header.js';
+import { Banner } from '../../components/Banner.js';
+import { SpinnerComponent } from '../../components/Spinner.js';
+import { ErrorMessage } from '../../components/ErrorMessage.js';
+import { StatusBadge } from '../../components/StatusBadge.js';
+import { Breadcrumb } from '../../components/Breadcrumb.js';
+import { Table, createTextColumn, createComponentColumn } from '../../components/Table.js';
+import { createExecutor } from '../../utils/CommandExecutor.js';
+const PAGE_SIZE = 10;
+const MAX_FETCH = 100;
+// Format time ago
+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`;
+};
+const ListSnapshotsUI = ({ devboxId }) => {
+    const { stdout } = useStdout();
+    const [loading, setLoading] = React.useState(true);
+    const [snapshots, setSnapshots] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const [currentPage, setCurrentPage] = React.useState(0);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    // Calculate responsive column widths
+    const terminalWidth = stdout?.columns || 120;
+    const showDevboxId = terminalWidth >= 100 && !devboxId; // Hide devbox column if filtering by devbox
+    const showFullId = terminalWidth >= 80;
+    const idWidth = 25;
+    const nameWidth = terminalWidth >= 120 ? 30 : 25;
+    const devboxWidth = 15;
+    const timeWidth = 20;
+    React.useEffect(() => {
+        const list = async () => {
+            try {
+                const client = getClient();
+                const allSnapshots = [];
+                let count = 0;
+                const params = devboxId ? { devbox_id: devboxId } : {};
+                for await (const snapshot of client.devboxes.listDiskSnapshots(params)) {
+                    allSnapshots.push(snapshot);
+                    count++;
+                    if (count >= MAX_FETCH) {
+                        break;
+                    }
+                }
+                setSnapshots(allSnapshots);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        list();
+    }, [devboxId]);
+    useInput((input, key) => {
+        const pageSnapshots = currentSnapshots.length;
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageSnapshots - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if ((input === 'n' || key.rightArrow) && currentPage < totalPages - 1) {
+            setCurrentPage(currentPage + 1);
+            setSelectedIndex(0);
+        }
+        else if ((input === 'p' || key.leftArrow) && currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+            setSelectedIndex(0);
+        }
+        else if (input === 'q') {
+            process.exit(0);
+        }
+    });
+    const totalPages = Math.ceil(snapshots.length / PAGE_SIZE);
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, snapshots.length);
+    const currentSnapshots = snapshots.slice(startIndex, endIndex);
+    const ready = snapshots.filter((s) => s.status === 'ready').length;
+    const pending = snapshots.filter((s) => s.status !== 'ready').length;
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Breadcrumb, { items: [
+                    { label: 'Snapshots', active: !devboxId },
+                    ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
+                ] }), _jsx(Header, { title: "Snapshots", subtitle: devboxId ? `Filtering by devbox: ${devboxId}` : undefined }), loading && _jsx(SpinnerComponent, { message: "Loading snapshots..." }), !loading && !error && snapshots.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No snapshots found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln snapshot create <devbox-id>" })] })), !loading && !error && snapshots.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: [figures.tick, " ", ready] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: [figures.ellipsis, " ", pending] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "cyan", children: [figures.hamburger, " ", snapshots.length, snapshots.length >= MAX_FETCH && '+'] }), totalPages > 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "gray", children: " \u2022 " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["Page ", currentPage + 1, "/", totalPages] })] }))] }), _jsx(Table, { data: currentSnapshots, keyExtractor: (snapshot) => snapshot.id, selectedIndex: selectedIndex, columns: [
+                            createComponentColumn('status', 'Status', (snapshot) => _jsx(StatusBadge, { status: snapshot.status, showText: false }), { width: 2 }),
+                            createTextColumn('id', 'ID', (snapshot) => showFullId ? snapshot.id : snapshot.id.slice(0, 13), { width: showFullId ? idWidth : 15, color: 'gray', dimColor: true, bold: false }),
+                            createTextColumn('name', 'Name', (snapshot) => snapshot.name || '(unnamed)', { width: nameWidth }),
+                            createTextColumn('devbox', 'Devbox', (snapshot) => snapshot.devbox_id || '', { width: devboxWidth, color: 'cyan', dimColor: true, bold: false, visible: showDevboxId }),
+                            createTextColumn('created', 'Created', (snapshot) => snapshot.created_at ? formatTimeAgo(new Date(snapshot.created_at).getTime()) : '', { width: timeWidth, color: 'gray', dimColor: true, bold: false }),
+                        ] }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022"] }), totalPages > 1 && (_jsxs(Text, { color: "gray", dimColor: true, children: [' ', figures.arrowLeft, figures.arrowRight, " Page \u2022"] })), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[q] Quit"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list snapshots", error: error })] }));
+};
+export async function listSnapshots(options) {
+    const executor = createExecutor(options);
+    await executor.executeList(async () => {
+        const client = executor.getClient();
+        const params = options.devbox ? { devbox_id: options.devbox } : {};
+        return executor.fetchFromIterator(client.devboxes.listDiskSnapshots(params), {
+            limit: PAGE_SIZE,
+        });
+    }, () => _jsx(ListSnapshotsUI, { devboxId: options.devbox }), PAGE_SIZE);
+}