@runloop/rl-cli 1.8.0 → 1.9.0

package/dist/components/SettingsMenu.js

@@ -14,6 +14,13 @@ const settingsMenuItems = [
         icon: "◇",
         color: colors.info,
     },
+    {
+        key: "gateway-configs",
+        label: "Gateway Configs",
+        description: "Configure API credential proxying",
+        icon: "⬡",
+        color: colors.success,
+    },
     {
         key: "secrets",
         label: "Secrets",
@@ -66,7 +73,10 @@ export const SettingsMenu = ({ onSelect, onBack }) => {
         else if (input === "n" || input === "1") {
             onSelect("network-policies");
         }
-        else if (input === "s" || input === "2") {
+        else if (input === "g" || input === "2") {
+            onSelect("gateway-configs");
+        }
+        else if (input === "s" || input === "3") {
             onSelect("secrets");
         }
         else if (input === "q") {
@@ -77,7 +87,7 @@ export const SettingsMenu = ({ onSelect, onBack }) => {
                     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 }), !isNarrow && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "- ", item.description] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "[", index + 1, "]"] })] }, item.key));
                 }) }), _jsx(NavigationTips, { showArrows: true, paddingX: 2, tips: [
-                    { key: "1-2", label: "Quick select" },
+                    { key: "1-3", label: "Quick select" },
                     { key: "Enter", label: "Select" },
                     { key: "Esc", label: "Back" },
                     { key: "q", label: "Quit" },

package/dist/components/StateHistory.js

@@ -3,6 +3,7 @@ import { Box, Text } from "ink";
 import figures from "figures";
 import { colors } from "../utils/theme.js";
 import { getStatusDisplay } from "./StatusBadge.js";
+import { formatTimeAgo } from "../utils/time.js";
 // Format shutdown reason into human-readable text
 const formatShutdownReason = (reason) => {
     switch (reason) {
@@ -33,26 +34,6 @@ const formatShutdownReason = (reason) => {
             return reason.replace(/_/g, " ");
     }
 };
-// 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`;
-};
 // Format duration in a succinct way
 const formatDuration = (milliseconds) => {
     const seconds = Math.floor(milliseconds / 1000);

package/dist/components/StatusBadge.js

@@ -82,6 +82,13 @@ export const getStatusDisplay = (status) => {
                 label: "Failed",
             };
         // === BUILD STATES (for blueprints) ===
+        case "queued":
+            return {
+                icon: figures.ellipsis,
+                color: colors.warning,
+                text: "QUEUED    ",
+                label: "Queued",
+            };
         case "ready":
             return {
                 icon: figures.tick,
@@ -109,8 +116,8 @@ export const getStatusDisplay = (status) => {
             return {
                 icon: figures.tick,
                 color: colors.success,
-                text: "COMPLETED ",
-                label: "Completed",
+                text: "COMPLETE  ",
+                label: "Complete",
             };
         case "canceled":
             return {

package/dist/components/StreamingLogsViewer.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";
@@ -167,42 +168,10 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
                 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!");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                    else {
-                        setCopyStatus("Failed");
-                        setTimeout(() => setCopyStatus(null), 2000);
-                    }
-                });
-                proc.on("error", () => {
-                    setCopyStatus("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();
@@ -214,16 +183,13 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
     const contentWidth = Math.max(40, terminalWidth - boxChrome);
     // Helper to sanitize log message
     const sanitizeMessage = (message) => {
-        const strippedAnsi = message.replace(
-        // eslint-disable-next-line no-control-regex
-        /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
-        return (strippedAnsi
+        const strippedAnsi = message.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, "");
+        return strippedAnsi
             .replace(/\r\n/g, " ")
             .replace(/\n/g, " ")
             .replace(/\r/g, " ")
             .replace(/\t/g, " ")
-            // eslint-disable-next-line no-control-regex
-            .replace(/[\x00-\x1F]/g, ""));
+            .replace(/[\x00-\x1F]/g, "");
     };
     // Calculate visible logs
     let visibleLogs;

package/dist/components/form/FormTextInput.js

@@ -3,6 +3,8 @@ import { Text } from "ink";
 import TextInput from "ink-text-input";
 import { FormField } from "./FormField.js";
 import { colors } from "../../utils/theme.js";
-export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, }) => {
-    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: value || "(empty)" })) }));
+export const FormTextInput = ({ label, value, onChange, isActive, placeholder, error, onSubmit, mask, }) => {
+    // Display value: use mask character if provided
+    const displayValue = mask && value ? mask.repeat(value.length) : value;
+    return (_jsx(FormField, { label: label, isActive: isActive, error: error, children: isActive ? (_jsx(TextInput, { value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit, mask: mask })) : (_jsx(Text, { color: error ? colors.error : colors.text, children: displayValue || "(empty)" })) }));
 };

package/dist/components/resourceDetailTypes.js

@@ -0,0 +1,18 @@
+/**
+ * Walk all sections and collect fields that have an action defined.
+ * Returns a flat list of references preserving section/field indices
+ * so the component can map selections back to the right field.
+ */
+export function collectActionableFields(sections) {
+    const refs = [];
+    sections.forEach((section, sectionIndex) => {
+        section.fields
+            .filter((field) => field.value !== undefined && field.value !== null)
+            .forEach((field, fieldIndex) => {
+            if (field.action) {
+                refs.push({ sectionIndex, fieldIndex, action: field.action });
+            }
+        });
+    });
+    return refs;
+}

package/dist/hooks/useInputHandler.js

@@ -0,0 +1,103 @@
+/**
+ * useInputHandler - Declarative, mode-based input handling for Ink components.
+ *
+ * Replaces long imperative if/else chains in useInput callbacks with a
+ * structured system of ordered modes, each with a key-binding map.
+ * The first active mode wins; bindings are looked up by canonical key name.
+ */
+import { useInput } from "ink";
+// ---------------------------------------------------------------------------
+// Key resolution
+// ---------------------------------------------------------------------------
+/**
+ * Normalise Ink's (input, key) pair into a single canonical key name.
+ *
+ * Priority order (first match wins):
+ *  1. Special keys (arrows, enter, escape, etc.)
+ *  2. Ctrl+<char> combinations
+ *  3. The raw `input` string (printable character)
+ */
+export function resolveKeyName(input, key) {
+    // Special keys
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    if (key.leftArrow)
+        return "left";
+    if (key.rightArrow)
+        return "right";
+    if (key.return)
+        return "enter";
+    if (key.escape)
+        return "escape";
+    if (key.tab)
+        return "tab";
+    if (key.backspace)
+        return "backspace";
+    if (key.delete)
+        return "delete";
+    if (key.pageUp)
+        return "pageUp";
+    if (key.pageDown)
+        return "pageDown";
+    // Ctrl combinations (e.g. ctrl+c)
+    if (key.ctrl && input)
+        return `ctrl+${input}`;
+    // Printable character
+    return input;
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * Declarative input handler.
+ *
+ * @param modes  Ordered array of input modes. The first mode whose `active()`
+ *               returns `true` gets to handle the key event.
+ * @param options  Optional settings forwarded to Ink's useInput.
+ */
+export function useInputHandler(modes, options) {
+    useInput((input, key) => {
+        const keyName = resolveKeyName(input, key);
+        for (const mode of modes) {
+            if (!mode.active())
+                continue;
+            // Try an exact binding match
+            const handler = mode.bindings[keyName];
+            if (handler) {
+                handler();
+                return;
+            }
+            // No binding matched — try the dynamic fallback
+            if (mode.onUnmatched) {
+                mode.onUnmatched(input, key);
+                return;
+            }
+            // captureAll: swallow the event silently
+            if (mode.captureAll)
+                return;
+            // Default: first active mode consumes the event even if nothing matched
+            return;
+        }
+    }, { isActive: options?.isActive ?? true });
+}
+// ---------------------------------------------------------------------------
+// Preset binding helpers
+// ---------------------------------------------------------------------------
+/**
+ * Common scroll bindings (j/k, arrows, page up/down).
+ * Spread into a mode's `bindings` to get standard scrolling behaviour.
+ */
+export function scrollBindings(getScroll, setScroll) {
+    return {
+        down: () => setScroll(getScroll() + 1),
+        up: () => setScroll(Math.max(0, getScroll() - 1)),
+        j: () => setScroll(getScroll() + 1),
+        k: () => setScroll(Math.max(0, getScroll() - 1)),
+        s: () => setScroll(getScroll() + 1),
+        w: () => setScroll(Math.max(0, getScroll() - 1)),
+        pageDown: () => setScroll(getScroll() + 10),
+        pageUp: () => setScroll(Math.max(0, getScroll() - 10)),
+    };
+}

package/dist/router/Router.js

@@ -1,17 +1,71 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * Router - Manages screen navigation with clean mount/unmount lifecycle
  * Replaces conditional rendering pattern from menu.tsx
  */
 import React from "react";
+import { Box, Text, useInput } from "ink";
+import figures from "figures";
 import { useNavigation } from "../store/navigationStore.js";
 import { useDevboxStore } from "../store/devboxStore.js";
 import { useBlueprintStore } from "../store/blueprintStore.js";
 import { useSnapshotStore } from "../store/snapshotStore.js";
 import { useNetworkPolicyStore } from "../store/networkPolicyStore.js";
+import { useGatewayConfigStore } from "../store/gatewayConfigStore.js";
 import { useObjectStore } from "../store/objectStore.js";
 import { useBenchmarkStore } from "../store/benchmarkStore.js";
+import { useBenchmarkJobStore } from "../store/benchmarkJobStore.js";
 import { ErrorBoundary } from "../components/ErrorBoundary.js";
+import { colors } from "../utils/theme.js";
+// List of all known screens
+const KNOWN_SCREENS = new Set([
+    "menu",
+    "settings-menu",
+    "devbox-list",
+    "devbox-detail",
+    "devbox-actions",
+    "devbox-exec",
+    "devbox-create",
+    "blueprint-list",
+    "blueprint-detail",
+    "blueprint-logs",
+    "snapshot-list",
+    "snapshot-detail",
+    "network-policy-list",
+    "network-policy-detail",
+    "network-policy-create",
+    "gateway-config-list",
+    "gateway-config-detail",
+    "gateway-config-create",
+    "secret-list",
+    "secret-detail",
+    "secret-create",
+    "object-list",
+    "object-detail",
+    "ssh-session",
+    "benchmark-menu",
+    "benchmark-list",
+    "benchmark-detail",
+    "benchmark-run-list",
+    "benchmark-run-detail",
+    "scenario-run-list",
+    "scenario-run-detail",
+    "benchmark-job-list",
+    "benchmark-job-detail",
+    "benchmark-job-create",
+]);
+/**
+ * Fallback screen for unknown routes
+ */
+function UnknownScreen({ screenName }) {
+    const { navigate } = useNavigation();
+    useInput((input, key) => {
+        if (key.return) {
+            navigate("menu");
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.warning, bold: true, children: [figures.warning, " Unknown Page"] }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.textDim, children: ["You've navigated to an unknown page: ", _jsx(Text, { color: colors.error, children: `"${screenName}"` })] }) }), _jsx(Box, { children: _jsxs(Text, { color: colors.textDim, children: ["Press", " ", _jsx(Text, { color: colors.primary, bold: true, children: "Enter" }), " ", "to return to the main menu"] }) })] }));
+}
 // Import screen components
 import { MenuScreen } from "../screens/MenuScreen.js";
 import { DevboxListScreen } from "../screens/DevboxListScreen.js";
@@ -27,6 +81,8 @@ import { SnapshotDetailScreen } from "../screens/SnapshotDetailScreen.js";
 import { NetworkPolicyListScreen } from "../screens/NetworkPolicyListScreen.js";
 import { NetworkPolicyDetailScreen } from "../screens/NetworkPolicyDetailScreen.js";
 import { NetworkPolicyCreateScreen } from "../screens/NetworkPolicyCreateScreen.js";
+import { GatewayConfigListScreen } from "../screens/GatewayConfigListScreen.js";
+import { GatewayConfigDetailScreen } from "../screens/GatewayConfigDetailScreen.js";
 import { SettingsMenuScreen } from "../screens/SettingsMenuScreen.js";
 import { SecretListScreen } from "../screens/SecretListScreen.js";
 import { SecretDetailScreen } from "../screens/SecretDetailScreen.js";
@@ -35,10 +91,15 @@ import { ObjectListScreen } from "../screens/ObjectListScreen.js";
 import { ObjectDetailScreen } from "../screens/ObjectDetailScreen.js";
 import { SSHSessionScreen } from "../screens/SSHSessionScreen.js";
 import { BenchmarkMenuScreen } from "../screens/BenchmarkMenuScreen.js";
+import { BenchmarkListScreen } from "../screens/BenchmarkListScreen.js";
+import { BenchmarkDetailScreen } from "../screens/BenchmarkDetailScreen.js";
 import { BenchmarkRunListScreen } from "../screens/BenchmarkRunListScreen.js";
 import { BenchmarkRunDetailScreen } from "../screens/BenchmarkRunDetailScreen.js";
 import { ScenarioRunListScreen } from "../screens/ScenarioRunListScreen.js";
 import { ScenarioRunDetailScreen } from "../screens/ScenarioRunDetailScreen.js";
+import { BenchmarkJobListScreen } from "../screens/BenchmarkJobListScreen.js";
+import { BenchmarkJobDetailScreen } from "../screens/BenchmarkJobDetailScreen.js";
+import { BenchmarkJobCreateScreen } from "../screens/BenchmarkJobCreateScreen.js";
 /**
  * Router component that renders the current screen
  * Implements memory cleanup on route changes
@@ -86,6 +147,13 @@ export function Router() {
                         useNetworkPolicyStore.getState().clearAll();
                     }
                     break;
+                case "gateway-config-list":
+                case "gateway-config-detail":
+                case "gateway-config-create":
+                    if (!currentScreen.startsWith("gateway-config")) {
+                        useGatewayConfigStore.getState().clearAll();
+                    }
+                    break;
                 case "object-list":
                 case "object-detail":
                     if (!currentScreen.startsWith("object")) {
@@ -93,6 +161,8 @@ export function Router() {
                     }
                     break;
                 case "benchmark-menu":
+                case "benchmark-list":
+                case "benchmark-detail":
                 case "benchmark-run-list":
                 case "benchmark-run-detail":
                 case "scenario-run-list":
@@ -102,6 +172,13 @@ export function Router() {
                         useBenchmarkStore.getState().clearAll();
                     }
                     break;
+                case "benchmark-job-list":
+                case "benchmark-job-detail":
+                case "benchmark-job-create":
+                    if (!currentScreen.startsWith("benchmark-job")) {
+                        useBenchmarkJobStore.getState().clearAll();
+                    }
+                    break;
             }
         }
         prevScreenRef.current = currentScreen;
@@ -110,5 +187,5 @@ export function Router() {
     // and mount new component, preventing race conditions during screen transitions.
     // The key ensures React treats this as a completely new component tree.
     // Wrap in ErrorBoundary to catch any Yoga WASM errors gracefully.
-    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "settings-menu" && (_jsx(SettingsMenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-exec" && (_jsx(DevboxExecScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintDetailScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-list" && (_jsx(NetworkPolicyListScreen, { ...params }, currentScreen)), currentScreen === "network-policy-detail" && (_jsx(NetworkPolicyDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-create" && (_jsx(NetworkPolicyCreateScreen, { ...params }, currentScreen)), currentScreen === "secret-list" && (_jsx(SecretListScreen, { ...params }, currentScreen)), currentScreen === "secret-detail" && (_jsx(SecretDetailScreen, { ...params }, currentScreen)), currentScreen === "secret-create" && (_jsx(SecretCreateScreen, { ...params }, currentScreen)), currentScreen === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen)), currentScreen === "benchmark-menu" && (_jsx(BenchmarkMenuScreen, { ...params }, currentScreen)), currentScreen === "benchmark-run-list" && (_jsx(BenchmarkRunListScreen, { ...params }, currentScreen)), currentScreen === "benchmark-run-detail" && (_jsx(BenchmarkRunDetailScreen, { ...params }, currentScreen)), currentScreen === "scenario-run-list" && (_jsx(ScenarioRunListScreen, { ...params }, currentScreen)), currentScreen === "scenario-run-detail" && (_jsx(ScenarioRunDetailScreen, { ...params }, currentScreen))] }, `boundary-${currentScreen}`));
+    return (_jsxs(ErrorBoundary, { children: [currentScreen === "menu" && (_jsx(MenuScreen, { ...params }, currentScreen)), currentScreen === "settings-menu" && (_jsx(SettingsMenuScreen, { ...params }, currentScreen)), currentScreen === "devbox-list" && (_jsx(DevboxListScreen, { ...params }, currentScreen)), currentScreen === "devbox-detail" && (_jsx(DevboxDetailScreen, { ...params }, currentScreen)), currentScreen === "devbox-actions" && (_jsx(DevboxActionsScreen, { ...params }, currentScreen)), currentScreen === "devbox-exec" && (_jsx(DevboxExecScreen, { ...params }, currentScreen)), currentScreen === "devbox-create" && (_jsx(DevboxCreateScreen, { ...params }, currentScreen)), currentScreen === "blueprint-list" && (_jsx(BlueprintListScreen, { ...params }, currentScreen)), currentScreen === "blueprint-detail" && (_jsx(BlueprintDetailScreen, { ...params }, currentScreen)), currentScreen === "blueprint-logs" && (_jsx(BlueprintLogsScreen, { ...params }, currentScreen)), currentScreen === "snapshot-list" && (_jsx(SnapshotListScreen, { ...params }, currentScreen)), currentScreen === "snapshot-detail" && (_jsx(SnapshotDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-list" && (_jsx(NetworkPolicyListScreen, { ...params }, currentScreen)), currentScreen === "network-policy-detail" && (_jsx(NetworkPolicyDetailScreen, { ...params }, currentScreen)), currentScreen === "network-policy-create" && (_jsx(NetworkPolicyCreateScreen, { ...params }, currentScreen)), currentScreen === "gateway-config-list" && (_jsx(GatewayConfigListScreen, { ...params }, currentScreen)), currentScreen === "gateway-config-detail" && (_jsx(GatewayConfigDetailScreen, { ...params }, currentScreen)), currentScreen === "secret-list" && (_jsx(SecretListScreen, { ...params }, currentScreen)), currentScreen === "secret-detail" && (_jsx(SecretDetailScreen, { ...params }, currentScreen)), currentScreen === "secret-create" && (_jsx(SecretCreateScreen, { ...params }, currentScreen)), currentScreen === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...params }, currentScreen)), currentScreen === "benchmark-menu" && (_jsx(BenchmarkMenuScreen, { ...params }, currentScreen)), currentScreen === "benchmark-list" && (_jsx(BenchmarkListScreen, { ...params }, currentScreen)), currentScreen === "benchmark-detail" && (_jsx(BenchmarkDetailScreen, { ...params }, currentScreen)), currentScreen === "benchmark-run-list" && (_jsx(BenchmarkRunListScreen, { ...params }, currentScreen)), currentScreen === "benchmark-run-detail" && (_jsx(BenchmarkRunDetailScreen, { ...params }, currentScreen)), currentScreen === "scenario-run-list" && (_jsx(ScenarioRunListScreen, { ...params }, currentScreen)), currentScreen === "scenario-run-detail" && (_jsx(ScenarioRunDetailScreen, { ...params }, currentScreen)), currentScreen === "benchmark-job-list" && (_jsx(BenchmarkJobListScreen, { ...params }, currentScreen)), currentScreen === "benchmark-job-detail" && (_jsx(BenchmarkJobDetailScreen, { ...params }, currentScreen)), currentScreen === "benchmark-job-create" && (_jsx(BenchmarkJobCreateScreen, { ...params }, currentScreen)), !KNOWN_SCREENS.has(currentScreen) && (_jsx(UnknownScreen, { screenName: currentScreen }, currentScreen))] }, `boundary-${currentScreen}`));
 }

package/dist/screens/BenchmarkDetailScreen.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkDetailScreen - Detail page for benchmark definitions
+ * Uses the generic ResourceDetailPage component
+ */
+import React from "react";
+import { Text } from "ink";
+import figures from "figures";
+import { useNavigation } from "../store/navigationStore.js";
+import { useBenchmarkStore } from "../store/benchmarkStore.js";
+import { ResourceDetailPage, formatTimestamp, } from "../components/ResourceDetailPage.js";
+import { getBenchmark } from "../services/benchmarkService.js";
+import { SpinnerComponent } from "../components/Spinner.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
+import { Breadcrumb } from "../components/Breadcrumb.js";
+import { colors } from "../utils/theme.js";
+export function BenchmarkDetailScreen({ benchmarkId, }) {
+    const { goBack, navigate } = useNavigation();
+    const benchmarks = useBenchmarkStore((state) => state.benchmarks);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedBenchmark, setFetchedBenchmark] = React.useState(null);
+    // Find benchmark in store first
+    const benchmarkFromStore = benchmarks.find((b) => b.id === benchmarkId);
+    // Polling function
+    const pollBenchmark = React.useCallback(async () => {
+        if (!benchmarkId)
+            return null;
+        return getBenchmark(benchmarkId);
+    }, [benchmarkId]);
+    // Fetch benchmark from API if not in store
+    React.useEffect(() => {
+        if (benchmarkId && !loading && !fetchedBenchmark && !benchmarkFromStore) {
+            setLoading(true);
+            setError(null);
+            getBenchmark(benchmarkId)
+                .then((benchmark) => {
+                setFetchedBenchmark(benchmark);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [benchmarkId, loading, fetchedBenchmark, benchmarkFromStore]);
+    // Use fetched benchmark for full details, fall back to store for basic display
+    const benchmark = fetchedBenchmark || benchmarkFromStore;
+    // Show loading state
+    if (!benchmark && benchmarkId && !error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading benchmark details..." })] }));
+    }
+    // Show error state
+    if (error && !benchmark) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load benchmark details", error: error })] }));
+    }
+    // Show not found error
+    if (!benchmark) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Definitions" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Benchmark ${benchmarkId || "unknown"} not found`, error: new Error("Benchmark not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (benchmark.created_at) {
+        basicFields.push({
+            label: "Created",
+            value: formatTimestamp(benchmark.created_at),
+        });
+    }
+    if (benchmark.description) {
+        basicFields.push({
+            label: "Description",
+            value: benchmark.description,
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Metadata section
+    if (benchmark.metadata &&
+        Object.keys(benchmark.metadata).length > 0) {
+        const metadataFields = Object.entries(benchmark.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for benchmarks
+    const operations = [
+        {
+            key: "create-job",
+            label: "Create Benchmark Job",
+            color: colors.success,
+            icon: figures.play,
+            shortcut: "c",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "create-job":
+                navigate("benchmark-job-create", { initialBenchmarkIds: resource.id });
+                break;
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (b) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Benchmark Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", b.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", b.name || "(none)"] }, "core-name"));
+        if (b.description) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Description: ", b.description] }, "core-desc"));
+        }
+        if (b.created_at) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Created: ", new Date(b.created_at).toLocaleString()] }, "core-created"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Metadata
+        if (b.metadata && Object.keys(b.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(b.metadata).forEach(([key, value], idx) => {
+                lines.push(_jsxs(Text, { dimColor: true, children: [" ", key, ": ", value] }, `meta-${idx}`));
+            });
+            lines.push(_jsx(Text, { children: " " }, "meta-space"));
+        }
+        // Raw JSON
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Raw JSON" }, "json-title"));
+        const jsonLines = JSON.stringify(b, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    return (_jsx(ResourceDetailPage, { resource: benchmark, resourceType: "Benchmark Definitions", getDisplayName: (b) => b.name || b.id, getId: (b) => b.id, getStatus: (b) => b.status, detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, breadcrumbPrefix: [{ label: "Home" }, { label: "Benchmarks" }] }));
+}