@outputai/cli 0.4.1-next.c0b98d8.0 → 0.4.1-next.d085dde.0

package/dist/views/dev/components/workflow_status.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface StatusDisplay {
+    icon: string;
+    color: string;
+}
+export declare const resolveWorkflowStatus: (status: string) => StatusDisplay;
+export declare const workflowStatusColor: (status: string) => string;
+/** Renders workflow, run, and step status without Docker status semantics. */
+export declare const WorkflowStatusIcon: React.FC<{
+    status: string;
+}>;
+export {};

package/dist/views/dev/components/workflow_status.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+const WORKFLOW_STATUS_MAP = {
+    running: { icon: '●', color: 'yellow' },
+    completed: { icon: '●', color: 'green' },
+    failed: { icon: '✗', color: 'red' },
+    canceled: { icon: '○', color: 'gray' },
+    terminated: { icon: '✗', color: 'gray' },
+    timed_out: { icon: '✗', color: 'red' },
+    continued: { icon: '↻', color: 'blue' }
+};
+const DEFAULT_DISPLAY = { icon: '?', color: 'white' };
+export const resolveWorkflowStatus = (status) => WORKFLOW_STATUS_MAP[status] ?? DEFAULT_DISPLAY;
+export const workflowStatusColor = (status) => resolveWorkflowStatus(status).color;
+/** Renders workflow, run, and step status without Docker status semantics. */
+export const WorkflowStatusIcon = ({ status }) => {
+    const { icon, color } = resolveWorkflowStatus(status);
+    return _jsx(Text, { color: color, children: icon });
+};

package/dist/views/dev/dev_app.js

@@ -1,28 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, useApp, useInput, useStdout } from 'ink';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { isServiceFailed, isServiceHealthy } from '#services/docker.js';
-import { openUrl } from '#utils/open_url.js';
 import { useHealthPolling, useStatusRefresh, useWorkflowRunsPolling } from '#views/dev/hooks/use_poll.js';
 import { useWorkflowCatalog } from '#views/dev/hooks/use_workflow_catalog.js';
-import { Header, buildSummaryCounters } from '#views/dev/chrome/header.js';
-import { TabBar } from '#views/dev/chrome/tab_bar.js';
-import { SearchBar } from '#views/dev/chrome/search_bar.js';
-import { Toasts } from '#views/dev/chrome/toasts.js';
-import { HorizontalRule } from '#views/dev/chrome/divider.js';
+import { Header, buildSummaryCounters, getHeight as getHeaderHeight } from '#views/dev/chrome/header.js';
+import { TabBar, getHeight as getTabBarHeight } from '#views/dev/chrome/tab_bar.js';
+import { SearchBar, useHeight as useSearchBarHeight } from '#views/dev/chrome/search_bar.js';
+import { Toasts, useHeight as useToastsHeight } from '#views/dev/chrome/toasts.js';
+import { Footer, getHeight as getFooterHeight } from '#views/dev/chrome/footer.js';
+import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
 import { UiStateProvider, useUiState } from '#views/dev/state/ui_state.js';
-import { WorkflowsPanel } from '#views/dev/panels/workflows_panel.js';
-import { RunsPanel } from '#views/dev/panels/runs_panel.js';
-import { ServicesPanel } from '#views/dev/panels/services_panel.js';
-import { HelpPanel } from '#views/dev/panels/help_panel.js';
+import { WorkflowsPanel, WORKFLOWS_HINTS, WORKFLOWS_LOADING_HINTS, buildVisibleWorkflows } from '#views/dev/panels/workflows_panel.js';
+import { RunsPanel, RUNS_EMPTY_HINTS, RUNS_HINTS, buildVisibleRuns } from '#views/dev/panels/runs_panel.js';
+import { ServicesPanel, SERVICES_BOOT_HINTS, SERVICES_HINTS } from '#views/dev/panels/services_panel.js';
+import { HELP_HINTS, HELP_SECTION_COUNT, HelpPanel } from '#views/dev/panels/help_panel.js';
 import { RunModal } from '#views/dev/modals/run_modal.js';
 import { ExpandedJsonModal } from '#views/dev/modals/expanded_json_modal.js';
+import { StepsModal } from '#views/dev/modals/steps_modal.js';
+import { MIN_TERMINAL_COLUMNS, MIN_TERMINAL_ROWS } from '#views/dev/utils/constants.js';
 const TAB_NUMBER_KEYS = {
     1: 'workflows',
     2: 'runs',
     3: 'services',
     4: 'help'
 };
+const getContentRows = (opts) => {
+    return Math.max(1, opts.rows -
+        getHeaderHeight(opts.rows) -
+        getTabBarHeight() -
+        opts.searchHeight -
+        opts.toastsHeight -
+        getFooterHeight());
+};
+const useTerminalSize = () => {
+    const { stdout } = useStdout();
+    const readSize = () => ({
+        rows: stdout?.rows ?? 60,
+        cols: stdout?.columns ?? 80
+    });
+    const [size, setSize] = useState(readSize);
+    useEffect(() => {
+        const update = () => setSize(readSize());
+        update();
+        stdout?.on('resize', update);
+        return () => {
+            stdout?.off('resize', update);
+        };
+    }, [stdout]);
+    return size;
+};
+const TerminalTooSmall = ({ rows, cols }) => (_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, children: [_jsx(Text, { bold: true, children: "Terminal too small for Output dev UI." }), _jsxs(Text, { dimColor: true, children: ["Resize to at least ", MIN_TERMINAL_COLUMNS, "x", MIN_TERMINAL_ROWS, " characters. Current size: ", cols, "x", rows, "."] })] }));
 const useGlobalInput = (opts) => {
     const ui = useUiState();
     const { exit } = useApp();
@@ -37,7 +65,7 @@ const useGlobalInput = (opts) => {
                 .catch(err => exit(err instanceof Error ? err : new Error(String(err))));
             return;
         }
-        if (ui.search.open || ui.runModal.open || ui.expandedJson.open) {
+        if (ui.search.open || ui.runModal.open || ui.expandedJson.open || opts.runDetailOpen) {
             return;
         }
         // Esc on a list view drops an active filter. Skip when we're on
@@ -45,19 +73,10 @@ const useGlobalInput = (opts) => {
         // to the list and the filter should still apply when we land
         // there. The search bar's esc (close + clear) returns above, so
         // it never reaches this branch.
-        if (key.escape && ui.search.query && ui.runsView === 'list') {
+        if (key.escape && ui.search.query && !opts.runDetailOpen) {
             ui.clearSearch();
             return;
         }
-        // Switching tabs is treated as leaving the current view, so any
-        // active filter goes with it. App-driven setTab calls (e.g. the
-        // run modal pre-filtering Recent Runs to a workflow) bypass this
-        // path on purpose.
-        if (key.tab || (input && TAB_NUMBER_KEYS[input])) {
-            if (ui.search.query) {
-                ui.clearSearch();
-            }
-        }
         if (key.tab && key.shift) {
             ui.prevTab();
             return;
@@ -78,9 +97,6 @@ const useGlobalInput = (opts) => {
             ui.setTab(TAB_NUMBER_KEYS[input]);
             return;
         }
-        if (input === 'o' && ui.tab === 'services') {
-            openUrl('http://localhost:8080');
-        }
     });
 };
 const computeWorkflowSummary = (runs) => {
@@ -94,6 +110,40 @@ const computeWorkflowSummary = (runs) => {
         total: runs.length
     };
 };
+const footerFor = (opts) => {
+    if (opts.ui.tab === 'workflows') {
+        if (opts.workflowCount === 0) {
+            return { hints: WORKFLOWS_LOADING_HINTS };
+        }
+        return { hints: WORKFLOWS_HINTS, itemCount: opts.visibleWorkflowCount, itemLabel: 'workflows' };
+    }
+    if (opts.ui.tab === 'runs') {
+        if (opts.runCount === 0) {
+            return { hints: RUNS_EMPTY_HINTS };
+        }
+        return { hints: RUNS_HINTS, itemCount: opts.visibleRunCount, itemLabel: 'runs' };
+    }
+    if (opts.ui.tab === 'services') {
+        return {
+            hints: opts.phase === 'waiting' && opts.serviceCount === 0 ? SERVICES_BOOT_HINTS : SERVICES_HINTS,
+            itemCount: opts.serviceCount,
+            itemLabel: 'services'
+        };
+    }
+    return { hints: HELP_HINTS, itemCount: HELP_SECTION_COUNT, itemLabel: 'sections' };
+};
+const overlayFor = (opts) => {
+    if (opts.ui.expandedJson.open) {
+        return _jsx(ExpandedJsonModal, {});
+    }
+    if (opts.ui.runModal.open) {
+        return _jsx(RunModal, { workflowName: opts.ui.runModal.workflowName, workflowPath: opts.ui.runModal.workflowPath });
+    }
+    if (opts.ui.tab === 'runs' && opts.runDetailOpen && opts.detailRun) {
+        return _jsx(StepsModal, { run: opts.detailRun, height: opts.rows });
+    }
+    return null;
+};
 const Shell = ({ dockerComposePath, onCleanup }) => {
     const { exit } = useApp();
     const ui = useUiState();
@@ -120,8 +170,14 @@ const Shell = ({ dockerComposePath, onCleanup }) => {
             setTab('workflows');
         }
     }, [phase, workflows.length, ui.tab, setTab]);
-    useGlobalInput({ onCleanup });
     const summary = useMemo(() => computeWorkflowSummary(runs), [runs]);
+    const visibleWorkflows = useMemo(() => buildVisibleWorkflows(workflows, ui.search.query), [workflows, ui.search.query]);
+    const visibleRuns = useMemo(() => buildVisibleRuns(runs, ui.search.query), [runs, ui.search.query]);
+    const detailRun = ui.runsView === 'detail' ?
+        runs.find(r => r.runId === ui.selection.runId && r.workflowId === ui.selection.workflowId) :
+        undefined;
+    const runDetailOpen = ui.runsView === 'detail' && detailRun !== undefined;
+    useGlobalInput({ onCleanup, runDetailOpen });
     const failingServices = useMemo(() => services.filter(isServiceFailed).length, [services]);
     const serviceBadge = useMemo(() => {
         if (failingServices > 0) {
@@ -136,11 +192,31 @@ const Shell = ({ dockerComposePath, onCleanup }) => {
     // `stdout.rows` is undefined on a small set of TTYs (mostly piped envs).
     // 60 is a generous default — chrome alone is ~10 rows, and run-detail
     // wants ~25 of content, so anything below 40 starts to clip step rows.
-    const { stdout } = useStdout();
-    const rows = stdout?.rows ?? 60;
-    if (ui.expandedJson.open) {
-        return (_jsx(Box, { flexDirection: "column", height: rows, paddingX: 2, paddingTop: 1, children: _jsx(ExpandedJsonModal, {}) }));
+    const { rows, cols } = useTerminalSize();
+    const searchHeight = useSearchBarHeight();
+    const toastsHeight = useToastsHeight();
+    const terminalTooSmall = cols < MIN_TERMINAL_COLUMNS || rows < MIN_TERMINAL_ROWS;
+    const contentRows = getContentRows({
+        rows,
+        searchHeight,
+        toastsHeight
+    });
+    const footer = footerFor({
+        ui,
+        workflowCount: workflows.length,
+        visibleWorkflowCount: visibleWorkflows.length,
+        runCount: runs.length,
+        visibleRunCount: visibleRuns.length,
+        serviceCount: services.length,
+        phase
+    });
+    const overlay = overlayFor({ ui, detailRun, runDetailOpen, rows });
+    if (terminalTooSmall) {
+        return _jsx(TerminalTooSmall, { rows: rows, cols: cols });
+    }
+    if (overlay) {
+        return (_jsx(Box, { flexDirection: "column", height: rows, paddingX: 1, children: overlay }));
     }
-    return (_jsxs(Box, { flexDirection: "column", height: rows, paddingX: 2, paddingTop: 1, children: [_jsx(Header, { counters: counters }), _jsx(TabBar, { active: ui.tab }), _jsx(HorizontalRule, {}), _jsx(SearchBar, { active: ui.search.open }), _jsx(Toasts, {}), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [ui.tab === 'workflows' && !ui.runModal.open && _jsx(WorkflowsPanel, { workflows: workflows, runs: runs }), ui.tab === 'runs' && !ui.runModal.open && _jsx(RunsPanel, { runs: runs }), ui.tab === 'services' && !ui.runModal.open && (_jsx(ServicesPanel, { phase: phase, services: services, dockerComposePath: dockerComposePath })), ui.tab === 'help' && !ui.runModal.open && _jsx(HelpPanel, {}), ui.runModal.open && _jsx(RunModal, { workflowName: ui.runModal.workflowName, workflowPath: ui.runModal.workflowPath })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: rows, paddingX: 1, children: [_jsx(Header, { counters: counters }), _jsx(TabBar, { active: ui.tab, borderColor: RULE_PURPLE }), _jsx(SearchBar, { active: ui.search.open }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, height: contentRows, overflow: "hidden", children: [ui.tab === 'workflows' && _jsx(WorkflowsPanel, { workflows: workflows, runs: runs }), ui.tab === 'runs' && _jsx(RunsPanel, { runs: runs, height: contentRows }), ui.tab === 'services' && (_jsx(ServicesPanel, { height: contentRows, phase: phase, services: services, dockerComposePath: dockerComposePath })), ui.tab === 'help' && _jsx(HelpPanel, {})] }), _jsx(Toasts, {}), _jsx(Footer, { hints: footer.hints, itemCount: footer.itemCount, itemLabel: footer.itemLabel })] }));
 };
 export const DevApp = ({ dockerComposePath, onCleanup }) => (_jsx(UiStateProvider, { children: _jsx(Shell, { dockerComposePath: dockerComposePath, onCleanup: onCleanup }) }));

package/dist/views/dev/hooks/use_run_detail.js

@@ -7,6 +7,7 @@ const EMPTY_DETAIL = {
     steps: [],
     loading: false
 };
+const runDetailCache = new Map();
 const stepNameOf = (node) => {
     if (node.name) {
         return node.name;
@@ -16,16 +17,13 @@ const stepNameOf = (node) => {
     return `${kind}#${leaf}`;
 };
 const stepStatusOf = (node) => {
-    if (node.status) {
-        return node.status;
-    }
-    if (node.phase === 'error' || node.error) {
+    if (node.phase === 'error' || node.error || node.status === 'failed') {
         return 'failed';
     }
-    if (node.phase === 'end') {
+    if (node.phase === 'end' || node.status === 'completed' || node.endedAt !== undefined) {
         return 'completed';
     }
-    return 'running';
+    return node.status ?? 'running';
 };
 const numericTimestamp = (...candidates) => {
     for (const candidate of candidates) {
@@ -106,7 +104,6 @@ const TERMINAL_STATUSES = new Set(['completed', 'failed', 'canceled', 'terminate
 export const isTerminalRunStatus = (status) => Boolean(status && TERMINAL_STATUSES.has(status));
 export const useRunDetail = (workflowId, runId, status) => {
     const [detail, setDetail] = useState(EMPTY_DETAIL);
-    const cacheRef = useRef(new Map());
     const fetchIdRef = useRef(0);
     useEffect(() => {
         if (!workflowId) {
@@ -116,7 +113,7 @@ export const useRunDetail = (workflowId, runId, status) => {
         // The cache only ever holds terminal-status entries (see below), so
         // a hit here is always safe to reuse without a network roundtrip.
         const key = `${workflowId}:${runId ?? 'latest'}`;
-        const cached = cacheRef.current.get(key);
+        const cached = runDetailCache.get(key);
         if (cached) {
             setDetail(cached);
             return;
@@ -140,7 +137,7 @@ export const useRunDetail = (workflowId, runId, status) => {
             // still running the API returns partial data; a follow-up status
             // change re-fires this effect and we re-fetch fresh.
             if (isTerminalRunStatus(result?.status)) {
-                cacheRef.current.set(key, next);
+                runDetailCache.set(key, next);
             }
             setDetail(next);
         });

package/dist/views/dev/hooks/use_run_detail.spec.js

@@ -45,6 +45,13 @@ describe('extractSteps', () => {
         expect(steps[0].status).toBe('failed');
         expect(steps[1].status).toBe('failed');
     });
+    it('maps buildTraceTree-style ended nodes to status=completed', () => {
+        const t = trace([
+            { name: 'done', kind: 'step', startedAt: 1000, endedAt: 1500, output: { ok: true } }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].status).toBe('completed');
+    });
     it('falls back to startTime/endTime for duration', () => {
         const t = trace([
             { phase: 'end', name: 'with-times', startTime: 1000, endTime: 1500 }

package/dist/views/dev/modals/expanded_json_modal.js

@@ -1,10 +1,10 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
+import { Text, useInput, useStdout } from 'ink';
 import { useUiState } from '#views/dev/state/ui_state.js';
 import { JsonView, countJsonLines } from '#views/dev/utils/json_render.js';
-import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
-const CHROME_HEIGHT = 4;
+import { ModalFrame } from '#views/dev/modals/modal_frame.js';
+const CHROME_HEIGHT = 6;
 const FALLBACK_ROWS = 24;
 const PAGE_SIZE = 10;
 export const ExpandedJsonModal = () => {
@@ -13,7 +13,6 @@ export const ExpandedJsonModal = () => {
     const [offset, setOffset] = useState(0);
     const { value, title } = ui.expandedJson;
     const totalLines = countJsonLines(value);
-    const cols = stdout?.columns ?? 80;
     const rows = stdout?.rows ?? FALLBACK_ROWS;
     const visibleLines = Math.max(5, rows - CHROME_HEIGHT);
     const maxOffset = Math.max(0, totalLines - visibleLines);
@@ -40,5 +39,5 @@ export const ExpandedJsonModal = () => {
         }
     });
     const progress = totalLines === 0 ? 100 : Math.round(((clampedOffset + visibleLines) / totalLines) * 100);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { bold: true, children: ["\u2922  ", title] }), _jsxs(Text, { dimColor: true, children: [Math.min(100, progress), "%   line ", clampedOffset + 1, "-", Math.min(totalLines, clampedOffset + visibleLines), "/", totalLines] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RULE_PURPLE, children: '─'.repeat(Math.max(1, cols)) }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(JsonView, { value: value, maxLines: visibleLines, offset: clampedOffset, truncateLine: true, showOverflowFooter: false }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RULE_PURPLE, children: '─'.repeat(Math.max(1, cols)) }) }), _jsxs(Box, { columnGap: 2, children: [_jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "\u2191/\u2193" }), _jsx(Text, { dimColor: true, children: "scroll" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "pgup/pgdn" }), _jsx(Text, { dimColor: true, children: "page" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: "close" })] })] })] }));
+    return (_jsx(ModalFrame, { title: title, titleRight: (_jsxs(Text, { dimColor: true, children: [Math.min(100, progress), "%   line ", clampedOffset + 1, "-", Math.min(totalLines, clampedOffset + visibleLines), "/", totalLines] })), shortcuts: [['↑/↓', 'scroll'], ['pgup/pgdn', 'page'], ['esc', 'close']], children: _jsx(JsonView, { value: value, maxLines: visibleLines, offset: clampedOffset, truncateLine: true, showOverflowFooter: false }) }));
 };

package/dist/views/dev/modals/modal_frame.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const getHeight: () => number;
+export type ModalShortcut = readonly [key: string, label: string] | {
+    key: string;
+    label: string;
+};
+export declare const ModalFrame: React.FC<{
+    title: string;
+    titleRight?: React.ReactNode;
+    footer?: React.ReactNode;
+    shortcuts?: readonly ModalShortcut[];
+    children: React.ReactNode;
+}>;

package/dist/views/dev/modals/modal_frame.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
+const FRAME_BORDER_ROWS = 2;
+const FRAME_TITLE_ROWS = 1;
+const FRAME_FOOTER_ROWS = 1;
+const FRAME_GAP_ROWS = 2;
+export const getHeight = () => FRAME_BORDER_ROWS + FRAME_TITLE_ROWS + FRAME_FOOTER_ROWS + FRAME_GAP_ROWS;
+const isShortcutTuple = (shortcut) => Array.isArray(shortcut);
+const shortcutKey = (shortcut) => isShortcutTuple(shortcut) ? shortcut[0] : shortcut.key;
+const shortcutLabel = (shortcut) => isShortcutTuple(shortcut) ? shortcut[1] : shortcut.label;
+const ModalShortcutList = ({ shortcuts }) => (_jsx(Box, { columnGap: 2, children: shortcuts.map(shortcut => (_jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: shortcutKey(shortcut) }), _jsx(Text, { dimColor: true, children: shortcutLabel(shortcut) })] }, shortcutKey(shortcut)))) }));
+export const ModalFrame = ({ title, titleRight, footer, shortcuts, children }) => (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: RULE_PURPLE, paddingX: 1, gap: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { bold: true, children: title }), titleRight] }), _jsx(Box, { flexDirection: "column", children: children }), shortcuts && shortcuts.length > 0 ? _jsx(ModalShortcutList, { shortcuts: shortcuts }) : footer] }));

package/dist/views/dev/modals/run_modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import Spinner from 'ink-spinner';
 import { listScenariosForWorkflow } from '#utils/scenario_resolver.js';
@@ -8,6 +8,7 @@ import { useUiState } from '#views/dev/state/ui_state.js';
 import { startWorkflow } from '#views/dev/services/run_workflow.js';
 import { readScenario, writeScenario } from '#views/dev/services/scenario_io.js';
 import { JsonEditor } from '#views/dev/utils/json_editor.js';
+import { ModalFrame } from '#views/dev/modals/modal_frame.js';
 const CUSTOM_SEED = { '': '' };
 const SCENARIO_NAME_RE = /^[a-zA-Z0-9_-]+$/;
 const buildEntries = (scenarios) => {
@@ -16,11 +17,24 @@ const buildEntries = (scenarios) => {
         label: s,
         scenarioName: s
     }));
-    list.push({ kind: 'custom', label: 'Custom input' });
+    list.push({ kind: 'custom', label: '[Create new scenario]' });
     return list;
 };
-const Frame = ({ title, children }) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", paddingX: 1, paddingY: 0, children: [_jsx(Text, { bold: true, children: title }), children] }));
-const TextPrompt = ({ label, value }) => (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { children: [label, " "] }), _jsx(Text, { children: value }), _jsx(Text, { inverse: true, children: ' ' })] }));
+const SELECT_SHORTCUTS = [
+    ['↑/↓', 'navigate'],
+    ['enter', 'run'],
+    ['d', 'duplicate'],
+    ['esc', 'cancel']
+];
+const NAME_SHORTCUTS = [
+    ['enter', 'next'],
+    ['esc', 'back']
+];
+const ERROR_SHORTCUTS = [
+    { key: 'enter', label: 'return' },
+    { key: 'esc', label: 'return' }
+];
+const TextPrompt = ({ label, value }) => (_jsxs(Box, { children: [_jsx(Text, { children: label }), _jsx(Text, { children: value }), _jsx(Text, { inverse: true, children: ' ' })] }));
 export const RunModal = ({ workflowName, workflowPath }) => {
     const ui = useUiState();
     const scenarios = useMemo(() => listScenariosForWorkflow(workflowName, workflowPath), [workflowName, workflowPath]);
@@ -192,22 +206,18 @@ export const RunModal = ({ workflowName, workflowPath }) => {
         }
     });
     if (mode === 'edit_content') {
-        return (_jsx(Frame, { title: `${editFrameTitle} → ${editName}.json`, children: _jsx(JsonEditor, { seed: editSeed, title: `${editName}.json`, isActive: true, onSubmit: value => {
+        return (_jsx(ModalFrame, { title: editFrameTitle, children: _jsx(JsonEditor, { seed: editSeed, title: `${editName}.json`, isActive: true, onSubmit: value => {
                     void handleEditorSubmit(value);
                 }, onCancel: handleEditorCancel }) }));
     }
     if (mode === 'edit_name') {
-        return (_jsxs(Frame, { title: editFrameTitle, children: [_jsx(TextPrompt, { label: "Scenario name:", value: editName }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : null, _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "enter" }), _jsx(Text, { children: " next   " }), _jsx(Text, { dimColor: true, children: "esc" }), _jsx(Text, { children: " back" })] })] }));
+        return (_jsxs(ModalFrame, { title: editFrameTitle, shortcuts: NAME_SHORTCUTS, children: [_jsx(TextPrompt, { label: "Scenario name:", value: editName }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : null] }));
     }
     if (mode === 'submitting') {
-        return (_jsx(Frame, { title: `Run ${workflowName}`, children: _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Starting workflow\u2026" })] }) }));
+        return (_jsxs(ModalFrame, { title: `Run ${workflowName}`, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: "\u00A0Starting workflow\u2026" })] }));
     }
     if (mode === 'error') {
-        return (_jsx(Frame, { title: `Run ${workflowName}`, children: _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "red", bold: true, children: ["\u2717 ", errorMessage ?? 'Something went wrong.'] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press enter or esc to return." }) })] }) }));
+        return (_jsx(ModalFrame, { title: `Run workflow "${workflowName}"`, shortcuts: ERROR_SHORTCUTS, children: _jsxs(Text, { color: "red", bold: true, children: ["\u2717 ", errorMessage ?? 'Something went wrong.'] }) }));
     }
-    return (_jsxs(Frame, { title: `Run ${workflowName}`, children: [entries.length === 0 ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No scenarios on disk. Choose Custom input." }) })) : (_jsx(Box, { flexDirection: "column", marginTop: 1, children: entries.map((entry, i) => {
-                    const prev = i > 0 ? entries[i - 1] : undefined;
-                    const showSeparator = prev?.kind === 'scenario' && entry.kind !== 'scenario';
-                    return (_jsxs(React.Fragment, { children: [showSeparator && (_jsx(Box, { marginY: 0, children: _jsx(Text, { dimColor: true, children: '─'.repeat(40) }) })), _jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, children: [' ', entry.label] })] })] }, `${entry.kind}-${entry.scenarioName ?? i}`));
-                }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "\u2191/\u2193" }), _jsx(Text, { children: " navigate   " }), _jsx(Text, { dimColor: true, children: "enter" }), _jsx(Text, { children: " run   " }), _jsx(Text, { dimColor: true, children: "d" }), _jsx(Text, { children: " duplicate   " }), _jsx(Text, { dimColor: true, children: "esc" }), _jsx(Text, { children: " cancel" })] })] }));
+    return (_jsx(ModalFrame, { title: `Run ${workflowName}`, shortcuts: SELECT_SHORTCUTS, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { dimColor: true, children: scenarios.length === 0 ? 'No scenarios found. Create a new one:' : 'Select scenarios:' }), _jsx(Box, { flexDirection: "column", children: entries.map((entry, i) => (_jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, children: ["\u00A0", entry.label] })] }, `${entry.kind}-${entry.scenarioName ?? i}`))) })] }) }));
 };

package/dist/views/dev/{panels/run_detail_view.d.ts → modals/steps_modal.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { WorkflowRun } from '#services/workflow_runs.js';
-export declare const RunDetailView: React.FC<{
+export declare const StepsModal: React.FC<{
     run: WorkflowRun;
+    height: number;
 }>;

package/dist/views/dev/modals/steps_modal.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { WorkflowStatusIcon } from '#views/dev/components/workflow_status.js';
+import { formatDurationCompact } from '#utils/date_formatter.js';
+import { TabBar, getHeight as getTabBarHeight } from '#views/dev/chrome/tab_bar.js';
+import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { useRunDetail } from '#views/dev/hooks/use_run_detail.js';
+import { JsonView } from '#views/dev/utils/json_render.js';
+import { cycleValue, formatContentTitle, truncate, useListSelection } from '#views/dev/utils/panel_helpers.js';
+import { RUN_DETAIL_VISIBLE_STEPS } from '#views/dev/utils/constants.js';
+import { ContentTitle, getHeight as getContentTitleHeight } from '#views/dev/components/content_title.js';
+import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
+import { ModalFrame, getHeight as getModalFrameHeight } from '#views/dev/modals/modal_frame.js';
+const RIGHT_PANE_ORDER = ['input', 'output', 'meta'];
+const RIGHT_PANE_TABS = [
+    { id: 'input', label: 'Input' },
+    { id: 'output', label: 'Output' },
+    { id: 'meta', label: 'Meta' }
+];
+const STEPS_MODAL_SHORTCUTS = [
+    ['↑/↓', 'navigate'],
+    ['←/→', 'switch pane'],
+    ['e', 'expand'],
+    ['esc', 'back']
+];
+const COL = {
+    indicator: 3,
+    icon: 3,
+    num: 3,
+    name: 50,
+    duration: 8
+};
+const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: "\u00A0" }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: "\u00A0" }) }), _jsx(Box, { width: COL.num, children: _jsx(Text, { dimColor: true, bold: true, children: "#" }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { dimColor: true, bold: true, children: "NAME" }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, bold: true, children: "DURATION" }) })] }));
+const StepRow = ({ step, selected }) => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(WorkflowStatusIcon, { status: step.status }) }), _jsx(Box, { width: COL.num, children: _jsx(Text, { bold: selected, children: step.index }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, children: truncate(step.name, COL.name - 1) }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: !selected, children: formatDurationCompact(step.durationMs) }) })] }));
+const stepPaneValue = (step, activeTab) => {
+    if (activeTab === 'input') {
+        return step.input;
+    }
+    if (activeTab === 'output') {
+        return step.error ?? step.output;
+    }
+    return {
+        kind: step.kind,
+        status: step.status,
+        durationMs: step.durationMs,
+        hasError: Boolean(step.error)
+    };
+};
+const StepDetail = ({ step, activeTab, rows }) => {
+    if (!step) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Select a step to see input/output." }) }));
+    }
+    const tabContentRows = Math.max(1, rows - getContentTitleHeight() - getTabBarHeight());
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(ContentTitle, { title: formatContentTitle([`Step "${step.name}"`, 'Result']) }), _jsx(TabBar, { active: activeTab, items: RIGHT_PANE_TABS }), _jsx(Box, { flexDirection: "column", children: _jsx(JsonView, { value: stepPaneValue(step, activeTab), maxLines: tabContentRows }) })] }));
+};
+export const StepsModal = ({ run, height }) => {
+    const ui = useUiState();
+    const { steps, loading } = useRunDetail(run.workflowId, run.runId, run.status);
+    const { selectedIndex: clamped, selectPrevious, selectNext } = useListSelection(steps.length);
+    const selectedStep = steps[clamped];
+    const activeTab = ui.runStepPaneTab;
+    useInput((input, key) => {
+        if (key.escape) {
+            ui.setRunsView('list');
+            return;
+        }
+        if (key.upArrow) {
+            selectPrevious();
+            return;
+        }
+        if (key.downArrow) {
+            selectNext();
+            return;
+        }
+        if (key.leftArrow) {
+            ui.setRunStepPaneTab(cycleValue(RIGHT_PANE_ORDER, activeTab, -1));
+            return;
+        }
+        if (key.rightArrow) {
+            ui.setRunStepPaneTab(cycleValue(RIGHT_PANE_ORDER, activeTab, 1));
+            return;
+        }
+        if (input === 'e' && selectedStep) {
+            const content = stepPaneValue(selectedStep, activeTab);
+            const label = `step ${selectedStep.index}: ${selectedStep.name} -> ${activeTab}`;
+            ui.openExpandedJson(content, label);
+        }
+    }, { isActive: ui.tab === 'runs' && ui.runsView === 'detail' && !ui.expandedJson.open });
+    const contentRows = Math.max(1, height - getModalFrameHeight());
+    const renderDetail = (rows) => {
+        if (loading && steps.length === 0) {
+            return (_jsx(LoadingSpinner, { label: "Loading steps..." }));
+        }
+        if (steps.length === 0) {
+            return (_jsx(Text, { dimColor: true, children: "No steps recorded for this run." }));
+        }
+        return _jsx(StepDetail, { step: selectedStep, activeTab: activeTab, rows: rows });
+    };
+    return (_jsx(ModalFrame, { title: formatContentTitle([`Workflow "${run.workflowType}"`, 'Steps']), shortcuts: STEPS_MODAL_SHORTCUTS, children: _jsx(MasterDetailPanel, { items: steps, selectedIndex: clamped, height: contentRows, visibleRows: RUN_DETAIL_VISIBLE_STEPS, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (step, selected) => _jsx(StepRow, { step: step, selected: selected }), rowKey: (step, i) => `${step.index}-${step.name}-${i}`, detail: ({ detailRows }) => renderDetail(detailRows) }) }));
+};

package/dist/views/dev/panels/help_panel.d.ts

@@ -1,2 +1,16 @@
 import React from 'react';
+export declare const Section: React.FC<{
+    children: React.ReactNode;
+    title: string;
+    direction?: string;
+}>;
+export declare const SubSection: React.FC<{
+    children: React.ReactNode;
+    title: string;
+}>;
+export declare const HELP_HINTS: {
+    key: string;
+    label: string;
+}[];
+export declare const HELP_SECTION_COUNT: number;
 export declare const HelpPanel: React.FC;