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

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,4 @@
+import React from 'react';
+export declare const RunModal: React.FC<{
+    workflowName: 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 }) => {
+    const ui = useUiState();
+    const scenarios = useMemo(() => listScenariosForWorkflow(workflowName), [workflowName]);
+    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);
+            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);
+            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);
+            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;
+}>;

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[];
+}>;