@runloop/rl-cli 1.7.0 → 1.8.0

package/dist/components/StreamingLogsViewer.js

@@ -5,7 +5,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 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";
@@ -14,6 +13,21 @@ import { useViewportHeight } from "../hooks/useViewportHeight.js";
 import { useExitOnCtrlC } from "../hooks/useExitOnCtrlC.js";
 import { parseAnyLogEntry } from "../utils/logFormatter.js";
 import { getDevboxLogs } from "../services/devboxService.js";
+// Color maps - defined outside component to avoid recreation on every render
+const levelColorMap = {
+    red: colors.error,
+    yellow: colors.warning,
+    blue: colors.primary,
+    gray: colors.textDim,
+};
+const sourceColorMap = {
+    magenta: "#d33682",
+    cyan: colors.info,
+    green: colors.success,
+    yellow: colors.warning,
+    gray: colors.textDim,
+    white: colors.text,
+};
 export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Logs", active: true }], onBack, }) => {
     const [logs, setLogs] = React.useState([]);
     const [loading, setLoading] = React.useState(true);
@@ -25,15 +39,40 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
     const [isPolling, setIsPolling] = React.useState(true);
     // Refs for cleanup
     const pollIntervalRef = React.useRef(null);
-    // Calculate viewport
-    const logsViewport = useViewportHeight({ overhead: 10, minHeight: 10 });
+    // Calculate viewport - overhead increased to reduce overdraw/flashing
+    const logsViewport = useViewportHeight({ overhead: 11, minHeight: 10 });
     // Handle Ctrl+C
     useExitOnCtrlC();
-    // Fetch logs function
+    // Fetch logs function - only update state if logs actually changed
     const fetchLogs = React.useCallback(async () => {
         try {
             const newLogs = await getDevboxLogs(devboxId);
-            setLogs(newLogs);
+            // Only update logs state if the logs have actually changed
+            // This prevents unnecessary re-renders that cause flashing in non-tmux terminals
+            setLogs((prevLogs) => {
+                // Quick length check first
+                if (prevLogs.length !== newLogs.length) {
+                    return newLogs;
+                }
+                // If same length, check if last log entry is different (most common case for streaming)
+                if (newLogs.length > 0) {
+                    const prevLast = prevLogs[prevLogs.length - 1];
+                    const newLast = newLogs[newLogs.length - 1];
+                    // Compare by timestamp and message for efficiency
+                    if (prevLast &&
+                        newLast &&
+                        "timestamp" in prevLast &&
+                        "timestamp" in newLast &&
+                        "message" in prevLast &&
+                        "message" in newLast &&
+                        prevLast.timestamp === newLast.timestamp &&
+                        prevLast.message === newLast.message) {
+                        // Logs haven't changed, return previous state to avoid re-render
+                        return prevLogs;
+                    }
+                }
+                return newLogs;
+            });
             setError(null);
             if (loading)
                 setLoading(false);
@@ -216,57 +255,79 @@ export const StreamingLogsViewer = ({ devboxId, breadcrumbItems = [{ label: "Log
     }
     const hasMore = actualScroll + visibleLogs.length < logs.length;
     const hasLess = actualScroll > 0;
-    // Color maps
-    const levelColorMap = {
-        red: colors.error,
-        yellow: colors.warning,
-        blue: colors.primary,
-        gray: colors.textDim,
-    };
-    const sourceColorMap = {
-        magenta: "#d33682",
-        cyan: colors.info,
-        green: colors.success,
-        yellow: colors.warning,
-        gray: colors.textDim,
-        white: colors.text,
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, height: viewportHeight + 2, children: loading ? (_jsxs(Box, { children: [_jsx(Text, { color: colors.info, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: colors.textDim, children: " Loading logs..." })] })) : error ? (_jsxs(Text, { color: colors.error, children: [figures.cross, " Error: ", error] })) : logs.length === 0 ? (_jsxs(Box, { children: [isPolling && (_jsxs(Text, { color: colors.info, children: [_jsx(Spinner, { type: "dots" }), " "] })), _jsx(Text, { color: colors.textDim, children: "Waiting for logs..." })] })) : (visibleLogs.map((log, index) => {
-                    const parts = parseAnyLogEntry(log);
-                    const sanitizedMessage = sanitizeMessage(parts.message);
-                    const MAX_MESSAGE_LENGTH = 1000;
-                    const fullMessage = sanitizedMessage.length > MAX_MESSAGE_LENGTH
-                        ? sanitizedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
-                        : sanitizedMessage;
-                    const cmd = parts.cmd
-                        ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
-                        : "";
-                    const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
-                    const levelColor = levelColorMap[parts.levelColor] || colors.textDim;
-                    const sourceColor = sourceColorMap[parts.sourceColor] || colors.textDim;
-                    if (logsWrapMode) {
-                        return (_jsx(Box, { width: contentWidth, flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: fullMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, index));
+    // Build lines array - always render exactly viewportHeight lines for stable structure
+    // This prevents Ink from doing structural redraws that cause flashing
+    const renderLines = React.useMemo(() => {
+        const lines = [];
+        if (loading) {
+            // First line shows loading message
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsx(Text, { color: colors.textDim, children: "\u25CF Loading logs..." }) }, "loading"));
+        }
+        else if (error) {
+            // First line shows error
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { color: colors.error, children: [figures.cross, " Error: ", error] }) }, "error"));
+        }
+        else if (logs.length === 0) {
+            // First line shows waiting message
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { color: colors.textDim, children: [isPolling ? "● " : "", "Waiting for logs..."] }) }, "waiting"));
+        }
+        else {
+            // Render visible log entries
+            for (let i = 0; i < visibleLogs.length; i++) {
+                const log = visibleLogs[i];
+                const parts = parseAnyLogEntry(log);
+                const sanitizedMessage = sanitizeMessage(parts.message);
+                const MAX_MESSAGE_LENGTH = 1000;
+                const fullMessage = sanitizedMessage.length > MAX_MESSAGE_LENGTH
+                    ? sanitizedMessage.substring(0, MAX_MESSAGE_LENGTH) + "..."
+                    : sanitizedMessage;
+                const cmd = parts.cmd
+                    ? `$ ${parts.cmd.substring(0, 40)}${parts.cmd.length > 40 ? "..." : ""} `
+                    : "";
+                const exitCode = parts.exitCode !== null ? `exit=${parts.exitCode} ` : "";
+                const levelColor = levelColorMap[parts.levelColor] || colors.textDim;
+                const sourceColor = sourceColorMap[parts.sourceColor] || colors.textDim;
+                if (logsWrapMode) {
+                    lines.push(_jsx(Box, { width: contentWidth, flexDirection: "column", children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: fullMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, i));
+                }
+                else {
+                    const shellPart = parts.shellName ? `(${parts.shellName}) ` : "";
+                    const exitPart = exitCode ? ` ${exitCode}` : "";
+                    const prefix = `${parts.timestamp} ${parts.level} [${parts.source}] ${shellPart}${cmd}`;
+                    const suffix = exitPart;
+                    const availableForMessage = contentWidth - prefix.length - suffix.length;
+                    let displayMessage;
+                    if (availableForMessage <= 3) {
+                        displayMessage = "";
+                    }
+                    else if (fullMessage.length <= availableForMessage) {
+                        displayMessage = fullMessage;
                     }
                     else {
-                        const shellPart = parts.shellName ? `(${parts.shellName}) ` : "";
-                        const exitPart = exitCode ? ` ${exitCode}` : "";
-                        const prefix = `${parts.timestamp} ${parts.level} [${parts.source}] ${shellPart}${cmd}`;
-                        const suffix = exitPart;
-                        const availableForMessage = contentWidth - prefix.length - suffix.length;
-                        let displayMessage;
-                        if (availableForMessage <= 3) {
-                            displayMessage = "";
-                        }
-                        else if (fullMessage.length <= availableForMessage) {
-                            displayMessage = fullMessage;
-                        }
-                        else {
-                            displayMessage =
-                                fullMessage.substring(0, availableForMessage - 3) + "...";
-                        }
-                        return (_jsx(Box, { width: contentWidth, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: displayMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, index));
+                        displayMessage =
+                            fullMessage.substring(0, availableForMessage - 3) + "...";
                     }
-                })) }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "logs"] }), logs.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 + visibleLogs.length, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), isPolling ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.success, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: colors.success, children: " Live" })] })) : (_jsx(Text, { color: colors.textDim, children: "Paused" })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(NavigationTips, { showArrows: true, tips: [
+                    lines.push(_jsx(Box, { width: contentWidth, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: colors.textDim, dimColor: true, children: parts.timestamp }), _jsx(Text, { children: " " }), _jsx(Text, { color: levelColor, bold: parts.levelColor === "red", children: parts.level }), _jsx(Text, { children: " " }), _jsxs(Text, { color: sourceColor, children: ["[", parts.source, "]"] }), _jsx(Text, { children: " " }), parts.shellName && (_jsxs(Text, { color: colors.textDim, dimColor: true, children: ["(", parts.shellName, ")", " "] })), cmd && _jsx(Text, { color: colors.info, children: cmd }), _jsx(Text, { children: displayMessage }), exitCode && (_jsxs(Text, { color: parts.exitCode === 0 ? colors.success : colors.error, children: [" ", exitCode] }))] }) }, i));
+                }
+            }
+        }
+        // Pad with empty lines to maintain consistent structure
+        // This prevents Ink from doing structural redraws
+        while (lines.length < viewportHeight) {
+            lines.push(_jsx(Box, { width: contentWidth, children: _jsx(Text, { children: " " }) }, `pad-${lines.length}`));
+        }
+        return lines;
+    }, [
+        loading,
+        error,
+        logs.length,
+        visibleLogs,
+        isPolling,
+        logsWrapMode,
+        contentWidth,
+        viewportHeight,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: breadcrumbItems }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.border, paddingX: 1, height: viewportHeight + 2, children: renderLines }), _jsxs(Box, { marginTop: 1, paddingX: 1, children: [_jsxs(Text, { color: colors.primary, bold: true, children: [figures.hamburger, " ", logs.length] }), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "logs"] }), logs.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 + visibleLogs.length, logs.length), " of", " ", logs.length] }), hasLess && _jsxs(Text, { color: colors.primary, children: [" ", figures.arrowUp] }), hasMore && (_jsxs(Text, { color: colors.primary, children: [" ", figures.arrowDown] }))] })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), isPolling ? (_jsx(Text, { color: colors.success, children: "\u25CF Live" })) : (_jsx(Text, { color: colors.textDim, children: "\u25CB Paused" })), _jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: logsWrapMode ? colors.success : colors.textDim, bold: logsWrapMode, children: logsWrapMode ? "Wrap: ON" : "Wrap: OFF" }), copyStatus && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textDim, dimColor: true, children: [" ", "\u2022", " "] }), _jsx(Text, { color: colors.success, bold: true, children: copyStatus })] }))] }), _jsx(NavigationTips, { showArrows: true, tips: [
                     { key: "g/G", label: "Top/Bottom" },
                     { key: "p", label: isPolling ? "Pause" : "Resume" },
                     { key: "w", label: "Wrap" },

package/dist/router/Router.js

@@ -10,6 +10,7 @@ import { useBlueprintStore } from "../store/blueprintStore.js";
 import { useSnapshotStore } from "../store/snapshotStore.js";
 import { useNetworkPolicyStore } from "../store/networkPolicyStore.js";
 import { useObjectStore } from "../store/objectStore.js";
+import { useBenchmarkStore } from "../store/benchmarkStore.js";
 import { ErrorBoundary } from "../components/ErrorBoundary.js";
 // Import screen components
 import { MenuScreen } from "../screens/MenuScreen.js";
@@ -26,9 +27,18 @@ 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 { SettingsMenuScreen } from "../screens/SettingsMenuScreen.js";
+import { SecretListScreen } from "../screens/SecretListScreen.js";
+import { SecretDetailScreen } from "../screens/SecretDetailScreen.js";
+import { SecretCreateScreen } from "../screens/SecretCreateScreen.js";
 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 { BenchmarkRunListScreen } from "../screens/BenchmarkRunListScreen.js";
+import { BenchmarkRunDetailScreen } from "../screens/BenchmarkRunDetailScreen.js";
+import { ScenarioRunListScreen } from "../screens/ScenarioRunListScreen.js";
+import { ScenarioRunDetailScreen } from "../screens/ScenarioRunDetailScreen.js";
 /**
  * Router component that renders the current screen
  * Implements memory cleanup on route changes
@@ -82,6 +92,16 @@ export function Router() {
                         useObjectStore.getState().clearAll();
                     }
                     break;
+                case "benchmark-menu":
+                case "benchmark-run-list":
+                case "benchmark-run-detail":
+                case "scenario-run-list":
+                case "scenario-run-detail":
+                    if (!currentScreen.startsWith("benchmark") &&
+                        !currentScreen.startsWith("scenario")) {
+                        useBenchmarkStore.getState().clearAll();
+                    }
+                    break;
             }
         }
         prevScreenRef.current = currentScreen;
@@ -90,5 +110,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 === "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 === "object-list" && (_jsx(ObjectListScreen, { ...params }, currentScreen)), currentScreen === "object-detail" && (_jsx(ObjectDetailScreen, { ...params }, currentScreen)), currentScreen === "ssh-session" && (_jsx(SSHSessionScreen, { ...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 === "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}`));
 }

package/dist/screens/BenchmarkMenuScreen.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNavigation } from "../store/navigationStore.js";
+import { BenchmarkMenu } from "../components/BenchmarkMenu.js";
+export function BenchmarkMenuScreen() {
+    const { navigate, goBack } = useNavigation();
+    const handleSelect = (key) => {
+        switch (key) {
+            case "benchmark-runs":
+                navigate("benchmark-run-list");
+                break;
+            case "scenario-runs":
+                navigate("scenario-run-list");
+                break;
+            default:
+                // Fallback for any other screen names
+                navigate(key);
+        }
+    };
+    const handleBack = () => {
+        goBack();
+    };
+    return _jsx(BenchmarkMenu, { onSelect: handleSelect, onBack: handleBack });
+}

package/dist/screens/BenchmarkRunDetailScreen.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkRunDetailScreen - Detail page for benchmark runs
+ * 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 { getBenchmarkRun } 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 BenchmarkRunDetailScreen({ benchmarkRunId, }) {
+    const { goBack, navigate } = useNavigation();
+    const benchmarkRuns = useBenchmarkStore((state) => state.benchmarkRuns);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [fetchedRun, setFetchedRun] = React.useState(null);
+    // Find run in store first
+    const runFromStore = benchmarkRuns.find((r) => r.id === benchmarkRunId);
+    // Polling function
+    const pollRun = React.useCallback(async () => {
+        if (!benchmarkRunId)
+            return null;
+        return getBenchmarkRun(benchmarkRunId);
+    }, [benchmarkRunId]);
+    // Fetch run from API if not in store
+    React.useEffect(() => {
+        if (benchmarkRunId && !loading && !fetchedRun) {
+            setLoading(true);
+            setError(null);
+            getBenchmarkRun(benchmarkRunId)
+                .then((run) => {
+                setFetchedRun(run);
+                setLoading(false);
+            })
+                .catch((err) => {
+                setError(err);
+                setLoading(false);
+            });
+        }
+    }, [benchmarkRunId, loading, fetchedRun]);
+    // Use fetched run for full details, fall back to store for basic display
+    const run = fetchedRun || runFromStore;
+    // Show loading state
+    if (!run && benchmarkRunId && !error) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Runs" },
+                        { label: "Loading...", active: true },
+                    ] }), _jsx(SpinnerComponent, { message: "Loading benchmark run details..." })] }));
+    }
+    // Show error state
+    if (error && !run) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Runs" },
+                        { label: "Error", active: true },
+                    ] }), _jsx(ErrorMessage, { message: "Failed to load benchmark run details", error: error })] }));
+    }
+    // Show not found error
+    if (!run) {
+        return (_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: [
+                        { label: "Home" },
+                        { label: "Benchmarks" },
+                        { label: "Benchmark Runs" },
+                        { label: "Not Found", active: true },
+                    ] }), _jsx(ErrorMessage, { message: `Benchmark run ${benchmarkRunId || "unknown"} not found`, error: new Error("Benchmark run not found") })] }));
+    }
+    // Build detail sections
+    const detailSections = [];
+    // Basic details section
+    const basicFields = [];
+    if (run.start_time_ms) {
+        basicFields.push({
+            label: "Started",
+            value: formatTimestamp(run.start_time_ms),
+        });
+    }
+    const endTimeMs = run.start_time_ms && run.duration_ms
+        ? run.start_time_ms + run.duration_ms
+        : undefined;
+    if (endTimeMs) {
+        basicFields.push({
+            label: "Ended",
+            value: formatTimestamp(endTimeMs),
+        });
+    }
+    if (run.benchmark_id) {
+        basicFields.push({
+            label: "Benchmark ID",
+            value: _jsx(Text, { color: colors.idColor, children: run.benchmark_id }),
+        });
+    }
+    if (run.score !== undefined && run.score !== null) {
+        basicFields.push({
+            label: "Score",
+            value: _jsx(Text, { color: colors.info, children: run.score }),
+        });
+    }
+    if (basicFields.length > 0) {
+        detailSections.push({
+            title: "Details",
+            icon: figures.squareSmallFilled,
+            color: colors.warning,
+            fields: basicFields,
+        });
+    }
+    // Metadata section
+    if (run.metadata && Object.keys(run.metadata).length > 0) {
+        const metadataFields = Object.entries(run.metadata).map(([key, value]) => ({
+            label: key,
+            value: value,
+        }));
+        detailSections.push({
+            title: "Metadata",
+            icon: figures.identical,
+            color: colors.secondary,
+            fields: metadataFields,
+        });
+    }
+    // Operations available for benchmark runs
+    const operations = [
+        {
+            key: "view-scenarios",
+            label: "View Scenario Runs",
+            color: colors.info,
+            icon: figures.arrowRight,
+            shortcut: "s",
+        },
+    ];
+    // Handle operation selection
+    const handleOperation = async (operation, resource) => {
+        switch (operation) {
+            case "view-scenarios":
+                navigate("scenario-run-list", { benchmarkRunId: resource.id });
+                break;
+        }
+    };
+    // Build detailed info lines for full details view
+    const buildDetailLines = (r) => {
+        const lines = [];
+        // Core Information
+        lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Benchmark Run Details" }, "core-title"));
+        lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "ID: ", r.id] }, "core-id"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Name: ", r.name || "(none)"] }, "core-name"));
+        lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Status: ", r.state] }, "core-status"));
+        if (r.benchmark_id) {
+            lines.push(_jsxs(Text, { color: colors.idColor, children: [" ", "Benchmark ID: ", r.benchmark_id] }, "core-benchmark"));
+        }
+        if (r.start_time_ms) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Started: ", new Date(r.start_time_ms).toLocaleString()] }, "core-created"));
+        }
+        const detailEndTimeMs = r.start_time_ms && r.duration_ms
+            ? r.start_time_ms + r.duration_ms
+            : undefined;
+        if (detailEndTimeMs) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Ended: ", new Date(detailEndTimeMs).toLocaleString()] }, "core-ended"));
+        }
+        if (r.score !== undefined && r.score !== null) {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", "Score: ", r.score] }, "core-score"));
+        }
+        lines.push(_jsx(Text, { children: " " }, "core-space"));
+        // Metadata
+        if (r.metadata && Object.keys(r.metadata).length > 0) {
+            lines.push(_jsx(Text, { color: colors.warning, bold: true, children: "Metadata" }, "meta-title"));
+            Object.entries(r.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(r, null, 2).split("\n");
+        jsonLines.forEach((line, idx) => {
+            lines.push(_jsxs(Text, { dimColor: true, children: [" ", line] }, `json-${idx}`));
+        });
+        return lines;
+    };
+    // Check if run is still in progress for polling
+    const isRunning = run.state === "running";
+    return (_jsx(ResourceDetailPage, { resource: run, resourceType: "Benchmark Runs", getDisplayName: (r) => r.name || r.id, getId: (r) => r.id, getStatus: (r) => r.state, detailSections: detailSections, operations: operations, onOperation: handleOperation, onBack: goBack, buildDetailLines: buildDetailLines, pollResource: isRunning ? pollRun : undefined, breadcrumbPrefix: [{ label: "Home" }, { label: "Benchmarks" }] }));
+}