@runloop/rl-cli 0.0.1 → 0.0.3

package/dist/components/MainMenu.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import figures from 'figures';
+import { Banner } from './Banner.js';
+import { Breadcrumb } from './Breadcrumb.js';
+import { VERSION } from '../cli.js';
+export const MainMenu = React.memo(({ onSelect }) => {
+    const { exit } = useApp();
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    // Calculate terminal height once at mount and memoize
+    const terminalHeight = React.useMemo(() => process.stdout.rows || 24, []);
+    const menuItems = React.useMemo(() => [
+        {
+            key: 'devboxes',
+            label: 'Devboxes',
+            description: 'Manage cloud development environments',
+            icon: '◉',
+            color: 'cyan',
+        },
+        {
+            key: 'blueprints',
+            label: 'Blueprints',
+            description: 'Create and manage devbox templates',
+            icon: '▣',
+            color: 'magenta',
+        },
+        {
+            key: 'snapshots',
+            label: 'Snapshots',
+            description: 'Save and restore devbox states',
+            icon: '◈',
+            color: 'green',
+        },
+    ], []);
+    useInput((input, key) => {
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+        else if (key.downArrow && selectedIndex < menuItems.length - 1) {
+            setSelectedIndex(selectedIndex + 1);
+        }
+        else if (key.return) {
+            onSelect(menuItems[selectedIndex].key);
+        }
+        else if (key.escape) {
+            exit();
+        }
+        else if (input === 'd' || input === '1') {
+            onSelect('devboxes');
+        }
+        else if (input === 'b' || input === '2') {
+            onSelect('blueprints');
+        }
+        else if (input === 's' || input === '3') {
+            onSelect('snapshots');
+        }
+    });
+    // Use compact layout if terminal height is less than 20 lines (memoized)
+    const useCompactLayout = React.useMemo(() => terminalHeight < 20, [terminalHeight]);
+    if (useCompactLayout) {
+        return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "\u2022 Cloud development environments \u2022 v", VERSION] })] }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        return (_jsxs(Box, { marginBottom: 0, children: [_jsx(Text, { color: isSelected ? item.color : 'gray', children: isSelected ? figures.pointer : ' ' }), _jsx(Text, { children: " " }), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : 'white', bold: isSelected, children: item.label }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "- ", item.description] }), _jsxs(Text, { color: "gray", dimColor: true, children: [' ', "[", index + 1, "]"] })] }, item.key));
+                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Breadcrumb, { items: [{ label: 'Home', active: true }] }), _jsx(Box, { marginBottom: 1, children: _jsx(Banner, {}) }), _jsx(Box, { flexDirection: "column", paddingX: 2, marginBottom: 1, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginBottom: 1, marginTop: 1, children: [_jsx(Box, { marginBottom: 1, paddingX: 1, children: _jsx(Text, { color: "white", bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
+                        const isSelected = index === selectedIndex;
+                        return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: isSelected ? 'round' : 'single', borderColor: isSelected ? item.color : 'gray', marginBottom: 0, children: [_jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : 'white', bold: isSelected, children: item.label }), _jsx(Text, { color: "gray", children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: "gray", dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
+                    })] }), _jsx(Box, { paddingX: 2, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));
+});

package/dist/components/StatusBadge.js

@@ -7,32 +7,35 @@ export const getStatusDisplay = (status) => {
     }
     switch (status) {
         case 'running':
-            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING' };
+            return { icon: figures.circleFilled, color: 'green', text: 'RUNNING   ' };
         case 'provisioning':
-            return { icon: figures.hamburger, color: 'yellow', text: 'PROVISIONING' };
+            return { icon: figures.ellipsis, color: 'yellow', text: 'PROVISION ' };
         case 'initializing':
-            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZING' };
+            return { icon: figures.ellipsis, color: 'cyan', text: 'INITIALIZE' };
         case 'suspended':
-            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED' };
+            return { icon: figures.circleDotted, color: 'yellow', text: 'SUSPENDED ' };
         case 'failure':
-            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
         case 'shutdown':
-            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN' };
+            return { icon: figures.circle, color: 'gray', text: 'SHUTDOWN  ' };
         case 'resuming':
-            return { icon: figures.ellipsis, color: 'cyan', text: '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' };
+            return { icon: figures.tick, color: 'green', text: 'READY     ' };
         case 'build_complete':
         case 'building_complete':
-            return { icon: figures.tick, color: 'green', text: 'COMPLETE' };
+            return { icon: figures.tick, color: 'green', text: 'COMPLETE  ' };
         case 'building':
-            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING' };
+            return { icon: figures.ellipsis, color: 'yellow', text: 'BUILDING  ' };
         case 'build_failed':
-            return { icon: figures.cross, color: 'red', text: 'FAILED' };
+            return { icon: figures.cross, color: 'red', text: 'FAILED    ' };
         default:
-            return { icon: figures.questionMarkPrefix, color: 'gray', text: status.toUpperCase() };
+            // Truncate and pad any unknown status to 10 chars to match column width
+            const truncated = status.toUpperCase().slice(0, 10);
+            const padded = truncated.padEnd(10, ' ');
+            return { icon: figures.questionMarkPrefix, color: 'gray', text: padded };
     }
 };
 export const StatusBadge = ({ status, showText = true }) => {

package/dist/utils/CommandExecutor.js

@@ -28,9 +28,13 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         console.clear();
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Execute a create/action command with automatic format handling
@@ -47,9 +51,13 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         console.clear();
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Execute a delete command with automatic format handling
@@ -66,8 +74,12 @@ export class CommandExecutor {
             return;
         }
         // Interactive mode
+        // Enter alternate screen buffer
+        process.stdout.write('\x1b[?1049h');
         const { waitUntilExit } = render(renderUI());
         await waitUntilExit();
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
     }
     /**
      * Fetch items from an async iterator with optional filtering and limits

package/dist/utils/client.js

@@ -1,12 +1,29 @@
 import Runloop from '@runloop/api-client';
 import { getConfig } from './config.js';
+/**
+ * Get the base URL based on RUNLOOP_ENV environment variable
+ * - dev: https://api.runloop.pro
+ * - prod or unset: https://api.runloop.ai (default)
+ */
+function getBaseUrl() {
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    switch (env) {
+        case 'dev':
+            return 'https://api.runloop.pro';
+        case 'prod':
+        default:
+            return 'https://api.runloop.ai';
+    }
+}
 export function getClient() {
     const config = getConfig();
     if (!config.apiKey) {
         throw new Error('API key not configured. Run: rln auth');
     }
+    const baseURL = getBaseUrl();
     return new Runloop({
         bearerToken: config.apiKey,
+        baseURL,
         timeout: 10000, // 10 seconds instead of default 30 seconds
         maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
     });

package/dist/utils/interactiveCommand.js

@@ -0,0 +1,14 @@
+/**
+ * Wrapper for interactive commands that need alternate screen buffer management
+ */
+export async function runInteractiveCommand(command) {
+    // Enter alternate screen buffer
+    process.stdout.write('\x1b[?1049h');
+    try {
+        await command();
+    }
+    finally {
+        // Exit alternate screen buffer
+        process.stdout.write('\x1b[?1049l');
+    }
+}

package/dist/utils/sshSession.js

@@ -0,0 +1,25 @@
+import { spawnSync } from 'child_process';
+export async function runSSHSession(config) {
+    // Reset terminal to fix input visibility issues
+    // This ensures the terminal is in a proper state after exiting Ink
+    spawnSync('reset', [], { stdio: 'inherit' });
+    console.clear();
+    console.log(`\nConnecting to devbox ${config.devboxName}...\n`);
+    // Spawn SSH in foreground with proper terminal settings
+    const result = spawnSync('ssh', [
+        '-t', // Force pseudo-terminal allocation for proper input handling
+        '-i', config.keyPath,
+        '-o', `ProxyCommand=${config.proxyCommand}`,
+        '-o', 'StrictHostKeyChecking=no',
+        '-o', 'UserKnownHostsFile=/dev/null',
+        `${config.sshUser}@${config.url}`
+    ], {
+        stdio: 'inherit',
+        shell: false
+    });
+    return {
+        exitCode: result.status || 0,
+        shouldRestart: true,
+        returnToDevboxId: config.devboxId
+    };
+}

package/dist/utils/url.js

@@ -0,0 +1,39 @@
+/**
+ * Utility functions for generating URLs
+ */
+/**
+ * Get the base URL for the Runloop platform based on environment
+ * - dev: https://platform.runloop.pro
+ * - prod or unset: https://platform.runloop.ai (default)
+ */
+export function getBaseUrl() {
+    const env = process.env.RUNLOOP_ENV?.toLowerCase();
+    switch (env) {
+        case 'dev':
+            return 'https://platform.runloop.pro';
+        case 'prod':
+        default:
+            return 'https://platform.runloop.ai';
+    }
+}
+/**
+ * Generate a devbox URL for the given devbox ID
+ */
+export function getDevboxUrl(devboxId) {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/devboxes/${devboxId}`;
+}
+/**
+ * Generate a blueprint URL for the given blueprint ID
+ */
+export function getBlueprintUrl(blueprintId) {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/blueprints/${blueprintId}`;
+}
+/**
+ * Generate a settings URL
+ */
+export function getSettingsUrl() {
+    const baseUrl = getBaseUrl();
+    return `${baseUrl}/settings`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Beautiful CLI for Runloop devbox management",
   "type": "module",
   "bin": {
@@ -47,6 +47,7 @@
   "dependencies": {
     "@inkjs/ui": "^2.0.0",
     "@runloop/api-client": "^0.55.0",
+    "@runloop/rl-cli": "^0.0.1",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
     "conf": "^13.0.1",