@outputai/cli 0.4.1-next.d43aa3d.0 → 0.5.0

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

@@ -1,53 +1,51 @@
 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';
+import { useListSelection } from '#views/dev/utils/panel_helpers.js';
+import { InlineSnippet } from '../components/inline_snippet.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." }) })] }));
+export const Section = ({ children, title, direction = 'v' }) => (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, children: title }), _jsx(Box, { flexDirection: direction === 'v' ? 'column' : 'row', gap: 1, flexWrap: 'wrap', children: children })] }));
+export const SubSection = ({ children, title }) => (_jsxs(Box, { flexDirection: "column", gap: 1, borderStyle: "single", borderColor: "blackBright", paddingLeft: 1, paddingRight: 1, children: [_jsx(Text, { italic: true, dimColor: true, children: title }), _jsx(Box, { flexDirection: "column", children: children })] }));
+const KV = ({ label, value }) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 26, children: _jsx(Text, { children: label }) }), _jsx(Text, { bold: true, children: value })] }));
+const RunFromCli = () => (_jsxs(Section, { title: "Running a workflow", children: [_jsxs(SubSection, { title: "From the CLI", children: [_jsx(InlineSnippet, { content: "npx output workflow run blog_evaluator paulgraham_hwh" }), _jsx(InlineSnippet, { content: 'npx output workflow run simple --input {"values":[1,2,3]}' }), _jsx(InlineSnippet, { content: "npx output workflow run simple --input scenario.json" })] }), _jsxs(SubSection, { title: "From the TUI", children: [_jsxs(Text, { children: ["Open Workflows tab, hover a workflow, press ", _jsx(Text, { bold: true, children: "r" }), "."] }), _jsx(Text, { children: "Create a custom input from the TUI using the editor with live JSON validation or select an existing scenario." })] })] }));
+const ServiceUrls = () => (_jsx(Section, { title: "Service URLs", children: _jsxs(SubSection, { title: "Where the services are available", 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(Section, { title: "Updating / Migrating", children: [_jsxs(SubSection, { title: "Update", children: [_jsx(Text, { wrap: "wrap", children: "Update the CLI to the latest published version:" }), _jsx(InlineSnippet, { content: "output update" })] }), _jsxs(SubSection, { title: "Migrate", children: [_jsx(Text, { wrap: "wrap", children: "Migrate a workflow project to the SDK version this CLI ships with:" }), _jsx(InlineSnippet, { content: "output migrate" }), _jsx(Text, { 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 = () => (_jsx(Section, { title: "Claude Plugins", children: _jsxs(SubSection, { title: "Reinstall", children: [_jsx(Text, { wrap: "wrap", children: "Command `output init` already installs the Claude Code plugins (skills, commands, agents) into your project during scaffolding." }), _jsx(Text, { wrap: "wrap", children: "But if it is necessary to reinstall it, use the update command:" }), _jsx(InlineSnippet, { content: "output update --agents" }), _jsx(Text, { 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" })] }) })] }));
+    return (_jsxs(Section, { title: "Troubleshooting", children: [_jsxs(SubSection, { title: "Worker won't start", children: [_jsx(Text, { children: "If the worker won't start, rebuild the local image:" }), _jsx(InlineSnippet, { content: "output fix" })] }), _jsxs(SubSection, { title: "I need to see more logs", children: [_jsx(Text, { children: "Tail a service log from the shell:" }), _jsx(InlineSnippet, { content: logsCommand })] }), _jsxs(SubSection, { title: "Force pull-images", children: [_jsx(Text, { children: "If the images get stale and a fresh start is necessary, force pull with:" }), _jsx(InlineSnippet, { content: "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 = [
+export const HELP_HINTS = [
     { key: '↑/↓', label: 'navigate' },
-    { key: 'd', label: 'docs' },
-    { key: 'tab', label: 'next tab' },
-    { key: 'ctrl+c', label: 'quit' }
+    { key: 'd', label: 'docs' }
 ];
+export const HELP_SECTION_COUNT = SECTIONS.length;
 export const HelpPanel = () => {
     const ui = useUiState();
-    const [index, setIndex] = useState(0);
-    const isActive = ui.tab === 'help' && !ui.search.open && !ui.runModal.open;
+    const { selectedIndex: index, selectPrevious, selectNext } = useListSelection(SECTIONS.length);
     useInput((input, key) => {
         if (key.upArrow) {
-            setIndex(i => Math.max(0, i - 1));
+            selectPrevious();
             return;
         }
         if (key.downArrow) {
-            setIndex(i => Math.min(SECTIONS.length - 1, i + 1));
+            selectNext();
             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" })] }));
+    }, { isActive: ui.tab === 'help' && !ui.search.open });
+    const ActiveSection = SECTIONS[index].body;
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingRight: 2, 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(ActiveSection, {})] }));
 };

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

@@ -1,8 +1,12 @@
 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 RUNS_HINTS: {
+    key: string;
+    label: string;
+}[];
+export declare const RUNS_EMPTY_HINTS: never[];
 export declare const RunsPanel: React.FC<{
     runs: WorkflowRun[];
+    height: number;
 }>;

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

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } 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 { WorkflowStatusIcon, workflowStatusColor } from '#views/dev/components/workflow_status.js';
+import { elapsedMs, formatDurationCompact } from '#utils/date_formatter.js';
 import { openUrl } from '#utils/open_url.js';
-import { Footer } from '#views/dev/chrome/footer.js';
+import { TabBar, getHeight as getTabBarHeight } from '#views/dev/chrome/tab_bar.js';
+import { ContentTitle, getHeight as getContentTitleHeight } from '#views/dev/components/content_title.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 { RunInfoSidebar } from '#views/dev/components/run_info_sidebar.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';
+import { capitalize, cycleValue, formatContentTitle, formatStartedShort, hasJsonValue, truncate, useListSelection } from '#views/dev/utils/panel_helpers.js';
+import { CATALOG_WORKFLOW_NAME, RUNS_VISIBLE_ROWS } from '#views/dev/utils/constants.js';
 const TEMPORAL_UI_BASE = 'http://localhost:8080';
 const STATUS_ORDER = {
     running: 0,
@@ -47,19 +48,6 @@ export const buildVisibleRuns = (runs, query) => {
     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,
@@ -69,59 +57,86 @@ const COL = {
     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 RUN_INFO_TABS = [
+    { id: 'status', label: 'Status' },
+    { id: 'input', label: 'Input' },
+    { id: 'output', label: 'Output' },
+    { id: 'attributes', label: 'Attributes' },
+    { id: 'aggregations', label: 'Aggregations' }
+];
+const RUN_INFO_TAB_ORDER = ['status', 'input', 'output', 'attributes', 'aggregations'];
+const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: "\u00A0" }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: "\u00A0" }) }), _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 color = workflowStatusColor(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) }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(WorkflowStatusIcon, { 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 statusPaneValue = (run, pane) => ({
+    status: pane.status,
+    runId: run.runId,
+    workflowId: run.workflowId,
+    workflowType: run.workflowType,
+    startedAt: run.startedAt,
+    completedAt: run.completedAt
+});
+const runPaneValue = (run, pane, activePane) => {
+    if (activePane === 'status') {
+        return statusPaneValue(run, pane);
+    }
+    if (activePane === 'input') {
+        return pane.input;
+    }
+    if (activePane === 'output') {
+        return pane.error ?? pane.output;
+    }
+    if (activePane === 'attributes') {
+        return pane.attributes;
+    }
+    return pane.aggregations;
 };
-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 DetailPane = ({ run, pane, rows }) => {
     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 { loading } = pane;
+    const activePane = ui.runListPaneTab;
+    const tabContentRows = Math.max(1, rows - getContentTitleHeight() - getTabBarHeight());
+    const tabs = hasJsonValue(pane.error) ?
+        RUN_INFO_TABS.map(tab => tab.id === 'output' ? { ...tab, label: 'Error' } : tab) :
+        RUN_INFO_TABS;
     const renderPane = () => {
-        if (activePane === 'input') {
-            if (loading && runInput === null) {
-                return _jsx(LoadingSpinner, {});
-            }
-            return _jsx(JsonView, { value: runInput, maxLines: RUNS_PREVIEW_LINES });
+        if (activePane === 'status') {
+            return _jsx(RunInfoSidebar, { run: run, resultStatus: pane.status, maxRows: tabContentRows });
         }
-        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) {
+        const value = runPaneValue(run, pane, activePane);
+        if (value === undefined || value === null) {
             if (loading) {
                 return _jsx(LoadingSpinner, {});
             }
-            return _jsx(Text, { dimColor: true, children: "No output yet." });
+            return _jsx(Text, { dimColor: true, children: "\u2014" });
+        }
+        if (activePane === 'output' && hasJsonValue(pane.error)) {
+            const lines = String(pane.error).split('\n').slice(0, tabContentRows);
+            return (_jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { color: "red", wrap: "truncate-end", children: line }, i))) }));
         }
-        return _jsx(JsonView, { value: runOutput, maxLines: RUNS_PREVIEW_LINES });
+        return _jsx(JsonView, { value: value, maxLines: tabContentRows, truncateLine: true });
     };
-    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() })] }));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(ContentTitle, { title: formatContentTitle([`Workflow "${run.workflowType}"`, 'Result']) }), _jsx(TabBar, { active: activePane, items: tabs }), renderPane()] }));
 };
-const HINTS = [
+export const RUNS_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' }
+    { key: 'o', label: 'temporal' }
 ];
-export const RunsPanel = ({ runs }) => {
+export const RUNS_EMPTY_HINTS = [];
+export const RunsPanel = ({ runs, height }) => {
     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 initialIndex = () => {
         const previousRunId = ui.selection.runId;
         if (!previousRunId) {
             return 0;
@@ -129,23 +144,19 @@ export const RunsPanel = ({ runs }) => {
         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 { selectedIndex: clampedIndex, selectPrevious, selectNext } = useListSelection(filteredRuns.length, initialIndex);
     const selectedRun = filteredRuns[clampedIndex];
-    const { result, trace, loading } = useRunDetail(selectedRun?.workflowId, selectedRun?.runId, selectedRun?.status);
+    const { result, loading } = useRunDetail(selectedRun?.workflowId, selectedRun?.runId, selectedRun?.status);
     const pane = selectedRun ? {
-        input: extractRunInput(trace),
+        input: result?.input,
         output: result?.output,
         error: result?.error,
+        attributes: result?.attributes,
+        aggregations: result?.aggregations,
         status: result?.status ?? selectedRun.status ?? 'unknown',
         loading
     } : null;
-    useEffect(() => {
-        if (clampedIndex !== selectedIndex) {
-            setSelectedIndex(clampedIndex);
-        }
-    }, [clampedIndex, selectedIndex]);
     const setSelection = ui.setSelection;
     useEffect(() => {
         setSelection({
@@ -156,11 +167,11 @@ export const RunsPanel = ({ runs }) => {
     }, [selectedRun?.runId, selectedRun?.workflowId, selectedRun?.workflowType, setSelection]);
     useInput((input, key) => {
         if (key.upArrow) {
-            setSelectedIndex(i => Math.max(0, i - 1));
+            selectPrevious();
             return;
         }
         if (key.downArrow) {
-            setSelectedIndex(i => Math.min(filteredRuns.length - 1, i + 1));
+            selectNext();
             return;
         }
         if (input === 'o' && selectedRun?.workflowId) {
@@ -172,33 +183,21 @@ export const RunsPanel = ({ runs }) => {
             return;
         }
         if (key.leftArrow || key.rightArrow) {
-            ui.setRightPaneTab(ui.rightPaneTab === 'input' ? 'output' : 'input');
+            ui.setRunListPaneTab(cycleValue(RUN_INFO_TAB_ORDER, ui.runListPaneTab, key.rightArrow ? 1 : -1));
             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);
+            const activePane = ui.runListPaneTab;
+            const content = selectedRun ? runPaneValue(selectedRun, pane, activePane) : null;
+            const title = formatContentTitle(['Recent Runs', `Workflow "${selectedRun?.workflowType ?? ''}"`, capitalize(activePane)]);
+            ui.openExpandedJson(content, title);
         }
-    }, { 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 });
-    }
+    }, { isActive: ui.tab === 'runs' && ui.runsView === 'list' && !ui.search.open });
     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' }] })] }));
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "No runs yet. Trigger one from the Workflows tab or with `output workflow run \u2026`." }) }));
     }
     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(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: ["No runs match `", ui.search.query, "`. Press ", _jsx(Text, { bold: true, children: "esc" }), " to clear the filter."] }) }));
     }
-    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" }));
+    return (_jsx(MasterDetailPanel, { items: filteredRuns, selectedIndex: clampedIndex, height: height, 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: ({ detailRows }) => _jsx(DetailPane, { run: selectedRun, pane: pane, rows: detailRows }) }));
 };

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { buildVisibleRuns, extractRunInput } from './runs_panel.js';
+import { buildVisibleRuns } from './runs_panel.js';
 const run = (overrides) => ({
     workflowId: 'wf',
     workflowType: 'demo',
@@ -53,30 +53,3 @@ describe('buildVisibleRuns', () => {
         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

@@ -7,7 +7,13 @@ import type { Phase } from '#views/dev/dev_app.js';
  * the comparator three lines.
  */
 export declare const compareService: (a: ServiceStatus, b: ServiceStatus) => number;
+export declare const SERVICES_HINTS: {
+    key: string;
+    label: string;
+}[];
+export declare const SERVICES_BOOT_HINTS: never[];
 export declare const ServicesPanel: React.FC<{
+    height: number;
     phase: Phase;
     services: ServiceStatus[];
     dockerComposePath: string;