@outputai/cli 0.3.1 → 0.3.2-next.1282dcf.0

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

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { HorizontalRule } from '#views/dev/chrome/divider.js';
+import { computeWindowStart } from '#views/dev/utils/panel_helpers.js';
+const OverflowIndicator = ({ direction, count }) => (_jsxs(Text, { dimColor: true, children: ["  ", direction === 'up' ? '↑' : '↓', " ", count, " more ", direction === 'up' ? 'above' : 'below'] }));
+export const MasterDetailPanel = (props) => {
+    const { items, selectedIndex, visibleRows, renderHeader, renderRow, rowKey, detail, hints, itemLabel } = props;
+    const windowStart = computeWindowStart(selectedIndex, items.length, visibleRows);
+    const visible = items.slice(windowStart, windowStart + visibleRows);
+    const overflowAbove = windowStart;
+    const overflowBelow = items.length - (windowStart + visible.length);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "column", children: [renderHeader(), overflowAbove > 0 && _jsx(OverflowIndicator, { direction: "up", count: overflowAbove }), visible.map((item, i) => {
+                        const absoluteIndex = windowStart + i;
+                        return (_jsx(React.Fragment, { children: renderRow(item, absoluteIndex === selectedIndex, absoluteIndex) }, rowKey(item, absoluteIndex)));
+                    }), overflowBelow > 0 && _jsx(OverflowIndicator, { direction: "down", count: overflowBelow })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(HorizontalRule, {}) }), detail, _jsx(Footer, { hints: hints, itemCount: items.length, itemLabel: itemLabel })] }));
+};

package/dist/views/{dev.d.ts → dev/dev_app.d.ts}

@@ -1,4 +1,5 @@
 import React from 'react';
+export type Phase = 'waiting' | 'running' | 'failed';
 export declare const DevApp: React.FC<{
     dockerComposePath: string;
     onCleanup: () => Promise<void>;

package/dist/views/dev/dev_app.js

@@ -0,0 +1,146 @@
+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 { 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 { 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 { RunModal } from '#views/dev/modals/run_modal.js';
+import { ExpandedJsonModal } from '#views/dev/modals/expanded_json_modal.js';
+const TAB_NUMBER_KEYS = {
+    1: 'workflows',
+    2: 'runs',
+    3: 'services',
+    4: 'help'
+};
+const useGlobalInput = (opts) => {
+    const ui = useUiState();
+    const { exit } = useApp();
+    const isExitingRef = useRef(false);
+    useInput((input, key) => {
+        // Ctrl+C is the universal escape hatch — handle it regardless of which
+        // overlay is open so the user can always quit.
+        if (key.ctrl && input === 'c' && !isExitingRef.current) {
+            isExitingRef.current = true;
+            void opts.onCleanup()
+                .then(() => exit())
+                .catch(err => exit(err instanceof Error ? err : new Error(String(err))));
+            return;
+        }
+        if (ui.search.open || ui.runModal.open || ui.expandedJson.open) {
+            return;
+        }
+        // Esc on a list view drops an active filter. Skip when we're on
+        // the run detail sub-view — the panel's own esc handler pops back
+        // 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') {
+            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;
+        }
+        if (key.tab) {
+            ui.nextTab();
+            return;
+        }
+        if (input === '/') {
+            ui.openSearch();
+            return;
+        }
+        if (input === '?') {
+            ui.setTab('help');
+            return;
+        }
+        if (input && TAB_NUMBER_KEYS[input]) {
+            ui.setTab(TAB_NUMBER_KEYS[input]);
+            return;
+        }
+        if (input === 'o' && ui.tab === 'services') {
+            openUrl('http://localhost:8080');
+        }
+    });
+};
+const computeWorkflowSummary = (runs) => {
+    if (runs.length === 0) {
+        return null;
+    }
+    return {
+        running: runs.filter(r => r.status === 'running').length,
+        completed: runs.filter(r => r.status === 'completed').length,
+        failed: runs.filter(r => r.status === 'failed').length,
+        total: runs.length
+    };
+};
+const Shell = ({ dockerComposePath, onCleanup }) => {
+    const { exit } = useApp();
+    const ui = useUiState();
+    const [phase, setPhase] = useState('waiting');
+    const [services, setServices] = useState([]);
+    const [runs, setRuns] = useState([]);
+    useHealthPolling(dockerComposePath, phase === 'waiting', {
+        onServices: setServices,
+        onAllHealthy: () => setPhase('running'),
+        onFailure: () => setPhase('failed'),
+        onTimeout: () => exit(new Error('Timeout waiting for services to become healthy'))
+    });
+    useStatusRefresh(dockerComposePath, phase !== 'waiting', setServices);
+    useWorkflowRunsPolling(phase !== 'waiting', setRuns);
+    const workflows = useWorkflowCatalog(phase !== 'waiting');
+    const autoSwitchedRef = useRef(false);
+    const setTab = ui.setTab;
+    useEffect(() => {
+        if (phase === 'running' &&
+            workflows.length > 0 &&
+            !autoSwitchedRef.current &&
+            ui.tab === 'services') {
+            autoSwitchedRef.current = true;
+            setTab('workflows');
+        }
+    }, [phase, workflows.length, ui.tab, setTab]);
+    useGlobalInput({ onCleanup });
+    const summary = useMemo(() => computeWorkflowSummary(runs), [runs]);
+    const failingServices = useMemo(() => services.filter(isServiceFailed).length, [services]);
+    const serviceBadge = useMemo(() => {
+        if (failingServices > 0) {
+            return 'failed';
+        }
+        if (phase === 'waiting' || services.length === 0 || !services.every(isServiceHealthy)) {
+            return 'starting';
+        }
+        return 'healthy';
+    }, [phase, services, failingServices]);
+    const counters = buildSummaryCounters(summary, workflows.length, serviceBadge, failingServices);
+    // `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, {}) }));
+    }
+    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 })] })] }));
+};
+export const DevApp = ({ dockerComposePath, onCleanup }) => (_jsx(UiStateProvider, { children: _jsx(Shell, { dockerComposePath: dockerComposePath, onCleanup: onCleanup }) }));

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

@@ -0,0 +1,7 @@
+export interface DockerLogsState {
+    lines: string[];
+    paused: boolean;
+    setPaused: (paused: boolean) => void;
+    clear: () => void;
+}
+export declare const useDockerLogs: (dockerComposePath: string, serviceName: string | null, enabled: boolean) => DockerLogsState;

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

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+import { tailLogs } from '#views/dev/services/docker_control.js';
+const MAX_BUFFER = 2000;
+export const useDockerLogs = (dockerComposePath, serviceName, enabled) => {
+    const [lines, setLines] = useState([]);
+    const [paused, setPaused] = useState(false);
+    const pausedRef = useRef(paused);
+    pausedRef.current = paused;
+    const bufferRef = useRef([]);
+    useEffect(() => {
+        bufferRef.current = [];
+        setLines([]);
+        if (!enabled || !serviceName) {
+            return () => { };
+        }
+        const child = tailLogs(dockerComposePath, serviceName);
+        const pending = [];
+        const timer = { id: null };
+        const flush = () => {
+            if (pending.length === 0) {
+                return;
+            }
+            bufferRef.current = [...bufferRef.current, ...pending].slice(-MAX_BUFFER);
+            pending.length = 0;
+            if (!pausedRef.current) {
+                setLines(bufferRef.current);
+            }
+        };
+        const onChunk = (chunk) => {
+            const text = chunk.toString();
+            const split = text.split('\n').filter((l, i, arr) => i < arr.length - 1 || l.length > 0);
+            pending.push(...split);
+            if (timer.id === null) {
+                timer.id = setTimeout(() => {
+                    timer.id = null;
+                    flush();
+                }, 100);
+            }
+        };
+        child.stdout.on('data', onChunk);
+        child.stderr.on('data', onChunk);
+        // Swallow spawn errors. Docker isn't reachable in only two cases the
+        // user can't act on inside this panel: the daemon stopped (the
+        // services list will already show this) and the binary is missing
+        // (ruled out by `validateDockerEnvironment` at startup). The user
+        // can always tail logs from a host shell as a fallback.
+        child.on('error', () => { });
+        return () => {
+            child.kill('SIGTERM');
+            if (timer.id !== null) {
+                clearTimeout(timer.id);
+            }
+        };
+    }, [dockerComposePath, serviceName, enabled]);
+    useEffect(() => {
+        if (!paused) {
+            setLines(bufferRef.current);
+        }
+    }, [paused]);
+    return {
+        lines,
+        paused,
+        setPaused,
+        clear: () => {
+            bufferRef.current = [];
+            setLines([]);
+        }
+    };
+};

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

@@ -0,0 +1,16 @@
+import { type ServiceStatus } from '#services/docker.js';
+import { type WorkflowRun } from '#services/workflow_runs.js';
+export declare const POLL_INTERVAL_MS = 2000;
+export declare const HEALTH_TIMEOUT_MS = 120000;
+type TickResult = 'done' | 'continue';
+export declare const usePoll: (enabled: boolean, intervalMs: number, onTick: () => Promise<TickResult>) => void;
+export interface HealthPollingCallbacks {
+    onServices: (svcs: ServiceStatus[]) => void;
+    onAllHealthy: (svcs: ServiceStatus[]) => void;
+    onFailure: (svcs: ServiceStatus[]) => void;
+    onTimeout: () => void;
+}
+export declare const useHealthPolling: (dockerComposePath: string, enabled: boolean, callbacks: HealthPollingCallbacks) => void;
+export declare const useStatusRefresh: (dockerComposePath: string, enabled: boolean, onServices: (svcs: ServiceStatus[]) => void) => void;
+export declare const useWorkflowRunsPolling: (enabled: boolean, onRuns: (runs: WorkflowRun[]) => void) => void;
+export {};

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

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import { getServiceStatus, isServiceHealthy, isServiceFailed } from '#services/docker.js';
+import { fetchWorkflowRuns } from '#services/workflow_runs.js';
+export const POLL_INTERVAL_MS = 2000;
+export const HEALTH_TIMEOUT_MS = 120_000;
+export const usePoll = (enabled, intervalMs, onTick) => {
+    // Ref-shadowed callback. The polling effect intentionally only depends
+    // on `enabled` and `intervalMs` so it doesn't tear down and re-subscribe
+    // on every render — but we still want each tick to invoke the latest
+    // callback closure. The ref reassignment on every render keeps that
+    // closure fresh without nudging the effect's dependency array.
+    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, intervalMs);
+        };
+        if (enabled) {
+            void run();
+        }
+        return () => {
+            state.active = false;
+            clearTimeout(state.timeout);
+        };
+    }, [enabled, intervalMs]);
+};
+const fetchServices = async (dockerComposePath) => {
+    try {
+        return await getServiceStatus(dockerComposePath);
+    }
+    catch {
+        return null;
+    }
+};
+export const useHealthPolling = (dockerComposePath, enabled, callbacks) => {
+    const callbacksRef = useRef(callbacks);
+    callbacksRef.current = callbacks;
+    const startTimeRef = useRef(Date.now());
+    usePoll(enabled, POLL_INTERVAL_MS, 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';
+    });
+};
+export const useStatusRefresh = (dockerComposePath, enabled, onServices) => {
+    const onServicesRef = useRef(onServices);
+    onServicesRef.current = onServices;
+    usePoll(enabled, POLL_INTERVAL_MS, async () => {
+        const svcs = await fetchServices(dockerComposePath);
+        if (svcs !== null) {
+            onServicesRef.current(svcs);
+        }
+        return 'continue';
+    });
+};
+export const useWorkflowRunsPolling = (enabled, onRuns) => {
+    const onRunsRef = useRef(onRuns);
+    onRunsRef.current = onRuns;
+    usePoll(enabled, POLL_INTERVAL_MS, async () => {
+        try {
+            const { runs } = await fetchWorkflowRuns({ limit: 100 });
+            onRunsRef.current(runs);
+        }
+        catch {
+            // API may not be ready yet
+        }
+        return 'continue';
+    });
+};

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

@@ -0,0 +1,21 @@
+import { type WorkflowResultResponse } from '#api/generated/api.js';
+import type { TraceData } from '#types/trace.js';
+export interface RunStep {
+    index: number;
+    name: string;
+    kind: string;
+    status: string;
+    durationMs: number;
+    input: unknown;
+    output: unknown;
+    error: unknown;
+}
+export interface RunDetail {
+    result: WorkflowResultResponse | null;
+    trace: TraceData | null;
+    steps: RunStep[];
+    loading: boolean;
+}
+export declare const extractSteps: (trace: TraceData | null) => RunStep[];
+export declare const isTerminalRunStatus: (status: string | null | undefined) => boolean;
+export declare const useRunDetail: (workflowId: string | undefined, runId: string | undefined, status?: string) => RunDetail;

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

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState } from 'react';
+import { readFile } from 'node:fs/promises';
+import { getWorkflowIdResult, getWorkflowIdRunsRidResult, getWorkflowIdTraceLog, getWorkflowIdRunsRidTraceLog } from '#api/generated/api.js';
+const EMPTY_DETAIL = {
+    result: null,
+    trace: null,
+    steps: [],
+    loading: false
+};
+const stepNameOf = (node) => {
+    if (node.name) {
+        return node.name;
+    }
+    const kind = node.kind || node.type || 'step';
+    const leaf = node.stepName ?? node.activityName ?? '?';
+    return `${kind}#${leaf}`;
+};
+const stepStatusOf = (node) => {
+    if (node.status) {
+        return node.status;
+    }
+    if (node.phase === 'error' || node.error) {
+        return 'failed';
+    }
+    if (node.phase === 'end') {
+        return 'completed';
+    }
+    return 'running';
+};
+const numericTimestamp = (...candidates) => {
+    for (const candidate of candidates) {
+        if (typeof candidate === 'number') {
+            return candidate;
+        }
+    }
+    return null;
+};
+const stepDurationOf = (node) => {
+    if (typeof node.duration === 'number') {
+        return node.duration;
+    }
+    const start = numericTimestamp(node.startTime, node.startedAt);
+    const end = numericTimestamp(node.endTime, node.endedAt);
+    if (start !== null && end !== null) {
+        return end - start;
+    }
+    return 0;
+};
+export const extractSteps = (trace) => {
+    if (!trace?.children) {
+        return [];
+    }
+    return trace.children
+        .filter(node => node.phase !== 'start')
+        .map((node, idx) => ({
+        index: idx + 1,
+        name: stepNameOf(node),
+        kind: node.kind || node.type || 'step',
+        status: stepStatusOf(node),
+        durationMs: stepDurationOf(node),
+        input: node.input ?? node.details?.input,
+        output: node.output ?? node.details?.output,
+        error: node.error
+    }));
+};
+const readTraceLog = async (source) => {
+    if (source.source === 'remote') {
+        return source.data;
+    }
+    const content = await readFile(source.localPath, 'utf-8');
+    return JSON.parse(content);
+};
+// Run detail and trace fetches are best-effort. Many statuses (in-progress,
+// failed, canceled) don't have a fully-formed result or trace available at
+// any given moment, and that's expected — the caller falls back to
+// EMPTY_DETAIL and the UI renders whatever's there. Swallow everything.
+const fetchTrace = async (workflowId, runId) => {
+    try {
+        const response = runId ?
+            await getWorkflowIdRunsRidTraceLog(workflowId, runId) :
+            await getWorkflowIdTraceLog(workflowId);
+        return await readTraceLog(response.data);
+    }
+    catch {
+        return null;
+    }
+};
+const fetchResult = async (workflowId, runId) => {
+    try {
+        const response = runId ?
+            await getWorkflowIdRunsRidResult(workflowId, runId) :
+            await getWorkflowIdResult(workflowId);
+        return response.data;
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Statuses that mean the workflow has stopped advancing. The cache is
+ * intentionally only populated for these — partial results from a still-
+ * running workflow would otherwise stick and stall the UI when the run
+ * eventually finishes.
+ */
+const TERMINAL_STATUSES = new Set(['completed', 'failed', 'canceled', 'terminated', 'timed_out']);
+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) {
+            setDetail(EMPTY_DETAIL);
+            return;
+        }
+        // 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);
+        if (cached) {
+            setDetail(cached);
+            return;
+        }
+        const id = ++fetchIdRef.current;
+        setDetail({ ...EMPTY_DETAIL, loading: true });
+        void Promise.all([
+            fetchResult(workflowId, runId),
+            fetchTrace(workflowId, runId)
+        ]).then(([result, trace]) => {
+            if (fetchIdRef.current !== id) {
+                return;
+            }
+            const next = {
+                result,
+                trace,
+                steps: extractSteps(trace),
+                loading: false
+            };
+            // Only memoize the result once the workflow is done. While it's
+            // 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);
+            }
+            setDetail(next);
+        });
+        // `status` is in the dep array so a run flipping running → completed
+        // (the runs list polls every 2s) re-fires the effect and pulls the
+        // fresh output, instead of pinning to the partial result captured
+        // mid-run.
+    }, [workflowId, runId, status]);
+    return detail;
+};

package/dist/views/dev/hooks/use_run_detail.spec.d.ts

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

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

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest';
+import { extractSteps, isTerminalRunStatus } from './use_run_detail.js';
+describe('isTerminalRunStatus', () => {
+    it('returns true for completed states', () => {
+        expect(isTerminalRunStatus('completed')).toBe(true);
+        expect(isTerminalRunStatus('failed')).toBe(true);
+        expect(isTerminalRunStatus('canceled')).toBe(true);
+        expect(isTerminalRunStatus('terminated')).toBe(true);
+        expect(isTerminalRunStatus('timed_out')).toBe(true);
+    });
+    it('returns false for in-progress states', () => {
+        expect(isTerminalRunStatus('running')).toBe(false);
+        expect(isTerminalRunStatus('continued')).toBe(false);
+    });
+    it('returns false for nullish input', () => {
+        expect(isTerminalRunStatus(null)).toBe(false);
+        expect(isTerminalRunStatus(undefined)).toBe(false);
+        expect(isTerminalRunStatus('')).toBe(false);
+    });
+});
+const trace = (children) => ({
+    root: { workflowName: 'demo', workflowId: 'wf-1', startTime: 0 },
+    children
+});
+describe('extractSteps', () => {
+    it('returns an empty array when the trace has no children', () => {
+        expect(extractSteps(null)).toEqual([]);
+        expect(extractSteps(trace([]))).toEqual([]);
+    });
+    it('filters out start-phase events', () => {
+        const t = trace([
+            { phase: 'start', name: 'should-skip' },
+            { phase: 'end', name: 'kept', status: 'completed', duration: 100 }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps).toHaveLength(1);
+        expect(steps[0].name).toBe('kept');
+    });
+    it('maps phase=error and an error field to status=failed', () => {
+        const t = trace([
+            { phase: 'error', name: 'boom', error: 'oops' },
+            { phase: 'end', name: 'fine', error: 'still-failed' }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].status).toBe('failed');
+        expect(steps[1].status).toBe('failed');
+    });
+    it('falls back to startTime/endTime for duration', () => {
+        const t = trace([
+            { phase: 'end', name: 'with-times', startTime: 1000, endTime: 1500 }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].durationMs).toBe(500);
+    });
+    it('prefers explicit duration when present', () => {
+        const t = trace([
+            { phase: 'end', name: 'has-duration', duration: 250, startTime: 0, endTime: 9999 }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].durationMs).toBe(250);
+    });
+    it('composes a fallback name from kind and stepName when name is missing', () => {
+        const t = trace([
+            { phase: 'end', kind: 'activity', stepName: 'extract', status: 'completed' }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].name).toBe('activity#extract');
+    });
+    it('reads input/output from `details` when not on the node directly', () => {
+        const t = trace([
+            { phase: 'end', name: 'has-details', details: { input: { x: 1 }, output: { y: 2 } } }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps[0].input).toEqual({ x: 1 });
+        expect(steps[0].output).toEqual({ y: 2 });
+    });
+    it('numbers steps starting at 1', () => {
+        const t = trace([
+            { phase: 'end', name: 'first' },
+            { phase: 'end', name: 'second' },
+            { phase: 'end', name: 'third' }
+        ]);
+        const steps = extractSteps(t);
+        expect(steps.map(s => s.index)).toEqual([1, 2, 3]);
+    });
+});

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

@@ -0,0 +1,2 @@
+import { type Workflow } from '#api/generated/api.js';
+export declare const useWorkflowCatalog: (enabled: boolean) => Workflow[];

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

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { getWorkflowCatalog } from '#api/generated/api.js';
+import { usePoll } from '#views/dev/hooks/use_poll.js';
+const CATALOG_INTERVAL_MS = 10_000;
+export const useWorkflowCatalog = (enabled) => {
+    const [workflows, setWorkflows] = useState([]);
+    usePoll(enabled, CATALOG_INTERVAL_MS, async () => {
+        try {
+            const response = await getWorkflowCatalog();
+            const data = response?.data;
+            if (data?.workflows) {
+                setWorkflows(data.workflows);
+            }
+        }
+        catch {
+            // API may not be ready yet
+        }
+        return 'continue';
+    });
+    return workflows;
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ExpandedJsonModal: React.FC;