@runloop/rl-cli 1.5.0 → 1.7.0

package/dist/components/ExecViewer.js

@@ -0,0 +1,439 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ExecViewer - Unified execution viewer for both sync and async modes
+ * Supports kill, leave-early, and run-another for both modes
+ */
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import figures from "figures";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { colors } from "../utils/theme.js";
+import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { execCommandAsync, getExecution, killExecution, } from "../services/devboxService.js";
+import { getClient } from "../utils/client.js";
+export const ExecViewer = ({ devboxId, command, breadcrumbItems, onBack, onRunAnother, existingExecutionId, onExecutionStart, }) => {
+    // State
+    const [status, setStatus] = React.useState(existingExecutionId ? "running" : "starting");
+    const [executionId, setExecutionId] = React.useState(existingExecutionId || null);
+    const [stdout, setStdout] = React.useState("");
+    const [stderr, setStderr] = React.useState("");
+    const [exitCode, setExitCode] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [copyStatus, setCopyStatus] = React.useState(null);
+    const [elapsedTime, setElapsedTime] = React.useState(0);
+    const [finalDuration, setFinalDuration] = React.useState(null);
+    const [autoScroll, setAutoScroll] = React.useState(true);
+    // Use ref for start time so we can set it when execution actually starts
+    const startTimeRef = React.useRef(Date.now());
+    // Refs for cleanup
+    const abortControllerRef = React.useRef(null);
+    const pollIntervalRef = React.useRef(null);
+    const streamCleanupRef = React.useRef(null);
+    // Ref for callback to avoid stale closures
+    const onExecutionStartRef = React.useRef(onExecutionStart);
+    onExecutionStartRef.current = onExecutionStart;
+    // Viewport calculation
+    const execViewport = useViewportHeight({ overhead: 16, minHeight: 10 });
+    // Handle Ctrl+C
+    useExitOnCtrlC();
+    // Elapsed time updater (in milliseconds)
+    React.useEffect(() => {
+        if (status === "running" || status === "starting") {
+            const timer = setInterval(() => {
+                setElapsedTime(Date.now() - startTimeRef.current);
+            }, 100);
+            return () => clearInterval(timer);
+        }
+    }, [status]);
+    // Track if execution has started to prevent re-execution on re-renders
+    const executionStartedRef = React.useRef(false);
+    // Store the initial existingExecutionId to detect true remounts vs just prop updates
+    const initialExistingExecutionIdRef = React.useRef(existingExecutionId);
+    // Start execution on mount (only once), or resume if existingExecutionId provided
+    React.useEffect(() => {
+        // Prevent re-execution if already started (e.g., during resize re-renders)
+        // Also ignore if existingExecutionId changed from null to a value (that's us reporting back)
+        if (executionStartedRef.current) {
+            // Only resume if this is a true remount (component was unmounted and remounted with an ID)
+            // Not if we just reported the ID back to parent
+            return;
+        }
+        executionStartedRef.current = true;
+        const startOrResumeExecution = async () => {
+            // If we have an existing execution ID on initial mount, resume
+            if (initialExistingExecutionIdRef.current) {
+                try {
+                    // Fetch current output state before resuming
+                    const currentState = await getExecution(devboxId, initialExistingExecutionIdRef.current);
+                    setStdout(currentState.stdout ?? "");
+                    setStderr(currentState.stderr ?? "");
+                    if (currentState.status === "completed") {
+                        setFinalDuration(Date.now() - startTimeRef.current);
+                        setStatus("completed");
+                        setExitCode(currentState.exit_status ?? 0);
+                        return;
+                    }
+                }
+                catch {
+                    // If fetch fails, just continue with polling
+                }
+                // Reconnect to streams - they'll replay from offset 0
+                startStreaming(initialExistingExecutionIdRef.current);
+                return;
+            }
+            // Start a new execution
+            try {
+                const result = await execCommandAsync(devboxId, command);
+                // Reset start time to when execution actually begins
+                startTimeRef.current = Date.now();
+                setExecutionId(result.executionId);
+                setStatus("running");
+                // Report execution ID to parent so it survives remounts
+                if (onExecutionStartRef.current) {
+                    onExecutionStartRef.current(result.executionId);
+                }
+                // Always use streaming for live output
+                startStreaming(result.executionId);
+            }
+            catch (err) {
+                setError(err.message);
+                setStatus("failed");
+            }
+        };
+        startOrResumeExecution();
+        // Cleanup on unmount only - not on dep changes since executionStartedRef prevents re-run
+        return () => {
+            if (pollIntervalRef.current) {
+                clearInterval(pollIntervalRef.current);
+            }
+            if (streamCleanupRef.current) {
+                streamCleanupRef.current();
+            }
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, [devboxId, command]);
+    // Start streaming for live output
+    const startStreaming = async (execId) => {
+        const client = getClient();
+        abortControllerRef.current = new AbortController();
+        let stdoutOffset = 0;
+        let stderrOffset = 0;
+        let isCompleted = false;
+        // Wait for execution to complete using long-polling
+        const waitForCompletion = async () => {
+            try {
+                const result = await client.devboxes.executions.awaitCompleted(devboxId, execId);
+                isCompleted = true;
+                // Get final output to ensure we have everything
+                setStdout(result.stdout ?? "");
+                setStderr(result.stderr ?? "");
+                setExitCode(result.exit_status ?? 0);
+                setFinalDuration(Date.now() - startTimeRef.current);
+                setStatus("completed");
+            }
+            catch {
+                // Ignore errors - execution may have been killed
+            }
+        };
+        // Start waiting for completion
+        waitForCompletion();
+        // Stream stdout
+        const streamStdout = async () => {
+            try {
+                const stream = await client.devboxes.executions.streamStdoutUpdates(devboxId, execId, { offset: stdoutOffset.toString() });
+                for await (const chunk of stream) {
+                    if (abortControllerRef.current?.signal.aborted || isCompleted)
+                        break;
+                    if (chunk.output) {
+                        setStdout((prev) => {
+                            const newOutput = prev + chunk.output;
+                            // Truncate if too long
+                            if (newOutput.length > 10000) {
+                                return newOutput.substring(newOutput.length - 10000);
+                            }
+                            return newOutput;
+                        });
+                        if (chunk.offset !== undefined) {
+                            stdoutOffset = chunk.offset;
+                        }
+                    }
+                }
+            }
+            catch {
+                // Stream ended or error - fall back to polling if not completed
+                // Note: Don't check status here as it may be stale due to closure
+                if (!isCompleted) {
+                    startPolling(execId);
+                }
+            }
+        };
+        // Stream stderr
+        const streamStderr = async () => {
+            try {
+                const stream = await client.devboxes.executions.streamStderrUpdates(devboxId, execId, { offset: stderrOffset.toString() });
+                for await (const chunk of stream) {
+                    if (abortControllerRef.current?.signal.aborted || isCompleted)
+                        break;
+                    if (chunk.output) {
+                        setStderr((prev) => {
+                            const newOutput = prev + chunk.output;
+                            // Truncate if too long
+                            if (newOutput.length > 10000) {
+                                return newOutput.substring(newOutput.length - 10000);
+                            }
+                            return newOutput;
+                        });
+                        if (chunk.offset !== undefined) {
+                            stderrOffset = chunk.offset;
+                        }
+                    }
+                }
+            }
+            catch {
+                // Stream ended or error - ignore, awaitCompleted will handle completion
+            }
+        };
+        // Start both streams
+        streamStdout();
+        streamStderr();
+        streamCleanupRef.current = () => {
+            abortControllerRef.current?.abort();
+        };
+    };
+    // Start polling (sync mode or fallback)
+    const startPolling = (execId) => {
+        const poll = async () => {
+            try {
+                const result = await getExecution(devboxId, execId);
+                setStdout(result.stdout ?? "");
+                setStderr(result.stderr ?? "");
+                if (result.status === "completed") {
+                    setExitCode(result.exit_status ?? 0);
+                    setFinalDuration(Date.now() - startTimeRef.current);
+                    setStatus("completed");
+                    if (pollIntervalRef.current) {
+                        clearInterval(pollIntervalRef.current);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err.message);
+                setStatus("failed");
+                if (pollIntervalRef.current) {
+                    clearInterval(pollIntervalRef.current);
+                }
+            }
+        };
+        // Initial poll
+        poll();
+        // Continue polling every 500ms
+        pollIntervalRef.current = setInterval(poll, 500);
+    };
+    // Kill execution
+    const handleKill = async () => {
+        if (!executionId || status !== "running")
+            return;
+        try {
+            await killExecution(devboxId, executionId);
+            setFinalDuration(Date.now() - startTimeRef.current);
+            setStatus("killed");
+            if (pollIntervalRef.current) {
+                clearInterval(pollIntervalRef.current);
+            }
+            if (streamCleanupRef.current) {
+                streamCleanupRef.current();
+            }
+        }
+        catch (err) {
+            setError(`Failed to kill: ${err.message}`);
+        }
+    };
+    // Copy output to clipboard
+    const handleCopy = async () => {
+        const output = stdout + stderr;
+        const { spawn } = await import("child_process");
+        const platform = process.platform;
+        let cmd;
+        let args;
+        if (platform === "darwin") {
+            cmd = "pbcopy";
+            args = [];
+        }
+        else if (platform === "win32") {
+            cmd = "clip";
+            args = [];
+        }
+        else {
+            cmd = "xclip";
+            args = ["-selection", "clipboard"];
+        }
+        const proc = spawn(cmd, args);
+        proc.stdin.write(output);
+        proc.stdin.end();
+        proc.on("exit", (code) => {
+            if (code === 0) {
+                setCopyStatus("Copied!");
+                setTimeout(() => setCopyStatus(null), 2000);
+            }
+            else {
+                setCopyStatus("Failed");
+                setTimeout(() => setCopyStatus(null), 2000);
+            }
+        });
+        proc.on("error", () => {
+            setCopyStatus("Not supported");
+            setTimeout(() => setCopyStatus(null), 2000);
+        });
+    };
+    // Handle input
+    useInput((input, key) => {
+        const isRunning = status === "running" || status === "starting";
+        const isComplete = status === "completed" || status === "killed" || status === "failed";
+        // Kill command
+        if (input === "k" && isRunning) {
+            handleKill();
+            return;
+        }
+        // Run another (after completion)
+        if (input === "r" && isComplete) {
+            onRunAnother();
+            return;
+        }
+        // Copy output (ignore if Ctrl+C for quit)
+        if (input === "c" && !key.ctrl) {
+            handleCopy();
+            return;
+        }
+        // Back/leave
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Return after completion
+        if (key.return && isComplete) {
+            onBack();
+            return;
+        }
+        // Scrolling
+        const allLines = [...stdout.split("\n"), ...stderr.split("\n")].filter((line) => line !== "");
+        const maxScroll = Math.max(0, allLines.length - execViewport.viewportHeight);
+        if (key.upArrow || input === "k") {
+            setScroll(Math.max(0, scroll - 1));
+            setAutoScroll(false);
+        }
+        else if (key.downArrow || input === "j") {
+            const newScroll = Math.min(maxScroll, scroll + 1);
+            setScroll(newScroll);
+            setAutoScroll(newScroll >= maxScroll);
+        }
+        else if (key.pageUp) {
+            setScroll(Math.max(0, scroll - 10));
+            setAutoScroll(false);
+        }
+        else if (key.pageDown) {
+            const newScroll = Math.min(maxScroll, scroll + 10);
+            setScroll(newScroll);
+            setAutoScroll(newScroll >= maxScroll);
+        }
+        else if (input === "g") {
+            setScroll(0);
+            setAutoScroll(false);
+        }
+        else if (input === "G") {
+            setScroll(maxScroll);
+            setAutoScroll(true);
+        }
+    });
+    // Auto-scroll to bottom when new output arrives (for both modes)
+    // Simple approach: if autoScroll is enabled, always go to bottom
+    // User actions (scroll up) disable autoScroll, scroll to bottom re-enables it
+    React.useEffect(() => {
+        if (!autoScroll)
+            return;
+        const allLines = [...stdout.split("\n"), ...stderr.split("\n")].filter((line) => line !== "");
+        const maxScroll = Math.max(0, allLines.length - execViewport.viewportHeight);
+        setScroll(maxScroll);
+    }, [stdout, stderr, autoScroll, execViewport.viewportHeight]);
+    // Format elapsed time (input is milliseconds)
+    const formatTime = (ms) => {
+        if (ms < 1000)
+            return `${ms}ms`;
+        const seconds = Math.floor(ms / 1000);
+        if (seconds < 60)
+            return `${seconds}s`;
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}m ${secs}s`;
+    };
+    // Get status display
+    const getStatusDisplay = () => {
+        switch (status) {
+            case "starting":
+                return { text: "Starting...", color: colors.info, icon: "●" };
+            case "running":
+                return {
+                    text: `Running (${formatTime(elapsedTime)})`,
+                    color: colors.warning,
+                    icon: "●",
+                };
+            case "completed":
+                return {
+                    text: `Completed (exit: ${exitCode}) in ${formatTime(finalDuration ?? elapsedTime)}`,
+                    color: exitCode === 0 ? colors.success : colors.error,
+                    icon: exitCode === 0 ? figures.tick : figures.cross,
+                };
+            case "killed":
+                return {
+                    text: `Killed after ${formatTime(finalDuration ?? elapsedTime)}`,
+                    color: colors.warning,
+                    icon: figures.cross,
+                };
+            case "failed":
+                return { text: "Failed", color: colors.error, icon: figures.cross };
+            default:
+                return { text: "Unknown", color: colors.textDim, icon: "?" };
+        }
+    };
+    const statusDisplay = getStatusDisplay();
+    const isRunning = status === "running" || status === "starting";
+    // Prepare output lines
+    const stdoutLines = stdout ? stdout.split("\n") : [];
+    const stderrLines = stderr ? stderr.split("\n") : [];
+    const allLines = [...stdoutLines, ...stderrLines].filter((line) => line !== "");
+    const viewportHeight = execViewport.viewportHeight;
+    const maxScroll = Math.max(0, allLines.length - viewportHeight);
+    const actualScroll = Math.min(scroll, maxScroll);
+    const visibleLines = allLines.slice(actualScroll, actualScroll + viewportHeight);
+    const hasMore = actualScroll + viewportHeight < allLines.length;
+    const hasLess = actualScroll > 0;
+    // Get navigation tips based on state
+    const getNavigationTips = () => {
+        if (isRunning) {
+            return [
+                { key: "↑↓", label: "Scroll" },
+                { key: "k", label: "Kill" },
+                { key: "q/esc", label: "Leave Running" },
+            ];
+        }
+        else {
+            return [
+                { key: "↑↓", label: "Scroll" },
+                { key: "r", label: "Run Another" },
+                { key: "c", label: "Copy" },
+                { key: "q/esc/Enter", label: "Back" },
+            ];
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.primary, paddingX: 1, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.play, " Command:"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: colors.text, children: command.length > 80 ? command.substring(0, 80) + "..." : command })] }), _jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Status:", " "] }), isRunning && (_jsxs(Text, { color: statusDisplay.color, children: [_jsx(Spinner, { type: "dots" }), " "] })), _jsxs(Text, { color: statusDisplay.color, children: [!isRunning && `${statusDisplay.icon} `, statusDisplay.text] })] })] }), error && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.error, children: [figures.cross, " Error: ", error] }) })), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, height: viewportHeight + 2, children: allLines.length === 0 && isRunning ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.info, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: colors.textDim, children: " Waiting for output..." })] })) : allLines.length === 0 ? (_jsx(Text, { color: colors.textDim, dimColor: true, children: "No output" })) : (visibleLines.map((line, index) => {
+                    const actualIndex = actualScroll + index;
+                    const isStderr = actualIndex >= stdoutLines.length;
+                    const lineColor = isStderr ? colors.error : colors.text;
+                    return (_jsx(Box, { children: _jsx(Text, { color: lineColor, children: line }) }, index));
+                })) }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", allLines.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "lines"] }), allLines.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [actualScroll + 1, "-", Math.min(actualScroll + viewportHeight, allLines.length), " of", " ", allLines.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), stdout && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.success, dimColor: true, children: ["stdout: ", stdoutLines.length] })] })), stderr && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsxs(Text, { color: colors.error, dimColor: true, children: ["stderr: ", stderrLines.length] })] })), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(NavigationTips, { tips: getNavigationTips() })] }));
+};

package/dist/components/LogsViewer.js

@@ -10,11 +10,14 @@ import { Breadcrumb } from "./Breadcrumb.js";
 import { NavigationTips } from "./NavigationTips.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { parseAnyLogEntry } from "../utils/logFormatter.js";
 export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: true }], onBack, title = "Logs", }) => {
     const [logsWrapMode, setLogsWrapMode] = React.useState(false);
     const [logsScroll, setLogsScroll] = React.useState(0);
     const [copyStatus, setCopyStatus] = React.useState(null);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
     // Calculate viewport for logs output:
     // - Breadcrumb (border top + content + border bottom + marginBottom): 4 lines
     // - Log box borders: 2 lines (added to height by Ink)
@@ -57,8 +60,8 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
         else if (input === "w") {
             setLogsWrapMode(!logsWrapMode);
         }
-        else if (input === "c") {
-            // Copy logs to clipboard using shared formatter
+        else if (input === "c" && !key.ctrl) {
+            // Copy logs to clipboard (ignore if Ctrl+C for quit)
             const logsText = logs
                 .map((log) => {
                 const parts = parseAnyLogEntry(log);

package/dist/components/ResourceDetailPage.js

@@ -143,8 +143,8 @@ export function ResourceDetailPage({ resource: initialResource, resourceType, ge
         if (input === "q" || key.escape) {
             onBack();
         }
-        else if (input === "c") {
-            // Copy resource ID to clipboard
+        else if (input === "c" && !key.ctrl) {
+            // Copy resource ID to clipboard (ignore if Ctrl+C for quit)
             copyToClipboard(getId(currentResource));
         }
         else if (input === "i" && buildDetailLines) {

package/dist/components/SearchBar.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import TextInput from "ink-text-input";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
+/**
+ * Reusable search bar component for list views.
+ * Displays either an input mode or the active search with result count.
+ */
+export function SearchBar({ searchMode, searchQuery, submittedSearchQuery, resultCount, onSearchChange, onSearchSubmit, placeholder = "Type to search...", maxDisplayLength = 50, }) {
+    // Don't render if no search is active
+    if (!searchMode && !submittedSearchQuery) {
+        return null;
+    }
+    // Search input mode
+    if (searchMode) {
+        return (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.pointerSmall, " Search: "] }), _jsx(TextInput, { value: searchQuery, onChange: onSearchChange, placeholder: placeholder, onSubmit: onSearchSubmit }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[Enter to search, Esc to cancel]"] })] }));
+    }
+    // Display active search with results
+    const displayQuery = submittedSearchQuery.length > maxDisplayLength
+        ? submittedSearchQuery.substring(0, maxDisplayLength) + "..."
+        : submittedSearchQuery;
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: colors.primary, children: [figures.info, " Searching for: "] }), _jsx(Text, { color: colors.warning, bold: true, children: displayQuery }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "(", resultCount, " results) [/ to edit, Esc to clear]"] })] }));
+}