@outputai/cli 0.9.1-dev.000c5f3.0 → 0.9.1-dev.667788.0

package/dist/utils/waterfall.d.ts

@@ -1,31 +0,0 @@
-/**
- * Renders a workflow's correlated spans as a terminal waterfall/Gantt chart —
- * a text analog of the Agents HQ "Timeline" view. Each row is a step, drawn as
- * a colored bar positioned by its start offset and sized by its duration, on a
- * shared time axis.
- *
- * The tick math (TICK_STEPS_MS / pickTickStep / formatTickLabel) is a port of
- * Atlas's `StepGantt`; the bar geometry mirrors its leftPct/widthPct as integer
- * terminal columns.
- */
-import type { Span } from '#services/workflow_history/correlator.js';
-export interface WaterfallOptions {
-    width: number;
-    color: boolean;
-    header?: string;
-    labels?: Map<string, string>;
-}
-export interface BarGeometry {
-    startCol: number;
-    barLen: number;
-    instantaneous: boolean;
-}
-export declare const FULL_BLOCK = "\u2588";
-export declare const THIN_BLOCK = "\u258F";
-export declare function pickTickStep(totalMs: number): number;
-export declare function buildTicks(totalMs: number): number[];
-export declare function formatTickLabel(ms: number): string;
-export declare function formatDurationLabel(ms: number): string;
-export declare function computeBar(startOffsetMs: number, endOffsetMs: number, totalMs: number, trackW: number): BarGeometry;
-export declare function buildRulerLine(totalMs: number, trackW: number): string;
-export default function renderWaterfall(spans: Span[], totalDurationMs: number, options: WaterfallOptions): string;

package/dist/utils/waterfall.js

@@ -1,192 +0,0 @@
-const LABEL_MIN = 14;
-const LABEL_MAX = 28;
-const MIN_TRACK = 10;
-export const FULL_BLOCK = '█';
-export const THIN_BLOCK = '▏';
-// Human-friendly step sizes, smallest → largest. Pick the smallest step that
-// yields ~TARGET_TICKS or fewer labels.
-const TICK_STEPS_MS = [
-    100, 250, 500,
-    1_000, 2_000, 5_000, 10_000, 15_000, 30_000,
-    60_000, 2 * 60_000, 5 * 60_000, 10 * 60_000, 15 * 60_000, 30 * 60_000,
-    60 * 60_000, 2 * 60 * 60_000, 6 * 60 * 60_000, 12 * 60 * 60_000, 24 * 60 * 60_000
-];
-const TARGET_TICKS = 8;
-const ANSI = {
-    completed: '',
-    running: '',
-    failed: '',
-    pending: '',
-    dim: '',
-    reset: ''
-};
-function clamp(value, lo, hi) {
-    return Math.min(Math.max(value, lo), hi);
-}
-export function pickTickStep(totalMs) {
-    if (totalMs <= 0) {
-        return 1_000;
-    }
-    const ideal = totalMs / TARGET_TICKS;
-    return TICK_STEPS_MS.find(s => s >= ideal) ?? TICK_STEPS_MS[TICK_STEPS_MS.length - 1];
-}
-export function buildTicks(totalMs) {
-    const step = pickTickStep(totalMs);
-    const count = Math.floor(totalMs / step);
-    return Array.from({ length: count + 1 }, (_, i) => i * step);
-}
-// Round to whole units *before* splitting so a remainder that rounds up to a
-// full unit carries instead of rendering "1m60s" / "1h60m".
-function formatClock(ms) {
-    const totalSec = Math.round(ms / 1_000);
-    if (totalSec < 60) {
-        return `${totalSec}s`;
-    }
-    if (totalSec < 3_600) {
-        const m = Math.floor(totalSec / 60);
-        const s = totalSec % 60;
-        return s === 0 ? `${m}m` : `${m}m${s}s`;
-    }
-    const totalMin = Math.round(ms / 60_000);
-    const h = Math.floor(totalMin / 60);
-    const m = totalMin % 60;
-    return m === 0 ? `${h}h` : `${h}h${m}m`;
-}
-export function formatTickLabel(ms) {
-    if (ms === 0) {
-        return '0';
-    }
-    if (ms < 1_000) {
-        return `${ms}ms`;
-    }
-    return formatClock(ms);
-}
-export function formatDurationLabel(ms) {
-    if (ms < 1_000) {
-        return `${Math.max(0, Math.round(ms))}ms`;
-    }
-    return formatClock(ms);
-}
-// Map a span's [startOffset, endOffset] onto integer columns of a `trackW`-wide
-// lane. Both edges are positioned by their own offset and the length is the gap
-// between them — so the bar always spans start→end. (Rounding a separate width
-// off the start, as before, let the right edge drift past the true end time.)
-// A zero-width span still draws a 1-col marker, clamped to stay inside the lane.
-export function computeBar(startOffsetMs, endOffsetMs, totalMs, trackW) {
-    const safeTotal = Math.max(totalMs, 1);
-    const startCol = clamp(Math.round((startOffsetMs / safeTotal) * trackW), 0, Math.max(0, trackW - 1));
-    const endCol = clamp(Math.round((endOffsetMs / safeTotal) * trackW), startCol, trackW);
-    const span = endCol - startCol;
-    const instantaneous = span <= 0;
-    const barLen = Math.min(Math.max(span, 1), trackW - startCol);
-    return { startCol, barLen, instantaneous };
-}
-function padOrTruncate(text, width) {
-    if (text.length === width) {
-        return text;
-    }
-    if (text.length < width) {
-        return text.padEnd(width);
-    }
-    return `${text.slice(0, width - 1)}…`;
-}
-function truncate(text, width) {
-    return text.length <= width ? text : `${text.slice(0, Math.max(0, width - 1))}…`;
-}
-// First tick aligns left, last tick aligns right, middle ticks center on their
-// position — so labels at 0 % and 100 % don't overflow the lane.
-function tickRawStart(idx, count, col, labelLen, trackW) {
-    if (idx === 0) {
-        return 0;
-    }
-    if (idx === count - 1) {
-        return trackW - labelLen;
-    }
-    return col - Math.floor(labelLen / 2);
-}
-function tickStart(idx, count, col, labelLen, trackW) {
-    return clamp(tickRawStart(idx, count, col, labelLen, trackW), 0, trackW - labelLen);
-}
-// The trackW-wide time-axis ruler (no label gutter, no colour). Exported so the
-// TUI overlay header can render the same ticks the CLI string renderer uses.
-export function buildRulerLine(totalMs, trackW) {
-    const safeTotal = Math.max(totalMs, 1);
-    const ticks = buildTicks(safeTotal);
-    const placements = ticks.reduce((acc, t, idx) => {
-        const label = formatTickLabel(t);
-        const col = Math.min(Math.round((t / safeTotal) * trackW), trackW - 1);
-        const start = tickStart(idx, ticks.length, col, label.length, trackW);
-        if (start <= acc.writtenUntil) {
-            return acc;
-        }
-        return { writtenUntil: start + label.length, items: [...acc.items, { start, label }] };
-    }, { writtenUntil: -1, items: [] });
-    const chars = Array.from({ length: trackW }, () => ' ');
-    for (const { start, label } of placements.items) {
-        [...label].forEach((ch, i) => {
-            chars[start + i] = ch;
-        });
-    }
-    return chars.join('');
-}
-function renderRuler(totalMs, labelW, trackW, tint) {
-    return `${' '.repeat(labelW + 1)}${tint(buildRulerLine(totalMs, trackW), ANSI.dim)}`;
-}
-function renderLegend(tint) {
-    const entry = (status, text) => `${tint(FULL_BLOCK, ANSI[status])} ${text}`;
-    const entries = [
-        entry('completed', 'completed'),
-        entry('running', 'running'),
-        entry('failed', 'failed'),
-        entry('pending', 'pending')
-    ];
-    return tint(entries.join('   '), ANSI.dim);
-}
-// The bars only encode failure as a red lane; surface the reason underneath so a
-// failed run is actionable from the chart alone. `failureMessage` is only
-// populated when the history was fetched with payloads (the server strips it
-// otherwise), so spans without one are simply omitted here.
-function buildFailureLines(spans, labelFor, width, tint) {
-    const failed = spans.filter(span => span.status === 'failed' && span.failureMessage);
-    if (failed.length === 0) {
-        return [];
-    }
-    const lines = failed.map(span => {
-        const message = (span.failureMessage ?? '').replace(/\s+/g, ' ').trim();
-        return tint(truncate(`✗ ${labelFor(span)}: ${message}`, width), ANSI.failed);
-    });
-    return ['', tint('Failures', ANSI.dim), ...lines];
-}
-export default function renderWaterfall(spans, totalDurationMs, options) {
-    const { width, color, header, labels } = options;
-    if (spans.length === 0) {
-        return [header, 'No steps found for this run.'].filter(Boolean).join('\n\n');
-    }
-    const tint = (text, code) => (color ? `${code}${text}${ANSI.reset}` : text);
-    const labelFor = (span) => labels?.get(span.id) ?? span.name;
-    const durationFor = (span) => formatDurationLabel(Math.max(0, span.durationMs));
-    const longestLabel = Math.max(...spans.map(s => labelFor(s).length));
-    const labelW = clamp(longestLabel, LABEL_MIN, LABEL_MAX);
-    const durationW = Math.max(...spans.map(s => durationFor(s).length));
-    const trackW = Math.max(width - labelW - durationW - 2, MIN_TRACK);
-    const rows = spans.map(span => {
-        const label = padOrTruncate(labelFor(span), labelW);
-        const { startCol, barLen, instantaneous } = computeBar(span.startOffsetMs, span.endOffsetMs, totalDurationMs, trackW);
-        const glyph = instantaneous ? THIN_BLOCK : FULL_BLOCK;
-        const leading = ' '.repeat(startCol);
-        const trailing = ' '.repeat(Math.max(trackW - startCol - barLen, 0));
-        const track = `${leading}${tint(glyph.repeat(barLen), ANSI[span.status])}${trailing}`;
-        const duration = tint(durationFor(span).padStart(durationW), ANSI.dim);
-        return `${label} ${track} ${duration}`;
-    });
-    const headerLines = header ? [header, ''] : [];
-    const failureLines = buildFailureLines(spans, labelFor, width, tint);
-    const legendLines = color ? ['', renderLegend(tint)] : [];
-    return [
-        ...headerLines,
-        renderRuler(totalDurationMs, labelW, trackW, tint),
-        ...rows,
-        ...failureLines,
-        ...legendLines
-    ].join('\n');
-}

package/dist/utils/waterfall.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/utils/waterfall.spec.js

@@ -1,100 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import renderWaterfall, { pickTickStep, formatTickLabel, formatDurationLabel, computeBar } from './waterfall.js';
-const span = (id, name, status, startOffsetMs, durationMs) => ({
-    id,
-    name,
-    technicalName: name,
-    description: null,
-    status,
-    kind: 'activity',
-    attempt: 1,
-    startedAt: null,
-    scheduledAt: null,
-    completedAt: null,
-    startOffsetMs,
-    endOffsetMs: startOffsetMs + durationMs,
-    durationMs,
-    failureMessage: null
-});
-describe('pickTickStep', () => {
-    it('targets ~8 ticks by choosing the smallest sufficient step', () => {
-        expect(pickTickStep(0)).toBe(1_000);
-        expect(pickTickStep(8_000)).toBe(1_000);
-        expect(pickTickStep(80_000)).toBe(10_000);
-        expect(pickTickStep(160_000)).toBe(30_000);
-    });
-});
-describe('formatTickLabel', () => {
-    it('formats axis ticks like the UI', () => {
-        expect(formatTickLabel(0)).toBe('0');
-        expect(formatTickLabel(500)).toBe('500ms');
-        expect(formatTickLabel(27_000)).toBe('27s');
-        expect(formatTickLabel(60_000)).toBe('1m');
-        expect(formatTickLabel(72_000)).toBe('1m12s');
-        expect(formatTickLabel(3_600_000)).toBe('1h');
-        expect(formatTickLabel(3_660_000)).toBe('1h1m');
-    });
-});
-describe('formatDurationLabel', () => {
-    it('always shows a unit, including zero', () => {
-        expect(formatDurationLabel(0)).toBe('0ms');
-        expect(formatDurationLabel(999)).toBe('999ms');
-        expect(formatDurationLabel(1_000)).toBe('1s');
-        expect(formatDurationLabel(27_000)).toBe('27s');
-    });
-    it('carries a rounded-up remainder instead of rendering 60s/60m', () => {
-        expect(formatDurationLabel(59_500)).toBe('1m');
-        expect(formatDurationLabel(119_500)).toBe('2m');
-        expect(formatDurationLabel(3_599_500)).toBe('1h');
-    });
-});
-describe('computeBar', () => {
-    it('maps offsets to columns with a min width and lane clamp', () => {
-        expect(computeBar(0, 27_000, 100_000, 50)).toEqual({ startCol: 0, barLen: 14, instantaneous: false });
-        // Zero-duration step → a single thin marker
-        expect(computeBar(50_000, 50_000, 100_000, 50)).toEqual({ startCol: 25, barLen: 1, instantaneous: true });
-        // A short step at the very end is clamped so it stays inside the lane
-        expect(computeBar(99_000, 100_000, 100_000, 50)).toEqual({ startCol: 49, barLen: 1, instantaneous: false });
-    });
-    it('sizes the bar to span start→end without right-edge drift', () => {
-        // Full-span step fills the lane exactly.
-        expect(computeBar(0, 100_000, 100_000, 50)).toEqual({ startCol: 0, barLen: 50, instantaneous: false });
-        // End column is rounded from the true end offset (33), not start + a
-        // separately-rounded width (which used to overshoot to col 34).
-        expect(computeBar(33_000, 66_000, 100_000, 50)).toEqual({ startCol: 17, barLen: 16, instantaneous: false });
-    });
-});
-describe('renderWaterfall', () => {
-    const spans = [
-        span('a', 'Compress Text', 'completed', 0, 27_000),
-        span('b', 'Generate Brief', 'pending', 40_000, 0)
-    ];
-    it('renders labels, bars, durations and a header without color by default', () => {
-        const out = renderWaterfall(spans, 40_000, { width: 70, color: false, header: 'wf-1 · run abcd1234 · running · 40s' });
-        expect(out).toContain('Compress Text');
-        expect(out).toContain('Generate Brief');
-        expect(out).toContain('█');
-        expect(out).toContain('27s');
-        expect(out).toContain('wf-1 · run abcd1234');
-        expect(out).not.toContain('\x1b[');
-    });
-    it('emits ANSI color when enabled', () => {
-        const out = renderWaterfall(spans, 40_000, { width: 70, color: true });
-        expect(out).toContain('\x1b[');
-        expect(out).toContain('\x1b[92m'); // completed → green
-    });
-    it('shows a friendly message when there are no steps', () => {
-        const out = renderWaterfall([], 1, { width: 70, color: false, header: 'wf-1' });
-        expect(out).toContain('No steps found for this run.');
-    });
-    it('lists the reason under the chart for failed steps that carry a message', () => {
-        const failed = { ...span('c', 'Scrape Serp Page', 'failed', 10_000, 2_000), failureMessage: 'connection reset' };
-        const out = renderWaterfall([...spans, failed], 40_000, { width: 70, color: false });
-        expect(out).toContain('Failures');
-        expect(out).toContain('✗ Scrape Serp Page: connection reset');
-    });
-    it('omits the failures section when no failed step has a message', () => {
-        const out = renderWaterfall(spans, 40_000, { width: 70, color: false });
-        expect(out).not.toContain('Failures');
-    });
-});

package/dist/views/dev/hooks/use_step_graph.d.ts

@@ -1,22 +0,0 @@
-import { type WorkflowMeta } from '#services/workflow_history.js';
-import type { Span } from '#services/workflow_history/correlator.js';
-export interface StepGraph {
-    spans: Span[];
-    totalDurationMs: number;
-    workflow: WorkflowMeta | null;
-    labels: Map<string, string>;
-    loading: boolean;
-    error: string | null;
-}
-/**
- * Fetches a run's correlated step spans for the dev TUI's waterfall overlay,
- * reusing the same `fetchWorkflowHistory` path as the `workflow history` CLI
- * command. Driven by `usePoll`: while the run is still advancing it re-pulls
- * every tick so newly scheduled / finished steps appear, then stops and caches
- * once terminal. The modal ticks the time axis between polls so the right edge
- * tracks elapsed time.
- *
- * A hard fetch failure surfaces as `error` only when nothing has loaded yet — a
- * transient poll blip keeps the last good chart on screen.
- */
-export declare const useStepGraph: (workflowId: string | undefined, runId: string | undefined, status?: string) => StepGraph;

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

@@ -1,76 +0,0 @@
-import { useRef, useState } from 'react';
-import { fetchWorkflowHistory } from '#services/workflow_history.js';
-import buildSpanLabels from '#utils/span_labels.js';
-import { isTerminalRunStatus } from '#views/dev/hooks/use_run_detail.js';
-import { usePoll, POLL_INTERVAL_MS } from '#views/dev/hooks/use_poll.js';
-const EMPTY_GRAPH = {
-    spans: [],
-    totalDurationMs: 0,
-    workflow: null,
-    labels: new Map(),
-    loading: false,
-    error: null
-};
-const stepGraphCache = new Map();
-/**
- * Fetches a run's correlated step spans for the dev TUI's waterfall overlay,
- * reusing the same `fetchWorkflowHistory` path as the `workflow history` CLI
- * command. Driven by `usePoll`: while the run is still advancing it re-pulls
- * every tick so newly scheduled / finished steps appear, then stops and caches
- * once terminal. The modal ticks the time axis between polls so the right edge
- * tracks elapsed time.
- *
- * A hard fetch failure surfaces as `error` only when nothing has loaded yet — a
- * transient poll blip keeps the last good chart on screen.
- */
-export const useStepGraph = (workflowId, runId, status) => {
-    const [graph, setGraph] = useState(EMPTY_GRAPH);
-    const terminal = isTerminalRunStatus(status);
-    const requestKeyRef = useRef('');
-    usePoll(Boolean(workflowId), POLL_INTERVAL_MS, async () => {
-        if (!workflowId) {
-            return 'done';
-        }
-        const key = `${workflowId}:${runId ?? 'latest'}`;
-        requestKeyRef.current = key;
-        const cached = stepGraphCache.get(key);
-        if (cached) {
-            setGraph(cached);
-            return 'done';
-        }
-        setGraph(current => (current.spans.length === 0 ? { ...current, loading: true } : current));
-        try {
-            // Pull payloads so the detail pane can show each step's input/output and
-            // a failed step's reason.
-            const result = await fetchWorkflowHistory({ workflowId, runId, includePayloads: true });
-            if (requestKeyRef.current !== key) {
-                return 'done'; // a different run was selected mid-flight
-            }
-            const next = {
-                spans: result.spans,
-                totalDurationMs: result.totalDurationMs,
-                workflow: result.workflow,
-                labels: buildSpanLabels(result.spans),
-                loading: false,
-                error: null
-            };
-            // Cache only terminal runs — a running run's history is still growing.
-            if (terminal) {
-                stepGraphCache.set(key, next);
-            }
-            setGraph(next);
-        }
-        catch (err) {
-            if (requestKeyRef.current !== key) {
-                return 'done';
-            }
-            const message = err instanceof Error ? err.message : String(err);
-            // Keep the last good chart if a poll blips; only surface a cold failure.
-            setGraph(current => (current.spans.length > 0 ?
-                { ...current, loading: false } :
-                { ...EMPTY_GRAPH, error: message }));
-        }
-        return terminal ? 'done' : 'continue';
-    });
-    return graph;
-};

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

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

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

@@ -1,148 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Box, Text, useInput, useStdout } from 'ink';
-import { computeBar, buildRulerLine, formatDurationLabel, FULL_BLOCK, THIN_BLOCK } from '#utils/waterfall.js';
-import { useStepGraph } from '#views/dev/hooks/use_step_graph.js';
-import { isTerminalRunStatus } from '#views/dev/hooks/use_run_detail.js';
-import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
-import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
-import { ModalFrame, getHeight as getModalFrameHeight } from '#views/dev/modals/modal_frame.js';
-import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
-import { ContentTitle, getHeight as getContentTitleHeight } from '#views/dev/components/content_title.js';
-import { TabBar, getHeight as getTabBarHeight } from '#views/dev/chrome/tab_bar.js';
-import { JsonView } from '#views/dev/utils/json_render.js';
-import { workflowStatusColor } from '#views/dev/components/workflow_status.js';
-import { useUiState } from '#views/dev/state/ui_state.js';
-import { capitalize, cycleValue, formatContentTitle, formatStartedShort, truncate, useListSelection } from '#views/dev/utils/panel_helpers.js';
-const FRAME_WIDTH_OVERHEAD = 6; // outer paddingX (2) + round border (2) + inner paddingX (2)
-const META_ROWS = 2; // run status/started line + its bottom margin
-const FALLBACK_COLS = 100;
-const MIN_WIDTH = 40;
-const MIN_TRACK = 10;
-const VISIBLE_ROWS = 10;
-const TICK_MS = 1_000;
-const COL = { sel: 3, label: 22, duration: 8 };
-const PANE_ORDER = ['input', 'output', 'meta'];
-const PANE_TABS = [
-    { id: 'input', label: 'Input' },
-    { id: 'output', label: 'Output' },
-    { id: 'meta', label: 'Meta' }
-];
-const STEP_GRAPH_SHORTCUTS = [
-    ['↑/↓', 'navigate'],
-    ['←/→', 'tab'],
-    ['e', 'expand'],
-    ['esc', 'close']
-];
-const parseMs = (iso) => {
-    if (!iso) {
-        return null;
-    }
-    const ms = Date.parse(iso);
-    return Number.isNaN(ms) ? null : ms;
-};
-const spanColor = (status) => (status === 'pending' ? 'gray' : workflowStatusColor(status));
-// Stretch a still-running step's bar to the live edge so it visibly grows.
-const toLiveSpans = (spans, totalMs, terminal) => {
-    if (terminal) {
-        return spans;
-    }
-    return spans.map(span => (span.status === 'running' ?
-        { ...span, endOffsetMs: Math.max(span.endOffsetMs, totalMs), durationMs: Math.max(0, totalMs - span.startOffsetMs) } :
-        span));
-};
-const spanPaneValue = (span, tab) => {
-    if (tab === 'input') {
-        return span.input;
-    }
-    if (tab === 'output') {
-        return span.failureMessage ?? span.output;
-    }
-    return {
-        status: span.status,
-        started: span.startedAt,
-        ended: span.completedAt,
-        duration: formatDurationLabel(Math.max(0, span.durationMs)),
-        startOffset: formatDurationLabel(Math.max(0, span.startOffsetMs)),
-        attempt: span.attempt,
-        kind: span.kind,
-        step: span.technicalName
-    };
-};
-const RulerRow = ({ trackW, totalMs }) => (_jsxs(Box, { children: [_jsx(Box, { width: COL.sel + COL.label, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: trackW, children: _jsx(Text, { dimColor: true, children: buildRulerLine(totalMs, trackW) }) }), _jsx(Box, { width: COL.duration, children: _jsx(Text, { children: " " }) })] }));
-const SpanRow = ({ span, label, selected, trackW, totalMs }) => {
-    const { startCol, barLen, instantaneous } = computeBar(span.startOffsetMs, span.endOffsetMs, totalMs, trackW);
-    const glyph = instantaneous ? THIN_BLOCK : FULL_BLOCK;
-    const bar = `${' '.repeat(startCol)}${glyph.repeat(barLen)}${' '.repeat(Math.max(0, trackW - startCol - barLen))}`;
-    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.sel, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.label, children: _jsx(Text, { bold: selected, children: truncate(label, COL.label - 1) }) }), _jsx(Box, { width: trackW, children: _jsx(Text, { color: spanColor(span.status), children: bar }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: !selected, children: formatDurationLabel(Math.max(0, span.durationMs)) }) })] }));
-};
-const SpanDetail = ({ span, activeTab, label, rows }) => {
-    if (!span) {
-        return _jsx(Text, { dimColor: true, children: "Select a step to see its input, output, and timing." });
-    }
-    const tabContentRows = Math.max(1, rows - getContentTitleHeight() - getTabBarHeight());
-    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(ContentTitle, { title: formatContentTitle([`Step "${label}"`, capitalize(activeTab)]) }), _jsx(TabBar, { active: activeTab, items: PANE_TABS }), _jsx(Box, { flexDirection: "column", children: _jsx(JsonView, { value: spanPaneValue(span, activeTab), maxLines: tabContentRows, truncateLine: true }) })] }));
-};
-export const StepGraphModal = ({ run, height }) => {
-    const ui = useUiState();
-    const { stdout } = useStdout();
-    const { spans, totalDurationMs, workflow, labels, loading, error } = useStepGraph(run.workflowId, run.runId, run.status);
-    const status = run.status ?? 'unknown';
-    const terminal = isTerminalRunStatus(status);
-    // Tick once a second while the run is live so the axis advances between polls.
-    const [now, setNow] = useState(() => Date.now());
-    useEffect(() => {
-        const timer = terminal ? undefined : setInterval(() => setNow(Date.now()), TICK_MS);
-        return () => {
-            if (timer) {
-                clearInterval(timer);
-            }
-        };
-    }, [terminal]);
-    // Recorded history only reaches the last event; for a running run grow the
-    // axis to elapsed wall-clock so the right edge tracks "now", not open time.
-    const startMs = parseMs(workflow?.startTime) ?? parseMs(run.startedAt);
-    const liveTotalMs = terminal || startMs === null ? totalDurationMs : Math.max(totalDurationMs, now - startMs);
-    const liveSpans = toLiveSpans(spans, liveTotalMs, terminal);
-    const { selectedIndex, selectPrevious, selectNext } = useListSelection(liveSpans.length);
-    const selectedSpan = liveSpans[selectedIndex];
-    const labelFor = (span) => labels.get(span.id) ?? span.name;
-    const activeTab = ui.runStepPaneTab;
-    useInput((input, key) => {
-        if (key.escape) {
-            ui.closeStepGraph();
-            return;
-        }
-        if (key.upArrow) {
-            selectPrevious();
-            return;
-        }
-        if (key.downArrow) {
-            selectNext();
-            return;
-        }
-        if (key.leftArrow || key.rightArrow) {
-            ui.setRunStepPaneTab(cycleValue(PANE_ORDER, activeTab, key.rightArrow ? 1 : -1));
-            return;
-        }
-        if (input === 'e' && selectedSpan) {
-            ui.openExpandedJson(spanPaneValue(selectedSpan, activeTab), `step: ${labelFor(selectedSpan)} → ${activeTab}`);
-        }
-    }, { isActive: ui.stepGraph.open && !ui.expandedJson.open });
-    const width = Math.max(MIN_WIDTH, (stdout?.columns ?? FALLBACK_COLS) - FRAME_WIDTH_OVERHEAD);
-    const trackW = Math.max(MIN_TRACK, width - COL.sel - COL.label - COL.duration);
-    const contentRows = Math.max(1, height - getModalFrameHeight() - META_ROWS);
-    const renderContent = () => {
-        if (error) {
-            return _jsxs(Text, { color: "red", wrap: "truncate-end", children: ["Failed to load history: ", error] });
-        }
-        if (loading && liveSpans.length === 0) {
-            return _jsx(LoadingSpinner, { label: "Loading step graph..." });
-        }
-        if (liveSpans.length === 0) {
-            return _jsx(Text, { dimColor: true, children: "No steps recorded for this run." });
-        }
-        return (_jsx(MasterDetailPanel, { items: liveSpans, selectedIndex: selectedIndex, height: contentRows, visibleRows: VISIBLE_ROWS, renderHeader: () => _jsx(RulerRow, { trackW: trackW, totalMs: liveTotalMs }), renderRow: (span, selected) => (_jsx(SpanRow, { span: span, label: labelFor(span), selected: selected, trackW: trackW, totalMs: liveTotalMs })), rowKey: span => span.id, detail: ({ detailRows }) => (_jsx(SpanDetail, { span: selectedSpan, activeTab: activeTab, label: selectedSpan ? labelFor(selectedSpan) : '', rows: detailRows })) }));
-    };
-    return (_jsx(ModalFrame, { title: formatContentTitle([`Workflow "${run.workflowType}"`, 'Step graph']), titleRight: _jsx(Text, { dimColor: true, children: formatDurationLabel(liveTotalMs) }), shortcuts: STEP_GRAPH_SHORTCUTS, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { columnGap: 2, marginBottom: 1, children: [_jsx(Text, { color: workflowStatusColor(status), bold: true, children: status }), _jsxs(Text, { dimColor: true, children: ["started ", formatStartedShort(run.startedAt)] })] }), renderContent()] }) }));
-};