@outputai/cli 0.1.13-next.91c5d78.0 → 0.1.13-next.a5df989.0

package/dist/assets/docker/docker-compose-dev.yml

@@ -81,7 +81,7 @@ services:
         condition: service_healthy
       worker:
         condition: service_healthy
-    image: outputai/api:${OUTPUT_API_VERSION:-0.1.13-next.91c5d78.0}
+    image: outputai/api:${OUTPUT_API_VERSION:-0.1.13-next.a5df989.0}
     init: true
     networks:
       - main

package/dist/components/command_footer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CommandHint {
+    key: string;
+    label: string;
+}
+export declare const CommandFooter: React.FC<{
+    hints: CommandHint[];
+}>;

package/dist/components/command_footer.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+export const CommandFooter = ({ hints }) => (_jsx(Box, { marginTop: 1, children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { dimColor: true, children: ' | ' }), _jsx(Text, { dimColor: true, children: '(' }), _jsx(Text, { dimColor: true, bold: true, children: hint.key }), _jsx(Text, { dimColor: true, children: ')' }), _jsx(Text, { dimColor: true, children: ` ${hint.label}` })] }, hint.key))) }));

package/dist/components/status_icon.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,25 @@
+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: 'blue' },
+    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/components/workflow_summary.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface WorkflowSummary {
+    running: number;
+    completed: number;
+    failed: number;
+    total: number;
+}
+export declare const WorkflowSummarySection: React.FC<{
+    summary: WorkflowSummary;
+}>;

package/dist/components/workflow_summary.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { statusColor } from '#components/status_icon.js';
+export const WorkflowSummarySection = ({ summary }) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "\uD83D\uDCCB Workflows" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: statusColor('running'), children: [summary.running, " running"] }), _jsx(Text, { children: ", " }), _jsxs(Text, { color: statusColor('failed'), children: [summary.failed, " failed"] }), _jsx(Text, { children: ", " }), _jsxs(Text, { color: statusColor('completed'), children: [summary.completed, " complete"] })] })] }));

package/dist/generated/framework_version.json

@@ -1,3 +1,3 @@
 {
-    "framework": "0.1.13-next.91c5d78.0"
+    "framework": "0.1.13-next.a5df989.0"
 }

package/dist/services/claude_client.js

@@ -105,7 +105,10 @@ function getTodoWriteMessage(message) {
     if (message.type !== 'assistant') {
         return null;
     }
-    const todoWriteMessage = message.message.content.find((c) => c.type === 'tool_use' && c.name === 'TodoWrite');
+    const todoWriteMessage = message.message.content.find((c) => {
+        const block = c;
+        return block.type === 'tool_use' && block.name === 'TodoWrite';
+    });
     return todoWriteMessage ?? null;
 }
 function applyInstructions(message, instructions) {

package/dist/utils/date_formatter.d.ts

@@ -14,7 +14,17 @@ export declare function formatDuration(ms: number): string;
  */
 export declare function formatDate(isoString: string | null | undefined): string;
 /**
- * Format a duration between two ISO timestamps
+ * Calculate elapsed milliseconds between two ISO timestamps.
+ * If completedAt is null/undefined, uses current time (for in-progress durations).
+ */
+export declare function elapsedMs(startedAt: string, completedAt?: string | null): number;
+/**
+ * Format a duration in milliseconds to a compact string that fits in narrow columns.
+ * Always returns a short single-token string (e.g., "150ms", "7.56s", "24.2m", "1.3h").
+ */
+export declare function formatDurationCompact(ms: number): string;
+/**
+ * Format a duration between two ISO timestamps.
  *
  * @param startedAt - ISO 8601 start timestamp
  * @param completedAt - ISO 8601 end timestamp (or null if still running)

package/dist/utils/date_formatter.js

@@ -33,7 +33,32 @@ export function formatDate(isoString) {
     return format(parseISO(isoString), 'MMM d, yyyy h:mm a');
 }
 /**
- * Format a duration between two ISO timestamps
+ * Calculate elapsed milliseconds between two ISO timestamps.
+ * If completedAt is null/undefined, uses current time (for in-progress durations).
+ */
+export function elapsedMs(startedAt, completedAt) {
+    const start = parseISO(startedAt).getTime();
+    const end = completedAt ? parseISO(completedAt).getTime() : Date.now();
+    return end - start;
+}
+/**
+ * Format a duration in milliseconds to a compact string that fits in narrow columns.
+ * Always returns a short single-token string (e.g., "150ms", "7.56s", "24.2m", "1.3h").
+ */
+export function formatDurationCompact(ms) {
+    if (ms < 1000) {
+        return `${ms}ms`;
+    }
+    if (ms < 60_000) {
+        return `${(ms / 1000).toFixed(2)}s`;
+    }
+    if (ms < 3_600_000) {
+        return `${(ms / 60_000).toFixed(1)}m`;
+    }
+    return `${(ms / 3_600_000).toFixed(1)}h`;
+}
+/**
+ * Format a duration between two ISO timestamps.
  *
  * @param startedAt - ISO 8601 start timestamp
  * @param completedAt - ISO 8601 end timestamp (or null if still running)

package/dist/utils/open_url.d.ts

@@ -0,0 +1 @@
+export declare const openUrl: (url: string) => void;

package/dist/utils/open_url.js

@@ -0,0 +1,12 @@
+import { execFile } from 'node:child_process';
+export const openUrl = (url) => {
+    if (process.platform === 'darwin') {
+        execFile('open', [url]);
+    }
+    else if (process.platform === 'win32') {
+        execFile('cmd', ['/c', 'start', url]);
+    }
+    else {
+        execFile('xdg-open', [url]);
+    }
+};

package/dist/views/dev.js

@@ -1,31 +1,18 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Box, Text, Static, useApp, useInput } from 'ink';
 import Spinner from 'ink-spinner';
-import { getServiceStatus, isServiceHealthy, isServiceFailed, SERVICE_HEALTH, SERVICE_STATE } from '#services/docker.js';
+import { getServiceStatus, isServiceHealthy, isServiceFailed, SERVICE_HEALTH } from '#services/docker.js';
 import { config } from '#config.js';
+import { fetchWorkflowRuns } from '#services/workflow_runs.js';
+import { openUrl } from '#utils/open_url.js';
+import { StatusIcon } from '#components/status_icon.js';
+import { WorkflowSummarySection } from '#components/workflow_summary.js';
+import { CommandFooter } from '#components/command_footer.js';
+import { WorkflowListView } from '#views/workflow/list.js';
 const POLL_INTERVAL_MS = 2000;
 const HEALTH_TIMEOUT_MS = 120_000;
-const STATUS_ICONS = {
-    [SERVICE_HEALTH.HEALTHY]: '●',
-    [SERVICE_HEALTH.UNHEALTHY]: '○',
-    [SERVICE_HEALTH.STARTING]: '◐',
-    [SERVICE_HEALTH.NONE]: '●',
-    [SERVICE_STATE.RUNNING]: '●',
-    [SERVICE_STATE.EXITED]: '✗'
-};
-const STATUS_COLORS = {
-    [SERVICE_HEALTH.HEALTHY]: 'green',
-    [SERVICE_HEALTH.UNHEALTHY]: 'red',
-    [SERVICE_HEALTH.STARTING]: 'yellow',
-    [SERVICE_HEALTH.NONE]: 'blue',
-    [SERVICE_STATE.RUNNING]: 'blue',
-    [SERVICE_STATE.EXITED]: 'red'
-};
-const resolveServiceDisplay = (service) => {
-    const key = service.health === SERVICE_HEALTH.NONE ? service.state : service.health;
-    return { icon: STATUS_ICONS[key] ?? '?', color: STATUS_COLORS[key] ?? 'white', status: key };
-};
+const resolveServiceStatus = (service) => service.health === SERVICE_HEALTH.NONE ? service.state : service.health;
 const fetchServices = async (dockerComposePath) => {
     try {
         return await getServiceStatus(dockerComposePath);
@@ -97,6 +84,32 @@ const useStatusRefresh = (dockerComposePath, enabled, onServices) => {
         return 'continue';
     });
 };
+const useWorkflowPolling = (enabled, onRuns) => {
+    const onRunsRef = useRef(onRuns);
+    onRunsRef.current = onRuns;
+    usePoll(enabled, async () => {
+        try {
+            const { runs } = await fetchWorkflowRuns({ limit: 100 });
+            onRunsRef.current(runs);
+        }
+        catch {
+            // API may not be ready yet
+        }
+        return 'continue';
+    });
+};
+const useMainViewInput = (isActive, callbacks) => {
+    const callbacksRef = useRef(callbacks);
+    callbacksRef.current = callbacks;
+    useInput(input => {
+        if (input === 'o') {
+            callbacksRef.current.onOpenTemporal();
+        }
+        if (input === 'w') {
+            callbacksRef.current.onOpenWorkflows();
+        }
+    }, { isActive });
+};
 const useCtrlC = (onCleanup) => {
     const { exit } = useApp();
     const isExitingRef = useRef(false);
@@ -108,9 +121,9 @@ const useCtrlC = (onCleanup) => {
     });
 };
 const ServiceRow = ({ service }) => {
-    const { icon, color, status } = resolveServiceDisplay(service);
+    const status = resolveServiceStatus(service);
     const ports = service.ports.length ? service.ports.join(', ') : '-';
-    return (_jsxs(Box, { children: [_jsxs(Text, { color: color, children: [icon, " "] }), _jsx(Box, { width: 16, children: _jsx(Text, { children: service.name }) }), _jsx(Text, { dimColor: true, children: status.padEnd(10) }), _jsx(Text, { dimColor: true, children: ports })] }));
+    return (_jsxs(Box, { children: [_jsx(Box, { width: 3, children: _jsx(StatusIcon, { status: status }) }), _jsx(Box, { width: 16, children: _jsx(Text, { children: service.name }) }), _jsx(Text, { dimColor: true, children: status.padEnd(10) }), _jsx(Text, { dimColor: true, children: ports })] }));
 };
 const FailureWarning = ({ services }) => {
     const failed = services.filter(isServiceFailed);
@@ -128,12 +141,24 @@ const DevSuccessMessage = ({ services }) => {
     return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: '✅ SUCCESS! ' }), _jsx(Text, { bold: true, children: "Development services are running" })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\uD83D\uDC33 SERVICES" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Temporal:    ' }), _jsx(Text, { color: "yellow", children: "localhost:7233" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Temporal UI: ' }), _jsx(Text, { color: "cyan", children: "http://localhost:8080" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'API Server:  ' }), _jsx(Text, { color: "yellow", children: "localhost:3001" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Redis:       ' }), _jsx(Text, { color: "yellow", children: "localhost:6379" })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\uD83D\uDE80 RUN A WORKFLOW" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsx(Text, { color: "white", children: "In a new terminal, execute:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "cyan", children: "npx output workflow run blog_evaluator paulgraham_hwh" }) })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "\u26A1 USEFUL COMMANDS" }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Open Temporal UI: ' }), _jsx(Text, { color: "cyan", children: "open http://localhost:8080" })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'View logs:        ' }), _jsx(Text, { color: "cyan", children: logsCommand })] }), _jsxs(Box, { children: [_jsx(Text, { color: "white", children: 'Stop services:    ' }), _jsx(Text, { color: "cyan", children: "Press Ctrl+C" })] })] }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: divider }) }), _jsx(Text, { dimColor: true, children: "\uD83D\uDCA1 Tip: The Temporal UI lets you monitor workflow executions in real-time" })] }));
 };
 const WaitingView = ({ services }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Waiting for services to become healthy..." })] }), services.length > 0 && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: services.map(s => _jsx(ServiceRow, { service: s }, s.name)) }))] }));
-const RunningView = ({ services }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "\uD83D\uDCCA Service Status" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: services.map(s => _jsx(ServiceRow, { service: s }, s.name)) }), _jsx(FailureWarning, { services: services }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: '🌐 Temporal UI: ' }), _jsx(Text, { bold: true, children: "http://localhost:8080" })] }), _jsx(Text, { dimColor: true, children: "Press Ctrl+C to stop services" })] }));
+const RunningView = ({ services, workflowSummary }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "\uD83D\uDCCA Service Status" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: services.map(s => _jsx(ServiceRow, { service: s }, s.name)) }), _jsx(FailureWarning, { services: services }), workflowSummary && _jsx(WorkflowSummarySection, { summary: workflowSummary }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: '🌐 Temporal UI: ' }), _jsx(Text, { bold: true, children: "http://localhost:8080" })] }), _jsx(CommandFooter, { hints: [
+                { key: 'o', label: 'open ui' },
+                { key: 'w', label: 'view workflow runs' },
+                { key: 'ctrl+c', label: 'stop' }
+            ] })] }));
+const MainDevView = ({ phase, services, workflowSummary }) => {
+    if (phase === 'waiting') {
+        return _jsx(WaitingView, { services: services });
+    }
+    return _jsx(RunningView, { services: services, workflowSummary: workflowSummary });
+};
 export const DevApp = ({ dockerComposePath, onCleanup }) => {
     const { exit } = useApp();
     const [phase, setPhase] = useState('waiting');
     const [services, setServices] = useState([]);
     const [successItems, setSuccessItems] = useState([]);
+    const [activeView, setActiveView] = useState('main');
+    const [workflowRuns, setWorkflowRuns] = useState([]);
     useHealthPolling(dockerComposePath, phase === 'waiting', {
         onServices: setServices,
         onAllHealthy: svcs => {
@@ -146,6 +171,17 @@ export const DevApp = ({ dockerComposePath, onCleanup }) => {
         onTimeout: () => exit(new Error('Timeout waiting for services to become healthy'))
     });
     useStatusRefresh(dockerComposePath, phase === 'running', setServices);
+    useWorkflowPolling(phase === 'running' || phase === 'failed', setWorkflowRuns);
+    useMainViewInput(activeView === 'main' && phase !== 'waiting', {
+        onOpenTemporal: () => openUrl('http://localhost:8080'),
+        onOpenWorkflows: () => setActiveView('workflows')
+    });
     useCtrlC(onCleanup);
-    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: successItems, children: item => _jsx(DevSuccessMessage, { services: item.services }, item.id) }), phase === 'waiting' && _jsx(WaitingView, { services: services }), phase === 'running' && _jsx(RunningView, { services: services }), phase === 'failed' && _jsx(RunningView, { services: services })] }));
+    const workflowSummary = workflowRuns.length > 0 ? {
+        running: workflowRuns.filter(r => r.status === 'running').length,
+        completed: workflowRuns.filter(r => r.status === 'completed').length,
+        failed: workflowRuns.filter(r => r.status === 'failed').length,
+        total: workflowRuns.length
+    } : null;
+    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: successItems, children: item => _jsx(DevSuccessMessage, { services: item.services }, item.id) }), _jsxs(Box, { flexDirection: "column", children: [activeView === 'main' && (_jsx(MainDevView, { phase: phase, services: services, workflowSummary: workflowSummary })), activeView === 'workflows' && (_jsx(WorkflowListView, { runs: workflowRuns, onBack: () => setActiveView('main') }))] })] }));
 };

package/dist/views/workflow/list.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WorkflowRun } from '#services/workflow_runs.js';
+export declare const WorkflowListView: React.FC<{
+    runs: WorkflowRun[];
+    onBack: () => void;
+}>;

package/dist/views/workflow/list.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { getWorkflowIdResult } from '#api/generated/api.js';
+import { StatusIcon, statusColor } from '#components/status_icon.js';
+import { elapsedMs, formatDurationCompact } from '#utils/date_formatter.js';
+import { CommandFooter } from '#components/command_footer.js';
+import { openUrl } from '#utils/open_url.js';
+const TEMPORAL_UI_BASE = 'http://localhost:8080';
+const VISIBLE_ROWS = 15;
+const STATUS_ORDER = {
+    running: 0,
+    failed: 1,
+    timed_out: 2,
+    terminated: 3,
+    canceled: 4,
+    continued: 5,
+    completed: 6
+};
+const sortRuns = (runs) => [...runs].sort((a, b) => {
+    const statusDiff = (STATUS_ORDER[a.status ?? ''] ?? Infinity) - (STATUS_ORDER[b.status ?? ''] ?? Infinity);
+    if (statusDiff !== 0) {
+        return statusDiff;
+    }
+    const aTime = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+    const bTime = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+    return bTime - aTime;
+});
+const truncate = (str, max) => str.length > max ? str.slice(0, max - 1) + '…' : str;
+const COL = {
+    indicator: 2,
+    icon: 3,
+    status: 12,
+    type: 20,
+    id: 32,
+    duration: 10
+};
+const WorkflowRow = ({ run, selected }) => {
+    const status = run.status ?? 'running';
+    const color = statusColor(status);
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    return (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { color: selected ? 'cyan' : undefined, bold: selected, children: 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 - 2) }) }), _jsx(Box, { width: COL.id, children: _jsx(Text, { dimColor: !selected, children: truncate(run.workflowId ?? '-', COL.id - 2) }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) })] }));
+};
+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: "WORKFLOW ID" }) }), _jsx(Box, { width: COL.duration, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, bold: true, children: "DURATION" }) })] }));
+const WorkflowDetailPane = ({ detail, loading }) => {
+    if (loading) {
+        return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading details..." })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Status: " }), _jsx(Text, { color: statusColor(detail.status ?? ''), children: detail.status })] }), detail.error && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, color: "red", children: "Error:" }), _jsx(Text, { color: "red", children: truncate(detail.error, 300) })] })), detail.output !== undefined && detail.output !== null && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Output:" }), _jsx(Text, { children: truncate(JSON.stringify(detail.output, null, 2), 400) })] }))] }));
+};
+export const WorkflowListView = ({ runs, onBack }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [detail, setDetail] = useState(null);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const cacheRef = useRef(new Map());
+    const fetchIdRef = useRef(0);
+    const sortedRuns = useMemo(() => sortRuns(runs), [runs]);
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, sortedRuns.length - 1));
+    const selectedRun = sortedRuns[clampedIndex];
+    const selectedWorkflowId = selectedRun?.workflowId;
+    useEffect(() => {
+        if (clampedIndex !== selectedIndex) {
+            setSelectedIndex(clampedIndex);
+        }
+    }, [clampedIndex, selectedIndex]);
+    useEffect(() => {
+        if (!selectedWorkflowId) {
+            setDetail(null);
+            return;
+        }
+        const cached = cacheRef.current.get(selectedWorkflowId);
+        if (cached) {
+            setDetail(cached);
+            setDetailLoading(false);
+            return;
+        }
+        const currentFetchId = ++fetchIdRef.current;
+        setDetailLoading(true);
+        getWorkflowIdResult(selectedWorkflowId)
+            .then(response => {
+            if (fetchIdRef.current !== currentFetchId) {
+                return;
+            }
+            const data = response.data;
+            cacheRef.current.set(selectedWorkflowId, data);
+            setDetail(data);
+            setDetailLoading(false);
+        })
+            .catch(() => {
+            if (fetchIdRef.current !== currentFetchId) {
+                return;
+            }
+            setDetail(null);
+            setDetailLoading(false);
+        });
+    }, [selectedWorkflowId]);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(i => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex(i => Math.min(sortedRuns.length - 1, i + 1));
+        }
+        else if (key.escape || input === 'q') {
+            onBack();
+        }
+        else if (input === 'o' && selectedWorkflowId) {
+            openUrl(`${TEMPORAL_UI_BASE}/namespaces/default/workflows/${selectedWorkflowId}`);
+        }
+    });
+    const windowStart = useMemo(() => {
+        const half = Math.floor(VISIBLE_ROWS / 2);
+        const start = Math.max(0, clampedIndex - half);
+        const maxStart = Math.max(0, sortedRuns.length - VISIBLE_ROWS);
+        return Math.min(start, maxStart);
+    }, [clampedIndex, sortedRuns.length]);
+    const visibleRuns = sortedRuns.slice(windowStart, windowStart + VISIBLE_ROWS);
+    if (sortedRuns.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Workflow Runs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No workflow runs found." }) }), _jsx(CommandFooter, { hints: [{ key: 'q', label: 'back' }] })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Workflow Runs (", sortedRuns.length, ")"] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(HeaderRow, {}), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more above"] }), visibleRuns.map((run, i) => (_jsx(WorkflowRow, { run: run, selected: windowStart + i === clampedIndex }, `${run.workflowId}-${run.startedAt}-${windowStart + i}`))), windowStart + VISIBLE_ROWS < sortedRuns.length && (_jsxs(Text, { dimColor: true, children: ["  \u2193 ", sortedRuns.length - windowStart - VISIBLE_ROWS, " more below"] }))] }), detail && _jsx(WorkflowDetailPane, { detail: detail, loading: detailLoading }), detailLoading && !detail && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading details..." })] })), _jsx(CommandFooter, { hints: [
+                    { key: '↑/↓', label: 'navigate' },
+                    { key: 'o', label: 'open in temporal' },
+                    { key: 'q', label: 'back' }
+                ] })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outputai/cli",
-  "version": "0.1.13-next.91c5d78.0",
+  "version": "0.1.13-next.a5df989.0",
   "description": "CLI for Output.ai workflow generation",
   "type": "module",
   "main": "dist/index.js",
@@ -35,9 +35,9 @@
     "react": "19.2.4",
     "semver": "7.7.4",
     "yaml": "^2.8.3",
-    "@outputai/credentials": "0.1.13-next.91c5d78.0",
-    "@outputai/evals": "0.1.13-next.91c5d78.0",
-    "@outputai/llm": "0.1.13-next.91c5d78.0"
+    "@outputai/credentials": "0.1.13-next.a5df989.0",
+    "@outputai/evals": "0.1.13-next.a5df989.0",
+    "@outputai/llm": "0.1.13-next.a5df989.0"
   },
   "devDependencies": {
     "@types/cli-progress": "3.11.6",