@outputai/cli 0.3.2-next.5e221e8.0 → 0.3.3-dev.422151e.0

package/dist/views/dev/utils/panel_helpers.spec.js

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { truncate, formatStartedShort, computeWindowStart } from './panel_helpers.js';
+describe('truncate', () => {
+    it('returns the input unchanged when shorter than max', () => {
+        expect(truncate('short', 10)).toBe('short');
+    });
+    it('returns the input unchanged when exactly equal to max', () => {
+        expect(truncate('abcde', 5)).toBe('abcde');
+    });
+    it('replaces the last character with an ellipsis when too long', () => {
+        expect(truncate('abcdefgh', 5)).toBe('abcd…');
+    });
+    it('handles empty input', () => {
+        expect(truncate('', 4)).toBe('');
+    });
+});
+describe('formatStartedShort', () => {
+    it('returns `-` when the input is undefined', () => {
+        expect(formatStartedShort(undefined)).toBe('-');
+    });
+    it('returns `-` when the input is empty', () => {
+        expect(formatStartedShort('')).toBe('-');
+    });
+    it('returns `-` when the input is unparseable', () => {
+        expect(formatStartedShort('not-an-iso')).toBe('-');
+    });
+    it('formats a valid ISO timestamp into `MMM d HH:mm`', () => {
+        expect(formatStartedShort('2026-04-28T18:56:53Z')).toMatch(/^Apr 28 \d{2}:\d{2}$/);
+    });
+});
+describe('computeWindowStart', () => {
+    it('centres the selected row in the viewport when possible', () => {
+        expect(computeWindowStart(10, 30, 8)).toBe(6);
+    });
+    it('clamps to 0 when the selected row is near the top', () => {
+        expect(computeWindowStart(1, 30, 8)).toBe(0);
+    });
+    it('clamps so the window never runs off the end', () => {
+        expect(computeWindowStart(28, 30, 8)).toBe(22);
+    });
+    it('returns 0 when the list is shorter than the viewport', () => {
+        expect(computeWindowStart(2, 5, 8)).toBe(0);
+    });
+    it('returns 0 for an empty list', () => {
+        expect(computeWindowStart(0, 0, 8)).toBe(0);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outputai/cli",
-  "version": "0.3.2-next.5e221e8.0",
+  "version": "0.3.3-dev.422151e.0",
   "description": "CLI for Output.ai workflow generation",
   "type": "module",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "debug": "4.4.3",
     "dotenv": "17.4.2",
     "handlebars": "4.7.9",
-    "ink": "6.8.0",
+    "ink": "7.0.1",
     "ink-spinner": "5.0.0",
     "js-yaml": "4.1.1",
     "json-schema-library": "11.4.0",
@@ -36,9 +36,9 @@
     "semver": "7.7.4",
     "undici": "8.1.0",
     "yaml": "^2.8.3",
-    "@outputai/credentials": "0.3.2-next.5e221e8.0",
-    "@outputai/evals": "0.3.2-next.5e221e8.0",
-    "@outputai/llm": "0.3.2-next.5e221e8.0"
+    "@outputai/credentials": "0.3.3-dev.422151e.0",
+    "@outputai/llm": "0.3.3-dev.422151e.0",
+    "@outputai/evals": "0.3.3-dev.422151e.0"
   },
   "devDependencies": {
     "@types/cli-progress": "3.11.6",

package/dist/components/command_footer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface CommandHint {
-    key: string;
-    label: string;
-}
-export declare const CommandFooter: React.FC<{
-    hints: CommandHint[];
-}>;

package/dist/components/command_footer.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text } from 'ink';
-export const CommandFooter = ({ hints }) => (_jsx(Box, { marginTop: 1, children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: ' | ' }), _jsx(Text, { dimColor: true, children: '(' }), _jsx(Text, { dimColor: true, bold: true, children: hint.key }), _jsx(Text, { dimColor: true, children: ')' }), _jsx(Text, { dimColor: true, children: ` ${hint.label}` })] }, hint.key))) }));

package/dist/components/workflow_summary.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface WorkflowSummary {
-    running: number;
-    completed: number;
-    failed: number;
-    total: number;
-}
-export declare const WorkflowSummarySection: React.FC<{
-    summary: WorkflowSummary;
-}>;

package/dist/components/workflow_summary.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { statusColor } from '#components/status_icon.js';
-export const WorkflowSummarySection = ({ summary }) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "\uD83D\uDCCB Workflows" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: statusColor('running'), children: [summary.running, " running"] }), _jsx(Text, { children: ", " }), _jsxs(Text, { color: statusColor('failed'), children: [summary.failed, " failed"] }), _jsx(Text, { children: ", " }), _jsxs(Text, { color: statusColor('completed'), children: [summary.completed, " complete"] })] })] }));

package/dist/views/dev.js

@@ -1,187 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { Box, Text, Static, useApp, useInput } from 'ink';
-import Spinner from 'ink-spinner';
-import { getServiceStatus, isServiceHealthy, isServiceFailed, SERVICE_HEALTH } from '#services/docker.js';
-import { config } from '#config.js';
-import { fetchWorkflowRuns } from '#services/workflow_runs.js';
-import { openUrl } from '#utils/open_url.js';
-import { StatusIcon } from '#components/status_icon.js';
-import { WorkflowSummarySection } from '#components/workflow_summary.js';
-import { CommandFooter } from '#components/command_footer.js';
-import { WorkflowListView } from '#views/workflow/list.js';
-const POLL_INTERVAL_MS = 2000;
-const HEALTH_TIMEOUT_MS = 120_000;
-const resolveServiceStatus = (service) => service.health === SERVICE_HEALTH.NONE ? service.state : service.health;
-const fetchServices = async (dockerComposePath) => {
-    try {
-        return await getServiceStatus(dockerComposePath);
-    }
-    catch {
-        return null;
-    }
-};
-const usePoll = (enabled, onTick) => {
-    const onTickRef = useRef(onTick);
-    onTickRef.current = onTick;
-    useEffect(() => {
-        const state = {
-            active: true,
-            timeout: undefined
-        };
-        const run = async () => {
-            if (!state.active) {
-                return;
-            }
-            const result = await onTickRef.current();
-            if (!state.active || result === 'done') {
-                return;
-            }
-            state.timeout = setTimeout(run, POLL_INTERVAL_MS);
-        };
-        if (enabled) {
-            void run();
-        }
-        return () => {
-            state.active = false;
-            clearTimeout(state.timeout);
-        };
-    }, [enabled]);
-};
-const useHealthPolling = (dockerComposePath, enabled, callbacks) => {
-    const callbacksRef = useRef(callbacks);
-    callbacksRef.current = callbacks;
-    const startTimeRef = useRef(Date.now());
-    usePoll(enabled, async () => {
-        if (Date.now() - startTimeRef.current > HEALTH_TIMEOUT_MS) {
-            callbacksRef.current.onTimeout();
-            return 'done';
-        }
-        const svcs = await fetchServices(dockerComposePath);
-        if (svcs === null) {
-            return 'continue';
-        }
-        callbacksRef.current.onServices(svcs);
-        if (svcs.length > 0 && svcs.every(isServiceHealthy)) {
-            callbacksRef.current.onAllHealthy(svcs);
-            return 'done';
-        }
-        if (svcs.length > 0 && svcs.find(isServiceFailed)) {
-            callbacksRef.current.onFailure(svcs);
-            return 'done';
-        }
-        return 'continue';
-    });
-};
-const useStatusRefresh = (dockerComposePath, enabled, onServices) => {
-    const onServicesRef = useRef(onServices);
-    onServicesRef.current = onServices;
-    usePoll(enabled, async () => {
-        const svcs = await fetchServices(dockerComposePath);
-        if (svcs !== null) {
-            onServicesRef.current(svcs);
-        }
-        return 'continue';
-    });
-};
-const useWorkflowPolling = (enabled, onRuns) => {
-    const onRunsRef = useRef(onRuns);
-    onRunsRef.current = onRuns;
-    usePoll(enabled, async () => {
-        try {
-            const { runs } = await fetchWorkflowRuns({ limit: 100 });
-            onRunsRef.current(runs);
-        }
-        catch {
-            // API may not be ready yet
-        }
-        return 'continue';
-    });
-};
-const useMainViewInput = (isActive, callbacks) => {
-    const callbacksRef = useRef(callbacks);
-    callbacksRef.current = callbacks;
-    useInput(input => {
-        if (input === 'o') {
-            callbacksRef.current.onOpenTemporal();
-        }
-        if (input === 'w') {
-            callbacksRef.current.onOpenWorkflows();
-        }
-    }, { isActive });
-};
-const useCtrlC = (onCleanup) => {
-    const { exit } = useApp();
-    const isExitingRef = useRef(false);
-    useInput((input, key) => {
-        if (key.ctrl && input === 'c' && !isExitingRef.current) {
-            isExitingRef.current = true;
-            void onCleanup().then(() => exit()).catch(err => exit(err instanceof Error ? err : new Error(String(err))));
-        }
-    });
-};
-const ServiceRow = ({ service }) => {
-    const status = resolveServiceStatus(service);
-    const ports = service.ports.length ? service.ports.join(', ') : '-';
-    return (_jsxs(Box, { children: [_jsx(Box, { width: 3, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: 16, children: _jsx(Text, { children: service.name }) }), _jsx(Text, { dimColor: true, children: status.padEnd(10) }), _jsx(Text, { dimColor: true, children: ports })] }));
-};
-const FailureWarning = ({ services }) => {
-    const failed = services.filter(isServiceFailed);
-    if (failed.length === 0) {
-        return null;
-    }
-    const failedNames = failed.map(s => s.name).join(', ');
-    const hasWorker = failed.some(s => s.name.toLowerCase().includes('worker'));
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { children: _jsx(Text, { backgroundColor: "red", color: "white", bold: true, children: " \u26A0\uFE0F  SERVICE FAILURE DETECTED " }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "red", bold: true, children: "Failed services: " }), _jsx(Text, { children: failedNames })] }), hasWorker ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "\u26A1 The worker is not running!" }), _jsx(Text, { color: "yellow", children: '   Workflows will fail until the worker is restarted.' }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { children: ["\uD83D\uDD0D Check the logs with: ", _jsx(Text, { color: "magenta", children: "docker compose logs worker" })] }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { children: ["\uD83D\uDD27 If you just updated ", _jsx(Text, { italic: true, children: "@outputai/cli" }), ", try: ", _jsx(Text, { color: "magenta", children: "output fix" })] }) })] })) : (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["\uD83D\uDD0D Check the logs with: ", _jsx(Text, { color: "magenta", children: "docker compose logs <service-name>" })] }) }))] }));
-};
-const DevSuccessMessage = ({ services }) => {
-    const divider = '─'.repeat(80);
-    const sortedNames = services.map(s => s.name).sort().join('|');
-    const logsCommand = `docker compose -p ${config.dockerServiceName} logs -f <${sortedNames}>`;
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: '✅ SUCCESS! ' }), _jsx(Text, { bold: true, children: "Development services are running" })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\uD83D\uDC33 SERVICES" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Temporal UI: ' }), _jsx(Text, { color: "cyan", children: config.temporalUiUrl })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'API Server:  ' }), _jsxs(Text, { color: "yellow", children: ["localhost:", config.ports.api] })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\uD83D\uDE80 RUN A WORKFLOW" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsx(Text, { color: "white", children: "In a new terminal, execute:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "cyan", children: "npx output workflow run blog_evaluator paulgraham_hwh" }) })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\u26A1 USEFUL COMMANDS" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Open Temporal UI: ' }), _jsxs(Text, { color: "cyan", children: ["open ", config.temporalUiUrl] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'View logs:        ' }), _jsx(Text, { color: "cyan", children: logsCommand })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Stop services:    ' }), _jsx(Text, { color: "cyan", children: "Press Ctrl+C" })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Text, { dimColor: true, children: "\uD83D\uDCA1 Tip: The Temporal UI lets you monitor workflow executions in real-time" })] }));
-};
-const WaitingView = ({ services }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Waiting for services to become healthy..." })] }), services.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: services.map(s => _jsx(ServiceRow, { service: s }, s.name)) }))] }));
-const RunningView = ({ services, workflowSummary }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "\uD83D\uDCCA Service Status" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: services.map(s => _jsx(ServiceRow, { service: s }, s.name)) }), _jsx(FailureWarning, { services: services }), workflowSummary && _jsx(WorkflowSummarySection, { summary: workflowSummary }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: '🌐 Temporal UI: ' }), _jsx(Text, { bold: true, children: config.temporalUiUrl })] }), _jsx(CommandFooter, { hints: [
-                { key: 'o', label: 'open ui' },
-                { key: 'w', label: 'view workflow runs' },
-                { key: 'ctrl+c', label: 'stop' }
-            ] })] }));
-const MainDevView = ({ phase, services, workflowSummary }) => {
-    if (phase === 'waiting') {
-        return _jsx(WaitingView, { services: services });
-    }
-    return _jsx(RunningView, { services: services, workflowSummary: workflowSummary });
-};
-export const DevApp = ({ dockerComposePath, onCleanup }) => {
-    const { exit } = useApp();
-    const [phase, setPhase] = useState('waiting');
-    const [services, setServices] = useState([]);
-    const [successItems, setSuccessItems] = useState([]);
-    const [activeView, setActiveView] = useState('main');
-    const [workflowRuns, setWorkflowRuns] = useState([]);
-    useHealthPolling(dockerComposePath, phase === 'waiting', {
-        onServices: setServices,
-        onAllHealthy: svcs => {
-            setSuccessItems([{ id: 'success', services: svcs }]);
-            setPhase('running');
-        },
-        onFailure: () => {
-            setPhase('failed');
-        },
-        onTimeout: () => exit(new Error('Timeout waiting for services to become healthy'))
-    });
-    useStatusRefresh(dockerComposePath, phase === 'running', setServices);
-    useWorkflowPolling(phase === 'running' || phase === 'failed', setWorkflowRuns);
-    useMainViewInput(activeView === 'main' && phase !== 'waiting', {
-        onOpenTemporal: () => openUrl(config.temporalUiUrl),
-        onOpenWorkflows: () => setActiveView('workflows')
-    });
-    useCtrlC(onCleanup);
-    const workflowSummary = workflowRuns.length > 0 ? {
-        running: workflowRuns.filter(r => r.status === 'running').length,
-        completed: workflowRuns.filter(r => r.status === 'completed').length,
-        failed: workflowRuns.filter(r => r.status === 'failed').length,
-        total: workflowRuns.length
-    } : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: successItems, children: item => _jsx(DevSuccessMessage, { services: item.services }, item.id) }), _jsxs(Box, { flexDirection: "column", children: [activeView === 'main' && (_jsx(MainDevView, { phase: phase, services: services, workflowSummary: workflowSummary })), activeView === 'workflows' && (_jsx(WorkflowListView, { runs: workflowRuns, onBack: () => setActiveView('main') }))] })] }));
-};

package/dist/views/workflow/list.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { WorkflowRun } from '#services/workflow_runs.js';
-export declare const WorkflowListView: React.FC<{
-    runs: WorkflowRun[];
-    onBack: () => void;
-}>;

package/dist/views/workflow/list.js

@@ -1,129 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
-import Spinner from 'ink-spinner';
-import { getWorkflowIdRunsRidResult } from '#api/generated/api.js';
-import { StatusIcon, statusColor } from '#components/status_icon.js';
-import { elapsedMs, formatDurationCompact } from '#utils/date_formatter.js';
-import { CommandFooter } from '#components/command_footer.js';
-import { openUrl } from '#utils/open_url.js';
-import { config } from '#config.js';
-const VISIBLE_ROWS = 15;
-const STATUS_ORDER = {
-    running: 0,
-    failed: 1,
-    timed_out: 2,
-    terminated: 3,
-    canceled: 4,
-    continued: 5,
-    completed: 6
-};
-const sortRuns = (runs) => [...runs].sort((a, b) => {
-    const statusDiff = (STATUS_ORDER[a.status ?? ''] ?? Infinity) - (STATUS_ORDER[b.status ?? ''] ?? Infinity);
-    if (statusDiff !== 0) {
-        return statusDiff;
-    }
-    const aTime = a.startedAt ? new Date(a.startedAt).getTime() : 0;
-    const bTime = b.startedAt ? new Date(b.startedAt).getTime() : 0;
-    return bTime - aTime;
-});
-const truncate = (str, max) => str.length > max ? str.slice(0, max - 1) + '…' : str;
-const COL = {
-    indicator: 2,
-    icon: 3,
-    status: 12,
-    type: 20,
-    id: 32,
-    duration: 10
-};
-const WorkflowRow = ({ run, selected }) => {
-    const status = run.status ?? 'running';
-    const color = statusColor(status);
-    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
-    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { color: selected ? 'cyan' : undefined, bold: selected, children: selected ? '▸' : ' ' }) }), _jsx(Box, { width: COL.icon, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { color: color, children: status }) }), _jsx(Box, { width: COL.type, children: _jsx(Text, { bold: selected, children: truncate(run.workflowType ?? '-', COL.type - 2) }) }), _jsx(Box, { width: COL.id, children: _jsx(Text, { dimColor: !selected, children: truncate(run.workflowId ?? '-', COL.id - 2) }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) })] }));
-};
-const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: true, bold: true, children: "STATUS" }) }), _jsx(Box, { width: COL.type, children: _jsx(Text, { dimColor: true, bold: true, children: "TYPE" }) }), _jsx(Box, { width: COL.id, children: _jsx(Text, { dimColor: true, bold: true, children: "WORKFLOW ID" }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, bold: true, children: "DURATION" }) })] }));
-const WorkflowDetailPane = ({ detail, loading }) => {
-    if (loading) {
-        return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading details..." })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Status: " }), _jsx(Text, { color: statusColor(detail.status ?? ''), children: detail.status })] }), detail.error && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "red", children: "Error:" }), _jsx(Text, { color: "red", children: truncate(detail.error, 300) })] })), detail.output !== undefined && detail.output !== null && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Output:" }), _jsx(Text, { children: truncate(JSON.stringify(detail.output, null, 2), 400) })] }))] }));
-};
-export const WorkflowListView = ({ runs, onBack }) => {
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [detail, setDetail] = useState(null);
-    const [detailLoading, setDetailLoading] = useState(false);
-    const cacheRef = useRef(new Map());
-    const fetchIdRef = useRef(0);
-    const sortedRuns = useMemo(() => sortRuns(runs), [runs]);
-    const clampedIndex = Math.min(selectedIndex, Math.max(0, sortedRuns.length - 1));
-    const selectedRun = sortedRuns[clampedIndex];
-    const selectedWorkflowId = selectedRun?.workflowId;
-    const selectedRunId = selectedRun?.runId;
-    useEffect(() => {
-        if (clampedIndex !== selectedIndex) {
-            setSelectedIndex(clampedIndex);
-        }
-    }, [clampedIndex, selectedIndex]);
-    useEffect(() => {
-        if (!selectedWorkflowId || !selectedRunId) {
-            setDetail(null);
-            return;
-        }
-        const cacheKey = `${selectedWorkflowId}:${selectedRunId}`;
-        const cached = cacheRef.current.get(cacheKey);
-        if (cached) {
-            setDetail(cached);
-            setDetailLoading(false);
-            return;
-        }
-        const currentFetchId = ++fetchIdRef.current;
-        setDetailLoading(true);
-        getWorkflowIdRunsRidResult(selectedWorkflowId, selectedRunId)
-            .then(response => {
-            if (fetchIdRef.current !== currentFetchId) {
-                return;
-            }
-            const data = response.data;
-            cacheRef.current.set(cacheKey, data);
-            setDetail(data);
-            setDetailLoading(false);
-        })
-            .catch(() => {
-            if (fetchIdRef.current !== currentFetchId) {
-                return;
-            }
-            setDetail(null);
-            setDetailLoading(false);
-        });
-    }, [selectedWorkflowId, selectedRunId]);
-    useInput((input, key) => {
-        if (key.upArrow) {
-            setSelectedIndex(i => Math.max(0, i - 1));
-        }
-        else if (key.downArrow) {
-            setSelectedIndex(i => Math.min(sortedRuns.length - 1, i + 1));
-        }
-        else if (key.escape || input === 'q') {
-            onBack();
-        }
-        else if (input === 'o' && selectedWorkflowId) {
-            openUrl(`${config.temporalUiUrl}/namespaces/default/workflows/${selectedWorkflowId}`);
-        }
-    });
-    const windowStart = useMemo(() => {
-        const half = Math.floor(VISIBLE_ROWS / 2);
-        const start = Math.max(0, clampedIndex - half);
-        const maxStart = Math.max(0, sortedRuns.length - VISIBLE_ROWS);
-        return Math.min(start, maxStart);
-    }, [clampedIndex, sortedRuns.length]);
-    const visibleRuns = sortedRuns.slice(windowStart, windowStart + VISIBLE_ROWS);
-    if (sortedRuns.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Workflow Runs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No workflow runs found." }) }), _jsx(CommandFooter, { hints: [{ key: 'q', label: 'back' }] })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Workflow Runs (", sortedRuns.length, ")"] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(HeaderRow, {}), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more above"] }), visibleRuns.map((run, i) => (_jsx(WorkflowRow, { run: run, selected: windowStart + i === clampedIndex }, `${run.workflowId}-${run.startedAt}-${windowStart + i}`))), windowStart + VISIBLE_ROWS < sortedRuns.length && (_jsxs(Text, { dimColor: true, children: ["  \u2193 ", sortedRuns.length - windowStart - VISIBLE_ROWS, " more below"] }))] }), detail && _jsx(WorkflowDetailPane, { detail: detail, loading: detailLoading }), detailLoading && !detail && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading details..." })] })), _jsx(CommandFooter, { hints: [
-                    { key: '↑/↓', label: 'navigate' },
-                    { key: 'o', label: 'open in temporal' },
-                    { key: 'q', label: 'back' }
-                ] })] }));
-};