@outputai/cli 0.4.1-next.ae3ab85.0 → 0.4.1-next.d085dde.0

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { tokenizeLine, formatJsonText, countJsonLines } from './json_render.js';
+import { tokenizeLine, formatJsonText, countJsonLines, wrapTokens } from './json_render.js';
 describe('tokenizeLine', () => {
     it('classifies an object key (followed by colon) as a key', () => {
         const tokens = tokenizeLine('  "name": "ada"');
@@ -63,3 +63,11 @@ describe('countJsonLines', () => {
         expect(countJsonLines({ a: 1, b: 2 })).toBe(4);
     });
 });
+describe('wrapped token rendering', () => {
+    it('preserves string color across wrapped chunks', () => {
+        const tokens = tokenizeLine('  "text": "NASCAR Cup Series: racing"');
+        const wrapped = wrapTokens(tokens, 18);
+        const value = wrapped.flat().find(t => t.text.includes('Series'));
+        expect(value?.color).toBe('green');
+    });
+});

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

@@ -1,3 +1,10 @@
+import { type Dispatch, type SetStateAction } from 'react';
+/**
+ * Capitalize a short UI label.
+ */
+export declare const capitalize: (value: string) => string;
+export declare const formatContentTitle: (parts: string[]) => string;
+export declare const hasJsonValue: (value: unknown) => boolean;
 /**
  * Truncate a string to fit a column, appending an ellipsis when clipped.
  */
@@ -14,3 +21,11 @@ export declare const formatStartedShort: (iso: string | undefined) => string;
  * runs off the end of the array.
  */
 export declare const computeWindowStart: (selectedIndex: number, total: number, visibleRows: number) => number;
+export declare const cycleValue: <T>(values: readonly T[], current: T, direction: 1 | -1) => T;
+export declare const clampIndex: (index: number, count: number) => number;
+export declare const useListSelection: (count: number, initialIndex?: number | (() => number)) => {
+    selectedIndex: number;
+    setSelectedIndex: Dispatch<SetStateAction<number>>;
+    selectPrevious: () => void;
+    selectNext: () => void;
+};

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

@@ -1,4 +1,19 @@
+import { useState } from 'react';
 import { format, parseISO } from 'date-fns';
+/**
+ * Capitalize a short UI label.
+ */
+export const capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
+export const formatContentTitle = (parts) => parts.join(' › ');
+export const hasJsonValue = (value) => {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    return typeof value !== 'object' || Object.keys(value).length > 0;
+};
 /**
  * Truncate a string to fit a column, appending an ellipsis when clipped.
  */
@@ -30,3 +45,18 @@ export const computeWindowStart = (selectedIndex, total, visibleRows) => {
     const maxStart = Math.max(0, total - visibleRows);
     return Math.min(start, maxStart);
 };
+export const cycleValue = (values, current, direction) => {
+    const idx = values.indexOf(current);
+    return values[(idx + direction + values.length) % values.length];
+};
+export const clampIndex = (index, count) => Math.max(0, Math.min(index, Math.max(0, count - 1)));
+export const useListSelection = (count, initialIndex = 0) => {
+    const [rawIndex, setSelectedIndex] = useState(initialIndex);
+    const selectedIndex = clampIndex(rawIndex, count);
+    return {
+        selectedIndex,
+        setSelectedIndex,
+        selectPrevious: () => setSelectedIndex(i => Math.max(0, i - 1)),
+        selectNext: () => setSelectedIndex(i => Math.min(Math.max(0, count - 1), i + 1))
+    };
+};

package/dist/views/dev/utils/panel_helpers.spec.js

@@ -1,5 +1,34 @@
 import { describe, expect, it } from 'vitest';
-import { truncate, formatStartedShort, computeWindowStart } from './panel_helpers.js';
+import { capitalize, clampIndex, computeWindowStart, cycleValue, formatContentTitle, formatStartedShort, hasJsonValue, truncate } from './panel_helpers.js';
+describe('capitalize', () => {
+    it('uppercases the first character only', () => {
+        expect(capitalize('output')).toBe('Output');
+        expect(capitalize('oUTPUT')).toBe('OUTPUT');
+    });
+    it('returns empty strings unchanged', () => {
+        expect(capitalize('')).toBe('');
+    });
+});
+describe('formatContentTitle', () => {
+    it('joins title segments with the shared separator', () => {
+        expect(formatContentTitle(['Workflow "demo"', 'Steps'])).toBe('Workflow "demo" › Steps');
+    });
+});
+describe('hasJsonValue', () => {
+    it('rejects nullish and empty collection values', () => {
+        expect(hasJsonValue(null)).toBe(false);
+        expect(hasJsonValue(undefined)).toBe(false);
+        expect(hasJsonValue([])).toBe(false);
+        expect(hasJsonValue({})).toBe(false);
+    });
+    it('accepts scalar and non-empty collection values', () => {
+        expect(hasJsonValue(false)).toBe(true);
+        expect(hasJsonValue(0)).toBe(true);
+        expect(hasJsonValue('')).toBe(true);
+        expect(hasJsonValue(['x'])).toBe(true);
+        expect(hasJsonValue({ x: 1 })).toBe(true);
+    });
+});
 describe('truncate', () => {
     it('returns the input unchanged when shorter than max', () => {
         expect(truncate('short', 10)).toBe('short');
@@ -45,3 +74,19 @@ describe('computeWindowStart', () => {
         expect(computeWindowStart(0, 0, 8)).toBe(0);
     });
 });
+describe('cycleValue', () => {
+    it('cycles forward and backward through an ordered list', () => {
+        expect(cycleValue(['a', 'b', 'c'], 'a', 1)).toBe('b');
+        expect(cycleValue(['a', 'b', 'c'], 'a', -1)).toBe('c');
+    });
+});
+describe('clampIndex', () => {
+    it('clamps indexes to the available range', () => {
+        expect(clampIndex(-1, 3)).toBe(0);
+        expect(clampIndex(0, 3)).toBe(0);
+        expect(clampIndex(5, 3)).toBe(2);
+    });
+    it('returns 0 for empty lists', () => {
+        expect(clampIndex(5, 0)).toBe(0);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outputai/cli",
-  "version": "0.4.1-next.ae3ab85.0",
+  "version": "0.4.1-next.d085dde.0",
   "description": "CLI for Output.ai workflow generation",
   "type": "module",
   "main": "dist/index.js",
@@ -36,9 +36,9 @@
     "semver": "7.7.4",
     "undici": "8.1.0",
     "yaml": "^2.8.3",
-    "@outputai/credentials": "0.4.1-next.ae3ab85.0",
-    "@outputai/llm": "0.4.1-next.ae3ab85.0",
-    "@outputai/evals": "0.4.1-next.ae3ab85.0"
+    "@outputai/credentials": "0.4.1-next.d085dde.0",
+    "@outputai/llm": "0.4.1-next.d085dde.0",
+    "@outputai/evals": "0.4.1-next.d085dde.0"
   },
   "devDependencies": {
     "@types/cli-progress": "3.11.6",

package/dist/components/status_icon.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface StatusDisplay {
-    icon: string;
-    color: string;
-}
-export declare const resolveStatus: (status: string) => StatusDisplay;
-export declare const statusColor: (status: string) => string;
-export declare const StatusIcon: React.FC<{
-    status: string;
-}>;
-export {};

package/dist/components/status_icon.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from 'ink';
-const STATUS_MAP = {
-    // Docker service health
-    healthy: { icon: '●', color: 'green' },
-    unhealthy: { icon: '○', color: 'red' },
-    starting: { icon: '◐', color: 'yellow' },
-    none: { icon: '●', color: 'blue' },
-    exited: { icon: '✗', color: 'red' },
-    // Workflow run status
-    running: { icon: '●', color: 'green' },
-    completed: { icon: '●', color: 'green' },
-    failed: { icon: '✗', color: 'red' },
-    canceled: { icon: '○', color: 'gray' },
-    terminated: { icon: '✗', color: 'red' },
-    timed_out: { icon: '✗', color: 'red' },
-    continued: { icon: '↻', color: 'blue' }
-};
-const DEFAULT_DISPLAY = { icon: '?', color: 'white' };
-export const resolveStatus = (status) => STATUS_MAP[status] ?? DEFAULT_DISPLAY;
-export const statusColor = (status) => resolveStatus(status).color;
-export const StatusIcon = ({ status }) => {
-    const { icon, color } = resolveStatus(status);
-    return _jsx(Text, { color: color, children: icon });
-};

package/dist/views/dev/chrome/divider.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const HorizontalRule: React.FC<{
-    color?: string;
-    widthOffset?: number;
-}>;
-export declare const VerticalRule: React.FC<{
-    color?: string;
-}>;

package/dist/views/dev/chrome/divider.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text, useStdout } from 'ink';
-import { RULE_PURPLE } from '#views/dev/chrome/palette.js';
-// `RULE_PURPLE` is part of the OUTPUT brand chrome — kept as the default
-// for horizontal rules. Vertical rules pass through whatever the caller
-// supplies; default is undefined, which Ink renders in the terminal's
-// default foreground colour (theme-agnostic).
-const DEFAULT_RULE_COLOR = RULE_PURPLE;
-// dev_app.tsx Shell uses paddingX={2}, so 4 cols are eaten by horizontal padding.
-const SHELL_HORIZONTAL_PADDING = 4;
-export const HorizontalRule = ({ color = DEFAULT_RULE_COLOR, widthOffset = SHELL_HORIZONTAL_PADDING }) => {
-    const { stdout } = useStdout();
-    const cols = stdout?.columns ?? 80;
-    return _jsx(Text, { color: color, children: '─'.repeat(Math.max(1, cols - widthOffset)) });
-};
-export const VerticalRule = ({ color }) => (_jsx(Box, { borderStyle: "single", borderColor: color, borderTop: false, borderBottom: false, borderRight: false, flexDirection: "column" }));

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

@@ -1,112 +0,0 @@
-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" })] }));
-};