@outputai/cli 0.9.1-next.6fe398d.0 → 0.9.1

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

@@ -0,0 +1,148 @@
+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()] }) }));
+};

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

@@ -9,7 +9,7 @@ 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 { RUN_DETAIL_VISIBLE_STEPS } from '#views/dev/utils/ui_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';

package/dist/views/dev/panels/runs_panel.js

@@ -14,7 +14,7 @@ import { JsonView } from '#views/dev/utils/json_render.js';
 import { RunInfoSidebar } from '#views/dev/components/run_info_sidebar.js';
 import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
 import { capitalize, cycleValue, formatContentTitle, formatStartedShort, hasJsonValue, truncate, useListSelection } from '#views/dev/utils/panel_helpers.js';
-import { CATALOG_WORKFLOW_NAME, RUNS_VISIBLE_ROWS } from '#views/dev/utils/constants.js';
+import { CATALOG_WORKFLOW_NAME, RUNS_VISIBLE_ROWS } from '#views/dev/utils/ui_constants.js';
 const TEMPORAL_UI_BASE = 'http://localhost:8080';
 const STATUS_ORDER = {
     running: 0,
@@ -121,6 +121,7 @@ const DetailPane = ({ run, pane, rows }) => {
 export const RUNS_HINTS = [
     { key: '↑/↓', label: 'navigate' },
     { key: 'enter', label: 'open' },
+    { key: 'g', label: 'graph' },
     { key: '←/→', label: 'switch pane' },
     { key: 'e', label: 'expand' },
     { key: 'o', label: 'temporal' }
@@ -173,6 +174,10 @@ export const RunsPanel = ({ runs, height }) => {
             ui.setRunsView('detail');
             return;
         }
+        if (input === 'g' && selectedRun?.workflowId) {
+            ui.openStepGraph(selectedRun);
+            return;
+        }
         if (key.leftArrow || key.rightArrow) {
             ui.setRunListPaneTab(cycleValue(RUN_INFO_TAB_ORDER, ui.runListPaneTab, key.rightArrow ? 1 : -1));
             return;
@@ -183,7 +188,7 @@ export const RunsPanel = ({ runs, height }) => {
             const title = formatContentTitle(['Recent Runs', `Workflow "${selectedRun?.workflowType ?? ''}"`, capitalize(activePane)]);
             ui.openExpandedJson(content, title);
         }
-    }, { isActive: ui.tab === 'runs' && ui.runsView === 'list' && !ui.search.open });
+    }, { isActive: ui.tab === 'runs' && ui.runsView === 'list' && !ui.search.open && !ui.stepGraph.open });
     if (runs.length === 0) {
         return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "No runs yet. Trigger one from the Workflows tab or with `output workflow run \u2026`." }) }));
     }

package/dist/views/dev/panels/workflows_panel.js

@@ -8,7 +8,7 @@ import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
 import { useUiState } from '#views/dev/state/ui_state.js';
 import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
 import { formatStartedShort, useListSelection } from '#views/dev/utils/panel_helpers.js';
-import { WORKFLOWS_VISIBLE_ROWS, WORKFLOWS_RECENT_RUNS_LIMIT } from '#views/dev/utils/constants.js';
+import { WORKFLOWS_VISIBLE_ROWS, WORKFLOWS_RECENT_RUNS_LIMIT } from '#views/dev/utils/ui_constants.js';
 const COL = {
     indicator: 3,
     name: 30

package/dist/views/dev/state/ui_state.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { WorkflowRun } from '#services/workflow_runs.js';
 export type Tab = 'workflows' | 'runs' | 'services' | 'help';
 export declare const TAB_ORDER: Tab[];
 export declare const TAB_LABELS: Record<Tab, string>;
@@ -25,6 +26,10 @@ export interface ExpandedJsonState {
     value: unknown;
     title: string;
 }
+export interface StepGraphState {
+    open: boolean;
+    run: WorkflowRun | null;
+}
 export interface Toast {
     id: number;
     message: string;
@@ -40,6 +45,7 @@ export interface UiState {
     runsView: RunsView;
     runModal: RunModalState;
     expandedJson: ExpandedJsonState;
+    stepGraph: StepGraphState;
     toasts: Toast[];
     setTab: (tab: Tab) => void;
     nextTab: () => void;
@@ -56,6 +62,8 @@ export interface UiState {
     closeRunModal: () => void;
     openExpandedJson: (value: unknown, title: string) => void;
     closeExpandedJson: () => void;
+    openStepGraph: (run: WorkflowRun) => void;
+    closeStepGraph: () => void;
     pushToast: (message: string, tone?: Toast['tone']) => void;
     dismissToast: (id: number) => void;
 }

package/dist/views/dev/state/ui_state.js

@@ -18,6 +18,7 @@ export const UiStateProvider = ({ children }) => {
     const [runsView, setRunsView] = useState('list');
     const [runModal, setRunModal] = useState({ open: false, workflowName: '' });
     const [expandedJson, setExpandedJson] = useState({ open: false, value: null, title: '' });
+    const [stepGraph, setStepGraph] = useState({ open: false, run: null });
     const [toasts, setToasts] = useState([]);
     const toastIdRef = useRef(0);
     const value = useMemo(() => ({
@@ -29,6 +30,7 @@ export const UiStateProvider = ({ children }) => {
         runsView,
         runModal,
         expandedJson,
+        stepGraph,
         toasts,
         setTab: next => {
             setTab(current => {
@@ -64,12 +66,14 @@ export const UiStateProvider = ({ children }) => {
         closeRunModal: () => setRunModal({ open: false, workflowName: '' }),
         openExpandedJson: (value, title) => setExpandedJson({ open: true, value, title }),
         closeExpandedJson: () => setExpandedJson({ open: false, value: null, title: '' }),
+        openStepGraph: (run) => setStepGraph({ open: true, run }),
+        closeStepGraph: () => setStepGraph({ open: false, run: null }),
         pushToast: (message, tone = 'info') => {
             const id = ++toastIdRef.current;
             setToasts(prev => [...prev, { id, message, tone }].slice(-MAX_VISIBLE_TOASTS));
         },
         dismissToast: (id) => setToasts(prev => prev.filter(t => t.id !== id))
-    }), [tab, search, selection, runListPaneTab, runStepPaneTab, runsView, runModal, expandedJson, toasts]);
+    }), [tab, search, selection, runListPaneTab, runStepPaneTab, runsView, runModal, expandedJson, stepGraph, toasts]);
     return _jsx(UiStateContext.Provider, { value: value, children: children });
 };
 export const useUiState = () => {

package/oclif.manifest.json

@@ -682,6 +682,86 @@
         "generate.js"
       ]
     },
+    "workflow:history": {
+      "aliases": [],
+      "args": {
+        "workflowId": {
+          "description": "The workflow ID to show history for",
+          "name": "workflowId",
+          "required": true
+        }
+      },
+      "description": "Show a workflow run's step timeline as a waterfall (durations and start times)",
+      "examples": [
+        "<%= config.bin %> <%= command.id %> wf-12345",
+        "<%= config.bin %> <%= command.id %> wf-12345 --run-id 2fe0b36b-...",
+        "<%= config.bin %> <%= command.id %> wf-12345 --format json",
+        "<%= config.bin %> <%= command.id %> wf-12345 --raw --include-payloads"
+      ],
+      "flags": {
+        "run-id": {
+          "char": "r",
+          "description": "Show a specific run (defaults to the latest run)",
+          "name": "run-id",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "format": {
+          "char": "f",
+          "description": "Output format",
+          "name": "format",
+          "default": "text",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "options": [
+            "text",
+            "json"
+          ],
+          "type": "option"
+        },
+        "raw": {
+          "description": "Print the history endpoint's raw response (workflow + events)",
+          "name": "raw",
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "include-payloads": {
+          "description": "Include decoded step input/output payloads",
+          "name": "include-payloads",
+          "allowNo": false,
+          "type": "boolean"
+        },
+        "width": {
+          "description": "Override the detected terminal width",
+          "name": "width",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
+        "color": {
+          "description": "Colorize the waterfall (use --no-color to disable)",
+          "name": "color",
+          "allowNo": true,
+          "type": "boolean"
+        }
+      },
+      "hasDynamicHelp": false,
+      "hiddenAliases": [],
+      "id": "workflow:history",
+      "pluginAlias": "@outputai/cli",
+      "pluginName": "@outputai/cli",
+      "pluginType": "core",
+      "strict": true,
+      "enableJsonFlag": false,
+      "isESM": true,
+      "relativePath": [
+        "dist",
+        "commands",
+        "workflow",
+        "history.js"
+      ]
+    },
     "workflow:list": {
       "aliases": [],
       "args": {},
@@ -1454,5 +1534,5 @@
       ]
     }
   },
-  "version": "0.9.1-next.6fe398d.0"
+  "version": "0.9.1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outputai/cli",
-  "version": "0.9.1-next.6fe398d.0",
+  "version": "0.9.1",
   "description": "CLI for Output.ai workflow generation",
   "type": "module",
   "main": "dist/index.js",
@@ -36,9 +36,9 @@
     "semver": "7.7.4",
     "undici": "8.5.0",
     "yaml": "^2.8.3",
-    "@outputai/credentials": "0.9.1-next.6fe398d.0",
-    "@outputai/evals": "0.9.1-next.6fe398d.0",
-    "@outputai/llm": "0.9.1-next.6fe398d.0"
+    "@outputai/evals": "0.9.1",
+    "@outputai/llm": "0.9.1",
+    "@outputai/credentials": "0.9.1"
   },
   "devDependencies": {
     "@types/cli-progress": "3.11.6",