@runloop/rl-cli 0.0.1

package/dist/commands/blueprint/list.js

@@ -0,0 +1,373 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput, useStdout, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import figures from 'figures';
+import { getClient } from '../../utils/client.js';
+import { Header } from '../../components/Header.js';
+import { SpinnerComponent } from '../../components/Spinner.js';
+import { ErrorMessage } from '../../components/ErrorMessage.js';
+import { SuccessMessage } from '../../components/SuccessMessage.js';
+import { StatusBadge } from '../../components/StatusBadge.js';
+import { Breadcrumb } from '../../components/Breadcrumb.js';
+import { MetadataDisplay } from '../../components/MetadataDisplay.js';
+import { Table, createTextColumn, createComponentColumn } from '../../components/Table.js';
+import { OperationsMenu } from '../../components/OperationsMenu.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 ListBlueprintsUI = () => {
+    const { stdout } = useStdout();
+    const { exit } = useApp();
+    const [loading, setLoading] = React.useState(true);
+    const [blueprints, setBlueprints] = 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 [selectedOperation, setSelectedOperation] = React.useState(0);
+    const [executingOperation, setExecutingOperation] = React.useState(null);
+    const [operationInput, setOperationInput] = React.useState('');
+    const [operationResult, setOperationResult] = React.useState(null);
+    const [operationError, setOperationError] = React.useState(null);
+    // Calculate responsive column widths
+    const terminalWidth = stdout?.columns || 120;
+    const showDescription = terminalWidth >= 120;
+    const showFullId = terminalWidth >= 80;
+    const idWidth = 25;
+    const nameWidth = terminalWidth >= 120 ? 30 : 25;
+    const descriptionWidth = 40;
+    const timeWidth = 20;
+    const allOperations = [
+        {
+            key: 'create_devbox',
+            label: 'Create Devbox from Blueprint',
+            color: 'green',
+            icon: figures.play,
+            needsInput: true,
+            inputPrompt: 'Devbox name (optional):',
+            inputPlaceholder: 'my-devbox',
+        },
+        {
+            key: 'delete',
+            label: 'Delete Blueprint',
+            color: 'red',
+            icon: figures.cross,
+        },
+    ];
+    React.useEffect(() => {
+        const list = async () => {
+            try {
+                const client = getClient();
+                const allBlueprints = [];
+                let count = 0;
+                for await (const blueprint of client.blueprints.list()) {
+                    allBlueprints.push(blueprint);
+                    count++;
+                    if (count >= MAX_FETCH) {
+                        break;
+                    }
+                }
+                setBlueprints(allBlueprints);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        list();
+    }, []);
+    // Clear console when transitioning to detail view
+    const prevShowDetailsRef = React.useRef(showDetails);
+    React.useEffect(() => {
+        if (showDetails && !prevShowDetailsRef.current) {
+            console.clear();
+        }
+        prevShowDetailsRef.current = showDetails;
+    }, [showDetails]);
+    // Auto-execute operations that don't need input
+    React.useEffect(() => {
+        if (executingOperation === 'delete' && !loading && selectedBlueprint) {
+            executeOperation();
+        }
+    }, [executingOperation]);
+    const executeOperation = async () => {
+        const client = getClient();
+        const blueprint = selectedBlueprint;
+        try {
+            setLoading(true);
+            switch (executingOperation) {
+                case 'create_devbox':
+                    const devbox = await client.devboxes.create({
+                        blueprint_id: blueprint.id,
+                        name: operationInput || undefined,
+                    });
+                    setOperationResult(`Devbox created successfully!\n\n` +
+                        `ID: ${devbox.id}\n` +
+                        `Name: ${devbox.name || '(none)'}\n` +
+                        `Status: ${devbox.status}\n\n` +
+                        `Use 'rln devbox list' to view all devboxes.`);
+                    break;
+                case 'delete':
+                    await client.blueprints.delete(blueprint.id);
+                    setOperationResult(`Blueprint ${blueprint.id} deleted successfully`);
+                    break;
+            }
+        }
+        catch (err) {
+            setOperationError(err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useInput((input, key) => {
+        const pageBlueprints = currentBlueprints.length;
+        // Handle operation input mode
+        if (executingOperation && !operationResult && !operationError) {
+            const currentOp = allOperations.find((op) => op.key === executingOperation);
+            if (currentOp?.needsInput) {
+                if (key.return) {
+                    executeOperation();
+                }
+                else if (input === 'q' || key.escape) {
+                    console.clear();
+                    setExecutingOperation(null);
+                    setOperationInput('');
+                }
+            }
+            return;
+        }
+        // Handle operation result display
+        if (operationResult || operationError) {
+            if (input === 'q' || key.escape || key.return) {
+                console.clear();
+                setOperationResult(null);
+                setOperationError(null);
+                setExecutingOperation(null);
+                setOperationInput('');
+            }
+            return;
+        }
+        // Handle details view
+        if (showDetails) {
+            if (input === 'q' || key.escape) {
+                console.clear();
+                setShowDetails(false);
+                setSelectedOperation(0);
+            }
+            else if (input === 'o' && selectedBlueprint) {
+                // Open in browser
+                const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.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 (key.upArrow && selectedOperation > 0) {
+                setSelectedOperation(selectedOperation - 1);
+            }
+            else if (key.downArrow && selectedOperation < operations.length - 1) {
+                setSelectedOperation(selectedOperation + 1);
+            }
+            else if (key.return) {
+                console.clear();
+                const op = operations[selectedOperation].key;
+                setExecutingOperation(op);
+            }
+            return;
+        }
+        // Handle list view
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < pageBlueprints - 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 === 'o' && selectedBlueprint) {
+            // Open in browser
+            const url = `https://platform.runloop.ai/blueprints/${selectedBlueprint.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 totalPages = Math.ceil(blueprints.length / PAGE_SIZE);
+    const startIndex = currentPage * PAGE_SIZE;
+    const endIndex = Math.min(startIndex + PAGE_SIZE, blueprints.length);
+    const currentBlueprints = blueprints.slice(startIndex, endIndex);
+    const selectedBlueprint = currentBlueprints[selectedIndex];
+    const buildComplete = blueprints.filter((b) => b.status === 'build_complete').length;
+    const building = blueprints.filter((b) => ['provisioning', 'building'].includes(b.status)).length;
+    const failed = blueprints.filter((b) => b.status === 'build_failed').length;
+    // Filter operations based on blueprint status
+    const operations = selectedBlueprint
+        ? allOperations.filter((op) => {
+            const status = selectedBlueprint.status;
+            // Only allow creating devbox if build is complete
+            if (op.key === 'create_devbox') {
+                return status === 'build_complete';
+            }
+            // Allow delete for any status
+            return true;
+        })
+        : allOperations;
+    // Operation result display
+    if (operationResult || operationError) {
+        const operationLabel = operations.find((o) => o.key === executingOperation)?.label || 'Operation';
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Blueprints' },
+                        {
+                            label: selectedBlueprint?.name || selectedBlueprint?.id || 'Blueprint',
+                        },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: "Operation Result" }), operationResult && _jsx(SuccessMessage, { message: operationResult }), operationError && _jsx(ErrorMessage, { message: "Operation failed", error: operationError }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter], [q], or [esc] to continue" }) })] }));
+    }
+    // Operation input mode
+    if (executingOperation && selectedBlueprint) {
+        const currentOp = allOperations.find((op) => op.key === executingOperation);
+        const needsInput = currentOp?.needsInput;
+        const operationLabel = currentOp?.label || 'Operation';
+        if (loading) {
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                            { label: 'Blueprints' },
+                            { label: selectedBlueprint.name || selectedBlueprint.id },
+                            { label: operationLabel, active: true },
+                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: "Please wait..." })] }));
+        }
+        if (!needsInput) {
+            const messages = {
+                delete: 'Deleting blueprint...',
+            };
+            return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                            { label: 'Blueprints' },
+                            { label: selectedBlueprint.name || selectedBlueprint.id },
+                            { label: operationLabel, active: true },
+                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || 'Please wait...' })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Blueprints' },
+                        { label: selectedBlueprint.name || selectedBlueprint.id },
+                        { label: operationLabel, active: true },
+                    ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "cyan", bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: "gray", children: [currentOp.inputPrompt, " "] }) }), _jsx(Box, { marginTop: 1, children: _jsx(TextInput, { value: operationInput, onChange: setOperationInput, placeholder: currentOp.inputPlaceholder || '' }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+    }
+    // Details view with operation selection
+    if (showDetails && selectedBlueprint) {
+        const ds = selectedBlueprint.dockerfile_setup;
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: 'Blueprints' },
+                        {
+                            label: selectedBlueprint.name || selectedBlueprint.id,
+                            active: true,
+                        },
+                    ] }), _jsx(Header, { title: "Blueprint Details" }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: selectedBlueprint.name || selectedBlueprint.id }), _jsx(Text, { children: " " }), _jsx(StatusBadge, { status: selectedBlueprint.status }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 ", selectedBlueprint.id] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", dimColor: true, children: selectedBlueprint.create_time_ms
+                                        ? new Date(selectedBlueprint.create_time_ms).toLocaleString()
+                                        : '' }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "(", selectedBlueprint.create_time_ms
+                                            ? formatTimeAgo(selectedBlueprint.create_time_ms)
+                                            : '', ")"] })] }), ds?.description && (_jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: ds.description }) }))] }), ds && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "yellow", bold: true, children: [figures.squareSmallFilled, " Dockerfile Setup"] }), ds.base_image && (_jsxs(Text, { dimColor: true, children: ["Base Image: ", ds.base_image] })), ds.entrypoint && (_jsxs(Text, { dimColor: true, children: ["Entrypoint: ", ds.entrypoint] })), ds.system_packages && ds.system_packages.length > 0 && (_jsxs(Text, { dimColor: true, children: ["System Packages: ", ds.system_packages.join(', ')] })), ds.python_packages && ds.python_packages.length > 0 && (_jsxs(Text, { dimColor: true, children: ["Python Packages: ", ds.python_packages.join(', ')] }))] })), selectedBlueprint.metadata && Object.keys(selectedBlueprint.metadata).length > 0 && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, paddingY: 0, children: _jsx(MetadataDisplay, { metadata: selectedBlueprint.metadata, showBorder: false }) })), selectedBlueprint.build_error && (_jsxs(Box, { borderStyle: "round", borderColor: "red", paddingX: 1, paddingY: 0, children: [_jsxs(Text, { color: "red", bold: true, children: [figures.cross, ' '] }), _jsx(Text, { color: "red", dimColor: true, children: selectedBlueprint.build_error })] })), _jsx(OperationsMenu, { operations: operations, selectedIndex: selectedOperation, onNavigate: (direction) => {
+                        if (direction === 'up' && selectedOperation > 0) {
+                            setSelectedOperation(selectedOperation - 1);
+                        }
+                        else if (direction === 'down' && selectedOperation < operations.length - 1) {
+                            setSelectedOperation(selectedOperation + 1);
+                        }
+                    }, onSelect: (op) => {
+                        console.clear();
+                        setExecutingOperation(op.key);
+                    }, onBack: () => {
+                        console.clear();
+                        setShowDetails(false);
+                        setSelectedOperation(0);
+                    }, additionalActions: [{ key: 'o', label: 'Browser', handler: () => { } }] })] }));
+    }
+    // List view
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [{ label: 'Blueprints', active: true }] }), loading && _jsx(SpinnerComponent, { message: "Loading blueprints..." }), !loading && !error && blueprints.length === 0 && (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: figures.info }), _jsx(Text, { children: " No blueprints found. Try: " }), _jsx(Text, { color: "cyan", bold: true, children: "rln blueprint create" })] })), !loading && !error && blueprints.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "green", children: [figures.tick, " ", buildComplete] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "yellow", children: [figures.ellipsis, " ", building] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "red", children: [figures.cross, " ", failed] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "cyan", children: [figures.hamburger, " ", blueprints.length, blueprints.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: currentBlueprints, keyExtractor: (blueprint) => blueprint.id, selectedIndex: selectedIndex, columns: [
+                            createComponentColumn('status', 'Status', (blueprint) => _jsx(StatusBadge, { status: blueprint.status, showText: false }), { width: 2 }),
+                            createTextColumn('id', 'ID', (blueprint) => (showFullId ? blueprint.id : blueprint.id.slice(0, 13)), {
+                                width: showFullId ? idWidth : 15,
+                                color: 'gray',
+                                dimColor: true,
+                                bold: false,
+                            }),
+                            createTextColumn('name', 'Name', (blueprint) => blueprint.name || '(unnamed)', { width: nameWidth }),
+                            createTextColumn('description', 'Description', (blueprint) => blueprint.dockerfile_setup?.description || '', {
+                                width: descriptionWidth,
+                                color: 'gray',
+                                dimColor: true,
+                                bold: false,
+                                visible: showDescription,
+                            }),
+                            createTextColumn('created', 'Created', (blueprint) => blueprint.create_time_ms ? formatTimeAgo(blueprint.create_time_ms) : '', { 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 [Enter] Operations \u2022 [o] Open in Browser \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 blueprints", error: error })] }));
+};
+export async function listBlueprints(options = {}) {
+    const executor = createExecutor(options);
+    await executor.executeList(async () => {
+        const client = executor.getClient();
+        return executor.fetchFromIterator(client.blueprints.list(), {
+            limit: PAGE_SIZE,
+        });
+    }, () => _jsx(ListBlueprintsUI, {}), PAGE_SIZE);
+}

package/dist/commands/create.js

@@ -0,0 +1,42 @@
+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 { SpinnerComponent } from '../components/Spinner.js';
+import { SuccessMessage } from '../components/SuccessMessage.js';
+import { ErrorMessage } from '../components/ErrorMessage.js';
+const CreateDevboxUI = ({ name, template }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [progress, setProgress] = React.useState('Initializing...');
+    React.useEffect(() => {
+        const create = async () => {
+            try {
+                const client = getClient();
+                setProgress('Requesting new devbox...');
+                const devbox = await client.devboxes.create({
+                    name: name || `devbox-${Date.now()}`,
+                    ...(template && { template }),
+                });
+                setProgress('Devbox created! Waiting for provisioning...');
+                setResult(devbox);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        create();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Create Devbox", subtitle: "Setting up your new development environment" }), loading && (_jsxs(_Fragment, { children: [_jsx(SpinnerComponent, { message: progress }), _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, " Name: "] }), _jsx(Text, { color: "white", children: name || '(auto-generated)' })] }), template && (_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.pointer, " Template: "] }), _jsx(Text, { color: "white", children: template })] }))] })] })] })), result && (_jsxs(_Fragment, { children: [_jsx(SuccessMessage, { message: "Devbox 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, " Execute commands: "] }), _jsxs(Text, { color: "cyan", children: ["rln exec ", result.id.slice(0, 8), "... <command>"] })] }), _jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.tick, " Upload files: "] }), _jsxs(Text, { color: "cyan", children: ["rln upload ", result.id.slice(0, 8), "... <file>"] })] }), _jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: [figures.tick, " View all: "] }), _jsx(Text, { color: "cyan", children: "rln list" })] })] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to create devbox", error: error })] }));
+};
+export async function createDevbox(options) {
+    const { waitUntilExit } = render(_jsx(CreateDevboxUI, { name: options.name, template: options.template }));
+    await waitUntilExit();
+}

package/dist/commands/delete.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { render } from 'ink';
+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 DeleteDevboxUI = ({ id }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [success, setSuccess] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const deleteDevbox = async () => {
+            try {
+                const client = getClient();
+                await client.devboxes.shutdown(id);
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        deleteDevbox();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Delete Devbox", subtitle: `Deleting devbox: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Deleting devbox..." }), success && (_jsx(SuccessMessage, { message: "Devbox deleted successfully!", details: `ID: ${id}` })), error && _jsx(ErrorMessage, { message: "Failed to delete devbox", error: error })] }));
+};
+export async function deleteDevbox(id) {
+    const { waitUntilExit } = render(_jsx(DeleteDevboxUI, { id: id }));
+    await waitUntilExit();
+}

package/dist/commands/devbox/create.js

@@ -0,0 +1,45 @@
+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 { 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 { createExecutor } from '../../utils/CommandExecutor.js';
+const CreateDevboxUI = ({ name, template }) => {
+    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 devbox = await client.devboxes.create({
+                    name: name || `devbox-${Date.now()}`,
+                    ...(template && { template }),
+                });
+                setResult(devbox);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        create();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), _jsx(Header, { title: "Create Devbox" }), loading && _jsx(SpinnerComponent, { message: "Creating..." }), result && (_jsxs(_Fragment, { children: [_jsx(SuccessMessage, { message: "Devbox created!", details: `ID: ${result.id}\nStatus: ${result.status}` }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Try: " }), _jsxs(Text, { color: "cyan", children: ["rln devbox exec ", result.id, " ls"] })] })] })), error && _jsx(ErrorMessage, { message: "Failed to create devbox", error: error })] }));
+};
+export async function createDevbox(options) {
+    const executor = createExecutor(options);
+    await executor.executeAction(async () => {
+        const client = executor.getClient();
+        return client.devboxes.create({
+            name: options.name || `devbox-${Date.now()}`,
+            ...(options.template && { template: options.template }),
+        });
+    }, () => _jsx(CreateDevboxUI, { name: options.name, template: options.template }));
+}

package/dist/commands/devbox/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 DeleteDevboxUI = ({ id }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [success, setSuccess] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const deleteDevbox = async () => {
+            try {
+                const client = getClient();
+                await client.devboxes.shutdown(id);
+                setSuccess(true);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        deleteDevbox();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "Shutdown Devbox", subtitle: `Shutting down devbox: ${id}` }), loading && _jsx(SpinnerComponent, { message: "Shutting down devbox..." }), success && (_jsx(SuccessMessage, { message: "Devbox shut down successfully!", details: `ID: ${id}` })), error && _jsx(ErrorMessage, { message: "Failed to shutdown devbox", error: error })] }));
+};
+export async function deleteDevbox(id, options = {}) {
+    const executor = createExecutor(options);
+    await executor.executeDelete(async () => {
+        const client = executor.getClient();
+        await client.devboxes.shutdown(id);
+    }, id, () => _jsx(DeleteDevboxUI, { id: id }));
+}

package/dist/commands/devbox/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();
+}