@runloop/rl-cli 0.0.3 → 0.1.1

package/dist/commands/object/list.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text } from "ink";
+import { getClient } from "../../utils/client.js";
+import { Banner } from "../../components/Banner.js";
+import { SpinnerComponent } from "../../components/Spinner.js";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
+import { createExecutor } from "../../utils/CommandExecutor.js";
+import { colors } from "../../utils/theme.js";
+import { Table } from "../../components/Table.js";
+const ListObjectsUI = ({ options }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const listObjects = async () => {
+            try {
+                const client = getClient();
+                const params = {};
+                if (options.limit)
+                    params.limit = options.limit;
+                if (options.startingAfter)
+                    params.startingAfter = options.startingAfter;
+                if (options.name)
+                    params.name = options.name;
+                if (options.contentType)
+                    params.contentType = options.contentType;
+                if (options.state)
+                    params.state = options.state;
+                if (options.search)
+                    params.search = options.search;
+                if (options.public)
+                    params.isPublic = true;
+                const objects = options.public
+                    ? await client.objects.listPublic(params)
+                    : await client.objects.list(params);
+                setResult(objects);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        listObjects();
+    }, [options]);
+    const formatSize = (bytes) => {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Fetching objects..." }), result && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.primary, children: "Objects:" }), result.objects && result.objects.length > 0 ? (_jsx(Table, { data: result.objects, keyExtractor: (item) => item.id, columns: [
+                            {
+                                key: "id",
+                                label: "ID",
+                                width: 20,
+                                render: (row) => (_jsx(Text, { color: colors.text, children: row.id })),
+                            },
+                            {
+                                key: "name",
+                                label: "Name",
+                                width: 30,
+                                render: (row) => (_jsx(Text, { color: colors.text, children: row.name })),
+                            },
+                            {
+                                key: "type",
+                                label: "Type",
+                                width: 15,
+                                render: (row) => (_jsx(Text, { color: colors.text, children: row.content_type })),
+                            },
+                            {
+                                key: "state",
+                                label: "State",
+                                width: 15,
+                                render: (row) => (_jsx(Text, { color: colors.text, children: row.state })),
+                            },
+                            {
+                                key: "size",
+                                label: "Size",
+                                width: 10,
+                                render: (row) => (_jsx(Text, { color: colors.text, children: row.size_bytes ? formatSize(row.size_bytes) : "N/A" })),
+                            },
+                        ] })) : (_jsx(Text, { color: colors.textDim, children: "No objects found" }))] })), error && _jsx(ErrorMessage, { message: "Failed to list objects", error: error })] }));
+};
+export async function listObjects(options) {
+    const executor = createExecutor({ output: options.output });
+    await executor.executeList(async () => {
+        const client = executor.getClient();
+        const params = {};
+        if (options.limit)
+            params.limit = options.limit;
+        if (options.startingAfter)
+            params.startingAfter = options.startingAfter;
+        if (options.name)
+            params.name = options.name;
+        if (options.contentType)
+            params.contentType = options.contentType;
+        if (options.state)
+            params.state = options.state;
+        if (options.search)
+            params.search = options.search;
+        if (options.public)
+            params.isPublic = true;
+        const objects = options.public
+            ? await client.objects.listPublic(params)
+            : await client.objects.list(params);
+        return objects.objects || [];
+    }, () => _jsx(ListObjectsUI, { options: options }), options.limit || 20);
+}

package/dist/commands/object/upload.js

@@ -0,0 +1,130 @@
+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 { Banner } from "../../components/Banner.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";
+import { readFile, stat } from "fs/promises";
+import { extname } from "path";
+const UploadObjectUI = ({ path, name, contentType }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const uploadObject = async () => {
+            try {
+                const client = getClient();
+                // Check if file exists
+                const stats = await stat(path);
+                const fileBuffer = await readFile(path);
+                // Auto-detect content type if not provided
+                let detectedContentType = contentType;
+                if (!detectedContentType) {
+                    const ext = extname(path).toLowerCase();
+                    const contentTypeMap = {
+                        ".txt": "text",
+                        ".html": "text",
+                        ".css": "text",
+                        ".js": "text",
+                        ".json": "text",
+                        ".yaml": "text",
+                        ".yml": "text",
+                        ".md": "text",
+                        ".gz": "gzip",
+                        ".tar": "tar",
+                        ".tgz": "tgz",
+                        ".tar.gz": "tgz",
+                    };
+                    detectedContentType = contentTypeMap[ext] || "unspecified";
+                }
+                // Step 1: Create the object
+                const createResponse = await client.objects.create({
+                    name,
+                    content_type: detectedContentType,
+                });
+                // Step 2: Upload the file
+                const uploadResponse = await fetch(createResponse.upload_url, {
+                    method: "PUT",
+                    body: fileBuffer,
+                    headers: {
+                        "Content-Length": fileBuffer.length.toString(),
+                    },
+                });
+                if (!uploadResponse.ok) {
+                    throw new Error(`Upload failed: HTTP ${uploadResponse.status}`);
+                }
+                // Step 3: Complete the upload
+                await client.objects.complete(createResponse.id);
+                setResult({
+                    id: createResponse.id,
+                    name,
+                    contentType: detectedContentType,
+                    size: stats.size,
+                });
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        uploadObject();
+    }, [path, name, contentType]);
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Uploading object..." }), result && (_jsx(SuccessMessage, { message: "Object uploaded successfully", details: `ID: ${result.id}\nName: ${result.name}\nType: ${result.contentType}\nSize: ${result.size} bytes` })), error && (_jsx(ErrorMessage, { message: "Failed to upload object", error: error }))] }));
+};
+export async function uploadObject(options) {
+    const executor = createExecutor({ output: options.output });
+    await executor.executeAction(async () => {
+        const client = executor.getClient();
+        // Check if file exists
+        const stats = await stat(options.path);
+        const fileBuffer = await readFile(options.path);
+        // Auto-detect content type if not provided
+        let detectedContentType = options.contentType;
+        if (!detectedContentType) {
+            const ext = extname(options.path).toLowerCase();
+            const contentTypeMap = {
+                ".txt": "text",
+                ".html": "text",
+                ".css": "text",
+                ".js": "text",
+                ".json": "text",
+                ".yaml": "text",
+                ".yml": "text",
+                ".md": "text",
+                ".gz": "gzip",
+                ".tar": "tar",
+                ".tgz": "tgz",
+                ".tar.gz": "tgz",
+            };
+            detectedContentType = contentTypeMap[ext] || "unspecified";
+        }
+        // Step 1: Create the object
+        const createResponse = await client.objects.create({
+            name: options.name,
+            content_type: detectedContentType,
+        });
+        // Step 2: Upload the file
+        const uploadResponse = await fetch(createResponse.upload_url, {
+            method: "PUT",
+            body: fileBuffer,
+            headers: {
+                "Content-Length": fileBuffer.length.toString(),
+            },
+        });
+        if (!uploadResponse.ok) {
+            throw new Error(`Upload failed: HTTP ${uploadResponse.status}`);
+        }
+        // Step 3: Complete the upload
+        await client.objects.complete(createResponse.id);
+        return {
+            id: createResponse.id,
+            name: options.name,
+            contentType: detectedContentType,
+            size: stats.size,
+        };
+    }, () => (_jsx(UploadObjectUI, { path: options.path, name: options.name, contentType: options.contentType })));
+}

package/dist/commands/snapshot/create.js

@@ -1,14 +1,15 @@
 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';
+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";
+import { colors } from "../../utils/theme.js";
 const CreateSnapshotUI = ({ devboxId, name }) => {
     const [loading, setLoading] = React.useState(true);
     const [result, setResult] = React.useState(null);
@@ -31,7 +32,7 @@ const CreateSnapshotUI = ({ devboxId, name }) => {
         };
         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 })] }));
+    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: colors.info, paddingX: 3, paddingY: 1, marginY: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.primary, bold: true, children: [figures.info, " Configuration"] }) }), _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [figures.pointer, " Devbox ID:", " "] }), _jsx(Text, { color: colors.text, children: devboxId })] }), name && (_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [figures.pointer, " Name: "] }), _jsx(Text, { color: colors.text, 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: colors.success, 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: colors.textDim, children: [figures.tick, " View snapshots:", " "] }), _jsx(Text, { color: colors.primary, children: "rli snapshot list" })] }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, children: [figures.tick, " Create devbox from snapshot:", " "] }), _jsxs(Text, { color: colors.primary, children: ["rli devbox create -t ", result.id] })] })] })] })] })), error && (_jsx(ErrorMessage, { message: "Failed to create snapshot", error: error }))] }));
 };
 export async function createSnapshot(devboxId, options) {
     console.clear();

package/dist/commands/snapshot/delete.js

@@ -1,11 +1,11 @@
 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';
+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);
@@ -26,7 +26,7 @@ const DeleteSnapshotUI = ({ id }) => {
         };
         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 })] }));
+    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);

package/dist/commands/snapshot/list.js

@@ -1,55 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text, useInput, useStdout, useApp } 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 { 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStdout } from "ink";
+import { getClient } from "../../utils/client.js";
+import { createTextColumn, } from "../../components/Table.js";
+import { ResourceListView, formatTimeAgo, } from "../../components/ResourceListView.js";
+import { createExecutor } from "../../utils/CommandExecutor.js";
+import { colors } from "../../utils/theme.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, onBack, onExit }) => {
     const { stdout } = useStdout();
-    const { exit: inkExit } = useApp();
-    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 statusIconWidth = 2;
+    const statusTextWidth = 10;
     const idWidth = 25;
     const nameWidth = terminalWidth >= 120 ? 30 : 25;
     const devboxWidth = 15;
     const timeWidth = 20;
-    React.useEffect(() => {
-        const list = async () => {
-            try {
+    return (_jsx(ResourceListView, { config: {
+            resourceName: "Snapshot",
+            resourceNamePlural: "Snapshots",
+            fetchResources: async () => {
                 const client = getClient();
                 const allSnapshots = [];
                 let count = 0;
@@ -57,65 +30,51 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit }) => {
                 for await (const snapshot of client.devboxes.listDiskSnapshots(params)) {
                     allSnapshots.push(snapshot);
                     count++;
-                    if (count >= MAX_FETCH) {
+                    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 (key.escape) {
-            if (onBack) {
-                onBack();
-            }
-            else if (onExit) {
-                onExit();
-            }
-            else {
-                inkExit();
-            }
-        }
-    });
-    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(Breadcrumb, { items: [
-                    { label: 'Snapshots', active: !devboxId },
-                    ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
-                ] }), 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: [' ', "[Esc] Back"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to list snapshots", error: error })] }));
+                return allSnapshots;
+            },
+            columns: [
+                createTextColumn("id", "ID", (snapshot) => snapshot.id, {
+                    width: idWidth,
+                    color: colors.textDim,
+                    dimColor: false,
+                    bold: false,
+                }),
+                createTextColumn("name", "Name", (snapshot) => snapshot.name || "(unnamed)", {
+                    width: nameWidth,
+                }),
+                createTextColumn("devbox", "Devbox", (snapshot) => snapshot.source_devbox_id || "", {
+                    width: devboxWidth,
+                    color: colors.primary,
+                    dimColor: false,
+                    bold: false,
+                    visible: showDevboxId,
+                }),
+                createTextColumn("created", "Created", (snapshot) => snapshot.create_time_ms
+                    ? formatTimeAgo(snapshot.create_time_ms)
+                    : "", {
+                    width: timeWidth,
+                    color: colors.textDim,
+                    dimColor: false,
+                    bold: false,
+                }),
+            ],
+            keyExtractor: (snapshot) => snapshot.id,
+            emptyState: {
+                message: "No snapshots found. Try:",
+                command: "rli snapshot create <devbox-id>",
+            },
+            pageSize: PAGE_SIZE,
+            maxFetch: MAX_FETCH,
+            onBack: onBack,
+            onExit: onExit,
+            breadcrumbItems: [
+                { label: "Snapshots", active: !devboxId },
+                ...(devboxId ? [{ label: `Devbox: ${devboxId}`, active: true }] : []),
+            ],
+        } }));
 };
 // Export the UI component for use in the main menu
 export { ListSnapshotsUI };

package/dist/commands/snapshot/status.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 { Banner } from "../../components/Banner.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 SnapshotStatusUI = ({ snapshotId }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const getSnapshotStatus = async () => {
+            try {
+                const client = getClient();
+                const status = await client.devboxes.diskSnapshots.queryStatus(snapshotId);
+                setResult(status);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        getSnapshotStatus();
+    }, [snapshotId]);
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Getting snapshot status..." }), result && (_jsx(SuccessMessage, { message: "Snapshot status retrieved", details: `Snapshot ID: ${result.id}\nStatus: ${result.status}\nCreated: ${new Date(result.createdAt).toLocaleString()}` })), error && (_jsx(ErrorMessage, { message: "Failed to get snapshot status", error: error }))] }));
+};
+export async function getSnapshotStatus(options) {
+    const executor = createExecutor({ output: options.outputFormat });
+    await executor.executeAction(async () => {
+        const client = executor.getClient();
+        return client.devboxes.diskSnapshots.queryStatus(options.snapshotId);
+    }, () => _jsx(SnapshotStatusUI, { snapshotId: options.snapshotId }));
+}

package/dist/components/ActionsPopup.js

@@ -1,42 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import figures from 'figures';
-import chalk from 'chalk';
+import { Box, Text } from "ink";
+import figures from "figures";
+import chalk from "chalk";
 export const ActionsPopup = ({ devbox, operations, selectedOperation, onClose, }) => {
     // Calculate the maximum width needed
-    const maxLabelLength = Math.max(...operations.map(op => op.label.length));
+    const maxLabelLength = Math.max(...operations.map((op) => op.label.length));
     const contentWidth = maxLabelLength + 12; // Content + icon + pointer + shortcuts
     // Strip ANSI codes to get real length, then pad
-    const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, '');
+    const stripAnsi = (str) => str.replace(/\u001b\[[0-9;]*m/g, "");
     const bgLine = (content) => {
         const cleanLength = stripAnsi(content).length;
         const padding = Math.max(0, contentWidth - cleanLength);
-        return chalk.bgBlack(content + ' '.repeat(padding));
+        return chalk.bgBlack(content + " ".repeat(padding));
     };
     // Render all lines with background
     const lines = [
         bgLine(chalk.cyan.bold(` ${figures.play} Quick Actions`)),
-        chalk.bgBlack(' '.repeat(contentWidth)),
+        chalk.bgBlack(" ".repeat(contentWidth)),
         ...operations.map((op, index) => {
             const isSelected = index === selectedOperation;
-            const pointer = isSelected ? figures.pointer : ' ';
+            const pointer = isSelected ? figures.pointer : " ";
             const content = ` ${pointer} ${op.icon} ${op.label} [${op.shortcut}]`;
             let styled;
             if (isSelected) {
                 const colorFn = chalk[op.color];
-                styled = typeof colorFn === 'function' ? colorFn.bold(content) : chalk.white.bold(content);
+                styled =
+                    typeof colorFn === "function"
+                        ? colorFn.bold(content)
+                        : chalk.white.bold(content);
             }
             else {
                 styled = chalk.gray(content);
             }
             return bgLine(styled);
         }),
-        chalk.bgBlack(' '.repeat(contentWidth)),
+        chalk.bgBlack(" ".repeat(contentWidth)),
         bgLine(chalk.gray.dim(` ${figures.arrowUp}${figures.arrowDown} Nav • [Enter]`)),
         bgLine(chalk.gray.dim(` [Esc] Close`)),
     ];
     // Draw custom border with background to fill gaps
-    const borderTop = chalk.cyan('╭' + '─'.repeat(contentWidth) + '╮');
-    const borderBottom = chalk.cyan('╰' + '─'.repeat(contentWidth) + '╯');
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), lines.map((line, i) => (_jsxs(Text, { children: [chalk.cyan('│'), line, chalk.cyan('│')] }, i))), _jsx(Text, { children: borderBottom })] }) }));
+    const borderTop = chalk.cyan("╭" + "─".repeat(contentWidth) + "╮");
+    const borderBottom = chalk.cyan("╰" + "─".repeat(contentWidth) + "╯");
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), lines.map((line, i) => (_jsxs(Text, { children: [chalk.cyan("│"), line, chalk.cyan("│")] }, i))), _jsx(Text, { children: borderBottom })] }) }));
 };

package/dist/components/Banner.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Box } from 'ink';
-import BigText from 'ink-big-text';
-import Gradient from 'ink-gradient';
+import React from "react";
+import { Box } from "ink";
+import BigText from "ink-big-text";
+import Gradient from "ink-gradient";
 export const Banner = React.memo(() => {
     return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", children: _jsx(Gradient, { name: "vice", children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
 });