@runloop/rl-cli 0.2.0 → 0.3.0

package/README.md

@@ -253,16 +253,6 @@ npm run dev
 npm start -- <command>
 ```
 
-## Tech Stack
-
-- [Ink](https://github.com/vadimdemedes/ink) - React for CLIs
-- [Ink Gradient](https://github.com/sindresorhus/ink-gradient) - Gradient text
-- [Ink Big Text](https://github.com/sindresorhus/ink-big-text) - ASCII art
-- [Commander.js](https://github.com/tj/commander.js) - CLI framework
-- [@runloop/api-client](https://github.com/runloopai/api-client-ts) - Runloop API client
-- TypeScript - Type safety
-- [Figures](https://github.com/sindresorhus/figures) - Unicode symbols
-
 ## Publishing
 
 To publish a new version to npm:

package/dist/cli.js

@@ -6,21 +6,15 @@ 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 { readFileSync } from "fs";
-import { fileURLToPath } from "url";
-import { dirname, join } from "path";
-// Get version from package.json
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const packageJson = JSON.parse(readFileSync(join(__dirname, "../package.json"), "utf8"));
-export const VERSION = packageJson.version;
+import { VERSION } from "./version.js";
 import { exitAlternateScreenBuffer } from "./utils/screen.js";
+import { processUtils } from "./utils/processUtils.js";
 // Global Ctrl+C handler to ensure it always exits
-process.on("SIGINT", () => {
+processUtils.on("SIGINT", () => {
     // Force exit immediately, clearing alternate screen buffer
     exitAlternateScreenBuffer();
-    process.stdout.write("\n");
-    process.exit(130); // Standard exit code for SIGINT
+    processUtils.stdout.write("\n");
+    processUtils.exit(130); // Standard exit code for SIGINT
 });
 const program = new Command();
 program
@@ -55,7 +49,7 @@ config
     }
     else {
         console.error(`\n❌ Invalid theme mode: ${mode}\nValid options: auto, light, dark\n`);
-        process.exit(1);
+        processUtils.exit(1);
     }
 });
 // Devbox commands
@@ -464,7 +458,7 @@ program
         const config = getConfig();
         if (!config.apiKey) {
             console.error("\n❌ API key not configured. Run: rli auth\n");
-            process.exit(1);
+            processUtils.exit(1);
         }
     }
     // If no command provided, show main menu

package/dist/commands/auth.js

@@ -8,6 +8,7 @@ import { Banner } from "../components/Banner.js";
 import { SuccessMessage } from "../components/SuccessMessage.js";
 import { getSettingsUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
+import { processUtils } from "../utils/processUtils.js";
 const AuthUI = () => {
     const [apiKey, setApiKeyInput] = React.useState("");
     const [saved, setSaved] = React.useState(false);
@@ -15,7 +16,7 @@ const AuthUI = () => {
         if (key.return && apiKey.trim()) {
             setApiKey(apiKey.trim());
             setSaved(true);
-            setTimeout(() => process.exit(0), 1000);
+            setTimeout(() => processUtils.exit(0), 1000);
         }
     });
     if (saved) {

package/dist/commands/blueprint/list.js

@@ -20,6 +20,7 @@ import { DevboxCreatePage } from "../../components/DevboxCreatePage.js";
 import { useExitOnCtrlC } from "../../hooks/useExitOnCtrlC.js";
 import { useViewportHeight } from "../../hooks/useViewportHeight.js";
 import { useCursorPagination } from "../../hooks/useCursorPagination.js";
+import { useNavigation } from "../../store/navigationStore.js";
 const DEFAULT_PAGE_SIZE = 10;
 const ListBlueprintsUI = ({ onBack, onExit, }) => {
     const { exit: inkExit } = useApp();
@@ -34,6 +35,7 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     const [showCreateDevbox, setShowCreateDevbox] = React.useState(false);
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [showPopup, setShowPopup] = React.useState(false);
+    const { navigate } = useNavigation();
     // Calculate overhead for viewport height
     const overhead = 13;
     const { viewportHeight, terminalWidth } = useViewportHeight({
@@ -154,6 +156,13 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     // Helper function to generate operations based on selected blueprint
     const getOperationsForBlueprint = (blueprint) => {
         const operations = [];
+        // View Logs is always available
+        operations.push({
+            key: "view_logs",
+            label: "View Logs",
+            color: colors.info,
+            icon: figures.info,
+        });
         if (blueprint &&
             (blueprint.status === "build_complete" ||
                 blueprint.status === "building_complete")) {
@@ -186,14 +195,33 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
     const startIndex = currentPage * PAGE_SIZE;
     const endIndex = startIndex + blueprints.length;
-    const executeOperation = async () => {
+    const executeOperation = async (blueprintOverride, operationOverride) => {
         const client = getClient();
-        const blueprint = selectedBlueprint;
-        if (!blueprint)
+        // Use override if provided, otherwise use selectedBlueprint from state
+        // If neither is available, use selectedBlueprintItem as fallback
+        const blueprint = blueprintOverride || selectedBlueprint || selectedBlueprintItem;
+        // Use operation override if provided (to avoid state timing issues)
+        const operation = operationOverride || executingOperation;
+        if (!blueprint) {
+            console.error("No blueprint selected for operation");
             return;
+        }
+        // Ensure selectedBlueprint is set in state if it wasn't already
+        if (!selectedBlueprint && blueprint) {
+            setSelectedBlueprint(blueprint);
+        }
         try {
             setOperationLoading(true);
-            switch (executingOperation) {
+            switch (operation) {
+                case "view_logs":
+                    // Navigate to the logs screen
+                    setOperationLoading(false);
+                    setExecutingOperation(null);
+                    navigate("blueprint-logs", {
+                        blueprintId: blueprint.id,
+                        blueprintName: blueprint.name || blueprint.id,
+                    });
+                    return;
                 case "create_devbox":
                     setShowCreateDevbox(true);
                     setExecutingOperation(null);
@@ -226,15 +254,18 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
     useInput((input, key) => {
         // Handle operation input mode
         if (executingOperation && !operationResult && !operationError) {
+            // Allow escape/q to cancel any operation, even during loading
+            if (input === "q" || key.escape) {
+                setExecutingOperation(null);
+                setOperationInput("");
+                setOperationLoading(false);
+                return;
+            }
             const currentOp = allOperations.find((op) => op.key === executingOperation);
             if (currentOp?.needsInput) {
                 if (key.return) {
                     executeOperation();
                 }
-                else if (input === "q" || key.escape) {
-                    setExecutingOperation(null);
-                    setOperationInput("");
-                }
             }
             return;
         }
@@ -271,7 +302,7 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
                 else {
                     setSelectedBlueprint(selectedBlueprintItem);
                     setExecutingOperation(operationKey);
-                    executeOperation();
+                    executeOperation(selectedBlueprintItem, operationKey);
                 }
             }
             else if (key.escape || input === "q") {
@@ -293,7 +324,16 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
                     setShowPopup(false);
                     setSelectedBlueprint(selectedBlueprintItem);
                     setExecutingOperation("delete");
-                    executeOperation();
+                    executeOperation(selectedBlueprintItem, "delete");
+                }
+            }
+            else if (input === "l") {
+                const logsIndex = allOperations.findIndex((op) => op.key === "view_logs");
+                if (logsIndex >= 0) {
+                    setShowPopup(false);
+                    setSelectedBlueprint(selectedBlueprintItem);
+                    setExecutingOperation("view_logs");
+                    executeOperation(selectedBlueprintItem, "view_logs");
                 }
             }
             return;
@@ -324,6 +364,11 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
             setShowPopup(true);
             setSelectedOperation(0);
         }
+        else if (input === "l" && selectedBlueprintItem) {
+            setSelectedBlueprint(selectedBlueprintItem);
+            setExecutingOperation("view_logs");
+            executeOperation(selectedBlueprintItem, "view_logs");
+        }
         else if (input === "o" && blueprints[selectedIndex]) {
             const url = getBlueprintUrl(blueprints[selectedIndex].id);
             const openBrowser = async () => {
@@ -373,27 +418,26 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
         const needsInput = currentOp?.needsInput;
         const operationLabel = currentOp?.label || "Operation";
         if (operationLoading) {
+            const messages = {
+                delete: "Deleting blueprint...",
+                view_logs: "Fetching logs...",
+            };
             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..." })] }));
+                        ] }), _jsx(Header, { title: "Executing Operation" }), _jsx(SpinnerComponent, { message: messages[executingOperation] || "Please wait..." }), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(Text, { color: colors.textDim, dimColor: true, children: "Press [q] or [esc] to cancel" }) })] }));
         }
-        if (!needsInput) {
-            const messages = {
-                delete: "Deleting blueprint...",
-            };
+        // Only show input screen if operation needs input
+        // Operations like view_logs navigate away and don't need this screen
+        if (needsInput) {
             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..." })] }));
+                        ] }), _jsx(Header, { title: operationLabel }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, 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: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
         }
-        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: colors.primary, bold: true, children: selectedBlueprint.name || selectedBlueprint.id }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, 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: colors.textDim, dimColor: true, children: "Press [Enter] to execute \u2022 [q or esc] Cancel" }) })] })] }));
+        // For operations that don't need input (like view_logs), fall through to list view
     }
     // Create devbox screen
     if (showCreateDevbox && selectedBlueprint) {
@@ -427,7 +471,9 @@ const ListBlueprintsUI = ({ onBack, onExit, }) => {
                             ? "c"
                             : op.key === "delete"
                                 ? "d"
-                                : "",
+                                : op.key === "view_logs"
+                                    ? "l"
+                                    : "",
                     })), 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 [o] Browser"] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022 [Esc] Back"] })] })] }));
 };
 // Export the UI component for use in the main menu

package/dist/commands/blueprint/preview.js

@@ -1,49 +1,45 @@
-/**
- * Preview blueprint command
- */
+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 { output, outputError } from "../../utils/output.js";
-export async function previewBlueprint(options) {
-    try {
-        const client = getClient();
-        // Parse user parameters
-        let userParameters = undefined;
-        if (options.user && options.root) {
-            outputError("Only one of --user or --root can be specified");
-        }
-        else if (options.user) {
-            const [username, uid] = options.user.split(":");
-            if (!username || !uid) {
-                outputError("User must be in format 'username:uid'");
+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 PreviewBlueprintUI = ({ name, dockerfile, systemSetupCommands }) => {
+    const [loading, setLoading] = React.useState(true);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        const previewBlueprint = async () => {
+            try {
+                const client = getClient();
+                const blueprint = await client.blueprints.preview({
+                    name,
+                    dockerfile,
+                    system_setup_commands: systemSetupCommands,
+                });
+                setResult(blueprint);
+            }
+            catch (err) {
+                setError(err);
             }
-            userParameters = { username, uid: parseInt(uid) };
-        }
-        else if (options.root) {
-            userParameters = { username: "root", uid: 0 };
-        }
-        // Build launch parameters
-        const launchParameters = {};
-        if (options.resources) {
-            launchParameters.resource_size_request = options.resources;
-        }
-        if (options.architecture) {
-            launchParameters.architecture = options.architecture;
-        }
-        if (options.availablePorts) {
-            launchParameters.available_ports = options.availablePorts.map((port) => parseInt(port, 10));
-        }
-        if (userParameters) {
-            launchParameters.user_parameters = userParameters;
-        }
-        const preview = await client.blueprints.preview({
+            finally {
+                setLoading(false);
+            }
+        };
+        previewBlueprint();
+    }, [name, dockerfile, systemSetupCommands]);
+    return (_jsxs(_Fragment, { children: [_jsx(Banner, {}), loading && _jsx(SpinnerComponent, { message: "Previewing blueprint..." }), result && (_jsx(SuccessMessage, { message: "Blueprint preview generated", details: `Name: ${result.name}\nDockerfile: ${result.dockerfile ? "Present" : "Not provided"}\nSetup Commands: ${result.systemSetupCommands?.length || 0}` })), error && (_jsx(ErrorMessage, { message: "Failed to preview blueprint", error: error }))] }));
+};
+export async function previewBlueprint(options) {
+    const executor = createExecutor({ output: options.output });
+    await executor.executeAction(async () => {
+        const client = executor.getClient();
+        return client.blueprints.preview({
             name: options.name,
             dockerfile: options.dockerfile,
             system_setup_commands: options.systemSetupCommands,
-            launch_parameters: launchParameters,
         });
-        output(preview, { format: options.output, defaultFormat: "json" });
-    }
-    catch (error) {
-        outputError("Failed to preview blueprint", error);
-    }
+    }, () => (_jsx(PreviewBlueprintUI, { name: options.name, dockerfile: options.dockerfile, systemSetupCommands: options.systemSetupCommands })));
 }

package/dist/commands/config.js

@@ -6,6 +6,7 @@ import { setThemePreference, getThemePreference, clearDetectedTheme, } from "../
 import { Header } from "../components/Header.js";
 import { SuccessMessage } from "../components/SuccessMessage.js";
 import { colors, getCurrentTheme, setThemeMode } from "../utils/theme.js";
+import { processUtils } from "../utils/processUtils.js";
 const themeOptions = [
     {
         value: "auto",
@@ -95,10 +96,10 @@ const StaticConfigUI = ({ action, value }) => {
                 clearDetectedTheme();
             }
             setSaved(true);
-            setTimeout(() => process.exit(0), 1500);
+            setTimeout(() => processUtils.exit(0), 1500);
         }
         else if (action === "get" || !action) {
-            setTimeout(() => process.exit(0), 2000);
+            setTimeout(() => processUtils.exit(0), 2000);
         }
     }, [action, value]);
     const currentPreference = getThemePreference();

package/dist/commands/devbox/ssh.js

@@ -4,6 +4,7 @@
 import { spawn } from "child_process";
 import { getClient } from "../../utils/client.js";
 import { output, outputError } from "../../utils/output.js";
+import { processUtils } from "../../utils/processUtils.js";
 import { getSSHKey, waitForReady, generateSSHConfig, checkSSHTools, getProxyCommand, } from "../../utils/ssh.js";
 export async function sshDevbox(devboxId, options = {}) {
     try {
@@ -59,7 +60,7 @@ export async function sshDevbox(devboxId, options = {}) {
             stdio: "inherit",
         });
         sshProcess.on("close", (code) => {
-            process.exit(code || 0);
+            processUtils.exit(code || 0);
         });
         sshProcess.on("error", (err) => {
             outputError("SSH connection failed", err);

package/dist/commands/devbox/tunnel.js

@@ -4,6 +4,7 @@
 import { spawn } from "child_process";
 import { getClient } from "../../utils/client.js";
 import { output, outputError } from "../../utils/output.js";
+import { processUtils } from "../../utils/processUtils.js";
 import { getSSHKey, getProxyCommand, checkSSHTools } from "../../utils/ssh.js";
 export async function createTunnel(devboxId, options) {
     try {
@@ -56,7 +57,7 @@ export async function createTunnel(devboxId, options) {
         });
         tunnelProcess.on("close", (code) => {
             console.log("\nTunnel closed.");
-            process.exit(code || 0);
+            processUtils.exit(code || 0);
         });
         tunnelProcess.on("error", (err) => {
             outputError("Tunnel creation failed", err);

package/dist/commands/mcp-http.js

@@ -2,12 +2,13 @@
 import { spawn } from "child_process";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
+import { processUtils } from "../utils/processUtils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export async function startMcpHttpServer(port) {
     // Get the path to the compiled MCP HTTP server
     const serverPath = join(__dirname, "../mcp/server-http.js");
-    const env = { ...process.env };
+    const env = { ...processUtils.env };
     if (port) {
         env.PORT = port.toString();
     }
@@ -20,18 +21,18 @@ export async function startMcpHttpServer(port) {
     });
     serverProcess.on("error", (error) => {
         console.error("Failed to start MCP HTTP server:", error);
-        process.exit(1);
+        processUtils.exit(1);
     });
     serverProcess.on("exit", (code) => {
         if (code !== 0) {
             console.error(`MCP HTTP server exited with code ${code}`);
-            process.exit(code || 1);
+            processUtils.exit(code || 1);
         }
     });
     // Handle Ctrl+C
-    process.on("SIGINT", () => {
+    processUtils.on("SIGINT", () => {
         console.log("\nShutting down MCP HTTP server...");
         serverProcess.kill("SIGINT");
-        process.exit(0);
+        processUtils.exit(0);
     });
 }

package/dist/commands/mcp-install.js

@@ -3,13 +3,14 @@ import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
 import { homedir, platform } from "os";
 import { join } from "path";
 import { execSync } from "child_process";
+import { processUtils } from "../utils/processUtils.js";
 function getClaudeConfigPath() {
     const plat = platform();
     if (plat === "darwin") {
         return join(homedir(), "Library", "Application Support", "Claude", "claude_desktop_config.json");
     }
     else if (plat === "win32") {
-        const appData = process.env.APPDATA;
+        const appData = processUtils.env.APPDATA;
         if (!appData) {
             throw new Error("APPDATA environment variable not found");
         }
@@ -51,7 +52,7 @@ export async function installMcpConfig() {
             catch {
                 console.error("❌ Error: Claude config file exists but is not valid JSON");
                 console.error("Please fix the file manually or delete it to create a new one");
-                process.exit(1);
+                processUtils.exit(1);
             }
         }
         else {
@@ -71,20 +72,20 @@ export async function installMcpConfig() {
             // Ask if they want to overwrite
             console.log("\n❓ Do you want to overwrite it? (y/N): ");
             // For non-interactive mode, just exit
-            if (process.stdin.isTTY) {
+            if (processUtils.stdin.isTTY) {
                 const response = await new Promise((resolve) => {
-                    process.stdin.once("data", (data) => {
+                    processUtils.stdin.on("data", (data) => {
                         resolve(data.toString().trim().toLowerCase());
                     });
                 });
                 if (response !== "y" && response !== "yes") {
                     console.log("\n✓ Keeping existing configuration");
-                    process.exit(0);
+                    processUtils.exit(0);
                 }
             }
             else {
                 console.log("\n✓ Keeping existing configuration (non-interactive mode)");
-                process.exit(0);
+                processUtils.exit(0);
             }
         }
         // Add runloop MCP server config
@@ -116,6 +117,6 @@ export async function installMcpConfig() {
                 },
             },
         }, null, 2));
-        process.exit(1);
+        processUtils.exit(1);
     }
 }

package/dist/commands/mcp.js

@@ -2,6 +2,7 @@
 import { spawn } from "child_process";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
+import { processUtils } from "../utils/processUtils.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export async function startMcpServer() {
@@ -14,17 +15,17 @@ export async function startMcpServer() {
     });
     serverProcess.on("error", (error) => {
         console.error("Failed to start MCP server:", error);
-        process.exit(1);
+        processUtils.exit(1);
     });
     serverProcess.on("exit", (code) => {
         if (code !== 0) {
             console.error(`MCP server exited with code ${code}`);
-            process.exit(code || 1);
+            processUtils.exit(code || 1);
         }
     });
     // Handle Ctrl+C
-    process.on("SIGINT", () => {
+    processUtils.on("SIGINT", () => {
         serverProcess.kill("SIGINT");
-        process.exit(0);
+        processUtils.exit(0);
     });
 }

package/dist/commands/menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
 import { enterAlternateScreenBuffer, exitAlternateScreenBuffer, } from "../utils/screen.js";
+import { processUtils } from "../utils/processUtils.js";
 import { Router } from "../router/Router.js";
 import { NavigationProvider } from "../store/navigationStore.js";
 function AppInner() {
@@ -24,5 +25,5 @@ export async function runMainMenu(initialScreen = "menu", focusDevboxId) {
         console.error("Error in menu:", error);
     }
     exitAlternateScreenBuffer();
-    process.exit(0);
+    processUtils.exit(0);
 }

package/dist/components/ActionsPopup.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import figures from "figures";
 import chalk from "chalk";
-import { isLightMode } from "../utils/theme.js";
+import { getChalkTextColor, getChalkColor } from "../utils/theme.js";
 export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, onClose: _onClose, }) => {
     // Calculate max width needed for content (visible characters only)
     // CRITICAL: Ensure all values are valid numbers to prevent Yoga crashes
@@ -15,11 +15,12 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
     // Plus 2 for border characters = 6 total extra
     // CRITICAL: Validate all computed widths are positive integers
     const contentWidth = Math.max(10, maxContentWidth + 4);
-    // Get background color chalk function - inverted for contrast
-    // In light mode (light terminal), use black background for popup
-    // In dark mode (dark terminal), use white background for popup
-    const bgColor = isLightMode() ? chalk.bgBlack : chalk.bgWhite;
-    const textColor = isLightMode() ? chalk.white : chalk.black;
+    // Get background color chalk function - use theme colors to match the theme mode
+    // In light mode, use light background; in dark mode, use dark background
+    const popupBgHex = getChalkColor("background");
+    const popupTextHex = getChalkColor("text");
+    const bgColorFn = chalk.bgHex(popupBgHex);
+    const textColorFn = chalk.hex(popupTextHex);
     // Helper to create background lines with proper padding including left/right margins
     const createBgLine = (styledContent, plainContent) => {
         const visibleLength = plainContent.length;
@@ -27,11 +28,11 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
         const repeatCount = Math.max(0, Math.floor(maxContentWidth - visibleLength));
         const rightPadding = " ".repeat(repeatCount);
         // Apply background to left padding + content + right padding
-        return bgColor("  " + styledContent + rightPadding + "  ");
+        return bgColorFn("  " + styledContent + rightPadding + "  ");
     };
     // Create empty line with full background
     // CRITICAL: Validate repeat count is positive integer
-    const emptyLine = bgColor(" ".repeat(Math.max(1, Math.floor(contentWidth))));
+    const emptyLine = bgColorFn(" ".repeat(Math.max(1, Math.floor(contentWidth))));
     // Create border lines with background and integrated title
     const title = `${figures.play} Quick Actions`;
     // The content between ╭ and ╮ should be exactly contentWidth
@@ -41,12 +42,12 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
     // CRITICAL: Validate repeat counts are non-negative integers
     const remainingDashes = Math.max(0, Math.floor(contentWidth - titleTotalLength));
     // Use theme primary color for borders to match theme
-    const borderColorFn = isLightMode() ? chalk.cyan : chalk.blue;
-    const borderTop = bgColor(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
+    const borderColorFn = getChalkTextColor("primary");
+    const borderTop = bgColorFn(borderColorFn("╭─" + titleWithSpaces + "─".repeat(remainingDashes) + "╮"));
     // CRITICAL: Validate contentWidth is a positive integer
-    const borderBottom = bgColor(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
+    const borderBottom = bgColorFn(borderColorFn("╰" + "─".repeat(Math.max(1, Math.floor(contentWidth))) + "╯"));
     const borderSide = (content) => {
-        return bgColor(borderColorFn("│") + content + borderColorFn("│"));
+        return bgColorFn(borderColorFn("│") + content + borderColorFn("│"));
     };
     return (_jsx(Box, { flexDirection: "column", alignItems: "center", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: borderTop }), _jsx(Text, { children: borderSide(emptyLine) }), operations.map((op, index) => {
                     const isSelected = index === selectedOperation;
@@ -56,14 +57,14 @@ export const ActionsPopup = ({ devbox: _devbox, operations, selectedOperation, o
                     if (isSelected) {
                         // Selected: use operation-specific color for icon and label
                         const opColor = op.color;
-                        const colorFn = chalk[opColor] || textColor;
-                        styledLine = `${textColor(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColor(`[${op.shortcut}]`)}`;
+                        const colorFn = chalk[opColor] || textColorFn;
+                        styledLine = `${textColorFn(pointer)} ${colorFn(op.icon)} ${colorFn.bold(op.label)} ${textColorFn(`[${op.shortcut}]`)}`;
                     }
                     else {
-                        // Unselected: gray/dim text for everything
-                        const dimFn = isLightMode() ? chalk.gray : chalk.gray;
+                        // Unselected: use theme's textDim color for dimmed text
+                        const dimFn = getChalkTextColor("textDim");
                         styledLine = `${dimFn(pointer)} ${dimFn(op.icon)} ${dimFn(op.label)} ${dimFn(`[${op.shortcut}]`)}`;
                     }
                     return (_jsx(Text, { children: borderSide(createBgLine(styledLine, lineText)) }, op.key));
-                }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderSide(createBgLine(textColor(`${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`), `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`)) }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderBottom })] }) }));
+                }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderSide(createBgLine(textColorFn(`${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`), `${figures.arrowUp}${figures.arrowDown} Nav • [Enter] • [Esc] Close`)) }), _jsx(Text, { children: borderSide(emptyLine) }), _jsx(Text, { children: borderBottom })] }) }));
 };

package/dist/components/Banner.js

@@ -3,6 +3,12 @@ import React from "react";
 import { Box } from "ink";
 import BigText from "ink-big-text";
 import Gradient from "ink-gradient";
+import { isLightMode } from "../utils/theme.js";
 export const Banner = React.memo(() => {
-    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", children: _jsx(Gradient, { name: "vice", children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
+    // Use theme-aware gradient colors
+    // In light mode, use darker/deeper colors for better contrast on light backgrounds
+    // "teen" has darker colors (blue/purple) that work well on light backgrounds
+    // In dark mode, use the vibrant "vice" gradient (pink/cyan) that works well on dark backgrounds
+    const gradientName = isLightMode() ? "teen" : "vice";
+    return (_jsx(Box, { flexDirection: "column", alignItems: "flex-start", paddingX: 1, children: _jsx(Gradient, { name: gradientName, children: _jsx(BigText, { text: "RUNLOOP.ai", font: "simple3d" }) }) }));
 });