@runloop/rl-cli 0.3.0 → 0.5.0

package/README.md

@@ -6,7 +6,6 @@ A beautiful, interactive CLI for managing Runloop devboxes built with Ink and Ty
 
 - 🎨 Beautiful terminal UI with colors and gradients
 - ⚡ Fast and responsive with pagination
-- 🔐 Secure API key management
 - 📦 Manage devboxes, snapshots, and blueprints
 - 🚀 Execute commands in devboxes
 - 📤 Upload files to devboxes
@@ -33,90 +32,31 @@ npm link
 
 ## Setup
 
-Configure your API key using either method:
-
-### Option 1: Environment Variable (Recommended for CI/CD)
+Configure your API key:
 
 ```bash
 export RUNLOOP_API_KEY=your_api_key_here
 ```
 
-### Option 2: Interactive Setup
-
-```bash
-rli auth
-```
-
 Get your API key from [https://runloop.ai/settings](https://runloop.ai/settings)
 
 ## Usage
 
-### Authentication
-
-```bash
-# Interactive setup (stores API key locally)
-rli auth
-
-# Or use environment variable
-export RUNLOOP_API_KEY=your_api_key_here
-```
-
-The CLI will automatically use `RUNLOOP_API_KEY` if set, otherwise it will use the stored configuration.
-
 ### Theme Configuration
 
-The CLI supports both light and dark terminal themes with automatic detection:
+The CLI supports both light and dark terminal themes. Set the theme via environment variable:
 
 ```bash
-# Interactive theme selector with live preview
-rli config theme
-
-# Or set theme directly
-rli config theme auto    # Auto-detect terminal background (default)
-rli config theme light   # Force light mode (dark text on light background)
-rli config theme dark    # Force dark mode (light text on dark background)
-
-# Or use environment variable
-export RUNLOOP_THEME=light
+export RUNLOOP_THEME=light   # Force light mode (dark text on light background)
+export RUNLOOP_THEME=dark    # Force dark mode (light text on dark background)
 ```
 
-**Interactive Mode:**
-
-- When you run `rli config theme` without arguments, you get an interactive selector
-- Use arrow keys to navigate between auto/light/dark options
-- See live preview of colors as you navigate
-- Press Enter to save, Esc to cancel
-
 **How it works:**
 
-- **auto** (default): Uses dark mode by default (theme detection is disabled to prevent terminal flashing)
+- **auto** (default): Detects correct theme by default
 - **light**: Optimized for light-themed terminals (uses dark text colors)
 - **dark**: Optimized for dark-themed terminals (uses light text colors)
 
-**Terminal Compatibility:**
-
-- Works with all modern terminals (iTerm2, Terminal.app, VS Code integrated terminal, tmux)
-- The CLI defaults to dark mode for the best experience
-- You can manually set light or dark mode based on your terminal theme
-
-**Note on Auto-Detection:**
-
-- Auto theme detection is **disabled by default** to prevent screen flashing
-- To enable it, set `RUNLOOP_ENABLE_THEME_DETECTION=1`
-- If you use a light terminal, we recommend setting: `rli config theme light`
-- The result is cached, so subsequent runs are instant (no flashing!)
-- If you change your terminal theme, you can re-detect by running:
-
-  ```bash
-  rli config theme auto
-  ```
-- To manually set your theme without detection:
-  ```bash
-  export RUNLOOP_THEME=dark  # or light
-  # Or disable auto-detection entirely:
-  export RUNLOOP_DISABLE_THEME_DETECTION=1
-  ```
-
 ### Devbox Commands
 
 ```bash

package/dist/cli.js

@@ -5,7 +5,6 @@ import { listDevboxes } from "./commands/devbox/list.js";
 import { deleteDevbox } from "./commands/devbox/delete.js";
 import { execCommand } from "./commands/devbox/exec.js";
 import { uploadFile } from "./commands/devbox/upload.js";
-import { getConfig } from "./utils/config.js";
 import { VERSION } from "./version.js";
 import { exitAlternateScreenBuffer } from "./utils/screen.js";
 import { processUtils } from "./utils/processUtils.js";
@@ -21,37 +20,6 @@ program
     .name("rli")
     .description("Beautiful CLI for Runloop devbox management")
     .version(VERSION);
-program
-    .command("auth")
-    .description("Configure API authentication")
-    .action(async () => {
-    const { default: auth } = await import("./commands/auth.js");
-    auth();
-});
-// Config commands
-const config = program
-    .command("config")
-    .description("Configure CLI settings")
-    .action(async () => {
-    const { showThemeConfig } = await import("./commands/config.js");
-    showThemeConfig();
-});
-config
-    .command("theme [mode]")
-    .description("Get or set theme mode (auto|light|dark)")
-    .action(async (mode) => {
-    const { showThemeConfig, setThemeConfig } = await import("./commands/config.js");
-    if (!mode) {
-        showThemeConfig();
-    }
-    else if (mode === "auto" || mode === "light" || mode === "dark") {
-        setThemeConfig(mode);
-    }
-    else {
-        console.error(`\n❌ Invalid theme mode: ${mode}\nValid options: auto, light, dark\n`);
-        processUtils.exit(1);
-    }
-});
 // Devbox commands
 const devbox = program
     .command("devbox")
@@ -446,20 +414,26 @@ program
     // Initialize theme system early (before any UI rendering)
     const { initializeTheme } = await import("./utils/theme.js");
     await initializeTheme();
-    // Check if API key is configured (except for auth, config, and mcp commands)
+    // Check if API key is configured (except for mcp commands)
     const args = process.argv.slice(2);
-    if (args[0] !== "auth" &&
-        args[0] !== "config" &&
-        args[0] !== "mcp" &&
-        args[0] !== "mcp-server" &&
-        args[0] !== "--help" &&
-        args[0] !== "-h" &&
-        args.length > 0) {
-        const config = getConfig();
-        if (!config.apiKey) {
-            console.error("\n❌ API key not configured. Run: rli auth\n");
-            processUtils.exit(1);
-        }
+    if (!process.env.RUNLOOP_API_KEY) {
+        console.error(`
+❌ API key not configured.
+
+To get started:
+1. Go to https://platform.runloop.ai/settings and create an API key
+2. Set the environment variable:
+
+   export RUNLOOP_API_KEY=your_api_key_here
+
+To make it permanent, add this line to your shell config:
+   • For zsh:  echo 'export RUNLOOP_API_KEY=your_api_key_here' >> ~/.zshrc
+   • For bash: echo 'export RUNLOOP_API_KEY=your_api_key_here' >> ~/.bashrc
+
+Then restart your terminal or run: source ~/.zshrc (or ~/.bashrc)
+`);
+        processUtils.exit(1);
+        return; // Ensure execution stops
     }
     // If no command provided, show main menu
     if (args.length === 0) {

package/dist/commands/blueprint/list.js

@@ -444,9 +444,10 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
         return (_jsx(DevboxCreatePage, { onBack: () => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
-            }, onCreate: () => {
+            }, onCreate: (devbox) => {
                 setShowCreateDevbox(false);
                 setSelectedBlueprint(null);
+                navigate("devbox-detail", { devboxId: devbox.id });
             }, initialBlueprintId: selectedBlueprint.id }));
     }
     // Loading state

package/dist/commands/mcp-install.js

@@ -101,7 +101,7 @@ export async function installMcpConfig() {
         console.log("\n📝 Next steps:");
         console.log("1. Restart Claude Desktop completely (quit and reopen)");
         console.log('2. Ask Claude: "List my devboxes" or "What Runloop tools do you have?"');
-        console.log('\n💡 Tip: Make sure you\'ve run "rli auth" to configure your API key first!');
+        console.log("\n💡 Tip: Make sure RUNLOOP_API_KEY environment variable is set!");
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);

package/dist/commands/snapshot/list.js

@@ -16,9 +16,12 @@ import { colors } from "../../utils/theme.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
+import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
+import { useNavigation } from "../../store/navigationStore.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const { exit: inkExit } = useApp();
+    const { navigate } = useNavigation();
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [showPopup, setShowPopup] = React.useState(false);
     const [selectedOperation, setSelectedOperation] = React.useState(0);
@@ -28,6 +31,7 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
     const [operationResult, setOperationResult] = React.useState(null);
     const [operationError, setOperationError] = React.useState(null);
     const [operationLoading, setOperationLoading] = React.useState(false);
+    const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
     // Calculate overhead for viewport height
     const overhead = 13;
     const { viewportHeight, terminalWidth } = useViewportHeight({
@@ -82,11 +86,17 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
         pageSize: PAGE_SIZE,
         getItemId: (snapshot) => snapshot.id,
         pollInterval: 2000,
-        pollingEnabled: !showPopup && !executingOperation,
+        pollingEnabled: !showPopup && !executingOperation && !showCreateDevbox,
         deps: [devboxId, PAGE_SIZE],
     });
     // Operations for snapshots
     const operations = React.useMemo(() => [
+        {
+            key: "create_devbox",
+            label: "Create Devbox from Snapshot",
+            color: colors.success,
+            icon: figures.play,
+        },
         {
             key: "delete",
             label: "Delete Snapshot",
@@ -164,6 +174,10 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             }
             return;
         }
+        // Handle create devbox view
+        if (showCreateDevbox) {
+            return;
+        }
         // Handle popup navigation
         if (showPopup) {
             if (key.upArrow && selectedOperation > 0) {
@@ -175,15 +189,27 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
             else if (key.return) {
                 setShowPopup(false);
                 const operationKey = operations[selectedOperation].key;
-                setSelectedSnapshot(selectedSnapshotItem);
-                setExecutingOperation(operationKey);
-                // Execute immediately after state update
-                setTimeout(() => executeOperation(), 0);
+                if (operationKey === "create_devbox") {
+                    setSelectedSnapshot(selectedSnapshotItem);
+                    setShowCreateDevbox(true);
+                }
+                else {
+                    setSelectedSnapshot(selectedSnapshotItem);
+                    setExecutingOperation(operationKey);
+                    // Execute immediately after state update
+                    setTimeout(() => executeOperation(), 0);
+                }
             }
             else if (key.escape || input === "q") {
                 setShowPopup(false);
                 setSelectedOperation(0);
             }
+            else if (input === "c") {
+                // Create devbox hotkey
+                setShowPopup(false);
+                setSelectedSnapshot(selectedSnapshotItem);
+                setShowCreateDevbox(true);
+            }
             else if (input === "d") {
                 // Delete hotkey
                 setShowPopup(false);
@@ -256,6 +282,17 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                         { label: operationLabel, active: true },
                     ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." })] }));
     }
+    // Create devbox screen
+    if (showCreateDevbox && selectedSnapshot) {
+        return (_jsx(DevboxCreatePage, { onBack: () => {
+                setShowCreateDevbox(false);
+                setSelectedSnapshot(null);
+            }, onCreate: (devbox) => {
+                setShowCreateDevbox(false);
+                setSelectedSnapshot(null);
+                navigate("devbox-detail", { devboxId: devbox.id });
+            }, initialSnapshotId: selectedSnapshot.id }));
+    }
     // Loading state
     if (loading && snapshots.length === 0) {
         return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
@@ -292,7 +329,11 @@ const ListSnapshotsUI = ({ devboxId, onBack, onExit, }) => {
                         label: op.label,
                         color: op.color,
                         icon: op.icon,
-                        shortcut: op.key === "delete" ? "d" : "",
+                        shortcut: op.key === "create_devbox"
+                            ? "c"
+                            : op.key === "delete"
+                                ? "d"
+                                : "",
                     })), selectedOperation: selectedOperation, onClose: () => setShowPopup(false) }) })), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate"] }), (hasMore || hasPrev) && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 ", figures.arrowLeft, figures.arrowRight, " Page"] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [a] Actions"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 };
 // Export the UI component for use in the main menu

package/dist/components/Breadcrumb.js

@@ -6,12 +6,12 @@ import { UpdateNotification } from "./UpdateNotification.js";
 export const Breadcrumb = ({ items, showVersionCheck = false, }) => {
     const env = process.env.RUNLOOP_ENV?.toLowerCase();
     const isDevEnvironment = env === "dev";
-    return (_jsxs(Box, { marginBottom: 1, paddingX: 0, paddingY: 0, children: [_jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
-                        // Limit label length to prevent Yoga layout engine errors
-                        const MAX_LABEL_LENGTH = 80;
-                        const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
-                            ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
-                            : item.label;
-                        return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
-                    })] }), showVersionCheck && (_jsx(Box, { paddingX: 2, marginTop: 0, children: _jsx(UpdateNotification, {}) }))] }));
+    return (_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, paddingX: 0, paddingY: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Box, { borderStyle: "round", borderColor: colors.primary, paddingX: 2, paddingY: 0, children: [_jsx(Text, { color: colors.primary, bold: true, children: "rl" }), isDevEnvironment && (_jsxs(Text, { color: colors.error, bold: true, children: [" ", "(dev)"] })), _jsx(Text, { color: colors.textDim, children: " \u203A " }), items.map((item, index) => {
+                            // Limit label length to prevent Yoga layout engine errors
+                            const MAX_LABEL_LENGTH = 80;
+                            const truncatedLabel = item.label.length > MAX_LABEL_LENGTH
+                                ? item.label.substring(0, MAX_LABEL_LENGTH) + "..."
+                                : item.label;
+                            return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: item.active ? colors.primary : colors.textDim, children: truncatedLabel }), index < items.length - 1 && (_jsx(Text, { color: colors.textDim, children: " \u203A " }))] }, index));
+                        })] }) }), showVersionCheck && _jsx(UpdateNotification, {})] }));
 };

package/dist/components/DevboxCreatePage.js

@@ -11,7 +11,7 @@ import { Breadcrumb } from "./Breadcrumb.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
 import { colors } from "../utils/theme.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
-export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
+export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, initialSnapshotId, }) => {
     const [currentField, setCurrentField] = React.useState("create");
     const [formData, setFormData] = React.useState({
         name: "",
@@ -23,7 +23,7 @@ export const DevboxCreatePage = ({ onBack, onCreate, initialBlueprintId, }) => {
         keep_alive: "3600",
         metadata: {},
         blueprint_id: initialBlueprintId || "",
-        snapshot_id: "",
+        snapshot_id: initialSnapshotId || "",
     });
     const [metadataKey, setMetadataKey] = React.useState("");
     const [metadataValue, setMetadataValue] = React.useState("");

package/dist/components/MainMenu.js

@@ -6,8 +6,10 @@ import { Banner } from "./Banner.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { VERSION } from "../version.js";
 import { colors } from "../utils/theme.js";
+import { execCommand } from "../utils/exec.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 const menuItems = [
     {
         key: "devboxes",
@@ -36,6 +38,8 @@ export const MainMenu = ({ onSelect }) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     // Use centralized viewport hook for consistent layout
     const { terminalHeight } = useViewportHeight({ overhead: 0 });
+    // Check for updates
+    const { updateAvailable } = useUpdateCheck();
     // Handle Ctrl+C to exit
     useExitOnCtrlC();
     useInput((input, key) => {
@@ -60,6 +64,13 @@ export const MainMenu = ({ onSelect }) => {
         else if (input === "s" || input === "3") {
             onSelect("snapshots");
         }
+        else if (input === "u" && updateAvailable) {
+            // Release terminal and exec into update command (never returns)
+            execCommand("sh", [
+                "-c",
+                "npm install -g @runloop/rl-cli@latest && exec rli",
+            ]);
+        }
     });
     // Use compact layout if terminal height is less than 20 lines (memoized)
     const useCompactLayout = terminalHeight < 20;
@@ -67,10 +78,10 @@ export const MainMenu = ({ onSelect }) => {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingX: 2, marginBottom: 1, children: [_jsx(Text, { color: colors.primary, bold: true, children: "RUNLOOP.ai" }), _jsxs(Text, { color: colors.textDim, 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 : colors.textDim, 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 : colors.text, bold: isSelected, children: item.label }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
-                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) })] }));
+                    }) }), _jsx(Box, { paddingX: 2, marginTop: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) })] }));
     }
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Breadcrumb, { items: [{ label: "Home", active: true }], showVersionCheck: true }), _jsx(Banner, {}), _jsx(Box, { flexDirection: "column", paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Cloud development environments for your team \u2022 v", VERSION] }) }) }), _jsxs(Box, { flexDirection: "column", paddingX: 2, marginTop: 1, flexGrow: 1, children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: colors.text, bold: true, children: "Select a resource:" }) }), menuItems.map((item, index) => {
                         const isSelected = index === selectedIndex;
                         return (_jsxs(Box, { paddingX: 2, paddingY: 0, borderStyle: "single", borderColor: isSelected ? item.color : colors.border, marginTop: index === 0 ? 1 : 0, flexShrink: 0, children: [isSelected && (_jsxs(_Fragment, { children: [_jsx(Text, { color: item.color, bold: true, children: figures.pointer }), _jsx(Text, { children: " " })] })), _jsx(Text, { color: item.color, bold: true, children: item.icon }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? item.color : colors.text, bold: isSelected, children: item.label }), _jsx(Text, { color: colors.textDim, children: " " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: item.description }), _jsx(Text, { children: " " }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["[", index + 1, "]"] })] }, item.key));
-                    })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit"] }) }) })] }));
+                    })] }), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.arrowUp, figures.arrowDown, " Navigate \u2022 [1-3] Quick select \u2022 [Enter] Select \u2022 [Esc] Quit", updateAvailable && " • [u] Update"] }) }) })] }));
 };

package/dist/components/ResourceListView.js

@@ -87,15 +87,15 @@ export function ResourceListView({ config }) {
     React.useEffect(() => {
         fetchData(true);
     }, [fetchData]);
-    // Auto-refresh
+    // Auto-refresh - STOP refreshing when there's an error to avoid flickering
     React.useEffect(() => {
-        if (config.autoRefresh?.enabled) {
+        if (config.autoRefresh?.enabled && !error) {
             const interval = setInterval(() => {
                 fetchData(false);
             }, config.autoRefresh.interval || 3000);
             return () => clearInterval(interval);
         }
-    }, [config.autoRefresh, fetchData]);
+    }, [config.autoRefresh, fetchData, error]);
     // Removed refresh icon animation to prevent constant re-renders and flashing
     // Filter resources based on search query
     const filteredResources = React.useMemo(() => {

package/dist/components/UpdateNotification.js

@@ -1,56 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Box, Text } from "ink";
 import { colors } from "../utils/theme.js";
-import { VERSION } from "../version.js";
+import { useUpdateCheck } from "../hooks/useUpdateCheck.js";
 /**
  * Version check component that checks npm for updates and displays a notification
  * Restored from git history and enhanced with better visual styling
  */
 export const UpdateNotification = () => {
-    const [updateAvailable, setUpdateAvailable] = React.useState(null);
-    const [isChecking, setIsChecking] = React.useState(true);
-    React.useEffect(() => {
-        const checkForUpdates = async () => {
-            try {
-                const currentVersion = VERSION;
-                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
-                if (response.ok) {
-                    const data = (await response.json());
-                    const latestVersion = data.version;
-                    if (latestVersion && latestVersion !== currentVersion) {
-                        // Check if current version is older than latest
-                        const compareVersions = (version1, version2) => {
-                            const v1parts = version1.split(".").map(Number);
-                            const v2parts = version2.split(".").map(Number);
-                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
-                                const v1part = v1parts[i] || 0;
-                                const v2part = v2parts[i] || 0;
-                                if (v1part > v2part)
-                                    return 1;
-                                if (v1part < v2part)
-                                    return -1;
-                            }
-                            return 0;
-                        };
-                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
-                        if (isUpdateAvailable) {
-                            setUpdateAvailable(latestVersion);
-                        }
-                    }
-                }
-            }
-            catch {
-                // Silently fail
-            }
-            finally {
-                setIsChecking(false);
-            }
-        };
-        checkForUpdates();
-    }, []);
+    const { isChecking, updateAvailable, currentVersion } = useUpdateCheck();
     if (isChecking || !updateAvailable) {
         return null;
     }
-    return (_jsxs(Box, { borderStyle: "round", borderColor: colors.warning, paddingX: 1, paddingY: 0, marginTop: 0, children: [_jsx(Text, { color: colors.warning, bold: true, children: "\u2728" }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "Update available:", " "] }), _jsx(Text, { color: colors.warning, bold: true, children: VERSION }), _jsxs(Text, { color: colors.primary, bold: true, children: [" ", "\u2192", " "] }), _jsx(Text, { color: colors.success, bold: true, children: updateAvailable }), _jsxs(Text, { color: colors.text, bold: true, children: [" ", "\u2022 Run:", " "] }), _jsx(Text, { color: colors.primary, bold: true, children: "npm install -g @runloop/rl-cli@latest" })] }));
+    return (_jsx(Box, { children: _jsxs(Box, { borderStyle: "arrow", borderColor: colors.warning, paddingX: 1, paddingY: 0, children: [_jsx(Text, { color: colors.warning, children: "\u2728" }), _jsx(Text, { color: colors.text, children: " Update available: " }), _jsx(Text, { color: colors.warning, children: currentVersion }), _jsx(Text, { color: colors.primary, children: " \u2192 " }), _jsx(Text, { color: colors.success, children: updateAvailable }), _jsx(Text, { color: colors.textDim, children: " \u2022 Press " }), _jsx(Text, { color: colors.primary, bold: true, children: "[u]" }), _jsx(Text, { color: colors.textDim, children: " to run: " }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "npm i -g @runloop/rl-cli@latest" })] }) }));
 };

package/dist/hooks/useCursorPagination.js

@@ -119,9 +119,9 @@ export function useCursorPagination(config) {
         // Fetch page 0
         fetchPageData(0, true);
     }, [depsKey, fetchPageData]);
-    // Polling effect
+    // Polling effect - STOP polling when there's an error to avoid flickering
     React.useEffect(() => {
-        if (!pollInterval || pollInterval <= 0 || !pollingEnabled) {
+        if (!pollInterval || pollInterval <= 0 || !pollingEnabled || error) {
             return;
         }
         const timer = setInterval(() => {
@@ -130,7 +130,7 @@ export function useCursorPagination(config) {
             }
         }, pollInterval);
         return () => clearInterval(timer);
-    }, [pollInterval, pollingEnabled, currentPage, fetchPageData]);
+    }, [pollInterval, pollingEnabled, currentPage, fetchPageData, error]);
     // Navigation functions
     const nextPage = React.useCallback(() => {
         if (!loading && !navigating && hasMore) {

package/dist/hooks/useUpdateCheck.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { VERSION } from "../version.js";
+/**
+ * Hook to check for CLI updates from npm registry
+ * Returns the latest version if an update is available
+ */
+export function useUpdateCheck() {
+    const [updateAvailable, setUpdateAvailable] = React.useState(null);
+    const [isChecking, setIsChecking] = React.useState(true);
+    React.useEffect(() => {
+        const checkForUpdates = async () => {
+            try {
+                const currentVersion = VERSION;
+                const response = await fetch("https://registry.npmjs.org/@runloop/rl-cli/latest");
+                if (response.ok) {
+                    const data = (await response.json());
+                    const latestVersion = data.version;
+                    if (latestVersion && latestVersion !== currentVersion) {
+                        // Check if current version is older than latest
+                        const compareVersions = (version1, version2) => {
+                            const v1parts = version1.split(".").map(Number);
+                            const v2parts = version2.split(".").map(Number);
+                            for (let i = 0; i < Math.max(v1parts.length, v2parts.length); i++) {
+                                const v1part = v1parts[i] || 0;
+                                const v2part = v2parts[i] || 0;
+                                if (v1part > v2part)
+                                    return 1;
+                                if (v1part < v2part)
+                                    return -1;
+                            }
+                            return 0;
+                        };
+                        const isUpdateAvailable = compareVersions(latestVersion, currentVersion) > 0;
+                        if (isUpdateAvailable) {
+                            setUpdateAvailable(latestVersion);
+                        }
+                    }
+                }
+            }
+            catch {
+                // Silently fail
+            }
+            finally {
+                setIsChecking(false);
+            }
+        };
+        checkForUpdates();
+    }, []);
+    return {
+        isChecking,
+        updateAvailable,
+        currentVersion: VERSION,
+    };
+}

package/dist/mcp/server.js

@@ -45,7 +45,7 @@ function getBaseUrl() {
 function getClient() {
     const config = getConfig();
     if (!config.apiKey) {
-        throw new Error("API key not configured. Please set RUNLOOP_API_KEY environment variable or run: rli auth");
+        throw new Error("API key not configured. Please set RUNLOOP_API_KEY environment variable.");
     }
     const baseURL = getBaseUrl();
     return new Runloop({
@@ -54,7 +54,7 @@ function getClient() {
         timeout: 10000, // 10 seconds instead of default 30 seconds
         maxRetries: 2, // 2 retries instead of default 5 (only for retryable errors)
         defaultHeaders: {
-            "User-Agent": `Runloop/JS ${VERSION} - CLI MCP`,
+            "User-Agent": `Runloop/JS - CLI MCP ${VERSION}`,
         },
     });
 }

package/dist/utils/client.js

@@ -19,14 +19,14 @@ function getBaseUrl() {
 export function getClient() {
     const config = getConfig();
     if (!config.apiKey) {
-        throw new Error("API key not configured. Run: rli auth");
+        throw new Error("API key not configured. Set RUNLOOP_API_KEY environment variable.");
     }
     const baseURL = getBaseUrl();
     return new Runloop({
         bearerToken: config.apiKey,
         baseURL,
         defaultHeaders: {
-            "User-Agent": `Runloop/JS ${VERSION} - CLI`,
+            "User-Agent": `Runloop/JS - CLI ${VERSION}`,
         },
     });
 }

package/dist/utils/config.js

@@ -4,6 +4,7 @@ import { join } from "path";
 import { existsSync, statSync, mkdirSync, writeFileSync } from "fs";
 const config = new Conf({
     projectName: "runloop-cli",
+    cwd: join(homedir(), ".runloop"),
 });
 export function getConfig() {
     // Check environment variable first, then fall back to stored config
@@ -29,7 +30,7 @@ export function sshUrl() {
         : "ssh.runloop.ai:443";
 }
 export function getCacheDir() {
-    return join(homedir(), ".cache", "rl-cli");
+    return join(homedir(), ".runloop", "rl-cli");
 }
 export function shouldCheckForUpdates() {
     const cacheDir = getCacheDir();

package/dist/utils/exec.js

@@ -0,0 +1,22 @@
+import { spawnSync } from "child_process";
+import { showCursor } from "./screen.js";
+import { processUtils } from "./processUtils.js";
+/**
+ * Release terminal from Ink and exec into a new command (one-way, no return)
+ * This function never returns - it runs the command synchronously and exits.
+ */
+export function execCommand(command, args) {
+    // Release terminal from Ink's control
+    process.stdin.pause();
+    if (processUtils.stdin.isTTY && processUtils.stdin.setRawMode) {
+        processUtils.stdin.setRawMode(false);
+    }
+    if (processUtils.stdout.isTTY) {
+        processUtils.stdout.write("\x1b[0m"); // SGR reset
+    }
+    showCursor();
+    // Run the command synchronously - this blocks until complete
+    const result = spawnSync(command, args, { stdio: "inherit" });
+    // Exit with the command's exit code
+    process.exit(result.status ?? 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runloop/rl-cli",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Beautiful CLI for the Runloop platform",
   "type": "module",
   "bin": {
@@ -56,7 +56,6 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.19.1",
     "@runloop/api-client": "^1.0.0",
-    "@runloop/rl-cli": "^0.1.2",
     "@types/express": "^5.0.3",
     "chalk": "^5.3.0",
     "commander": "^14.0.1",