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

package/dist/views/dev/chrome/palette.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Single source of truth for the TUI's purple gradient. Tailwind violet
+ * stops, picked so the OUTPUT logo reads top-bright to bottom-dark and
+ * the chrome rules sit somewhere in the middle.
+ */
+export declare const PURPLE_50 = "#c4b5fd";
+export declare const PURPLE_100 = "#a78bfa";
+export declare const PURPLE_200 = "#8b5cf6";
+export declare const PURPLE_300 = "#7c3aed";
+export declare const PURPLE_400 = "#6d28d9";
+export declare const RULE_PURPLE = "#a78bfa";
+/**
+ * 3-stop gradient applied across the OUTPUT logo's three rows after
+ * 2x2 quadrant compression.
+ */
+export declare const LOGO_GRADIENT: readonly ["#c4b5fd", "#8b5cf6", "#6d28d9"];

package/dist/views/dev/chrome/palette.js

@@ -0,0 +1,16 @@
+/**
+ * Single source of truth for the TUI's purple gradient. Tailwind violet
+ * stops, picked so the OUTPUT logo reads top-bright to bottom-dark and
+ * the chrome rules sit somewhere in the middle.
+ */
+export const PURPLE_50 = '#c4b5fd';
+export const PURPLE_100 = '#a78bfa';
+export const PURPLE_200 = '#8b5cf6';
+export const PURPLE_300 = '#7c3aed';
+export const PURPLE_400 = '#6d28d9';
+export const RULE_PURPLE = PURPLE_100;
+/**
+ * 3-stop gradient applied across the OUTPUT logo's three rows after
+ * 2x2 quadrant compression.
+ */
+export const LOGO_GRADIENT = [PURPLE_50, PURPLE_200, PURPLE_400];

package/dist/views/dev/chrome/search_bar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SearchBar: React.FC<{
+    active: boolean;
+    onSubmit?: (query: string) => void;
+}>;

package/dist/views/dev/chrome/search_bar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useUiState } from '#views/dev/state/ui_state.js';
+export const SearchBar = ({ active, onSubmit }) => {
+    const ui = useUiState();
+    useInput((input, key) => {
+        if (key.escape) {
+            ui.clearSearch();
+            return;
+        }
+        if (key.return) {
+            onSubmit?.(ui.search.query);
+            ui.closeSearch();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            ui.setSearchQuery(ui.search.query.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            ui.setSearchQuery(ui.search.query + input);
+        }
+    }, { isActive: active });
+    useEffect(() => {
+        if (!active) {
+            return;
+        }
+        onSubmit?.(ui.search.query);
+    }, [active, ui.search.query, onSubmit]);
+    if (!active) {
+        return null;
+    }
+    return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, children: "/ " }), _jsx(Text, { children: ui.search.query }), _jsx(Text, { inverse: true, children: ' ' })] }));
+};

package/dist/views/dev/chrome/selection_indicator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Theme-agnostic 2-cell selection bar for list rows. When selected, renders
+ * inverse-video (SGR 7) — a solid block of the terminal's actual default
+ * foreground colour with the arrow visible inside it. When unselected,
+ * renders two plain spaces. Inverse is theme-agnostic by design: it never
+ * picks a palette slot, just swaps the user's configured fg/bg.
+ *
+ * Each row using this still owns its own 1-cell separator after the
+ * indicator, so the total indicator column is 3 cells wide.
+ */
+export declare const SelectionIndicator: React.FC<{
+    selected: boolean;
+}>;

package/dist/views/dev/chrome/selection_indicator.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+/**
+ * Theme-agnostic 2-cell selection bar for list rows. When selected, renders
+ * inverse-video (SGR 7) — a solid block of the terminal's actual default
+ * foreground colour with the arrow visible inside it. When unselected,
+ * renders two plain spaces. Inverse is theme-agnostic by design: it never
+ * picks a palette slot, just swaps the user's configured fg/bg.
+ *
+ * Each row using this still owns its own 1-cell separator after the
+ * indicator, so the total indicator column is 3 cells wide.
+ */
+export const SelectionIndicator = ({ selected }) => (selected ? _jsx(Text, { inverse: true, children: ' ▸' }) : _jsx(Text, { children: '  ' }));

package/dist/views/dev/chrome/tab_bar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type Tab } from '#views/dev/state/ui_state.js';
+export declare const TabBar: React.FC<{
+    active: Tab;
+}>;

package/dist/views/dev/chrome/tab_bar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { TAB_LABELS, TAB_ORDER } from '#views/dev/state/ui_state.js';
+export const TabBar = ({ active }) => (_jsx(Box, { flexDirection: "row", marginTop: 1, children: TAB_ORDER.map(tab => (_jsx(Box, { marginRight: 3, children: tab === active ? (_jsx(Text, { inverse: true, bold: true, children: ` ${TAB_LABELS[tab]} ` })) : (_jsx(Text, { dimColor: true, children: TAB_LABELS[tab] })) }, tab))) }));

package/dist/views/dev/chrome/toasts.d.ts

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

package/dist/views/dev/chrome/toasts.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useUiState } from '#views/dev/state/ui_state.js';
+const TOAST_TTL_MS = 4000;
+const toneColor = (tone) => {
+    if (tone === 'success') {
+        return 'green';
+    }
+    if (tone === 'error') {
+        return 'red';
+    }
+    return 'cyan';
+};
+const tonePrefix = (tone) => {
+    if (tone === 'success') {
+        return '✓';
+    }
+    if (tone === 'error') {
+        return '✗';
+    }
+    return 'ℹ';
+};
+export const Toasts = () => {
+    const ui = useUiState();
+    const dismissToast = ui.dismissToast;
+    const toasts = ui.toasts;
+    useEffect(() => {
+        const timers = toasts.map(toast => setTimeout(() => dismissToast(toast.id), TOAST_TTL_MS));
+        return () => {
+            for (const t of timers) {
+                clearTimeout(t);
+            }
+        };
+    }, [toasts, dismissToast]);
+    if (toasts.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: toasts.map(toast => (_jsxs(Box, { children: [_jsxs(Text, { color: toneColor(toast.tone), bold: true, children: [tonePrefix(toast.tone), " "] }), _jsx(Text, { children: toast.message })] }, toast.id))) }));
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type CommandHint } from '#views/dev/chrome/footer.js';
+/**
+ * Generic two-pane shell shared by every panel that has a windowed list
+ * on top, a horizontal rule, a detail pane below, and a footer at the
+ * bottom. Panels keep their own selection state and detail rendering;
+ * the shell owns the layout invariant (windowing, overflow indicators,
+ * separator, footer) so it lives in one place.
+ */
+export interface MasterDetailPanelProps<T> {
+    items: T[];
+    selectedIndex: number;
+    visibleRows: number;
+    renderHeader: () => React.ReactNode;
+    renderRow: (item: T, selected: boolean, absoluteIndex: number) => React.ReactNode;
+    rowKey: (item: T, absoluteIndex: number) => string;
+    detail: React.ReactNode;
+    hints: CommandHint[];
+    itemLabel: string;
+}
+export declare const MasterDetailPanel: <T extends object>(props: MasterDetailPanelProps<T>) => React.ReactElement;

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, workflowPath: ui.runModal.workflowPath })] })] }));
+};
+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;