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

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { StatusIcon, statusColor } from '#components/status_icon.js';
+import { formatDurationCompact, formatDate, elapsedMs } from '#utils/date_formatter.js';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { useRunDetail } from '#views/dev/hooks/use_run_detail.js';
+import { JsonView } from '#views/dev/utils/json_render.js';
+import { truncate, computeWindowStart } from '#views/dev/utils/panel_helpers.js';
+import { RUN_DETAIL_VISIBLE_STEPS, RUN_DETAIL_PREVIEW_LINES } from '#views/dev/utils/constants.js';
+const RIGHT_PANE_ORDER = ['input', 'output', 'meta'];
+const cycleRightPane = (current, direction) => {
+    const idx = RIGHT_PANE_ORDER.indexOf(current);
+    const next = (idx + direction + RIGHT_PANE_ORDER.length) % RIGHT_PANE_ORDER.length;
+    return RIGHT_PANE_ORDER[next];
+};
+const COL = {
+    num: 6,
+    icon: 3,
+    name: 50,
+    duration: 8
+};
+const StepRow = ({ step, selected }) => (_jsxs(Box, { children: [_jsxs(Box, { width: COL.num, children: [_jsx(SelectionIndicator, { selected: selected }), _jsx(Text, { bold: selected, children: ` ${step.index}` })] }), _jsx(Box, { width: COL.icon, children: _jsx(StatusIcon, { status: step.status }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, children: truncate(step.name, COL.name - 1) }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: !selected, children: formatDurationCompact(step.durationMs) }) })] }));
+const SidebarKV = ({ label, value, color }) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: label }), _jsx(Text, { color: color, wrap: "truncate-end", children: value })] }));
+const Sidebar = ({ run, resultStatus }) => {
+    const status = resultStatus ?? run.status ?? 'unknown';
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Box, { children: [_jsx(StatusIcon, { status: status }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: statusColor(status), children: status.toUpperCase() })] }), _jsx(SidebarKV, { label: "RUN ID", value: run.runId ?? '-' }), _jsx(SidebarKV, { label: "WORKFLOW ID", value: run.workflowId ?? '-' }), _jsx(SidebarKV, { label: "TYPE", value: run.workflowType ?? '-' }), _jsx(SidebarKV, { label: "DURATION", value: duration }), _jsx(SidebarKV, { label: "START", value: formatDate(run.startedAt) }), _jsx(SidebarKV, { label: "END", value: run.completedAt ? formatDate(run.completedAt) : '—' })] }));
+};
+const PaneTabs = ({ active }) => (_jsx(Box, { marginTop: 1, children: RIGHT_PANE_ORDER.map((tab, i) => (_jsx(Box, { marginRight: 2, children: tab === active ? (_jsx(Text, { inverse: true, bold: true, children: ` ${tab[0].toUpperCase()}${tab.slice(1)} ` })) : (_jsx(Text, { dimColor: true, children: `${tab[0].toUpperCase()}${tab.slice(1)}${i < RIGHT_PANE_ORDER.length - 1 ? '' : ''}` })) }, tab))) }));
+const stepPaneValue = (step, activeTab) => {
+    if (activeTab === 'input') {
+        return step.input;
+    }
+    if (activeTab === 'output') {
+        return step.error ?? step.output;
+    }
+    return {
+        kind: step.kind,
+        status: step.status,
+        durationMs: step.durationMs,
+        hasError: Boolean(step.error)
+    };
+};
+const StepDetail = ({ step, activeTab }) => {
+    if (!step) {
+        return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Select a step to see input/output." }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(PaneTabs, { active: activeTab }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(JsonView, { value: stepPaneValue(step, activeTab), maxLines: RUN_DETAIL_PREVIEW_LINES }) })] }));
+};
+const HINTS = [
+    { key: '↑/↓', label: 'navigate' },
+    { key: '←/→', label: 'switch pane' },
+    { key: 'e', label: 'expand' },
+    { key: 'esc', label: 'back' },
+    { key: 'tab', label: 'next tab' }
+];
+export const RunDetailView = ({ run }) => {
+    const ui = useUiState();
+    const { result, steps, loading } = useRunDetail(run.workflowId, run.runId, run.status);
+    const [stepIndex, setStepIndex] = useState(0);
+    const isActive = ui.tab === 'runs' && ui.runsView === 'detail' && !ui.search.open && !ui.runModal.open && !ui.expandedJson.open;
+    const clamped = Math.min(stepIndex, Math.max(0, steps.length - 1));
+    const selectedStep = steps[clamped];
+    useEffect(() => {
+        if (clamped !== stepIndex) {
+            setStepIndex(clamped);
+        }
+    }, [clamped, stepIndex]);
+    useInput((input, key) => {
+        if (key.escape) {
+            ui.setRunsView('list');
+            return;
+        }
+        if (key.upArrow) {
+            setStepIndex(i => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setStepIndex(i => Math.min(steps.length - 1, i + 1));
+            return;
+        }
+        if (key.leftArrow) {
+            ui.setRightPaneTab(cycleRightPane(ui.rightPaneTab, -1));
+            return;
+        }
+        if (key.rightArrow) {
+            ui.setRightPaneTab(cycleRightPane(ui.rightPaneTab, 1));
+            return;
+        }
+        if (input === 'e' && selectedStep) {
+            const content = stepPaneValue(selectedStep, ui.rightPaneTab);
+            const label = `step ${selectedStep.index}: ${selectedStep.name} → ${ui.rightPaneTab}`;
+            ui.openExpandedJson(content, label);
+        }
+    }, { isActive });
+    const windowStart = computeWindowStart(clamped, steps.length, RUN_DETAIL_VISIBLE_STEPS);
+    const visibleSteps = steps.slice(windowStart, windowStart + RUN_DETAIL_VISIBLE_STEPS);
+    const renderStepList = () => {
+        if (loading && steps.length === 0) {
+            return (_jsx(Box, { marginTop: 1, children: _jsx(LoadingSpinner, { label: "Loading steps\u2026" }) }));
+        }
+        if (steps.length === 0) {
+            return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No steps recorded for this run." }) }));
+        }
+        return (_jsxs(_Fragment, { children: [windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more above"] }), visibleSteps.map((step, i) => (_jsx(StepRow, { step: step, selected: windowStart + i === clamped }, `${step.index}-${i}`))), windowStart + RUN_DETAIL_VISIBLE_STEPS < steps.length && (_jsxs(Text, { dimColor: true, children: ["  \u2193 ", steps.length - windowStart - RUN_DETAIL_VISIBLE_STEPS, " more below"] }))] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Recent Runs \u203A " }), _jsx(Text, { bold: true, children: run.workflowType }), _jsx(Text, { dimColor: true, children: " \u203A " }), _jsx(Text, { children: truncate(run.runId ?? '-', 28) })] }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderStepList() }), _jsx(Box, { flexDirection: "column", width: 40, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, paddingLeft: 1, children: _jsx(Sidebar, { run: run, resultStatus: result?.status ?? null }) })] }), _jsx(StepDetail, { step: selectedStep, activeTab: ui.rightPaneTab }), _jsx(Footer, { hints: HINTS, itemCount: steps.length, itemLabel: "steps" })] }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { WorkflowRun } from '#services/workflow_runs.js';
+import type { TraceData } from '#types/trace.js';
+export declare const buildVisibleRuns: (runs: WorkflowRun[], query: string) => WorkflowRun[];
+export declare const extractRunInput: (trace: TraceData | null) => unknown;
+export declare const RunsPanel: React.FC<{
+    runs: WorkflowRun[];
+}>;

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

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { StatusIcon, statusColor } from '#components/status_icon.js';
+import { elapsedMs, formatDurationCompact, formatDate } from '#utils/date_formatter.js';
+import { openUrl } from '#utils/open_url.js';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { RunDetailView } from '#views/dev/panels/run_detail_view.js';
+import { useRunDetail } from '#views/dev/hooks/use_run_detail.js';
+import { JsonView } from '#views/dev/utils/json_render.js';
+import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
+import { truncate, formatStartedShort } from '#views/dev/utils/panel_helpers.js';
+import { CATALOG_WORKFLOW_NAME, RUNS_VISIBLE_ROWS, RUNS_PREVIEW_LINES } from '#views/dev/utils/constants.js';
+const TEMPORAL_UI_BASE = 'http://localhost:8080';
+const STATUS_ORDER = {
+    running: 0,
+    failed: 1,
+    timed_out: 2,
+    terminated: 3,
+    canceled: 4,
+    continued: 5,
+    completed: 6
+};
+const sortRuns = (runs) => [...runs].sort((a, b) => {
+    const statusDiff = (STATUS_ORDER[a.status ?? ''] ?? Infinity) - (STATUS_ORDER[b.status ?? ''] ?? Infinity);
+    if (statusDiff !== 0) {
+        return statusDiff;
+    }
+    const aTime = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+    const bTime = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+    return bTime - aTime;
+});
+const matchesFilter = (run, query) => {
+    if (!query) {
+        return true;
+    }
+    const q = query.toLowerCase();
+    return (run.workflowType ?? '').toLowerCase().includes(q) ||
+        (run.workflowId ?? '').toLowerCase().includes(q) ||
+        (run.status ?? '').toLowerCase().includes(q);
+};
+export const buildVisibleRuns = (runs, query) => {
+    const visible = runs.filter(r => !(r.workflowType === CATALOG_WORKFLOW_NAME && r.status === 'completed'));
+    const filtered = query ? visible.filter(r => matchesFilter(r, query)) : visible;
+    return sortRuns(filtered);
+};
+export const extractRunInput = (trace) => {
+    if (!trace?.children) {
+        return null;
+    }
+    const firstChild = trace.children[0];
+    if (!firstChild) {
+        return null;
+    }
+    if (firstChild.input !== undefined) {
+        return firstChild.input;
+    }
+    return firstChild.details?.input ?? null;
+};
+const COL = {
+    indicator: 3,
+    icon: 3,
+    status: 11,
+    type: 22,
+    id: 26,
+    duration: 9,
+    started: 14
+};
+const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: true, bold: true, children: "STATUS" }) }), _jsx(Box, { width: COL.type, children: _jsx(Text, { dimColor: true, bold: true, children: "TYPE" }) }), _jsx(Box, { width: COL.id, children: _jsx(Text, { dimColor: true, bold: true, children: "ID" }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, bold: true, children: "DURATION" }) }), _jsx(Box, { width: COL.started, marginLeft: 2, children: _jsx(Text, { dimColor: true, bold: true, children: "STARTED" }) })] }));
+const RunRow = ({ run, selected }) => {
+    const status = run.status ?? 'running';
+    const color = statusColor(status);
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { color: color, children: status }) }), _jsx(Box, { width: COL.type, children: _jsx(Text, { bold: selected, children: truncate(run.workflowType ?? '-', COL.type - 1) }) }), _jsx(Box, { width: COL.id, children: _jsx(Text, { dimColor: !selected, children: truncate(run.workflowId ?? '-', COL.id - 1) }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: !selected, children: duration }) }), _jsx(Box, { width: COL.started, marginLeft: 2, children: _jsx(Text, { dimColor: !selected, children: formatStartedShort(run.startedAt) }) })] }));
+};
+const PaneTabs = ({ active }) => (_jsx(Box, { children: ['input', 'output'].map((tab, i) => (_jsx(Box, { marginRight: i === 0 ? 1 : 0, children: tab === active ? (_jsx(Text, { inverse: true, bold: true, children: ` ${tab[0].toUpperCase()}${tab.slice(1)} ` })) : (_jsx(Text, { dimColor: true, children: ` ${tab[0].toUpperCase()}${tab.slice(1)} ` })) }, tab))) }));
+const InlineKV = ({ label, value }) => (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [label, ": "] }), _jsx(Text, { children: value })] }));
+const DetailPane = ({ run, pane }) => {
+    const ui = useUiState();
+    if (!run || !pane) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Select a run to see details." }) }));
+    }
+    const { input: runInput, output: runOutput, error: runError, status, loading } = pane;
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    const activePane = ui.rightPaneTab === 'input' ? 'input' : 'output';
+    const renderPane = () => {
+        if (activePane === 'input') {
+            if (loading && runInput === null) {
+                return _jsx(LoadingSpinner, {});
+            }
+            return _jsx(JsonView, { value: runInput, maxLines: RUNS_PREVIEW_LINES });
+        }
+        if (runError) {
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", bold: true, children: "ERROR" }), _jsx(Text, { color: "red", wrap: "wrap", children: truncate(String(runError), 400) })] }));
+        }
+        if (runOutput === undefined || runOutput === null) {
+            if (loading) {
+                return _jsx(LoadingSpinner, {});
+            }
+            return _jsx(Text, { dimColor: true, children: "No output yet." });
+        }
+        return _jsx(JsonView, { value: runOutput, maxLines: RUNS_PREVIEW_LINES });
+    };
+    const heading = `${run.workflowType ?? 'run'} : ${run.runId ?? run.workflowId ?? '-'}`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { bold: true, children: heading }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(StatusIcon, { status: status }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, color: statusColor(status), children: status.toUpperCase() }), _jsx(Text, { dimColor: true, children: "     " }), _jsx(InlineKV, { label: "DURATION", value: duration }), _jsx(Text, { dimColor: true, children: "     " }), _jsx(InlineKV, { label: "STARTED", value: formatDate(run.startedAt) }), _jsx(Text, { dimColor: true, children: "     " }), _jsx(InlineKV, { label: "COMPLETED", value: run.completedAt ? formatDate(run.completedAt) : '—' })] }), _jsx(Box, { marginTop: 1, children: _jsx(PaneTabs, { active: activePane }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: renderPane() })] }));
+};
+const HINTS = [
+    { key: '↑/↓', label: 'navigate' },
+    { key: 'enter', label: 'open' },
+    { key: '←/→', label: 'switch pane' },
+    { key: 'e', label: 'expand' },
+    { key: 'o', label: 'temporal' },
+    { key: '/', label: 'filter' },
+    { key: 'tab', label: 'next tab' }
+];
+export const RunsPanel = ({ runs }) => {
+    const ui = useUiState();
+    const filteredRuns = useMemo(() => buildVisibleRuns(runs, ui.search.query), [runs, ui.search.query]);
+    // Lazy initializer — runs once on mount. Restores the previously selected
+    // run after the expanded-JSON modal unmounts and remounts the panel.
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        const previousRunId = ui.selection.runId;
+        if (!previousRunId) {
+            return 0;
+        }
+        const initial = buildVisibleRuns(runs, ui.search.query);
+        const i = initial.findIndex(r => r.runId === previousRunId);
+        return i >= 0 ? i : 0;
+    });
+    const isActive = ui.tab === 'runs' && ui.runsView === 'list' && !ui.search.open && !ui.runModal.open && !ui.expandedJson.open;
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, filteredRuns.length - 1));
+    const selectedRun = filteredRuns[clampedIndex];
+    const { result, trace, loading } = useRunDetail(selectedRun?.workflowId, selectedRun?.runId, selectedRun?.status);
+    const pane = selectedRun ? {
+        input: extractRunInput(trace),
+        output: result?.output,
+        error: result?.error,
+        status: result?.status ?? selectedRun.status ?? 'unknown',
+        loading
+    } : null;
+    useEffect(() => {
+        if (clampedIndex !== selectedIndex) {
+            setSelectedIndex(clampedIndex);
+        }
+    }, [clampedIndex, selectedIndex]);
+    const setSelection = ui.setSelection;
+    useEffect(() => {
+        setSelection({
+            runId: selectedRun?.runId,
+            workflowId: selectedRun?.workflowId,
+            workflowName: selectedRun?.workflowType
+        });
+    }, [selectedRun?.runId, selectedRun?.workflowId, selectedRun?.workflowType, setSelection]);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(i => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex(i => Math.min(filteredRuns.length - 1, i + 1));
+            return;
+        }
+        if (input === 'o' && selectedRun?.workflowId) {
+            openUrl(`${TEMPORAL_UI_BASE}/namespaces/default/workflows/${selectedRun.workflowId}`);
+            return;
+        }
+        if (key.return && selectedRun?.workflowId) {
+            ui.setRunsView('detail');
+            return;
+        }
+        if (key.leftArrow || key.rightArrow) {
+            ui.setRightPaneTab(ui.rightPaneTab === 'input' ? 'output' : 'input');
+            return;
+        }
+        if (input === 'e' && pane) {
+            const content = ui.rightPaneTab === 'input' ?
+                pane.input :
+                (pane.error ?? pane.output);
+            const label = `${selectedRun?.workflowType ?? 'run'} → ${ui.rightPaneTab}`;
+            ui.openExpandedJson(content, label);
+        }
+    }, { isActive });
+    const detailRun = ui.runsView === 'detail' ?
+        (runs.find(r => r.runId === ui.selection.runId && r.workflowId === ui.selection.workflowId) ?? selectedRun) :
+        undefined;
+    useEffect(() => {
+        if (ui.runsView === 'detail' && !detailRun) {
+            ui.setRunsView('list');
+        }
+    }, [ui, detailRun]);
+    if (ui.runsView === 'detail' && detailRun) {
+        return _jsx(RunDetailView, { run: detailRun });
+    }
+    if (runs.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Recent Runs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No runs yet. Trigger one from the Workflows tab or with `output workflow run \u2026`." }) }), _jsx(Footer, { hints: [{ key: 'tab', label: 'next tab' }, { key: '?', label: 'help' }] })] }));
+    }
+    if (filteredRuns.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Recent Runs" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["No runs match `", ui.search.query, "`. Press "] }), _jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: " to clear the filter." })] }), _jsx(Footer, { hints: HINTS, itemCount: 0, itemLabel: "runs" })] }));
+    }
+    return (_jsx(MasterDetailPanel, { items: filteredRuns, selectedIndex: clampedIndex, visibleRows: RUNS_VISIBLE_ROWS, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (run, selected) => _jsx(RunRow, { run: run, selected: selected }), rowKey: (run, i) => `${run.workflowId}-${run.runId ?? run.startedAt}-${i}`, detail: _jsx(DetailPane, { run: selectedRun, pane: pane }), hints: HINTS, itemLabel: "runs" }));
+};

package/dist/views/dev/panels/runs_panel.spec.d.ts

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

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

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { buildVisibleRuns, extractRunInput } from './runs_panel.js';
+const run = (overrides) => ({
+    workflowId: 'wf',
+    workflowType: 'demo',
+    status: 'completed',
+    startedAt: '2026-04-28T18:56:53Z',
+    completedAt: '2026-04-28T18:56:57Z',
+    ...overrides
+});
+describe('buildVisibleRuns', () => {
+    it('drops completed $catalog rows', () => {
+        const runs = [
+            run({ workflowType: '$catalog', status: 'completed' }),
+            run({ workflowType: 'demo', status: 'completed' })
+        ];
+        const visible = buildVisibleRuns(runs, '');
+        expect(visible.map(r => r.workflowType)).toEqual(['demo']);
+    });
+    it('keeps non-completed $catalog rows for diagnostics', () => {
+        const runs = [
+            run({ workflowType: '$catalog', status: 'running' }),
+            run({ workflowType: '$catalog', status: 'failed' })
+        ];
+        const visible = buildVisibleRuns(runs, '');
+        expect(visible).toHaveLength(2);
+    });
+    it('sorts running before failed before completed', () => {
+        const runs = [
+            run({ workflowType: 'a', status: 'completed' }),
+            run({ workflowType: 'b', status: 'running' }),
+            run({ workflowType: 'c', status: 'failed' })
+        ];
+        const visible = buildVisibleRuns(runs, '');
+        expect(visible.map(r => r.status)).toEqual(['running', 'failed', 'completed']);
+    });
+    it('sorts within the same status by startedAt descending', () => {
+        const runs = [
+            run({ workflowId: 'old', startedAt: '2026-04-01T00:00:00Z' }),
+            run({ workflowId: 'new', startedAt: '2026-04-28T00:00:00Z' })
+        ];
+        const visible = buildVisibleRuns(runs, '');
+        expect(visible.map(r => r.workflowId)).toEqual(['new', 'old']);
+    });
+    it('filters by query against workflowType, workflowId, and status', () => {
+        const runs = [
+            run({ workflowType: 'apple', workflowId: 'wf-1' }),
+            run({ workflowType: 'banana', workflowId: 'wf-2' })
+        ];
+        expect(buildVisibleRuns(runs, 'apple')).toHaveLength(1);
+        expect(buildVisibleRuns(runs, 'wf-2')).toHaveLength(1);
+        expect(buildVisibleRuns(runs, 'completed')).toHaveLength(2);
+        expect(buildVisibleRuns(runs, 'no-match')).toHaveLength(0);
+    });
+});
+describe('extractRunInput', () => {
+    it('returns null when the trace has no children', () => {
+        expect(extractRunInput(null)).toBeNull();
+        expect(extractRunInput({ root: { workflowName: 'x', workflowId: 'y', startTime: 0 }, children: [] })).toBeNull();
+    });
+    it('reads from the first child input field directly', () => {
+        const trace = {
+            root: { workflowName: 'x', workflowId: 'y', startTime: 0 },
+            children: [{ input: { foo: 1 } }]
+        };
+        expect(extractRunInput(trace)).toEqual({ foo: 1 });
+    });
+    it('falls back to details.input when the top-level input is missing', () => {
+        const trace = {
+            root: { workflowName: 'x', workflowId: 'y', startTime: 0 },
+            children: [{ details: { input: { bar: 2 } } }]
+        };
+        expect(extractRunInput(trace)).toEqual({ bar: 2 });
+    });
+    it('returns null when neither input source is set', () => {
+        const trace = {
+            root: { workflowName: 'x', workflowId: 'y', startTime: 0 },
+            children: [{ name: 'first-step' }]
+        };
+        expect(extractRunInput(trace)).toBeNull();
+    });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type ServiceStatus } from '#services/docker.js';
+import type { Phase } from '#views/dev/dev_app.js';
+/**
+ * Worker first (most-watched in development), then API, then everything
+ * else alphabetically. Promoting the priority list to a constant keeps
+ * the comparator three lines.
+ */
+export declare const compareService: (a: ServiceStatus, b: ServiceStatus) => number;
+export declare const ServicesPanel: React.FC<{
+    phase: Phase;
+    services: ServiceStatus[];
+    dockerComposePath: string;
+}>;

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

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { isServiceFailed, SERVICE_HEALTH } from '#services/docker.js';
+import { StatusIcon } from '#components/status_icon.js';
+import { openUrl } from '#utils/open_url.js';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { useDockerLogs } from '#views/dev/hooks/use_docker_logs.js';
+import { restartService, restartStack } from '#views/dev/services/docker_control.js';
+import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
+const VISIBLE_LOG_LINES = 18;
+const resolveServiceStatus = (service) => service.health === SERVICE_HEALTH.NONE ? service.state : service.health;
+const SERVICE_URLS = {
+    'temporal-ui': 'http://localhost:8080',
+    api: 'http://localhost:3001',
+    temporal: 'http://localhost:7233',
+    redis: 'redis://localhost:6379'
+};
+const COL = {
+    indicator: 3,
+    icon: 3,
+    name: 16,
+    status: 11,
+    ports: 22
+};
+const HeaderRow = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Services" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { dimColor: true, bold: true, children: "SERVICE" }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: true, bold: true, children: "STATUS" }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: true, bold: true, children: "PORTS" }) })] })] }));
+const ServiceRow = ({ service, selected }) => {
+    const status = resolveServiceStatus(service);
+    const ports = service.ports.length ? service.ports.join(', ') : '-';
+    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, wrap: "truncate-end", children: service.name }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: status }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: ports }) })] }));
+};
+const FailureBanner = ({ services }) => {
+    const failed = services.filter(isServiceFailed);
+    if (failed.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { backgroundColor: "red", color: "white", bold: true, children: [" \u26A0\uFE0F  ", failed.length, " service(s) failing \u2014 see logs and press r to restart "] }) }));
+};
+const LogPane = ({ serviceName, lines, paused }) => {
+    if (!serviceName) {
+        return _jsx(Text, { dimColor: true, children: "Select a service to tail its logs." });
+    }
+    if (lines.length === 0) {
+        return _jsx(LoadingSpinner, { label: `Waiting for logs from ${serviceName}…` });
+    }
+    const visible = lines.slice(-VISIBLE_LOG_LINES);
+    return (_jsxs(Box, { flexDirection: "column", children: [paused && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { backgroundColor: "yellow", color: "black", children: " PAUSED " }), _jsx(Text, { dimColor: true, children: " press p to resume" })] })), visible.map((line, i) => (_jsx(Text, { wrap: "truncate-end", children: line }, `${i}-${line.length}`)))] }));
+};
+const SERVICE_PRIORITY = ['worker', 'api'];
+/**
+ * Worker first (most-watched in development), then API, then everything
+ * else alphabetically. Promoting the priority list to a constant keeps
+ * the comparator three lines.
+ */
+export const compareService = (a, b) => {
+    const ai = SERVICE_PRIORITY.indexOf(a.name);
+    const bi = SERVICE_PRIORITY.indexOf(b.name);
+    if (ai !== -1 || bi !== -1) {
+        return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
+    }
+    return a.name.localeCompare(b.name);
+};
+const HINTS = [
+    { key: '↑/↓', label: 'navigate' },
+    { key: 'r/R', label: 'restart one/all' },
+    { key: 'p', label: 'pause logs' },
+    { key: 'c', label: 'clear' },
+    { key: 'o', label: 'open url' },
+    { key: 'tab', label: 'next tab' },
+    { key: 'ctrl+c', label: 'stop & quit' }
+];
+const HINTS_BOOT = [
+    { key: 'tab', label: 'next tab' },
+    { key: '?', label: 'help' },
+    { key: 'ctrl+c', label: 'quit' }
+];
+const Detail = ({ service, services, lines, paused, banner }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(FailureBanner, { services: services }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, children: service?.name ?? 'Logs' }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(LogPane, { serviceName: service?.name ?? null, lines: lines, paused: paused }) }), banner && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: banner }) }))] }));
+export const ServicesPanel = ({ phase, services, dockerComposePath }) => {
+    const ui = useUiState();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [banner, setBanner] = useState(null);
+    const sortedServices = useMemo(() => [...services].sort(compareService), [services]);
+    const isActive = ui.tab === 'services' && !ui.search.open && !ui.runModal.open;
+    const clamped = Math.min(selectedIndex, Math.max(0, sortedServices.length - 1));
+    const selectedService = sortedServices[clamped];
+    const enabledLogs = isActive && phase === 'running' && Boolean(selectedService);
+    useEffect(() => {
+        if (clamped !== selectedIndex) {
+            setSelectedIndex(clamped);
+        }
+    }, [clamped, selectedIndex]);
+    const logs = useDockerLogs(dockerComposePath, selectedService?.name ?? null, enabledLogs);
+    useEffect(() => {
+        if (!banner) {
+            return () => { };
+        }
+        const id = setTimeout(() => setBanner(null), 3000);
+        return () => clearTimeout(id);
+    }, [banner]);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(i => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex(i => Math.min(sortedServices.length - 1, i + 1));
+            return;
+        }
+        if (!selectedService) {
+            return;
+        }
+        if (input === 'p') {
+            logs.setPaused(!logs.paused);
+            return;
+        }
+        if (input === 'c') {
+            logs.clear();
+            return;
+        }
+        if (input === 'o') {
+            const url = SERVICE_URLS[selectedService.name];
+            if (url) {
+                openUrl(url);
+                setBanner(`Opened ${url}`);
+            }
+            else {
+                setBanner(`${selectedService.name} has no known URL`);
+            }
+            return;
+        }
+        if (input === 'r') {
+            setBanner(`Restarting ${selectedService.name}…`);
+            restartService(dockerComposePath, selectedService.name)
+                .then(() => setBanner(`Restarted ${selectedService.name}`))
+                .catch(err => setBanner(`Restart failed: ${err instanceof Error ? err.message : String(err)}`));
+            return;
+        }
+        if (input === 'R') {
+            setBanner('Restarting all services…');
+            restartStack(dockerComposePath)
+                .then(() => setBanner('Restarted all services'))
+                .catch(err => setBanner(`Restart failed: ${err instanceof Error ? err.message : String(err)}`));
+        }
+    }, { isActive });
+    if (phase === 'waiting' && services.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(LoadingSpinner, { label: "Starting Docker services\u2026" }), _jsx(Footer, { hints: HINTS_BOOT })] }));
+    }
+    if (services.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "No services running." }), _jsx(Footer, { hints: HINTS_BOOT })] }));
+    }
+    return (_jsx(MasterDetailPanel, { items: sortedServices, selectedIndex: clamped, visibleRows: sortedServices.length, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (service, selected) => _jsx(ServiceRow, { service: service, selected: selected }), rowKey: service => service.name, detail: _jsx(Detail, { service: selectedService, services: services, lines: logs.lines, paused: logs.paused, banner: banner }), hints: phase === 'running' ? HINTS : HINTS_BOOT, itemLabel: "services" }));
+};

package/dist/views/dev/panels/services_panel.spec.d.ts

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

package/dist/views/dev/panels/services_panel.spec.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { compareService } from './services_panel.js';
+const svc = (name) => ({
+    name,
+    state: 'running',
+    health: 'healthy',
+    ports: []
+});
+describe('compareService', () => {
+    it('puts worker before api', () => {
+        expect(compareService(svc('worker'), svc('api'))).toBeLessThan(0);
+    });
+    it('puts api before alphabetically-earlier names', () => {
+        expect(compareService(svc('api'), svc('aardvark'))).toBeLessThan(0);
+    });
+    it('puts worker before alphabetically-earlier names', () => {
+        expect(compareService(svc('worker'), svc('aardvark'))).toBeLessThan(0);
+    });
+    it('sorts non-priority services alphabetically', () => {
+        expect(compareService(svc('postgres'), svc('redis'))).toBeLessThan(0);
+        expect(compareService(svc('temporal'), svc('redis'))).toBeGreaterThan(0);
+    });
+    it('produces the expected full ordering for a real stack', () => {
+        const stack = [svc('temporal-ui'), svc('redis'), svc('postgres'), svc('api'), svc('worker'), svc('temporal')];
+        const sorted = [...stack].sort(compareService).map(s => s.name);
+        expect(sorted).toEqual(['worker', 'api', 'postgres', 'redis', 'temporal', 'temporal-ui']);
+    });
+});

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Workflow } from '#api/generated/api.js';
+import type { WorkflowRun } from '#services/workflow_runs.js';
+export declare const WorkflowsPanel: React.FC<{
+    workflows: Workflow[];
+    runs: WorkflowRun[];
+}>;