@runloop/rl-cli 0.0.1

package/dist/components/MetadataDisplay.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Badge } from '@inkjs/ui';
+import figures from 'figures';
+// Generate color for each key based on hash
+const getColorForKey = (key, index) => {
+    const colors = ['cyan', 'magenta', 'yellow', 'blue', 'green', 'red'];
+    return colors[index % colors.length];
+};
+export const MetadataDisplay = ({ metadata, title = 'Metadata', showBorder = false, selectedKey }) => {
+    const entries = Object.entries(metadata);
+    if (entries.length === 0) {
+        return null;
+    }
+    const content = (_jsxs(Box, { flexDirection: "row", alignItems: "center", flexWrap: "wrap", children: [title && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "#0a4d3a", bold: true, children: [figures.info, " ", title] }), _jsx(Text, { children: " " })] })), entries.map(([key, value], index) => {
+                const color = getColorForKey(key, index);
+                const isSelected = selectedKey === key;
+                return (_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [isSelected && (_jsxs(Text, { color: "cyan", bold: true, children: [figures.pointer, " "] })), _jsx(Badge, { color: isSelected ? 'cyan' : color, children: `${key}: ${value}` })] }, key));
+            })] }));
+    if (showBorder) {
+        return (_jsx(Box, { borderStyle: "round", borderColor: "#0a4d3a", paddingX: 2, paddingY: 1, flexDirection: "column", children: content }));
+    }
+    return content;
+};

package/dist/components/OperationsMenu.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figures from 'figures';
+/**
+ * Reusable operations menu component for detail pages
+ * Displays a list of available operations with keyboard navigation
+ */
+export const OperationsMenu = ({ operations, selectedIndex, onNavigate, onSelect, onBack, additionalActions = [], }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: [figures.play, " Operations"] }), _jsx(Box, { flexDirection: "column", children: operations.map((op, index) => {
+                            const isSelected = index === selectedIndex;
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', children: [isSelected ? figures.pointer : ' ', ' '] }), _jsxs(Text, { color: isSelected ? op.color : 'gray', bold: isSelected, children: [op.icon, " ", op.label] })] }, op.key));
+                        }) })] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [Enter] Select \u2022", additionalActions.map((action) => ` [${action.key}] ${action.label} •`), ' ', "[q] Back"] }) })] }));
+};
+/**
+ * Helper to filter operations based on conditions
+ */
+export function filterOperations(allOperations, condition) {
+    return allOperations.filter(condition);
+}

package/dist/components/Spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+export const SpinnerComponent = ({ message }) => {
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", message] })] }));
+};

package/dist/components/StatusBadge.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import figures from 'figures';
+export const getStatusDisplay = (status) => {
+    if (!status) {
+        return { icon: figures.questionMarkPrefix, color: 'gray', text: 'UNKNOWN' };
+    }
+    switch (status) {
+        case 'running':
+            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING' };
+        case 'provisioning':
+            return { icon: figures.hamburger, color: 'yellow', text: 'PROVISIONING' };
+        case 'initializing':
+            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZING' };
+        case 'suspended':
+            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED' };
+        case 'failure':
+            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+        case 'shutdown':
+            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN' };
+        case 'resuming':
+            return { icon: figures.ellipsis, color: 'cyan', text: 'RESUMING' };
+        case 'suspending':
+            return { icon: figures.ellipsis, color: 'yellow', text: 'SUSPENDING' };
+        case 'ready':
+            return { icon: figures.tick, color: 'green', text: 'READY' };
+        case 'build_complete':
+        case 'building_complete':
+            return { icon: figures.tick, color: 'green', text: 'COMPLETE' };
+        case 'building':
+            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING' };
+        case 'build_failed':
+            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+        default:
+            return { icon: figures.questionMarkPrefix, color: 'gray', text: status.toUpperCase() };
+    }
+};
+export const StatusBadge = ({ status, showText = true }) => {
+    const statusDisplay = getStatusDisplay(status);
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusDisplay.color, children: statusDisplay.icon }), showText && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: statusDisplay.color, children: statusDisplay.text })] }))] }));
+};

package/dist/components/SuccessMessage.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import figures from 'figures';
+export const SuccessMessage = ({ message, details, }) => {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { children: _jsxs(Text, { color: "green", bold: true, children: [figures.tick, " ", message] }) }), details && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: details.split('\n').map((line, i) => (_jsx(Text, { color: "gray", dimColor: true, children: line }, i))) }))] }));
+};

package/dist/components/Table.example.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Table, createTextColumn, createComponentColumn } from './Table.js';
+import { StatusBadge } from './StatusBadge.js';
+import figures from 'figures';
+function BlueprintsTable({ blueprints, selectedIndex, terminalWidth }) {
+    // Responsive column widths
+    const showDescription = terminalWidth >= 120;
+    const showFullId = terminalWidth >= 80;
+    return (_jsx(Table, { data: blueprints, keyExtractor: (bp) => bp.id, selectedIndex: selectedIndex, columns: [
+            // Status badge column
+            createComponentColumn('status', 'Status', (bp) => _jsx(StatusBadge, { status: bp.status, showText: false }), { width: 2 }),
+            // ID column (responsive)
+            createTextColumn('id', 'ID', (bp) => showFullId ? bp.id : bp.id.slice(0, 13), { width: showFullId ? 25 : 15, color: 'gray', dimColor: true, bold: false }),
+            // Name column
+            createTextColumn('name', 'Name', (bp) => bp.name || '(unnamed)', { width: 30 }),
+            // Description column (optional)
+            createTextColumn('description', 'Description', (bp) => bp.description || '', { width: 40, color: 'gray', dimColor: true, bold: false, visible: showDescription }),
+            // Created time column
+            createTextColumn('created', 'Created', (bp) => new Date(bp.created_at).toLocaleDateString(), { width: 15, color: 'gray', dimColor: true, bold: false }),
+        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: "yellow", children: [figures.info, " No blueprints found"] }) }) }));
+}
+function SnapshotsTable({ snapshots, selectedIndex, terminalWidth }) {
+    // Responsive column widths
+    const showSize = terminalWidth >= 100;
+    const showFullId = terminalWidth >= 80;
+    return (_jsx(Table, { data: snapshots, keyExtractor: (snap) => snap.id, selectedIndex: selectedIndex, columns: [
+            // Status badge column
+            createComponentColumn('status', 'Status', (snap) => _jsx(StatusBadge, { status: snap.status, showText: false }), { width: 2 }),
+            // ID column (responsive)
+            createTextColumn('id', 'ID', (snap) => showFullId ? snap.id : snap.id.slice(0, 13), { width: showFullId ? 25 : 15, color: 'gray', dimColor: true, bold: false }),
+            // Name column
+            createTextColumn('name', 'Name', (snap) => snap.name || '(unnamed)', { width: 25 }),
+            // Devbox ID column
+            createTextColumn('devbox', 'Devbox', (snap) => snap.devbox_id.slice(0, 13), { width: 15, color: 'cyan', dimColor: true, bold: false }),
+            // Size column (optional)
+            createTextColumn('size', 'Size', (snap) => snap.size_gb ? `${snap.size_gb.toFixed(1)}GB` : '', { width: 10, color: 'yellow', dimColor: true, bold: false, visible: showSize }),
+            // Created time column
+            createTextColumn('created', 'Created', (snap) => new Date(snap.created_at).toLocaleDateString(), { width: 15, color: 'gray', dimColor: true, bold: false }),
+        ], emptyState: _jsx(Box, { children: _jsxs(Text, { color: "yellow", children: [figures.info, " No snapshots found"] }) }) }));
+}
+// ============================================================================
+// EXAMPLE 3: Custom Column with Complex Rendering
+// ============================================================================
+function CustomComplexColumn() {
+    const data = [
+        { id: '1', name: 'Item 1', tags: ['tag1', 'tag2'] },
+        { id: '2', name: 'Item 2', tags: ['tag3'] },
+    ];
+    return (_jsx(Table, { data: data, keyExtractor: (item) => item.id, selectedIndex: 0, columns: [
+            createTextColumn('name', 'Name', (item) => item.name, { width: 20 }),
+            // Custom component column with complex rendering
+            createComponentColumn('tags', 'Tags', (item, index, isSelected) => (_jsx(Box, { width: 30, children: _jsx(Text, { color: isSelected ? 'cyan' : 'blue', dimColor: true, children: item.tags.map(tag => `[${tag}]`).join(' ') }) })), { width: 30 }),
+        ] }));
+}

package/dist/components/Table.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import figures from 'figures';
+/**
+ * Reusable table component for displaying lists of data with optional selection
+ * Designed to be responsive and work across devboxes, blueprints, and snapshots
+ */
+export function Table({ data, columns, selectedIndex = -1, showSelection = true, emptyState, keyExtractor, title, }) {
+    if (data.length === 0 && emptyState) {
+        return _jsx(_Fragment, { children: emptyState });
+    }
+    // Filter visible columns
+    const visibleColumns = columns.filter(col => col.visible !== false);
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsx(Box, { paddingX: 1, marginBottom: 0, children: _jsxs(Text, { color: "cyan", bold: true, children: ["\u256D\u2500 ", title, " ", '─'.repeat(Math.max(0, 10)), "\u256E"] }) })), _jsxs(Box, { flexDirection: "column", borderStyle: title ? 'single' : 'round', borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { children: " " })] })), visibleColumns.map((column) => (_jsx(Text, { bold: true, dimColor: true, children: column.label.slice(0, column.width).padEnd(column.width, ' ') }, `header-${column.key}`)))] }), data.map((row, index) => {
+                        const isSelected = index === selectedIndex;
+                        const rowKey = keyExtractor(row);
+                        return (_jsxs(Box, { children: [showSelection && (_jsxs(_Fragment, { children: [_jsx(Text, { color: isSelected ? 'cyan' : 'gray', children: isSelected ? figures.pointer : ' ' }), _jsx(Text, { children: " " })] })), visibleColumns.map((column, colIndex) => (_jsx(React.Fragment, { children: column.render(row, index, isSelected) }, `${rowKey}-${column.key}`)))] }, rowKey));
+                    })] })] }));
+}
+/**
+ * Helper function to create a simple text column
+ */
+export function createTextColumn(key, label, getValue, options) {
+    return {
+        key,
+        label,
+        width: options?.width || 20,
+        visible: options?.visible,
+        render: (row, index, isSelected) => {
+            const value = getValue(row);
+            const width = options?.width || 20;
+            const color = options?.color || (isSelected ? 'white' : 'white');
+            const bold = options?.bold !== undefined ? options.bold : isSelected;
+            const dimColor = options?.dimColor || false;
+            // Pad the value to fill the full width
+            const truncated = value.slice(0, width);
+            const padded = truncated.padEnd(width, ' ');
+            return (_jsx(Text, { color: isSelected ? 'white' : color, bold: bold, dimColor: !isSelected && dimColor, inverse: isSelected, children: padded }));
+        },
+    };
+}
+/**
+ * Helper function to create a component column (for badges, icons, etc.)
+ */
+export function createComponentColumn(key, label, renderComponent, options) {
+    return {
+        key,
+        label,
+        width: options?.width || 20,
+        visible: options?.visible,
+        render: renderComponent,
+    };
+}

package/dist/utils/CommandExecutor.js

@@ -0,0 +1,115 @@
+/**
+ * Shared class for executing commands with different output formats
+ * Reduces code duplication across all command files
+ */
+import { render } from 'ink';
+import { getClient } from './client.js';
+import { shouldUseNonInteractiveOutput, outputList, outputResult } from './output.js';
+import YAML from 'yaml';
+export class CommandExecutor {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    /**
+     * Execute a list command with automatic format handling
+     */
+    async executeList(fetchData, renderUI, limit = 10) {
+        if (shouldUseNonInteractiveOutput(this.options)) {
+            try {
+                const items = await fetchData();
+                // Limit results for non-interactive mode
+                const limitedItems = items.slice(0, limit);
+                outputList(limitedItems, this.options);
+            }
+            catch (err) {
+                this.handleError(err);
+            }
+            return;
+        }
+        // Interactive mode
+        console.clear();
+        const { waitUntilExit } = render(renderUI());
+        await waitUntilExit();
+    }
+    /**
+     * Execute a create/action command with automatic format handling
+     */
+    async executeAction(performAction, renderUI) {
+        if (shouldUseNonInteractiveOutput(this.options)) {
+            try {
+                const result = await performAction();
+                outputResult(result, this.options);
+            }
+            catch (err) {
+                this.handleError(err);
+            }
+            return;
+        }
+        // Interactive mode
+        console.clear();
+        const { waitUntilExit } = render(renderUI());
+        await waitUntilExit();
+    }
+    /**
+     * Execute a delete command with automatic format handling
+     */
+    async executeDelete(performDelete, id, renderUI) {
+        if (shouldUseNonInteractiveOutput(this.options)) {
+            try {
+                await performDelete();
+                outputResult({ id, status: 'deleted' }, this.options);
+            }
+            catch (err) {
+                this.handleError(err);
+            }
+            return;
+        }
+        // Interactive mode
+        const { waitUntilExit } = render(renderUI());
+        await waitUntilExit();
+    }
+    /**
+     * Fetch items from an async iterator with optional filtering and limits
+     */
+    async fetchFromIterator(iterator, options = {}) {
+        const { filter, limit = 100 } = options;
+        const items = [];
+        let count = 0;
+        for await (const item of iterator) {
+            if (filter && !filter(item)) {
+                continue;
+            }
+            items.push(item);
+            count++;
+            if (count >= limit) {
+                break;
+            }
+        }
+        return items;
+    }
+    /**
+     * Handle errors consistently across all commands
+     */
+    handleError(error) {
+        if (this.options.output === 'yaml') {
+            console.error(YAML.stringify({ error: error.message }));
+        }
+        else {
+            console.error(JSON.stringify({ error: error.message }, null, 2));
+        }
+        process.exit(1);
+    }
+    /**
+     * Get the client instance
+     */
+    getClient() {
+        return getClient();
+    }
+}
+/**
+ * Factory function to create a CommandExecutor
+ */
+export function createExecutor(options = {}) {
+    return new CommandExecutor(options);
+}

package/dist/utils/client.js

@@ -0,0 +1,13 @@
+import Runloop from '@runloop/api-client';
+import { getConfig } from './config.js';
+export function getClient() {
+    const config = getConfig();
+    if (!config.apiKey) {
+        throw new Error('API key not configured. Run: rln auth');
+    }
+    return new Runloop({
+        bearerToken: config.apiKey,
+        timeout: 10000, // 10 seconds instead of default 30 seconds
+        maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
+    });
+}

package/dist/utils/config.js

@@ -0,0 +1,17 @@
+import Conf from 'conf';
+const config = new Conf({
+    projectName: 'runloop-cli',
+});
+export function getConfig() {
+    // Check environment variable first, then fall back to stored config
+    const apiKey = process.env.RUNLOOP_API_KEY || config.get('apiKey');
+    return {
+        apiKey,
+    };
+}
+export function setApiKey(apiKey) {
+    config.set('apiKey', apiKey);
+}
+export function clearConfig() {
+    config.clear();
+}

package/dist/utils/output.js

@@ -0,0 +1,115 @@
+/**
+ * Utility for handling different output formats across CLI commands
+ */
+import YAML from 'yaml';
+/**
+ * Check if the command should use non-interactive output
+ */
+export function shouldUseNonInteractiveOutput(options) {
+    return !!options.output;
+}
+/**
+ * Output data in the specified format
+ */
+export function outputData(data, format = 'json') {
+    if (format === 'json') {
+        console.log(JSON.stringify(data, null, 2));
+        return;
+    }
+    if (format === 'yaml') {
+        console.log(YAML.stringify(data));
+        return;
+    }
+    if (format === 'text') {
+        // Simple text output
+        if (Array.isArray(data)) {
+            // For lists of complex objects, just output IDs
+            data.forEach((item) => {
+                if (typeof item === 'object' && item !== null && 'id' in item) {
+                    console.log(item.id);
+                }
+                else {
+                    console.log(formatTextOutput(item));
+                }
+            });
+        }
+        else {
+            console.log(formatTextOutput(data));
+        }
+        return;
+    }
+    console.error(`Unknown output format: ${format}`);
+    process.exit(1);
+}
+/**
+ * Format a single item as text output
+ */
+function formatTextOutput(item) {
+    if (typeof item === 'string') {
+        return item;
+    }
+    // For objects, create a simple key: value format
+    const lines = [];
+    for (const [key, value] of Object.entries(item)) {
+        if (value !== null && value !== undefined) {
+            lines.push(`${key}: ${value}`);
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Output a single result (for create, delete, etc)
+ */
+export function outputResult(result, options, successMessage) {
+    if (shouldUseNonInteractiveOutput(options)) {
+        outputData(result, options.output);
+        return;
+    }
+    // Interactive mode - print success message
+    if (successMessage) {
+        console.log(successMessage);
+    }
+}
+/**
+ * Output a list of items (for list commands)
+ */
+export function outputList(items, options) {
+    if (shouldUseNonInteractiveOutput(options)) {
+        outputData(items, options.output);
+    }
+}
+/**
+ * Handle errors in both interactive and non-interactive modes
+ */
+export function outputError(error, options) {
+    if (shouldUseNonInteractiveOutput(options)) {
+        if (options.output === 'json') {
+            console.error(JSON.stringify({ error: error.message }, null, 2));
+        }
+        else if (options.output === 'yaml') {
+            console.error(YAML.stringify({ error: error.message }));
+        }
+        else {
+            console.error(`Error: ${error.message}`);
+        }
+        process.exit(1);
+    }
+    // Let interactive UI handle the error
+    throw error;
+}
+/**
+ * Validate output format option
+ */
+export function validateOutputFormat(format) {
+    if (!format || format === 'text') {
+        return 'text';
+    }
+    if (format === 'json') {
+        return 'json';
+    }
+    if (format === 'yaml') {
+        return 'yaml';
+    }
+    console.error(`Unknown output format: ${format}. Valid options: text, json, yaml`);
+    process.exit(1);
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@runloop/rl-cli",
+  "version": "0.0.1",
+  "description": "Beautiful CLI for Runloop devbox management",
+  "type": "module",
+  "bin": {
+    "rln": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/cli.js",
+    "prepublishOnly": "npm run build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "release": "npm run build && npm publish"
+  },
+  "keywords": [
+    "runloop",
+    "cli",
+    "devbox",
+    "cloud",
+    "development"
+  ],
+  "author": "Runloop",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/runloop/rl-cli-node.git"
+  },
+  "bugs": {
+    "url": "https://github.com/runloop/rl-cli-node/issues"
+  },
+  "homepage": "https://github.com/runloop/rl-cli-node#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@inkjs/ui": "^2.0.0",
+    "@runloop/api-client": "^0.55.0",
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "conf": "^13.0.1",
+    "figures": "^6.1.0",
+    "gradient-string": "^2.0.2",
+    "ink": "^5.0.1",
+    "ink-big-text": "^2.0.0",
+    "ink-gradient": "^3.0.0",
+    "ink-link": "^4.1.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
+    "react": "^18.3.1",
+    "yaml": "^2.8.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.9",
+    "@types/react": "^18.3.11",
+    "typescript": "^5.6.3"
+  }
+}