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

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

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { useEffect, useMemo, useRef } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
 import { isServiceFailed, SERVICE_HEALTH } from '#services/docker.js';
-import { StatusIcon } from '#components/status_icon.js';
+import { DockerServiceStatusIcon } from '#views/dev/components/docker_service_status.js';
 import { openUrl } from '#utils/open_url.js';
-import { Footer } from '#views/dev/chrome/footer.js';
 import { LoadingSpinner } from '#views/dev/chrome/loading_spinner.js';
 import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
 import { useUiState } from '#views/dev/state/ui_state.js';
 import { useDockerLogs } from '#views/dev/hooks/use_docker_logs.js';
 import { restartService, restartStack } from '#views/dev/services/docker_control.js';
+import { ContentTitle, getHeight as getContentTitleHeight } from '#views/dev/components/content_title.js';
 import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
-const VISIBLE_LOG_LINES = 18;
+import { formatContentTitle, truncate, useListSelection } from '#views/dev/utils/panel_helpers.js';
+const LOG_WIDTH_PADDING = 8;
+const PAUSED_ROWS = 1;
 const resolveServiceStatus = (service) => service.health === SERVICE_HEALTH.NONE ? service.state : service.health;
 const SERVICE_URLS = {
     'temporal-ui': 'http://localhost:8080',
@@ -26,28 +28,22 @@ const COL = {
     status: 11,
     ports: 22
 };
-const HeaderRow = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Services" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { dimColor: true, bold: true, children: "SERVICE" }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: true, bold: true, children: "STATUS" }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: true, bold: true, children: "PORTS" }) })] })] }));
+const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: "\u00A0" }) }), _jsx(Box, { width: COL.icon, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { dimColor: true, bold: true, children: "SERVICE" }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: true, bold: true, children: "STATUS" }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: true, bold: true, children: "PORTS" }) })] }));
 const ServiceRow = ({ service, selected }) => {
     const status = resolveServiceStatus(service);
     const ports = service.ports.length ? service.ports.join(', ') : '-';
-    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, wrap: "truncate-end", children: service.name }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: status }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: ports }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.icon, children: _jsx(DockerServiceStatusIcon, { status: status }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, wrap: "truncate-end", children: service.name }) }), _jsx(Box, { width: COL.status, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: status }) }), _jsx(Box, { width: COL.ports, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: ports }) })] }));
 };
-const FailureBanner = ({ services }) => {
-    const failed = services.filter(isServiceFailed);
-    if (failed.length === 0) {
-        return null;
-    }
-    return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { backgroundColor: "red", color: "white", bold: true, children: [" \u26A0\uFE0F  ", failed.length, " service(s) failing \u2014 see logs and press r to restart "] }) }));
-};
-const LogPane = ({ serviceName, lines, paused }) => {
+const formatLogLine = (line, maxWidth) => truncate(line.replace(/\r/g, '').replace(/\t/g, '  ').trimEnd(), maxWidth);
+const serviceLogRowsFor = (detailRows, paused) => Math.max(1, detailRows - getContentTitleHeight() - (paused ? PAUSED_ROWS : 0));
+const LogPane = ({ serviceName, lines, maxLines, paused }) => {
+    const { stdout } = useStdout();
+    const maxLineWidth = Math.max(20, (stdout?.columns ?? 120) - LOG_WIDTH_PADDING);
     if (!serviceName) {
         return _jsx(Text, { dimColor: true, children: "Select a service to tail its logs." });
     }
-    if (lines.length === 0) {
-        return _jsx(LoadingSpinner, { label: `Waiting for logs from ${serviceName}…` });
-    }
-    const visible = lines.slice(-VISIBLE_LOG_LINES);
-    return (_jsxs(Box, { flexDirection: "column", children: [paused && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { backgroundColor: "yellow", color: "black", children: " PAUSED " }), _jsx(Text, { dimColor: true, children: " press p to resume" })] })), visible.map((line, i) => (_jsx(Text, { wrap: "truncate-end", children: line }, `${i}-${line.length}`)))] }));
+    const visible = lines.slice(-maxLines);
+    return (_jsxs(Box, { flexDirection: "column", children: [lines.length === 0 && (_jsx(LoadingSpinner, { label: `Waiting for logs from ${serviceName}...` })), visible.map((line, i) => (_jsx(Text, { wrap: "truncate-end", children: formatLogLine(line, maxLineWidth) }, `${i}-${line.length}`))), paused && (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: "yellow", color: "black", children: " PAUSED " }), _jsx(Text, { dimColor: true, children: " press p to resume" })] }))] }));
 };
 const SERVICE_PRIORITY = ['worker', 'api'];
 /**
@@ -63,50 +59,45 @@ export const compareService = (a, b) => {
     }
     return a.name.localeCompare(b.name);
 };
-const HINTS = [
+export const SERVICES_HINTS = [
     { key: '↑/↓', label: 'navigate' },
-    { key: 'r/R', label: 'restart one/all' },
+    { key: 'r', label: 'restart' },
+    { key: 'ctrl+r', label: 'restart all' },
     { key: 'p', label: 'pause logs' },
     { key: 'c', label: 'clear' },
-    { key: 'o', label: 'open url' },
-    { key: 'tab', label: 'next tab' },
-    { key: 'ctrl+c', label: 'stop & quit' }
-];
-const HINTS_BOOT = [
-    { key: 'tab', label: 'next tab' },
-    { key: '?', label: 'help' },
-    { key: 'ctrl+c', label: 'quit' }
+    { key: 'o', label: 'open url' }
 ];
-const Detail = ({ service, services, lines, paused, banner }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(FailureBanner, { services: services }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, children: service?.name ?? 'Logs' }) }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(LogPane, { serviceName: service?.name ?? null, lines: lines, paused: paused }) }), banner && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: banner }) }))] }));
-export const ServicesPanel = ({ phase, services, dockerComposePath }) => {
+export const SERVICES_BOOT_HINTS = [];
+const Detail = ({ service, lines, maxLogLines, paused }) => {
+    if (!service) {
+        return _jsx(Box, {});
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ContentTitle, { title: formatContentTitle([`Service "${service?.name}"`, 'Logs']) }), _jsx(Box, { flexDirection: "column", children: _jsx(LogPane, { serviceName: service.name ?? null, lines: lines, maxLines: maxLogLines, paused: paused }) })] }));
+};
+export const ServicesPanel = ({ height, phase, services, dockerComposePath }) => {
     const ui = useUiState();
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [banner, setBanner] = useState(null);
+    const lastFailedCountRef = useRef(0);
     const sortedServices = useMemo(() => [...services].sort(compareService), [services]);
-    const isActive = ui.tab === 'services' && !ui.search.open && !ui.runModal.open;
-    const clamped = Math.min(selectedIndex, Math.max(0, sortedServices.length - 1));
+    const failedCount = useMemo(() => services.filter(isServiceFailed).length, [services]);
+    const { selectedIndex: clamped, selectPrevious, selectNext } = useListSelection(sortedServices.length);
     const selectedService = sortedServices[clamped];
-    const enabledLogs = isActive && phase === 'running' && Boolean(selectedService);
-    useEffect(() => {
-        if (clamped !== selectedIndex) {
-            setSelectedIndex(clamped);
-        }
-    }, [clamped, selectedIndex]);
+    const isActive = ui.tab === 'services' && !ui.search.open;
+    const enabledLogs = isActive && Boolean(selectedService);
+    const pushToast = ui.pushToast;
     const logs = useDockerLogs(dockerComposePath, selectedService?.name ?? null, enabledLogs);
     useEffect(() => {
-        if (!banner) {
-            return () => { };
+        if (failedCount > 0 && failedCount !== lastFailedCountRef.current) {
+            pushToast(`${failedCount} service${failedCount === 1 ? '' : 's'} failing. See logs and press r to restart.`, 'error');
         }
-        const id = setTimeout(() => setBanner(null), 3000);
-        return () => clearTimeout(id);
-    }, [banner]);
+        lastFailedCountRef.current = failedCount;
+    }, [failedCount, pushToast]);
     useInput((input, key) => {
         if (key.upArrow) {
-            setSelectedIndex(i => Math.max(0, i - 1));
+            selectPrevious();
             return;
         }
         if (key.downArrow) {
-            setSelectedIndex(i => Math.min(sortedServices.length - 1, i + 1));
+            selectNext();
             return;
         }
         if (!selectedService) {
@@ -124,32 +115,32 @@ export const ServicesPanel = ({ phase, services, dockerComposePath }) => {
             const url = SERVICE_URLS[selectedService.name];
             if (url) {
                 openUrl(url);
-                setBanner(`Opened ${url}`);
+                pushToast(`Opened ${url}`, 'info');
             }
             else {
-                setBanner(`${selectedService.name} has no known URL`);
+                pushToast(`${selectedService.name} has no known URL`, 'error');
             }
             return;
         }
-        if (input === 'r') {
-            setBanner(`Restarting ${selectedService.name}…`);
+        if (!key.ctrl && input === 'r') {
+            pushToast(`Restarting ${selectedService.name}...`, 'info');
             restartService(dockerComposePath, selectedService.name)
-                .then(() => setBanner(`Restarted ${selectedService.name}`))
-                .catch(err => setBanner(`Restart failed: ${err instanceof Error ? err.message : String(err)}`));
+                .then(() => pushToast(`Restarted ${selectedService.name}`, 'success'))
+                .catch(err => pushToast(`Restart failed: ${err instanceof Error ? err.message : String(err)}`, 'error'));
             return;
         }
-        if (input === 'R') {
-            setBanner('Restarting all services…');
+        if (key.ctrl && input === 'r') {
+            pushToast('Restarting all services...', 'info');
             restartStack(dockerComposePath)
-                .then(() => setBanner('Restarted all services'))
-                .catch(err => setBanner(`Restart failed: ${err instanceof Error ? err.message : String(err)}`));
+                .then(() => pushToast('Restarted all services', 'success'))
+                .catch(err => pushToast(`Restart failed: ${err instanceof Error ? err.message : String(err)}`, 'error'));
         }
     }, { isActive });
     if (phase === 'waiting' && services.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(LoadingSpinner, { label: "Starting Docker services\u2026" }), _jsx(Footer, { hints: HINTS_BOOT })] }));
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(LoadingSpinner, { label: "Starting Docker services\u2026" }) }));
     }
     if (services.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "No services running." }), _jsx(Footer, { hints: HINTS_BOOT })] }));
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "No services running." }) }));
     }
-    return (_jsx(MasterDetailPanel, { items: sortedServices, selectedIndex: clamped, visibleRows: sortedServices.length, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (service, selected) => _jsx(ServiceRow, { service: service, selected: selected }), rowKey: service => service.name, detail: _jsx(Detail, { service: selectedService, services: services, lines: logs.lines, paused: logs.paused, banner: banner }), hints: phase === 'running' ? HINTS : HINTS_BOOT, itemLabel: "services" }));
+    return (_jsx(MasterDetailPanel, { items: sortedServices, selectedIndex: clamped, height: height, visibleRows: sortedServices.length, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (service, selected) => _jsx(ServiceRow, { service: service, selected: selected }), rowKey: service => service.name, detail: ({ detailRows }) => (_jsx(Detail, { service: selectedService, lines: logs.lines, maxLogLines: serviceLogRowsFor(detailRows, logs.paused), paused: logs.paused })) }));
 };

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

@@ -1,6 +1,12 @@
 import React from 'react';
 import type { Workflow } from '#api/generated/api.js';
 import type { WorkflowRun } from '#services/workflow_runs.js';
+export declare const buildVisibleWorkflows: (workflows: Workflow[], query: string) => Workflow[];
+export declare const WORKFLOWS_HINTS: {
+    key: string;
+    label: string;
+}[];
+export declare const WORKFLOWS_LOADING_HINTS: never[];
 export declare const WorkflowsPanel: React.FC<{
     workflows: Workflow[];
     runs: WorkflowRun[];

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { WorkflowStatusIcon, workflowStatusColor } from '#views/dev/components/workflow_status.js';
+import { ContentTitle } from '#views/dev/components/content_title.js';
 import { elapsedMs, formatDurationCompact } from '#utils/date_formatter.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 { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
-import { formatStartedShort } from '#views/dev/utils/panel_helpers.js';
+import { formatStartedShort, useListSelection } from '#views/dev/utils/panel_helpers.js';
 import { WORKFLOWS_VISIBLE_ROWS, WORKFLOWS_RECENT_RUNS_LIMIT } from '#views/dev/utils/constants.js';
 const COL = {
     indicator: 3,
@@ -27,7 +27,7 @@ const matchesQuery = (workflow, query) => {
     return (workflow.aliases ?? []).some(a => a.toLowerCase().includes(q));
 };
 const sortByName = (workflows) => [...workflows].sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''));
-const buildVisibleWorkflows = (workflows, query) => {
+export const buildVisibleWorkflows = (workflows, query) => {
     const list = query ? workflows.filter(w => matchesQuery(w, query)) : workflows;
     return sortByName(list);
 };
@@ -36,7 +36,7 @@ const WorkflowRow = ({ workflow, selected }) => (_jsxs(Box, { children: [_jsx(Bo
 const SidebarRunRow = ({ run }) => {
     const status = run.status ?? 'unknown';
     const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
-    return (_jsxs(Box, { children: [_jsx(StatusIcon, { status: status }), _jsx(Text, { children: " " }), _jsx(Box, { width: 10, children: _jsx(Text, { color: statusColor(status), children: status }) }), _jsx(Box, { width: 9, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: formatStartedShort(run.startedAt) }) })] }));
+    return (_jsxs(Box, { children: [_jsx(WorkflowStatusIcon, { status: status }), _jsx(Box, { width: 11, paddingLeft: 1, children: _jsx(Text, { color: workflowStatusColor(status), children: status }) }), _jsx(Box, { width: 9, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) }), _jsx(Box, { width: 14, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: formatStartedShort(run.startedAt) }) })] }));
 };
 const DetailPane = ({ workflow, runs }) => {
     if (!workflow) {
@@ -50,22 +50,20 @@ const DetailPane = ({ workflow, runs }) => {
         completed: wfRuns.filter(r => r.status === 'completed').length
     };
     const recent = wfRuns.slice(0, WORKFLOWS_RECENT_RUNS_LIMIT);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: "white", children: workflow.name }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: [stats.total, " runs"] }), stats.running > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "blue", children: ["\u25CF ", stats.running, " running"] })] }), stats.failed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "red", children: ["\u2717 ", stats.failed, " failed"] })] }), stats.completed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "green", children: ["\u25CF ", stats.completed, " ok"] })] })] }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 2, children: _jsx(Text, { wrap: "wrap", children: workflow.description ?? 'No description' }) }), _jsxs(Box, { flexDirection: "column", width: 42, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, paddingLeft: 2, children: [_jsx(Text, { dimColor: true, bold: true, children: "RECENT RUNS" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: recent.length === 0 ? (_jsx(Text, { dimColor: true, children: "No runs yet" })) : (recent.map((run, i) => _jsx(SidebarRunRow, { run: run }, `${run.runId ?? i}`))) })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(ContentTitle, { title: `Workflow "${workflow.name}"` }), _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [stats.total, " runs"] }), stats.running > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2003\u2003" }), _jsxs(Text, { color: "blue", children: ["\u25CF ", stats.running, " running"] })] }), stats.failed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2003\u2003" }), _jsxs(Text, { color: "red", children: ["\u2717 ", stats.failed, " failed"] })] }), stats.completed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2003\u2003" }), _jsxs(Text, { color: "green", children: ["\u25CF ", stats.completed, " ok"] })] })] }), _jsx(Text, { wrap: "wrap", children: workflow.description ?? 'No description' })] })] }), recent.length > 0 ?
+                _jsxs(Box, { flexDirection: "column", flexShrink: 0, borderStyle: "single", borderColor: "blackBright", borderTop: false, borderBottom: false, borderRight: false, paddingY: 1, paddingLeft: 1, gap: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: "RECENT RUNS" }), _jsx(Box, { flexDirection: "column", children: recent.map((run, i) => _jsx(SidebarRunRow, { run: run }, `${run.runId ?? i}`)) })] }) :
+                _jsx(_Fragment, {})] }));
 };
-const HINTS = [
+export const WORKFLOWS_HINTS = [
     { key: '↑/↓', label: 'navigate' },
     { key: 'enter', label: 'show runs' },
-    { key: 'r', label: 'run' },
-    { key: '/', label: 'search' },
-    { key: 'tab', label: 'next tab' }
+    { key: 'r', label: 'run' }
 ];
+export const WORKFLOWS_LOADING_HINTS = [];
 export const WorkflowsPanel = ({ workflows, runs }) => {
     const ui = useUiState();
     const filtered = useMemo(() => buildVisibleWorkflows(workflows, ui.search.query), [workflows, ui.search.query]);
-    // Lazy initializer — runs once on mount. Restores the previously
-    // highlighted workflow after the run modal unmounts and remounts the
-    // panel.
-    const [selectedIndex, setSelectedIndex] = useState(() => {
+    const initialIndex = () => {
         const previousName = ui.selection.workflowName;
         if (!previousName) {
             return 0;
@@ -73,25 +71,19 @@ export const WorkflowsPanel = ({ workflows, runs }) => {
         const initial = buildVisibleWorkflows(workflows, ui.search.query);
         const i = initial.findIndex(w => w.name === previousName);
         return i >= 0 ? i : 0;
-    });
-    const isActive = ui.tab === 'workflows' && !ui.search.open && !ui.runModal.open;
-    const clamped = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
+    };
+    const { selectedIndex: clamped, selectPrevious, selectNext } = useListSelection(filtered.length, initialIndex);
     const selectedWorkflow = filtered[clamped];
-    useEffect(() => {
-        if (clamped !== selectedIndex) {
-            setSelectedIndex(clamped);
-        }
-    }, [clamped, selectedIndex]);
     const setSelection = ui.setSelection;
     useEffect(() => {
         setSelection({ workflowName: selectedWorkflow?.name });
     }, [selectedWorkflow?.name, setSelection]);
     useInput((input, key) => {
         if (key.upArrow) {
-            setSelectedIndex(i => Math.max(0, i - 1));
+            selectPrevious();
         }
         else if (key.downArrow) {
-            setSelectedIndex(i => Math.min(filtered.length - 1, i + 1));
+            selectNext();
         }
         else if (key.return && selectedWorkflow?.name) {
             ui.setSearchQuery(selectedWorkflow.name);
@@ -100,12 +92,12 @@ export const WorkflowsPanel = ({ workflows, runs }) => {
         else if (input === 'r' && selectedWorkflow?.name) {
             ui.openRunModal(selectedWorkflow.name, selectedWorkflow.path);
         }
-    }, { isActive });
+    }, { isActive: ui.tab === 'workflows' && !ui.search.open });
     if (workflows.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Workflows" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Loading catalog\u2026 (waiting for the API to come up)" }) }), _jsx(Footer, { hints: [{ key: 'tab', label: 'next tab' }, { key: '?', label: 'help' }] })] }));
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "Loading catalog\u2026 (waiting for the API to come up)" }) }));
     }
     if (filtered.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Workflows" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["No workflows match `", ui.search.query, "`. Press "] }), _jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: " to clear." })] }), _jsx(Footer, { hints: HINTS, itemCount: 0, itemLabel: "workflows" })] }));
+        return (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { dimColor: true, children: ["No workflows match `", ui.search.query, "`. Press ", _jsx(Text, { bold: true, children: "esc" }), " to clear the filter."] }) }));
     }
-    return (_jsx(MasterDetailPanel, { items: filtered, selectedIndex: clamped, visibleRows: WORKFLOWS_VISIBLE_ROWS, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (wf, selected) => _jsx(WorkflowRow, { workflow: wf, selected: selected }), rowKey: (wf, i) => wf.name ?? `row-${i}`, detail: _jsx(DetailPane, { workflow: selectedWorkflow, runs: runs }), hints: HINTS, itemLabel: "workflows" }));
+    return (_jsx(MasterDetailPanel, { items: filtered, selectedIndex: clamped, visibleRows: WORKFLOWS_VISIBLE_ROWS, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (wf, selected) => _jsx(WorkflowRow, { workflow: wf, selected: selected }), rowKey: (wf, i) => wf.name ?? `row-${i}`, detail: _jsx(DetailPane, { workflow: selectedWorkflow, runs: runs }) }));
 };

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

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

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

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { buildVisibleWorkflows } from './workflows_panel.js';
+const workflow = (overrides) => ({
+    name: 'demo',
+    description: 'Demo workflow',
+    aliases: [],
+    ...overrides
+});
+describe('buildVisibleWorkflows', () => {
+    it('sorts workflows by name', () => {
+        const visible = buildVisibleWorkflows([
+            workflow({ name: 'zebra' }),
+            workflow({ name: 'apple' }),
+            workflow({ name: 'middle' })
+        ], '');
+        expect(visible.map(w => w.name)).toEqual(['apple', 'middle', 'zebra']);
+    });
+    it('filters by name, description, and aliases', () => {
+        const workflows = [
+            workflow({ name: 'invoice', description: 'Billing workflow', aliases: ['money'] }),
+            workflow({ name: 'support', description: 'Ticket triage', aliases: ['helpdesk'] })
+        ];
+        expect(buildVisibleWorkflows(workflows, 'invoice').map(w => w.name)).toEqual(['invoice']);
+        expect(buildVisibleWorkflows(workflows, 'ticket').map(w => w.name)).toEqual(['support']);
+        expect(buildVisibleWorkflows(workflows, 'money').map(w => w.name)).toEqual(['invoice']);
+    });
+    it('matches queries case-insensitively', () => {
+        const visible = buildVisibleWorkflows([
+            workflow({ name: 'Invoice' }),
+            workflow({ name: 'Support' })
+        ], 'invoice');
+        expect(visible.map(w => w.name)).toEqual(['Invoice']);
+    });
+    it('returns an empty list when no workflow matches', () => {
+        expect(buildVisibleWorkflows([
+            workflow({ name: 'invoice' })
+        ], 'missing')).toEqual([]);
+    });
+});

package/dist/views/dev/state/ui_state.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 export type Tab = 'workflows' | 'runs' | 'services' | 'help';
 export declare const TAB_ORDER: Tab[];
 export declare const TAB_LABELS: Record<Tab, string>;
-export type RightPaneTab = 'input' | 'output' | 'meta';
+export type RunListPaneTab = 'status' | 'input' | 'output' | 'attributes' | 'aggregations';
+export type RunStepPaneTab = 'input' | 'output' | 'meta';
 export type RunsView = 'list' | 'detail';
 export interface Selection {
     workflowName?: string;
@@ -29,11 +30,13 @@ export interface Toast {
     message: string;
     tone: 'info' | 'success' | 'error';
 }
+export declare const MAX_VISIBLE_TOASTS = 3;
 export interface UiState {
     tab: Tab;
     search: SearchState;
     selection: Selection;
-    rightPaneTab: RightPaneTab;
+    runListPaneTab: RunListPaneTab;
+    runStepPaneTab: RunStepPaneTab;
     runsView: RunsView;
     runModal: RunModalState;
     expandedJson: ExpandedJsonState;
@@ -46,7 +49,8 @@ export interface UiState {
     clearSearch: () => void;
     setSearchQuery: (query: string) => void;
     setSelection: (selection: Selection) => void;
-    setRightPaneTab: (tab: RightPaneTab) => void;
+    setRunListPaneTab: (tab: RunListPaneTab) => void;
+    setRunStepPaneTab: (tab: RunStepPaneTab) => void;
     setRunsView: (view: RunsView) => void;
     openRunModal: (workflowName: string, workflowPath?: string) => void;
     closeRunModal: () => void;

package/dist/views/dev/state/ui_state.js

@@ -7,12 +7,14 @@ export const TAB_LABELS = {
     services: 'Services',
     help: 'Help'
 };
+export const MAX_VISIBLE_TOASTS = 3;
 const UiStateContext = createContext(null);
 export const UiStateProvider = ({ children }) => {
     const [tab, setTab] = useState('services');
     const [search, setSearch] = useState({ open: false, query: '' });
     const [selection, setSelection] = useState({});
-    const [rightPaneTab, setRightPaneTab] = useState('output');
+    const [runListPaneTab, setRunListPaneTab] = useState('status');
+    const [runStepPaneTab, setRunStepPaneTab] = useState('output');
     const [runsView, setRunsView] = useState('list');
     const [runModal, setRunModal] = useState({ open: false, workflowName: '' });
     const [expandedJson, setExpandedJson] = useState({ open: false, value: null, title: '' });
@@ -22,18 +24,32 @@ export const UiStateProvider = ({ children }) => {
         tab,
         search,
         selection,
-        rightPaneTab,
+        runListPaneTab,
+        runStepPaneTab,
         runsView,
         runModal,
         expandedJson,
         toasts,
-        setTab,
+        setTab: next => {
+            setTab(current => {
+                if (current === 'runs' && next !== 'runs') {
+                    setRunsView('list');
+                }
+                return next;
+            });
+        },
         nextTab: () => setTab(current => {
             const idx = TAB_ORDER.indexOf(current);
+            if (current === 'runs') {
+                setRunsView('list');
+            }
             return TAB_ORDER[(idx + 1) % TAB_ORDER.length];
         }),
         prevTab: () => setTab(current => {
             const idx = TAB_ORDER.indexOf(current);
+            if (current === 'runs') {
+                setRunsView('list');
+            }
             return TAB_ORDER[(idx - 1 + TAB_ORDER.length) % TAB_ORDER.length];
         }),
         openSearch: () => setSearch(prev => ({ open: true, query: prev.query })),
@@ -41,7 +57,8 @@ export const UiStateProvider = ({ children }) => {
         clearSearch: () => setSearch({ open: false, query: '' }),
         setSearchQuery: (query) => setSearch(prev => ({ open: prev.open, query })),
         setSelection,
-        setRightPaneTab,
+        setRunListPaneTab,
+        setRunStepPaneTab,
         setRunsView,
         openRunModal: (workflowName, workflowPath) => setRunModal({ open: true, workflowName, workflowPath }),
         closeRunModal: () => setRunModal({ open: false, workflowName: '' }),
@@ -49,10 +66,10 @@ export const UiStateProvider = ({ children }) => {
         closeExpandedJson: () => setExpandedJson({ open: false, value: null, title: '' }),
         pushToast: (message, tone = 'info') => {
             const id = ++toastIdRef.current;
-            setToasts(prev => [...prev, { id, message, tone }]);
+            setToasts(prev => [...prev, { id, message, tone }].slice(-MAX_VISIBLE_TOASTS));
         },
         dismissToast: (id) => setToasts(prev => prev.filter(t => t.id !== id))
-    }), [tab, search, selection, rightPaneTab, runsView, runModal, expandedJson, toasts]);
+    }), [tab, search, selection, runListPaneTab, runStepPaneTab, runsView, runModal, expandedJson, toasts]);
     return _jsx(UiStateContext.Provider, { value: value, children: children });
 };
 export const useUiState = () => {

package/dist/views/dev/utils/constants.d.ts

@@ -11,7 +11,7 @@ export declare const CATALOG_WORKFLOW_NAME = "$catalog";
 export declare const WORKFLOWS_VISIBLE_ROWS = 8;
 export declare const WORKFLOWS_RECENT_RUNS_LIMIT = 5;
 export declare const RUNS_VISIBLE_ROWS = 8;
-export declare const RUNS_PREVIEW_LINES = 12;
 export declare const RUN_DETAIL_VISIBLE_STEPS = 12;
-export declare const RUN_DETAIL_PREVIEW_LINES = 18;
+export declare const MIN_TERMINAL_COLUMNS = 100;
+export declare const MIN_TERMINAL_ROWS = 40;
 export declare const HELP_DOCS_URL = "https://docs.output.ai";

package/dist/views/dev/utils/constants.js

@@ -11,7 +11,7 @@ export const CATALOG_WORKFLOW_NAME = '$catalog';
 export const WORKFLOWS_VISIBLE_ROWS = 8;
 export const WORKFLOWS_RECENT_RUNS_LIMIT = 5;
 export const RUNS_VISIBLE_ROWS = 8;
-export const RUNS_PREVIEW_LINES = 12;
 export const RUN_DETAIL_VISIBLE_STEPS = 12;
-export const RUN_DETAIL_PREVIEW_LINES = 18;
+export const MIN_TERMINAL_COLUMNS = 100;
+export const MIN_TERMINAL_ROWS = 40;
 export const HELP_DOCS_URL = 'https://docs.output.ai';

package/dist/views/dev/utils/json_editor.js

@@ -104,14 +104,14 @@ export const JsonEditor = ({ seed, title, isActive = true, onSubmit, onCancel })
     const half = Math.floor(VISIBLE_BUFFER / 2);
     const startLine = Math.max(0, cursorPos.line - half);
     const visibleLines = lines.slice(startLine, startLine + (VISIBLE_BUFFER * 2) + 1);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { bold: true, children: ["\u270F  ", title] }), _jsx(Text, { bold: true, color: status.ok ? 'green' : 'red', children: status.ok ? '✓ valid JSON' : '✗ invalid JSON' })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: visibleLines.map((line, i) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: ["File: ", title] }), _jsx(Text, { bold: true, color: status.ok ? 'green' : 'red', children: status.ok ? '✓ valid JSON' : '✗ invalid JSON' })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: visibleLines.map((line, i) => {
                     const lineIdx = startLine + i;
                     if (lineIdx !== cursorPos.line) {
-                        return _jsx(Text, { children: line.length === 0 ? ' ' : line }, lineIdx);
+                        return _jsx(Text, { dimColor: true, children: line.length === 0 ? ' ' : line }, lineIdx);
                     }
                     const before = line.slice(0, cursorPos.col);
                     const at = line[cursorPos.col] ?? ' ';
                     const after = line.slice(cursorPos.col + 1);
-                    return (_jsxs(Text, { children: [_jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: at }), _jsx(Text, { children: after })] }, lineIdx));
+                    return (_jsxs(Text, { bold: true, children: [_jsx(Text, { children: before }), _jsx(Text, { inverse: true, children: at }), _jsx(Text, { children: after })] }, lineIdx));
                 }) }), !status.ok && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", wrap: "truncate-end", children: status.error }) })), submitMessage && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: submitMessage }) })), _jsxs(Box, { marginTop: 1, columnGap: 2, children: [_jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "ctrl+s" }), _jsx(Text, { dimColor: true, children: "submit" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: "cancel" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "\u2191\u2193\u2190\u2192" }), _jsx(Text, { dimColor: true, children: "move" })] }), _jsxs(Box, { columnGap: 1, children: [_jsx(Text, { bold: true, children: "tab" }), _jsx(Text, { dimColor: true, children: "indent" })] })] })] }));
 };

package/dist/views/dev/utils/json_render.d.ts

@@ -6,10 +6,12 @@ export interface ColoredToken {
 export declare const tokenizeLine: (line: string) => ColoredToken[];
 export declare const formatJsonText: (value: unknown) => string;
 export declare const countJsonLines: (value: unknown) => number;
+export declare const wrapTokens: (tokens: ColoredToken[], maxWidth: number | undefined) => ColoredToken[][];
 export declare const JsonView: React.FC<{
     value: unknown;
     maxLines?: number;
     offset?: number;
     truncateLine?: boolean;
     showOverflowFooter?: boolean;
+    maxWidth?: number;
 }>;

package/dist/views/dev/utils/json_render.js

@@ -23,7 +23,19 @@ const classifyRaw = (text) => {
     return { kind: 'punct', text };
 };
 export const tokenizeLine = (line) => {
-    const raws = Array.from(line.matchAll(RAW_TOKEN_RE), m => classifyRaw(m[0]));
+    const matches = Array.from(line.matchAll(RAW_TOKEN_RE));
+    const matchedRaws = matches.flatMap((match, idx) => {
+        const index = match.index ?? 0;
+        const previous = matches[idx - 1];
+        const previousEnd = previous ? (previous.index ?? 0) + previous[0].length : 0;
+        const gap = index > previousEnd ? [{ kind: 'string', text: line.slice(previousEnd, index) }] : [];
+        return [...gap, classifyRaw(match[0])];
+    });
+    const lastMatch = matches[matches.length - 1];
+    const lastIndex = lastMatch ? (lastMatch.index ?? 0) + lastMatch[0].length : 0;
+    const raws = lastIndex < line.length ?
+        [...matchedRaws, { kind: 'string', text: line.slice(lastIndex) }] :
+        matchedRaws;
     return raws.map((raw, idx) => {
         if (raw.kind === 'ws') {
             return { text: raw.text };
@@ -56,11 +68,35 @@ export const formatJsonText = (value) => {
 const renderTokens = (tokens) => tokens.map((token, i) => token.color ?
     _jsx(Text, { color: token.color, children: token.text }, i) :
     _jsx(Text, { children: token.text }, i));
+const tokenLength = (tokens) => tokens.reduce((total, token) => total + token.text.length, 0);
 export const countJsonLines = (value) => {
     const text = formatJsonText(value);
     return text ? text.split('\n').length : 0;
 };
-export const JsonView = ({ value, maxLines, offset = 0, truncateLine = true, showOverflowFooter = true }) => {
+export const wrapTokens = (tokens, maxWidth) => {
+    if (maxWidth === undefined || maxWidth <= 0 || tokenLength(tokens) <= maxWidth) {
+        return [tokens];
+    }
+    const state = tokens.reduce((acc, token) => {
+        const chunks = Array.from({ length: Math.ceil(token.text.length / maxWidth) }, (_, i) => token.text.slice(i * maxWidth, (i + 1) * maxWidth));
+        return chunks.reduce((chunkAcc, chunk) => {
+            if (chunkAcc.width > 0 && chunkAcc.width + chunk.length > maxWidth) {
+                return {
+                    lines: [...chunkAcc.lines, chunkAcc.current],
+                    current: [{ ...token, text: chunk }],
+                    width: chunk.length
+                };
+            }
+            return {
+                ...chunkAcc,
+                current: [...chunkAcc.current, { ...token, text: chunk }],
+                width: chunkAcc.width + chunk.length
+            };
+        }, acc);
+    }, { lines: [], current: [], width: 0 });
+    return state.current.length > 0 ? [...state.lines, state.current] : state.lines;
+};
+export const JsonView = ({ value, maxLines, offset = 0, truncateLine = true, showOverflowFooter = true, maxWidth }) => {
     if (value === undefined || value === null) {
         return _jsx(Text, { dimColor: true, children: "\u2014" });
     }
@@ -70,8 +106,14 @@ export const JsonView = ({ value, maxLines, offset = 0, truncateLine = true, sho
     }
     const allLines = text.split('\n');
     const start = Math.max(0, offset);
-    const end = typeof maxLines === 'number' ? start + maxLines : undefined;
-    const visible = allLines.slice(start, end);
-    const overflowBelow = end !== undefined ? Math.max(0, allLines.length - end) : 0;
-    return (_jsxs(Box, { flexDirection: "column", children: [visible.map((line, i) => (_jsx(Text, { wrap: truncateLine ? 'truncate-end' : 'wrap', children: renderTokens(tokenizeLine(line)) }, i))), showOverflowFooter && overflowBelow > 0 && (_jsxs(Text, { dimColor: true, children: ["\u2026 ", overflowBelow, " more line", overflowBelow === 1 ? '' : 's'] }))] }));
+    const displayLines = allLines
+        .slice(start)
+        .flatMap(line => truncateLine ? [tokenizeLine(line)] : wrapTokens(tokenizeLine(line), maxWidth));
+    const hasLineLimit = typeof maxLines === 'number';
+    const overflowBelow = hasLineLimit ? Math.max(0, displayLines.length - maxLines) : 0;
+    const footerRows = showOverflowFooter && overflowBelow > 0 ? 1 : 0;
+    const end = hasLineLimit ? Math.max(0, maxLines - footerRows) : undefined;
+    const visible = displayLines.slice(0, end);
+    const omittedLines = hasLineLimit ? Math.max(0, displayLines.length - visible.length) : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [visible.map((tokens, i) => (_jsx(Text, { wrap: truncateLine ? 'truncate-end' : 'wrap', children: renderTokens(tokens) }, i))), showOverflowFooter && omittedLines > 0 && (_jsxs(Text, { dimColor: true, children: ["\u2026 ", omittedLines, " more line", omittedLines === 1 ? '' : 's'] }))] }));
 };