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

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;

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

@@ -0,0 +1,44 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { JsonView, countJsonLines } from '#views/dev/utils/json_render.js';
+import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
+const CHROME_HEIGHT = 4;
+const FALLBACK_ROWS = 24;
+const PAGE_SIZE = 10;
+export const ExpandedJsonModal = () => {
+    const ui = useUiState();
+    const { stdout } = useStdout();
+    const [offset, setOffset] = useState(0);
+    const { value, title } = ui.expandedJson;
+    const totalLines = countJsonLines(value);
+    const cols = stdout?.columns ?? 80;
+    const rows = stdout?.rows ?? FALLBACK_ROWS;
+    const visibleLines = Math.max(5, rows - CHROME_HEIGHT);
+    const maxOffset = Math.max(0, totalLines - visibleLines);
+    const clampedOffset = Math.min(offset, maxOffset);
+    useInput((input, key) => {
+        if (key.escape) {
+            ui.closeExpandedJson();
+            return;
+        }
+        if (key.downArrow) {
+            setOffset(o => Math.min(maxOffset, o + 1));
+            return;
+        }
+        if (key.upArrow) {
+            setOffset(o => Math.max(0, o - 1));
+            return;
+        }
+        if (key.pageDown) {
+            setOffset(o => Math.min(maxOffset, o + PAGE_SIZE));
+            return;
+        }
+        if (key.pageUp) {
+            setOffset(o => Math.max(0, o - PAGE_SIZE));
+        }
+    });
+    const progress = totalLines === 0 ? 100 : Math.round(((clampedOffset + visibleLines) / totalLines) * 100);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { bold: true, children: ["\u2922  ", title] }), _jsxs(Text, { dimColor: true, children: [Math.min(100, progress), "%   line ", clampedOffset + 1, "-", Math.min(totalLines, clampedOffset + visibleLines), "/", totalLines] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RULE_PURPLE, children: '─'.repeat(Math.max(1, cols)) }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(JsonView, { value: value, maxLines: visibleLines, offset: clampedOffset, truncateLine: true, showOverflowFooter: false }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RULE_PURPLE, children: '─'.repeat(Math.max(1, cols)) }) }), _jsxs(Box, { columnGap: 2, children: [_jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "\u2191/\u2193" }), _jsx(Text, { dimColor: true, children: "scroll" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "pgup/pgdn" }), _jsx(Text, { dimColor: true, children: "page" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: "close" })] })] })] }));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RunModal: React.FC<{
+    workflowName: string;
+    workflowPath?: string;
+}>;

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

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { listScenariosForWorkflow } from '#utils/scenario_resolver.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { startWorkflow } from '#views/dev/services/run_workflow.js';
+import { readScenario, writeScenario } from '#views/dev/services/scenario_io.js';
+import { JsonEditor } from '#views/dev/utils/json_editor.js';
+const CUSTOM_SEED = { '': '' };
+const SCENARIO_NAME_RE = /^[a-zA-Z0-9_-]+$/;
+const buildEntries = (scenarios) => {
+    const list = scenarios.map(s => ({
+        kind: 'scenario',
+        label: s,
+        scenarioName: s
+    }));
+    list.push({ kind: 'custom', label: 'Custom input' });
+    return list;
+};
+const Frame = ({ title, children }) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", paddingX: 1, paddingY: 0, children: [_jsx(Text, { bold: true, children: title }), children] }));
+const TextPrompt = ({ label, value }) => (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { children: [label, " "] }), _jsx(Text, { children: value }), _jsx(Text, { inverse: true, children: ' ' })] }));
+export const RunModal = ({ workflowName, workflowPath }) => {
+    const ui = useUiState();
+    const scenarios = useMemo(() => listScenariosForWorkflow(workflowName, workflowPath), [workflowName, workflowPath]);
+    const entries = useMemo(() => buildEntries(scenarios), [scenarios]);
+    const [mode, setMode] = useState('select');
+    const [index, setIndex] = useState(0);
+    const [editName, setEditName] = useState('');
+    const [editSeed, setEditSeed] = useState(CUSTOM_SEED);
+    const [editFrameTitle, setEditFrameTitle] = useState('');
+    const [nameError, setNameError] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const closeWith = (message, tone = 'info') => {
+        if (message) {
+            ui.pushToast(message, tone);
+        }
+        ui.closeRunModal();
+    };
+    const submit = async (input, label) => {
+        setMode('submitting');
+        try {
+            const started = await startWorkflow({ workflowName, input });
+            const id = started.workflowId ?? '?';
+            ui.setSearchQuery(workflowName);
+            ui.setTab('runs');
+            closeWith(`Started ${workflowName} (${label}) — ${id}`, 'success');
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setMode('error');
+        }
+    };
+    const runScenario = async (scenarioName) => {
+        try {
+            const input = await readScenario(workflowName, scenarioName, workflowPath);
+            await submit(input, scenarioName);
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setMode('error');
+        }
+    };
+    const startDuplicate = async (scenarioName) => {
+        try {
+            const sourceContent = await readScenario(workflowName, scenarioName, workflowPath);
+            setEditName(`${scenarioName}_copy`);
+            setEditSeed(sourceContent);
+            setEditFrameTitle(`Duplicate '${scenarioName}'`);
+            setNameError(null);
+            setMode('edit_name');
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setMode('error');
+        }
+    };
+    const startCustom = () => {
+        setEditName('');
+        setEditSeed(CUSTOM_SEED);
+        setEditFrameTitle('New scenario');
+        setNameError(null);
+        setMode('edit_name');
+    };
+    const validateName = (raw) => {
+        const name = raw.trim();
+        if (!name) {
+            return 'Scenario name cannot be empty.';
+        }
+        if (!SCENARIO_NAME_RE.test(name)) {
+            return 'Use letters, numbers, dashes, and underscores only.';
+        }
+        if (scenarios.includes(name)) {
+            return `A scenario named '${name}' already exists.`;
+        }
+        return null;
+    };
+    const handleEditorSubmit = async (value) => {
+        const name = editName.trim();
+        const writeError = validateName(editName);
+        if (writeError) {
+            setNameError(writeError);
+            setMode('edit_name');
+            return;
+        }
+        setMode('submitting');
+        try {
+            const writtenPath = await writeScenario(workflowName, name, value, workflowPath);
+            ui.pushToast(`Saved scenario at ${writtenPath}`, 'info');
+            await submit(value, name);
+        }
+        catch (err) {
+            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setMode('error');
+        }
+    };
+    const handleEditorCancel = () => {
+        // Bring the user back to the name step so they can adjust it or bail.
+        setMode('edit_name');
+    };
+    useInput((input, key) => {
+        if (mode === 'edit_content' || mode === 'submitting') {
+            return;
+        }
+        if (mode === 'select') {
+            if (key.escape) {
+                closeWith();
+                return;
+            }
+            if (key.upArrow) {
+                setIndex(i => Math.max(0, i - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setIndex(i => Math.min(entries.length - 1, i + 1));
+                return;
+            }
+            if (key.return) {
+                const entry = entries[index];
+                if (entry?.kind === 'scenario' && entry.scenarioName) {
+                    void runScenario(entry.scenarioName);
+                }
+                else if (entry?.kind === 'custom') {
+                    startCustom();
+                }
+                return;
+            }
+            if (input === 'd') {
+                const entry = entries[index];
+                if (entry?.kind === 'scenario' && entry.scenarioName) {
+                    void startDuplicate(entry.scenarioName);
+                }
+            }
+            return;
+        }
+        if (mode === 'edit_name') {
+            if (key.escape) {
+                setMode('select');
+                return;
+            }
+            if (key.return) {
+                const err = validateName(editName);
+                if (err) {
+                    setNameError(err);
+                    return;
+                }
+                setNameError(null);
+                setMode('edit_content');
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setEditName(v => v.slice(0, -1));
+                if (nameError) {
+                    setNameError(null);
+                }
+                return;
+            }
+            if (input && !key.ctrl && !key.meta) {
+                setEditName(v => v + input);
+                if (nameError) {
+                    setNameError(null);
+                }
+            }
+            return;
+        }
+        if (mode === 'error') {
+            if (key.escape || key.return) {
+                setMode('select');
+                setErrorMessage(null);
+            }
+        }
+    });
+    if (mode === 'edit_content') {
+        return (_jsx(Frame, { title: `${editFrameTitle} → ${editName}.json`, children: _jsx(JsonEditor, { seed: editSeed, title: `${editName}.json`, isActive: true, onSubmit: value => {
+                    void handleEditorSubmit(value);
+                }, onCancel: handleEditorCancel }) }));
+    }
+    if (mode === 'edit_name') {
+        return (_jsxs(Frame, { title: editFrameTitle, children: [_jsx(TextPrompt, { label: "Scenario name:", value: editName }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : null, _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "enter" }), _jsx(Text, { children: " next   " }), _jsx(Text, { dimColor: true, children: "esc" }), _jsx(Text, { children: " back" })] })] }));
+    }
+    if (mode === 'submitting') {
+        return (_jsx(Frame, { title: `Run ${workflowName}`, children: _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Starting workflow\u2026" })] }) }));
+    }
+    if (mode === 'error') {
+        return (_jsx(Frame, { title: `Run ${workflowName}`, children: _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "red", bold: true, children: ["\u2717 ", errorMessage ?? 'Something went wrong.'] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press enter or esc to return." }) })] }) }));
+    }
+    return (_jsxs(Frame, { title: `Run ${workflowName}`, children: [entries.length === 0 ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No scenarios on disk. Choose Custom input." }) })) : (_jsx(Box, { flexDirection: "column", marginTop: 1, children: entries.map((entry, i) => {
+                    const prev = i > 0 ? entries[i - 1] : undefined;
+                    const showSeparator = prev?.kind === 'scenario' && entry.kind !== 'scenario';
+                    return (_jsxs(React.Fragment, { children: [showSeparator && (_jsx(Box, { marginY: 0, children: _jsx(Text, { dimColor: true, children: '─'.repeat(40) }) })), _jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, children: [' ', entry.label] })] })] }, `${entry.kind}-${entry.scenarioName ?? i}`));
+                }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "\u2191/\u2193" }), _jsx(Text, { children: " navigate   " }), _jsx(Text, { dimColor: true, children: "enter" }), _jsx(Text, { children: " run   " }), _jsx(Text, { dimColor: true, children: "d" }), _jsx(Text, { children: " duplicate   " }), _jsx(Text, { dimColor: true, children: "esc" }), _jsx(Text, { children: " cancel" })] })] }));
+};

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

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

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { config } from '#config.js';
+import { openUrl } from '#utils/open_url.js';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+const DOCS_URL = 'https://docs.output.ai';
+const KV = ({ label, value }) => (_jsxs(Box, { children: [_jsx(Box, { width: 26, children: _jsx(Text, { children: label }) }), _jsx(Text, { bold: true, wrap: "truncate-end", children: value })] }));
+const RunFromCli = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Run a workflow from the CLI" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, children: "npx output workflow run blog_evaluator paulgraham_hwh" }) }), _jsx(Box, { children: _jsxs(Text, { bold: true, children: ["npx output workflow run simple --input ", '\'{"values":[1,2,3]}\''] }) }), _jsx(Box, { children: _jsx(Text, { bold: true, children: "npx output workflow run simple --input scenario.json" }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "From the TUI: open Workflows tab, hover a workflow, press " }), _jsx(Text, { bold: true, children: "r" }), _jsx(Text, { dimColor: true, children: "." })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Custom input from the TUI uses an in-tui editor with live JSON validation." }) })] }));
+const Hotkeys = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Hotkeys" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "Global" }) }), _jsx(KV, { label: "Switch tab", value: "tab / shift+tab / 1-4" }), _jsx(KV, { label: "Search / filter", value: "/  (esc clears, enter applies)" }), _jsx(KV, { label: "Open this help", value: "?" }), _jsx(KV, { label: "Open docs.output.ai", value: "d" }), _jsx(KV, { label: "Stop services & quit", value: "ctrl+c" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "Workflows tab" }) }), _jsx(KV, { label: "Navigate", value: "\u2191/\u2193" }), _jsx(KV, { label: "Show runs (filtered)", value: "enter" }), _jsx(KV, { label: "Run workflow", value: "r  (scenario \u00B7 custom input \u00B7 duplicate)" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "Recent Runs tab" }) }), _jsx(KV, { label: "Navigate", value: "\u2191/\u2193" }), _jsx(KV, { label: "Open run detail", value: "enter  (esc to go back)" }), _jsx(KV, { label: "Open in Temporal UI", value: "o" }), _jsx(KV, { label: "Switch input/output", value: "\u2190/\u2192" }), _jsx(KV, { label: "Expand JSON pane", value: "e  (\u2191/\u2193 scroll, pgup/pgdn page)" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "Services tab" }) }), _jsx(KV, { label: "Navigate", value: "\u2191/\u2193" }), _jsx(KV, { label: "Restart one / all", value: "r / R" }), _jsx(KV, { label: "Pause / resume tail", value: "p" }), _jsx(KV, { label: "Clear log buffer", value: "c" }), _jsx(KV, { label: "Open service URL", value: "o" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "Run modal" }) }), _jsx(KV, { label: "Navigate", value: "\u2191/\u2193" }), _jsx(KV, { label: "Run scenario", value: "enter" }), _jsx(KV, { label: "Duplicate scenario", value: "d" }), _jsx(KV, { label: "Cancel", value: "esc" })] }));
+const ServiceUrls = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Service URLs" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(KV, { label: "Temporal gRPC", value: "localhost:7233" }), _jsx(KV, { label: "Temporal UI", value: "http://localhost:8080" }), _jsx(KV, { label: "API server", value: "localhost:3001" }), _jsx(KV, { label: "Redis", value: "localhost:6379" })] })] }));
+const UpdatingMigrating = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Updating / Migrating" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Update the CLI to the latest published version:" }) }), _jsx(Box, { children: _jsx(Text, { bold: true, children: "output update" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Migrate a workflow project to the SDK version this CLI ships with:" }) }), _jsx(Box, { children: _jsx(Text, { bold: true, children: "output migrate" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: "The migration walks `package.json` and project files, updates `@outputai/*` deps, and applies any code-mod steps the SDK ships with the new version." }) })] }));
+const ClaudePlugins = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Claude Plugins" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: "`output init` installs the Claude Code plugins (skills, commands, agents) into your project automatically when scaffolding a new workflow." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "To re-install or refresh the plugins after a CLI update:" }) }), _jsx(Box, { children: _jsx(Text, { bold: true, children: "output update --agents" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "This pulls the latest plugin bundle that ships with the installed CLI version." }) })] }));
+const Troubleshooting = () => {
+    const logsCommand = `docker compose -p ${config.dockerServiceName} logs -f <service>`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Troubleshooting" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Worker won't start? ", _jsx(Text, { bold: true, children: "output fix" }), " rebuilds the local image."] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Tail a service log from the shell: ", _jsx(Text, { bold: true, children: logsCommand })] }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Force-pull images: ", _jsx(Text, { bold: true, children: "output dev --image-pull-policy always" })] }) })] }));
+};
+const SECTIONS = [
+    { id: 'cli', title: 'Run from CLI', body: RunFromCli },
+    { id: 'hotkeys', title: 'Hotkeys', body: Hotkeys },
+    { id: 'urls', title: 'Service URLs', body: ServiceUrls },
+    { id: 'updating', title: 'Updating / Migrating', body: UpdatingMigrating },
+    { id: 'claude-plugins', title: 'Claude Plugins', body: ClaudePlugins },
+    { id: 'troubleshooting', title: 'Troubleshooting', body: Troubleshooting }
+];
+const HINTS = [
+    { key: '↑/↓', label: 'navigate' },
+    { key: 'd', label: 'docs' },
+    { key: 'tab', label: 'next tab' },
+    { key: 'ctrl+c', label: 'quit' }
+];
+export const HelpPanel = () => {
+    const ui = useUiState();
+    const [index, setIndex] = useState(0);
+    const isActive = ui.tab === 'help' && !ui.search.open && !ui.runModal.open;
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setIndex(i => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setIndex(i => Math.min(SECTIONS.length - 1, i + 1));
+            return;
+        }
+        if (input === 'd') {
+            openUrl(DOCS_URL);
+        }
+    }, { isActive });
+    const Section = SECTIONS[index].body;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: 28, children: [_jsx(Text, { bold: true, children: "Help" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: SECTIONS.map((section, i) => (_jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, dimColor: i !== index, children: [' ', section.title] })] }, section.id))) })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, paddingLeft: 2, children: _jsx(Section, {}) })] }), _jsx(Footer, { hints: HINTS, itemCount: SECTIONS.length, itemLabel: "sections" })] }));
+};

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

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