@runloop/rl-cli 1.8.0 → 1.10.0

package/dist/components/DevboxDetailPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * DevboxDetailPage - Detail page for devboxes
  * Uses the generic ResourceDetailPage component with devbox-specific customizations
@@ -12,26 +12,7 @@ import { ResourceDetailPage, } from "./ResourceDetailPage.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { getDevbox } from "../services/devboxService.js";
-// Format time ago in a succinct way
-const formatTimeAgo = (timestamp) => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    const hours = Math.floor(minutes / 60);
-    if (hours < 24)
-        return `${hours}h ago`;
-    const days = Math.floor(hours / 24);
-    if (days < 30)
-        return `${days}d ago`;
-    const months = Math.floor(days / 30);
-    if (months < 12)
-        return `${months}mo ago`;
-    const years = Math.floor(months / 12);
-    return `${years}y ago`;
-};
+import { formatTimeAgo } from "../utils/time.js";
 export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     const [showActions, setShowActions] = React.useState(false);
     const [selectedOperationKey, setSelectedOperationKey] = React.useState(null);
@@ -104,7 +85,9 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
     ];
     // Filter operations based on devbox status
     const getFilteredOperations = (devbox) => {
-        return allOperations.filter((op) => {
+        const hasTunnel = !!(devbox.tunnel && devbox.tunnel.tunnel_key);
+        return allOperations
+            .filter((op) => {
             const status = devbox.status;
             // When suspended: logs and resume
             if (status === "suspended") {
@@ -122,6 +105,20 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             // Default for transitional states (provisioning, initializing)
             return op.key === "logs" || op.key === "delete";
+        })
+            .map((op) => {
+            // Dynamic tunnel label based on whether tunnel is active
+            if (op.key === "tunnel") {
+                return hasTunnel
+                    ? {
+                        ...op,
+                        label: "Tunnel (Active)",
+                        color: colors.success,
+                        icon: figures.tick,
+                    }
+                    : op;
+            }
+            return op;
         });
     };
     // Build detail sections for the devbox
@@ -210,10 +207,28 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             });
         }
         // Source
-        if (devbox.blueprint_id || devbox.snapshot_id) {
+        if (devbox.blueprint_id) {
+            detailFields.push({
+                label: "Source",
+                value: _jsx(Text, { color: colors.success, children: devbox.blueprint_id }),
+                action: {
+                    type: "navigate",
+                    screen: "blueprint-detail",
+                    params: { blueprintId: devbox.blueprint_id },
+                    hint: "View Blueprint",
+                },
+            });
+        }
+        else if (devbox.snapshot_id) {
             detailFields.push({
                 label: "Source",
-                value: (_jsx(Text, { color: colors.success, children: devbox.blueprint_id || devbox.snapshot_id })),
+                value: _jsx(Text, { color: colors.success, children: devbox.snapshot_id }),
+                action: {
+                    type: "navigate",
+                    screen: "snapshot-detail",
+                    params: { snapshotId: devbox.snapshot_id },
+                    hint: "View Snapshot",
+                },
             });
         }
         // Network Policy
@@ -221,6 +236,28 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             detailFields.push({
                 label: "Network Policy",
                 value: _jsx(Text, { color: colors.info, children: lp.network_policy_id }),
+                action: {
+                    type: "navigate",
+                    screen: "network-policy-detail",
+                    params: { networkPolicyId: lp.network_policy_id },
+                    hint: "View Policy",
+                },
+            });
+        }
+        // Tunnel status - always show when running
+        if (devbox.tunnel && devbox.tunnel.tunnel_key) {
+            const tunnelKey = devbox.tunnel.tunnel_key;
+            const authMode = devbox.tunnel.auth_mode;
+            const tunnelUrl = `https://{port}-${tunnelKey}.tunnel.runloop.ai`;
+            detailFields.push({
+                label: "Tunnel",
+                value: (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.success, bold: true, children: [figures.tick, " Active"] }), _jsx(Text, { color: colors.textDim, children: " \u2022 " }), _jsx(Text, { color: colors.success, children: tunnelUrl }), authMode === "authenticated" && (_jsx(Text, { color: colors.warning, children: " (authenticated)" }))] })),
+            });
+        }
+        else if (devbox.status === "running") {
+            detailFields.push({
+                label: "Tunnel",
+                value: (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.cross, " Off"] })),
             });
         }
         // Initiator
@@ -350,6 +387,18 @@ export const DevboxDetailPage = ({ devbox: initialDevbox, onBack, }) => {
             }
             lines.push(_jsx(Text, { children: " " }, "launch-space"));
         }
+        // Tunnel Information
+        if (devbox.tunnel && devbox.tunnel.tunnel_key) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Tunnel" }, "tunnel-title"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Tunnel Key: ", devbox.tunnel.tunnel_key] }, "tunnel-key"));
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Auth Mode: ", devbox.tunnel.auth_mode] }, "tunnel-auth"));
+            const tunnelUrl = `https://{port}-${devbox.tunnel.tunnel_key}.tunnel.runloop.ai`;
+            lines.push(_jsxs(Text, { color: colors.success, children: [" ", "Tunnel URL: ", tunnelUrl] }, "tunnel-url"));
+            if (devbox.tunnel.auth_token) {
+                lines.push(_jsxs(Text, { color: colors.warning, children: [" ", "Auth Token: ", devbox.tunnel.auth_token] }, "tunnel-token"));
+            }
+            lines.push(_jsx(Text, { children: " " }, "tunnel-space"));
+        }
         // Source
         if (devbox.blueprint_id || devbox.snapshot_id) {
             lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Source" }, "source-title"));

package/dist/components/GatewayConfigCreatePage.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
+import { getClient } from "../utils/client.js";
+import { SpinnerComponent } from "./Spinner.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+import { SuccessMessage } from "./SuccessMessage.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { NavigationTips } from "./NavigationTips.js";
+import { FormTextInput, FormSelect, FormActionButton, useFormSelectNavigation, } from "./form/index.js";
+import { colors } from "../utils/theme.js";
+import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
+import { validateGatewayConfig } from "../utils/gatewayConfigValidation.js";
+const authTypes = ["bearer", "header"];
+export const GatewayConfigCreatePage = ({ onBack, onCreate, initialConfig, }) => {
+    const isEditing = !!initialConfig?.id;
+    const [currentField, setCurrentField] = React.useState("create");
+    // Normalize auth type from API to match our options (lowercase)
+    const normalizeAuthType = (type) => {
+        const normalized = (type || "").toLowerCase();
+        if (normalized === "header" || normalized === "bearer") {
+            return normalized;
+        }
+        return "bearer"; // default
+    };
+    const [formData, setFormData] = React.useState({
+        name: initialConfig?.name || "",
+        endpoint: initialConfig?.endpoint || "",
+        auth_type: normalizeAuthType(initialConfig?.auth_mechanism?.type),
+        auth_key: initialConfig?.auth_mechanism?.key || "",
+        description: initialConfig?.description || "",
+    });
+    const [creating, setCreating] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [error, setError] = React.useState(null);
+    const fields = [
+        {
+            key: "create",
+            label: isEditing
+                ? "Update AI Gateway Config"
+                : "Create AI Gateway Config",
+            type: "action",
+        },
+        {
+            key: "name",
+            label: "Name (required)",
+            type: "text",
+            placeholder: "my-gateway",
+        },
+        {
+            key: "endpoint",
+            label: "Endpoint URL (required)",
+            type: "text",
+            placeholder: "https://api.example.com",
+        },
+        { key: "auth_type", label: "Auth Type", type: "select" },
+        {
+            key: "auth_key",
+            label: "Auth Header Key (for header type)",
+            type: "text",
+            placeholder: "x-api-key",
+        },
+        {
+            key: "description",
+            label: "Description (optional)",
+            type: "text",
+            placeholder: "Gateway for...",
+        },
+    ];
+    const currentFieldIndex = fields.findIndex((f) => f.key === currentField);
+    // Handle Ctrl+C to exit
+    useExitOnCtrlC();
+    // Select navigation handlers using shared hook
+    const handleAuthTypeNav = useFormSelectNavigation(formData.auth_type, authTypes, (value) => {
+        setFormData({
+            ...formData,
+            auth_type: value,
+            // Clear auth_key if switching from header to bearer
+            auth_key: value !== "header" ? "" : formData.auth_key,
+        });
+        // If switching away from header and currently on auth_key field, move to next field
+        if (value !== "header" && currentField === "auth_key") {
+            setCurrentField("description");
+        }
+    }, currentField === "auth_type");
+    // Main form input handler
+    useInput((input, key) => {
+        // Handle result screen
+        if (result) {
+            if (input === "q" || key.escape || key.return) {
+                if (onCreate) {
+                    onCreate(result);
+                }
+                else {
+                    onBack();
+                }
+            }
+            return;
+        }
+        // Handle error screen
+        if (error) {
+            if (input === "r" || key.return) {
+                // Retry - clear error and return to form
+                setError(null);
+            }
+            else if (input === "q" || key.escape) {
+                // Quit - go back to list
+                onBack();
+            }
+            return;
+        }
+        // Handle creating state
+        if (creating) {
+            return;
+        }
+        // Back to list
+        if (input === "q" || key.escape) {
+            onBack();
+            return;
+        }
+        // Submit form with Ctrl+S
+        if (input === "s" && key.ctrl) {
+            handleCreate();
+            return;
+        }
+        // Handle Enter on any field to submit
+        if (key.return) {
+            handleCreate();
+            return;
+        }
+        // Handle select field navigation using shared hooks
+        if (handleAuthTypeNav(input, key))
+            return;
+        // Navigation (up/down arrows and tab/shift+tab)
+        // Skip auth_key field if auth_type is not "header"
+        const getNextField = (direction) => {
+            let nextIndex = direction === "up" ? currentFieldIndex - 1 : currentFieldIndex + 1;
+            while (nextIndex >= 0 && nextIndex < fields.length) {
+                const nextField = fields[nextIndex].key;
+                // Skip auth_key if auth_type is not header
+                if (nextField === "auth_key" && formData.auth_type !== "header") {
+                    nextIndex = direction === "up" ? nextIndex - 1 : nextIndex + 1;
+                    continue;
+                }
+                return nextField;
+            }
+            return null;
+        };
+        if ((key.upArrow || (key.tab && key.shift)) && currentFieldIndex > 0) {
+            const nextField = getNextField("up");
+            if (nextField) {
+                setCurrentField(nextField);
+            }
+            return;
+        }
+        if ((key.downArrow || (key.tab && !key.shift)) &&
+            currentFieldIndex < fields.length - 1) {
+            const nextField = getNextField("down");
+            if (nextField) {
+                setCurrentField(nextField);
+            }
+            return;
+        }
+    }, { isActive: true });
+    const handleCreate = async () => {
+        // Validate using shared validation
+        const validation = validateGatewayConfig({
+            name: formData.name,
+            endpoint: formData.endpoint,
+            authType: formData.auth_type,
+            authKey: formData.auth_key,
+        }, { requireName: true, requireEndpoint: true });
+        if (!validation.valid) {
+            setError(new Error(validation.errors.join("\n")));
+            return;
+        }
+        const { sanitized } = validation;
+        setCreating(true);
+        setError(null);
+        try {
+            const client = getClient();
+            const authMechanism = {
+                type: sanitized.authType,
+            };
+            if (sanitized.authType === "header" && sanitized.authKey) {
+                authMechanism.key = sanitized.authKey;
+            }
+            let config;
+            if (isEditing && initialConfig?.id) {
+                // Update existing config
+                config = await client.gatewayConfigs.update(initialConfig.id, {
+                    name: sanitized.name,
+                    endpoint: sanitized.endpoint,
+                    auth_mechanism: authMechanism,
+                    description: formData.description.trim() || undefined,
+                });
+            }
+            else {
+                // Create new config
+                config = await client.gatewayConfigs.create({
+                    name: sanitized.name,
+                    endpoint: sanitized.endpoint,
+                    auth_mechanism: authMechanism,
+                    description: formData.description.trim() || undefined,
+                });
+            }
+            setResult(config);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setCreating(false);
+        }
+    };
+    // Result screen
+    if (result) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "AI Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(SuccessMessage, { message: `AI gateway config ${isEditing ? "updated" : "created"} successfully!` }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["ID:", " "] }), _jsx(Text, { color: colors.idColor, children: result.id })] }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Name: ", result.name || "(none)"] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: ["Endpoint: ", result.endpoint] }) })] }), _jsx(NavigationTips, { tips: [{ key: "Enter/q/esc", label: "Return to list" }] })] }));
+    }
+    // Error screen
+    if (error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "AI Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Failed to ${isEditing ? "update" : "create"} AI gateway config`, error: error }), _jsx(NavigationTips, { tips: [
+                        { key: "Enter/r", label: "Retry" },
+                        { key: "q/esc", label: "Cancel" },
+                    ] })] }));
+    }
+    // Creating screen
+    if (creating) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "AI Gateway Configs" },
+                        { label: isEditing ? "Update" : "Create", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: `${isEditing ? "Updating" : "Creating"} AI gateway config...` })] }));
+    }
+    // Form screen
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                    { label: "AI Gateway Configs" },
+                    { label: isEditing ? "Update" : "Create", active: true },
+                ] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: fields.map((field) => {
+                    const isActive = currentField === field.key;
+                    const fieldData = formData[field.key];
+                    if (field.type === "action") {
+                        return (_jsx(FormActionButton, { label: field.label, isActive: isActive, hint: `[Enter to ${isEditing ? "update" : "create"}]` }, field.key));
+                    }
+                    if (field.type === "text") {
+                        // Skip auth_key field if auth type is bearer
+                        if (field.key === "auth_key" && formData.auth_type !== "header") {
+                            return null;
+                        }
+                        return (_jsx(FormTextInput, { label: field.label, value: String(fieldData || ""), onChange: (value) => setFormData({ ...formData, [field.key]: value }), onSubmit: handleCreate, isActive: isActive, placeholder: field.placeholder }, field.key));
+                    }
+                    if (field.type === "select") {
+                        const value = fieldData;
+                        return (_jsx(FormSelect, { label: field.label, value: value || "", options: authTypes, onChange: (newValue) => setFormData({
+                                ...formData,
+                                [field.key]: newValue,
+                                // Clear auth_key if switching from header to bearer
+                                auth_key: newValue !== "header" ? "" : formData.auth_key,
+                            }), isActive: isActive }, field.key));
+                    }
+                    return null;
+                }) }), _jsx(Box, { marginLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: colors.textDim, dimColor: true, children: [figures.info, " Auth Types:"] }) }), _jsxs(Box, { marginLeft: 4, flexDirection: "column", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: "\u2022 bearer: Uses Bearer token authentication" }), _jsx(Text, { color: colors.textDim, dimColor: true, children: "\u2022 header: Uses custom header (specify header key)" })] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    { key: "Enter", label: isEditing ? "Update" : "Create" },
+                    { key: "q", label: "Cancel" },
+                ] })] }));
+};

package/dist/components/LogsViewer.js

@@ -9,6 +9,7 @@ import figures from "figures";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { NavigationTips } from "./NavigationTips.js";
 import { colors } from "../utils/theme.js";
+import { copyToClipboard } from "../utils/clipboard.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { parseAnyLogEntry } from "../utils/logFormatter.js";
@@ -71,42 +72,10 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
                 return `${parts.timestamp} ${parts.level} [${parts.source}] ${shell}${cmd}${parts.message} ${exitCode}`.trim();
             })
                 .join("\n");
-            const copyToClipboard = async (text) => {
-                const { spawn } = await import("child_process");
-                const platform = process.platform;
-                let command;
-                let args;
-                if (platform === "darwin") {
-                    command = "pbcopy";
-                    args = [];
-                }
-                else if (platform === "win32") {
-                    command = "clip";
-                    args = [];
-                }
-                else {
-                    command = "xclip";
-                    args = ["-selection", "clipboard"];
-                }
-                const proc = spawn(command, args);
-                proc.stdin.write(text);
-                proc.stdin.end();
-                proc.on("exit", (code) => {
-                    if (code === 0) {
-                        setCopyStatus("Copied to clipboard!");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                    else {
-                        setCopyStatus("Failed to copy");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                });
-                proc.on("error", () => {
-                    setCopyStatus("Copy not supported");
-                    setTimeout(() => setCopyStatus(null), 2000);
-                });
-            };
-            copyToClipboard(logsText);
+            copyToClipboard(logsText).then((status) => {
+                setCopyStatus(status);
+                setTimeout(() => setCopyStatus(null), 2000);
+            });
         }
         else if (input === "q" || key.escape || key.return) {
             onBack();
@@ -121,9 +90,7 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
     // Helper to sanitize log message
     const sanitizeMessage = (message) => {
         // Strip ANSI escape sequences (colors, cursor movement, etc.)
-        const strippedAnsi = message.replace(
-        // eslint-disable-next-line no-control-regex
-        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        const strippedAnsi = message.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
         // Replace control characters with spaces
         return (strippedAnsi
             .replace(/\r\n/g, " ")
@@ -131,7 +98,6 @@ export const LogsViewer = ({ logs, breadcrumbItems = [{ label: "Logs", active: t
             .replace(/\r/g, " ")
             .replace(/\t/g, " ")
             // Remove any other control characters (ASCII 0-31 except space)
-            // eslint-disable-next-line no-control-regex
             .replace(/[\x00-\x1F]/g, ""));
     };
     // Helper to calculate how many lines a log entry will take when wrapped