@outputai/cli 0.8.2-next.edf06bb.0 → 0.9.1-dev.000c5f3.0

package/dist/utils/waterfall.spec.js

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import renderWaterfall, { pickTickStep, formatTickLabel, formatDurationLabel, computeBar } from './waterfall.js';
+const span = (id, name, status, startOffsetMs, durationMs) => ({
+    id,
+    name,
+    technicalName: name,
+    description: null,
+    status,
+    kind: 'activity',
+    attempt: 1,
+    startedAt: null,
+    scheduledAt: null,
+    completedAt: null,
+    startOffsetMs,
+    endOffsetMs: startOffsetMs + durationMs,
+    durationMs,
+    failureMessage: null
+});
+describe('pickTickStep', () => {
+    it('targets ~8 ticks by choosing the smallest sufficient step', () => {
+        expect(pickTickStep(0)).toBe(1_000);
+        expect(pickTickStep(8_000)).toBe(1_000);
+        expect(pickTickStep(80_000)).toBe(10_000);
+        expect(pickTickStep(160_000)).toBe(30_000);
+    });
+});
+describe('formatTickLabel', () => {
+    it('formats axis ticks like the UI', () => {
+        expect(formatTickLabel(0)).toBe('0');
+        expect(formatTickLabel(500)).toBe('500ms');
+        expect(formatTickLabel(27_000)).toBe('27s');
+        expect(formatTickLabel(60_000)).toBe('1m');
+        expect(formatTickLabel(72_000)).toBe('1m12s');
+        expect(formatTickLabel(3_600_000)).toBe('1h');
+        expect(formatTickLabel(3_660_000)).toBe('1h1m');
+    });
+});
+describe('formatDurationLabel', () => {
+    it('always shows a unit, including zero', () => {
+        expect(formatDurationLabel(0)).toBe('0ms');
+        expect(formatDurationLabel(999)).toBe('999ms');
+        expect(formatDurationLabel(1_000)).toBe('1s');
+        expect(formatDurationLabel(27_000)).toBe('27s');
+    });
+    it('carries a rounded-up remainder instead of rendering 60s/60m', () => {
+        expect(formatDurationLabel(59_500)).toBe('1m');
+        expect(formatDurationLabel(119_500)).toBe('2m');
+        expect(formatDurationLabel(3_599_500)).toBe('1h');
+    });
+});
+describe('computeBar', () => {
+    it('maps offsets to columns with a min width and lane clamp', () => {
+        expect(computeBar(0, 27_000, 100_000, 50)).toEqual({ startCol: 0, barLen: 14, instantaneous: false });
+        // Zero-duration step → a single thin marker
+        expect(computeBar(50_000, 50_000, 100_000, 50)).toEqual({ startCol: 25, barLen: 1, instantaneous: true });
+        // A short step at the very end is clamped so it stays inside the lane
+        expect(computeBar(99_000, 100_000, 100_000, 50)).toEqual({ startCol: 49, barLen: 1, instantaneous: false });
+    });
+    it('sizes the bar to span start→end without right-edge drift', () => {
+        // Full-span step fills the lane exactly.
+        expect(computeBar(0, 100_000, 100_000, 50)).toEqual({ startCol: 0, barLen: 50, instantaneous: false });
+        // End column is rounded from the true end offset (33), not start + a
+        // separately-rounded width (which used to overshoot to col 34).
+        expect(computeBar(33_000, 66_000, 100_000, 50)).toEqual({ startCol: 17, barLen: 16, instantaneous: false });
+    });
+});
+describe('renderWaterfall', () => {
+    const spans = [
+        span('a', 'Compress Text', 'completed', 0, 27_000),
+        span('b', 'Generate Brief', 'pending', 40_000, 0)
+    ];
+    it('renders labels, bars, durations and a header without color by default', () => {
+        const out = renderWaterfall(spans, 40_000, { width: 70, color: false, header: 'wf-1 · run abcd1234 · running · 40s' });
+        expect(out).toContain('Compress Text');
+        expect(out).toContain('Generate Brief');
+        expect(out).toContain('█');
+        expect(out).toContain('27s');
+        expect(out).toContain('wf-1 · run abcd1234');
+        expect(out).not.toContain('\x1b[');
+    });
+    it('emits ANSI color when enabled', () => {
+        const out = renderWaterfall(spans, 40_000, { width: 70, color: true });
+        expect(out).toContain('\x1b[');
+        expect(out).toContain('\x1b[92m'); // completed → green
+    });
+    it('shows a friendly message when there are no steps', () => {
+        const out = renderWaterfall([], 1, { width: 70, color: false, header: 'wf-1' });
+        expect(out).toContain('No steps found for this run.');
+    });
+    it('lists the reason under the chart for failed steps that carry a message', () => {
+        const failed = { ...span('c', 'Scrape Serp Page', 'failed', 10_000, 2_000), failureMessage: 'connection reset' };
+        const out = renderWaterfall([...spans, failed], 40_000, { width: 70, color: false });
+        expect(out).toContain('Failures');
+        expect(out).toContain('✗ Scrape Serp Page: connection reset');
+    });
+    it('omits the failures section when no failed step has a message', () => {
+        const out = renderWaterfall(spans, 40_000, { width: 70, color: false });
+        expect(out).not.toContain('Failures');
+    });
+});

package/dist/views/dev/dev_app.js

@@ -18,7 +18,8 @@ import { HELP_HINTS, HELP_SECTION_COUNT, HelpPanel } from '#views/dev/panels/hel
 import { RunModal } from '#views/dev/modals/run_modal.js';
 import { ExpandedJsonModal } from '#views/dev/modals/expanded_json_modal.js';
 import { StepsModal } from '#views/dev/modals/steps_modal.js';
-import { MIN_TERMINAL_COLUMNS, MIN_TERMINAL_ROWS } from '#views/dev/utils/constants.js';
+import { StepGraphModal } from '#views/dev/modals/step_graph_modal.js';
+import { MIN_TERMINAL_COLUMNS, MIN_TERMINAL_ROWS } from '#views/dev/utils/ui_constants.js';
 const TAB_NUMBER_KEYS = {
     1: 'workflows',
     2: 'runs',
@@ -65,7 +66,7 @@ const useGlobalInput = (opts) => {
                 .catch(err => exit(err instanceof Error ? err : new Error(String(err))));
             return;
         }
-        if (ui.search.open || ui.runModal.open || ui.expandedJson.open || opts.runDetailOpen) {
+        if (ui.search.open || ui.runModal.open || ui.expandedJson.open || ui.stepGraph.open || opts.runDetailOpen) {
             return;
         }
         // Esc on a list view drops an active filter. Skip when we're on
@@ -133,9 +134,14 @@ const footerFor = (opts) => {
     return { hints: HELP_HINTS, itemCount: HELP_SECTION_COUNT, itemLabel: 'sections' };
 };
 const overlayFor = (opts) => {
+    // expandedJson sits on top of everything — it's popped from another overlay
+    // (e.g. the step graph's `e`), so it must win when both are open.
     if (opts.ui.expandedJson.open) {
         return _jsx(ExpandedJsonModal, {});
     }
+    if (opts.ui.stepGraph.open && opts.stepGraphRun) {
+        return _jsx(StepGraphModal, { run: opts.stepGraphRun, height: opts.rows });
+    }
     if (opts.ui.runModal.open) {
         return _jsx(RunModal, { workflowName: opts.ui.runModal.workflowName, workflowPath: opts.ui.runModal.workflowPath });
     }
@@ -177,6 +183,14 @@ const Shell = ({ dockerComposePath, onCleanup }) => {
         runs.find(r => r.runId === ui.selection.runId && r.workflowId === ui.selection.workflowId) :
         undefined;
     const runDetailOpen = ui.runsView === 'detail' && detailRun !== undefined;
+    // Re-resolve the step-graph run from the polled list each render so its
+    // status/duration stay live; fall back to the snapshot captured at open.
+    const stepGraphRun = useMemo(() => {
+        const captured = ui.stepGraph.open ? ui.stepGraph.run : null;
+        return captured ?
+            (runs.find(r => r.runId === captured.runId && r.workflowId === captured.workflowId) ?? captured) :
+            undefined;
+    }, [ui.stepGraph.open, ui.stepGraph.run, runs]);
     useGlobalInput({ onCleanup, runDetailOpen });
     const failingServices = useMemo(() => services.filter(isServiceFailed).length, [services]);
     const serviceBadge = useMemo(() => {
@@ -210,7 +224,7 @@ const Shell = ({ dockerComposePath, onCleanup }) => {
         serviceCount: services.length,
         phase
     });
-    const overlay = overlayFor({ ui, detailRun, runDetailOpen, rows });
+    const overlay = overlayFor({ ui, detailRun, stepGraphRun, runDetailOpen, rows });
     if (terminalTooSmall) {
         return _jsx(TerminalTooSmall, { rows: rows, cols: cols });
     }

package/dist/views/dev/hooks/use_step_graph.d.ts

@@ -0,0 +1,22 @@
+import { type WorkflowMeta } from '#services/workflow_history.js';
+import type { Span } from '#services/workflow_history/correlator.js';
+export interface StepGraph {
+    spans: Span[];
+    totalDurationMs: number;
+    workflow: WorkflowMeta | null;
+    labels: Map<string, string>;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Fetches a run's correlated step spans for the dev TUI's waterfall overlay,
+ * reusing the same `fetchWorkflowHistory` path as the `workflow history` CLI
+ * command. Driven by `usePoll`: while the run is still advancing it re-pulls
+ * every tick so newly scheduled / finished steps appear, then stops and caches
+ * once terminal. The modal ticks the time axis between polls so the right edge
+ * tracks elapsed time.
+ *
+ * A hard fetch failure surfaces as `error` only when nothing has loaded yet — a
+ * transient poll blip keeps the last good chart on screen.
+ */
+export declare const useStepGraph: (workflowId: string | undefined, runId: string | undefined, status?: string) => StepGraph;

package/dist/views/dev/hooks/use_step_graph.js

@@ -0,0 +1,76 @@
+import { useRef, useState } from 'react';
+import { fetchWorkflowHistory } from '#services/workflow_history.js';
+import buildSpanLabels from '#utils/span_labels.js';
+import { isTerminalRunStatus } from '#views/dev/hooks/use_run_detail.js';
+import { usePoll, POLL_INTERVAL_MS } from '#views/dev/hooks/use_poll.js';
+const EMPTY_GRAPH = {
+    spans: [],
+    totalDurationMs: 0,
+    workflow: null,
+    labels: new Map(),
+    loading: false,
+    error: null
+};
+const stepGraphCache = new Map();
+/**
+ * Fetches a run's correlated step spans for the dev TUI's waterfall overlay,
+ * reusing the same `fetchWorkflowHistory` path as the `workflow history` CLI
+ * command. Driven by `usePoll`: while the run is still advancing it re-pulls
+ * every tick so newly scheduled / finished steps appear, then stops and caches
+ * once terminal. The modal ticks the time axis between polls so the right edge
+ * tracks elapsed time.
+ *
+ * A hard fetch failure surfaces as `error` only when nothing has loaded yet — a
+ * transient poll blip keeps the last good chart on screen.
+ */
+export const useStepGraph = (workflowId, runId, status) => {
+    const [graph, setGraph] = useState(EMPTY_GRAPH);
+    const terminal = isTerminalRunStatus(status);
+    const requestKeyRef = useRef('');
+    usePoll(Boolean(workflowId), POLL_INTERVAL_MS, async () => {
+        if (!workflowId) {
+            return 'done';
+        }
+        const key = `${workflowId}:${runId ?? 'latest'}`;
+        requestKeyRef.current = key;
+        const cached = stepGraphCache.get(key);
+        if (cached) {
+            setGraph(cached);
+            return 'done';
+        }
+        setGraph(current => (current.spans.length === 0 ? { ...current, loading: true } : current));
+        try {
+            // Pull payloads so the detail pane can show each step's input/output and
+            // a failed step's reason.
+            const result = await fetchWorkflowHistory({ workflowId, runId, includePayloads: true });
+            if (requestKeyRef.current !== key) {
+                return 'done'; // a different run was selected mid-flight
+            }
+            const next = {
+                spans: result.spans,
+                totalDurationMs: result.totalDurationMs,
+                workflow: result.workflow,
+                labels: buildSpanLabels(result.spans),
+                loading: false,
+                error: null
+            };
+            // Cache only terminal runs — a running run's history is still growing.
+            if (terminal) {
+                stepGraphCache.set(key, next);
+            }
+            setGraph(next);
+        }
+        catch (err) {
+            if (requestKeyRef.current !== key) {
+                return 'done';
+            }
+            const message = err instanceof Error ? err.message : String(err);
+            // Keep the last good chart if a poll blips; only surface a cold failure.
+            setGraph(current => (current.spans.length > 0 ?
+                { ...current, loading: false } :
+                { ...EMPTY_GRAPH, error: message }));
+        }
+        return terminal ? 'done' : 'continue';
+    });
+    return graph;
+};

package/dist/views/dev/modals/run_modal.d.ts

@@ -1,5 +1,14 @@
 import React from 'react';
+type EntryKind = 'scenario' | 'custom';
+interface Entry {
+    kind: EntryKind;
+    label: string;
+    scenarioName?: string;
+}
+export declare const buildEntries: (scenarios: string[]) => Entry[];
+export declare const validateScenarioName: (raw: string, existing: string[]) => string | null;
 export declare const RunModal: React.FC<{
     workflowName: string;
     workflowPath?: string;
 }>;
+export {};

package/dist/views/dev/modals/run_modal.js

@@ -9,26 +9,40 @@ import { startWorkflow } from '#views/dev/services/run_workflow.js';
 import { readScenario, writeScenario } from '#views/dev/services/scenario_io.js';
 import { JsonEditor } from '#views/dev/utils/json_editor.js';
 import { ModalFrame } from '#views/dev/modals/modal_frame.js';
-const CUSTOM_SEED = { '': '' };
 const SCENARIO_NAME_RE = /^[a-zA-Z0-9_-]+$/;
-const buildEntries = (scenarios) => {
+// Seed for a brand-new input — an empty "": "" pair reads friendlier than a bare {}.
+const CUSTOM_SEED = { '': '' };
+export const buildEntries = (scenarios) => {
     const list = scenarios.map(s => ({
         kind: 'scenario',
         label: s,
         scenarioName: s
     }));
-    list.push({ kind: 'custom', label: '[Create new scenario]' });
+    list.push({ kind: 'custom', label: '[Enter input]' });
     return list;
 };
+export const validateScenarioName = (raw, existing) => {
+    const name = raw.trim();
+    if (!name) {
+        return 'Scenario name cannot be empty.';
+    }
+    if (!SCENARIO_NAME_RE.test(name)) {
+        return 'Use letters, numbers, dashes, and underscores only.';
+    }
+    if (existing.includes(name)) {
+        return `A scenario named '${name}' already exists.`;
+    }
+    return null;
+};
 const SELECT_SHORTCUTS = [
     ['↑/↓', 'navigate'],
     ['enter', 'run'],
     ['d', 'duplicate'],
     ['esc', 'cancel']
 ];
-const NAME_SHORTCUTS = [
-    ['enter', 'next'],
-    ['esc', 'back']
+const SAVE_SHORTCUTS = [
+    ['enter', 'save & run'],
+    ['esc', 'back to editor']
 ];
 const ERROR_SHORTCUTS = [
     { key: 'enter', label: 'return' },
@@ -41,9 +55,11 @@ export const RunModal = ({ workflowName, workflowPath }) => {
     const entries = useMemo(() => buildEntries(scenarios), [scenarios]);
     const [mode, setMode] = useState('select');
     const [index, setIndex] = useState(0);
-    const [editName, setEditName] = useState('');
-    const [editSeed, setEditSeed] = useState(CUSTOM_SEED);
+    const [editSeed, setEditSeed] = useState({});
     const [editFrameTitle, setEditFrameTitle] = useState('');
+    const [defaultSaveName, setDefaultSaveName] = useState('');
+    const [editName, setEditName] = useState('');
+    const [pendingValue, setPendingValue] = useState(null);
     const [nameError, setNameError] = useState(null);
     const [errorMessage, setErrorMessage] = useState(null);
     const closeWith = (message, tone = 'info') => {
@@ -76,63 +92,55 @@ export const RunModal = ({ workflowName, workflowPath }) => {
             setMode('error');
         }
     };
+    // Custom + duplicate both open the editor first; saving a scenario is opt-in (ctrl+s).
+    const startCustom = () => {
+        setEditSeed(CUSTOM_SEED);
+        setDefaultSaveName('');
+        setEditFrameTitle('Enter input');
+        setMode('edit_content');
+    };
     const startDuplicate = async (scenarioName) => {
         try {
             const sourceContent = await readScenario(workflowName, scenarioName, workflowPath);
-            setEditName(`${scenarioName}_copy`);
             setEditSeed(sourceContent);
+            setDefaultSaveName(`${scenarioName}_copy`);
             setEditFrameTitle(`Duplicate '${scenarioName}'`);
-            setNameError(null);
-            setMode('edit_name');
+            setMode('edit_content');
         }
         catch (err) {
             setErrorMessage(err instanceof Error ? err.message : String(err));
             setMode('error');
         }
     };
-    const startCustom = () => {
-        setEditName('');
-        setEditSeed(CUSTOM_SEED);
-        setEditFrameTitle('New scenario');
-        setNameError(null);
-        setMode('edit_name');
+    // ctrl+r in the editor: run the payload as-is, nothing written to disk.
+    const runEphemeral = (value) => {
+        void submit(value, defaultSaveName || 'input');
     };
-    const validateName = (raw) => {
-        const name = raw.trim();
-        if (!name) {
-            return 'Scenario name cannot be empty.';
-        }
-        if (!SCENARIO_NAME_RE.test(name)) {
-            return 'Use letters, numbers, dashes, and underscores only.';
-        }
-        if (scenarios.includes(name)) {
-            return `A scenario named '${name}' already exists.`;
-        }
-        return null;
+    // ctrl+s in the editor: keep the payload and ask for a name before saving + running.
+    const beginSave = (value) => {
+        setPendingValue(value);
+        setEditSeed(value);
+        setEditName(defaultSaveName);
+        setNameError(null);
+        setMode('name_for_save');
     };
-    const handleEditorSubmit = async (value) => {
-        const name = editName.trim();
-        const writeError = validateName(editName);
-        if (writeError) {
-            setNameError(writeError);
-            setMode('edit_name');
+    const confirmSave = async () => {
+        const validationError = validateScenarioName(editName, scenarios);
+        if (validationError) {
+            setNameError(validationError);
             return;
         }
         setMode('submitting');
         try {
-            const writtenPath = await writeScenario(workflowName, name, value, workflowPath);
+            const writtenPath = await writeScenario(workflowName, editName.trim(), pendingValue, workflowPath);
             ui.pushToast(`Saved scenario at ${writtenPath}`, 'info');
-            await submit(value, name);
+            await submit(pendingValue, editName.trim());
         }
         catch (err) {
             setErrorMessage(err instanceof Error ? err.message : String(err));
             setMode('error');
         }
     };
-    const handleEditorCancel = () => {
-        // Bring the user back to the name step so they can adjust it or bail.
-        setMode('edit_name');
-    };
     useInput((input, key) => {
         if (mode === 'edit_content' || mode === 'submitting') {
             return;
@@ -168,19 +176,13 @@ export const RunModal = ({ workflowName, workflowPath }) => {
             }
             return;
         }
-        if (mode === 'edit_name') {
+        if (mode === 'name_for_save') {
             if (key.escape) {
-                setMode('select');
+                setMode('edit_content');
                 return;
             }
             if (key.return) {
-                const err = validateName(editName);
-                if (err) {
-                    setNameError(err);
-                    return;
-                }
-                setNameError(null);
-                setMode('edit_content');
+                void confirmSave();
                 return;
             }
             if (key.backspace || key.delete) {
@@ -206,12 +208,10 @@ export const RunModal = ({ workflowName, workflowPath }) => {
         }
     });
     if (mode === 'edit_content') {
-        return (_jsx(ModalFrame, { title: editFrameTitle, children: _jsx(JsonEditor, { seed: editSeed, title: `${editName}.json`, isActive: true, onSubmit: value => {
-                    void handleEditorSubmit(value);
-                }, onCancel: handleEditorCancel }) }));
+        return (_jsx(ModalFrame, { title: editFrameTitle, children: _jsx(JsonEditor, { seed: editSeed, title: defaultSaveName ? `${defaultSaveName}.json` : 'input', isActive: true, onSubmit: runEphemeral, onSave: beginSave, onCancel: () => setMode('select') }) }));
     }
-    if (mode === 'edit_name') {
-        return (_jsxs(ModalFrame, { title: editFrameTitle, shortcuts: NAME_SHORTCUTS, children: [_jsx(TextPrompt, { label: "Scenario name:", value: editName }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : null] }));
+    if (mode === 'name_for_save') {
+        return (_jsxs(ModalFrame, { title: "Save & run", shortcuts: SAVE_SHORTCUTS, children: [_jsx(TextPrompt, { label: "Scenario name:", value: editName }), nameError ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: nameError }) })) : null] }));
     }
     if (mode === 'submitting') {
         return (_jsxs(ModalFrame, { title: `Run ${workflowName}`, children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: "\u00A0Starting workflow\u2026" })] }));
@@ -219,5 +219,5 @@ export const RunModal = ({ workflowName, workflowPath }) => {
     if (mode === 'error') {
         return (_jsx(ModalFrame, { title: `Run workflow "${workflowName}"`, shortcuts: ERROR_SHORTCUTS, children: _jsxs(Text, { color: "red", bold: true, children: ["\u2717 ", errorMessage ?? 'Something went wrong.'] }) }));
     }
-    return (_jsx(ModalFrame, { title: `Run ${workflowName}`, shortcuts: SELECT_SHORTCUTS, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { dimColor: true, children: scenarios.length === 0 ? 'No scenarios found. Create a new one:' : 'Select scenarios:' }), _jsx(Box, { flexDirection: "column", children: entries.map((entry, i) => (_jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, children: ["\u00A0", entry.label] })] }, `${entry.kind}-${entry.scenarioName ?? i}`))) })] }) }));
+    return (_jsx(ModalFrame, { title: `Run ${workflowName}`, shortcuts: SELECT_SHORTCUTS, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { dimColor: true, children: scenarios.length === 0 ? 'No saved scenarios. Enter input to run:' : 'Select a scenario:' }), _jsx(Box, { flexDirection: "column", children: entries.map((entry, i) => (_jsxs(Box, { children: [_jsx(SelectionIndicator, { selected: i === index }), _jsxs(Text, { bold: i === index, children: ["\u00A0", entry.label] })] }, `${entry.kind}-${entry.scenarioName ?? i}`))) })] }) }));
 };

package/dist/views/dev/modals/run_modal.spec.d.ts

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

package/dist/views/dev/modals/run_modal.spec.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { buildEntries, validateScenarioName } from './run_modal.js';
+describe('buildEntries', () => {
+    it('lists scenarios then the custom-JSON entry', () => {
+        const entries = buildEntries(['basic', 'edge']);
+        expect(entries.map(e => e.label)).toEqual(['basic', 'edge', '[Enter input]']);
+        expect(entries[0]).toMatchObject({ kind: 'scenario', scenarioName: 'basic' });
+        expect(entries.at(-1)).toMatchObject({ kind: 'custom' });
+    });
+    it('offers the custom entry even with no saved scenarios', () => {
+        const entries = buildEntries([]);
+        expect(entries).toHaveLength(1);
+        expect(entries[0].kind).toBe('custom');
+    });
+});
+describe('validateScenarioName', () => {
+    it('rejects empty or whitespace-only names', () => {
+        expect(validateScenarioName('', [])).toMatch(/cannot be empty/);
+        expect(validateScenarioName('   ', [])).toMatch(/cannot be empty/);
+    });
+    it('rejects names with unsupported characters', () => {
+        expect(validateScenarioName('has space', [])).toMatch(/letters, numbers/);
+        expect(validateScenarioName('bad/name', [])).toMatch(/letters, numbers/);
+    });
+    it('rejects names that already exist', () => {
+        expect(validateScenarioName('basic', ['basic'])).toMatch(/already exists/);
+    });
+    it('trims before checking for duplicates', () => {
+        expect(validateScenarioName('  basic  ', ['basic'])).toMatch(/already exists/);
+    });
+    it('accepts a unique name with allowed characters', () => {
+        expect(validateScenarioName('edge_case-1', ['basic'])).toBeNull();
+    });
+});

package/dist/views/dev/modals/step_graph_modal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { WorkflowRun } from '#services/workflow_runs.js';
+export declare const StepGraphModal: React.FC<{
+    run: WorkflowRun;
+    height: number;
+}>;