@outputai/cli 0.3.2-next.5e221e8.0 → 0.3.3-dev.422151e.0

package/dist/views/dev/services/run_workflow.d.ts

@@ -0,0 +1,10 @@
+export interface StartedRun {
+    workflowId?: string;
+    runId?: string | null;
+}
+export interface StartWorkflowOptions {
+    workflowName: string;
+    input: unknown;
+    taskQueue?: string;
+}
+export declare const startWorkflow: (opts: StartWorkflowOptions) => Promise<StartedRun>;

package/dist/views/dev/services/run_workflow.js

@@ -0,0 +1,14 @@
+import { postWorkflowStart } from '#api/generated/api.js';
+export const startWorkflow = async (opts) => {
+    const response = await postWorkflowStart({
+        workflowName: opts.workflowName,
+        input: opts.input,
+        taskQueue: opts.taskQueue
+    });
+    if (response.status !== 200) {
+        const data = response.data;
+        throw new Error(data?.error ?? `Workflow start failed (status ${response.status})`);
+    }
+    const data = response.data;
+    return { workflowId: data.workflowId, runId: data.runId };
+};

package/dist/views/dev/services/scenario_io.d.ts

@@ -0,0 +1,2 @@
+export declare const readScenario: (workflowName: string, scenarioName: string) => Promise<unknown>;
+export declare const writeScenario: (workflowName: string, scenarioName: string, content: unknown) => Promise<string>;

package/dist/views/dev/services/scenario_io.js

@@ -0,0 +1,37 @@
+import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { resolveScenarioPath } from '#utils/scenario_resolver.js';
+import { getWorkflowsBasePath } from '#utils/paths.js';
+const WORKFLOWS_PATHS = ['src/workflows', 'workflows'];
+export const readScenario = async (workflowName, scenarioName) => {
+    const resolution = await resolveScenarioPath(workflowName, scenarioName);
+    if (!resolution.found || !resolution.path) {
+        throw new Error(`Scenario '${scenarioName}' not found for workflow '${workflowName}'.`);
+    }
+    const content = await readFile(resolution.path, 'utf-8');
+    return JSON.parse(content);
+};
+const findWorkflowDirectory = (workflowName) => {
+    const basePath = getWorkflowsBasePath();
+    for (const wfDir of WORKFLOWS_PATHS) {
+        const candidate = resolve(basePath, wfDir, workflowName);
+        if (existsSync(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+};
+export const writeScenario = async (workflowName, scenarioName, content) => {
+    const dir = findWorkflowDirectory(workflowName);
+    if (!dir) {
+        throw new Error(`Workflow directory for '${workflowName}' not found locally.`);
+    }
+    const targetPath = resolve(dir, 'scenarios', `${scenarioName}.json`);
+    if (existsSync(targetPath)) {
+        throw new Error(`Scenario '${scenarioName}' already exists at ${targetPath}`);
+    }
+    await mkdir(dirname(targetPath), { recursive: true });
+    await writeFile(targetPath, JSON.stringify(content, null, 2) + '\n', 'utf-8');
+    return targetPath;
+};

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

@@ -0,0 +1,60 @@
+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 RunsView = 'list' | 'detail';
+export interface Selection {
+    workflowName?: string;
+    runId?: string;
+    workflowId?: string;
+    serviceName?: string;
+}
+export interface SearchState {
+    open: boolean;
+    query: string;
+}
+export interface RunModalState {
+    open: boolean;
+    workflowName: string;
+}
+export interface ExpandedJsonState {
+    open: boolean;
+    value: unknown;
+    title: string;
+}
+export interface Toast {
+    id: number;
+    message: string;
+    tone: 'info' | 'success' | 'error';
+}
+export interface UiState {
+    tab: Tab;
+    search: SearchState;
+    selection: Selection;
+    rightPaneTab: RightPaneTab;
+    runsView: RunsView;
+    runModal: RunModalState;
+    expandedJson: ExpandedJsonState;
+    toasts: Toast[];
+    setTab: (tab: Tab) => void;
+    nextTab: () => void;
+    prevTab: () => void;
+    openSearch: () => void;
+    closeSearch: () => void;
+    clearSearch: () => void;
+    setSearchQuery: (query: string) => void;
+    setSelection: (selection: Selection) => void;
+    setRightPaneTab: (tab: RightPaneTab) => void;
+    setRunsView: (view: RunsView) => void;
+    openRunModal: (workflowName: string) => void;
+    closeRunModal: () => void;
+    openExpandedJson: (value: unknown, title: string) => void;
+    closeExpandedJson: () => void;
+    pushToast: (message: string, tone?: Toast['tone']) => void;
+    dismissToast: (id: number) => void;
+}
+export declare const UiStateProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useUiState: () => UiState;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from 'react';
+export const TAB_ORDER = ['workflows', 'runs', 'services', 'help'];
+export const TAB_LABELS = {
+    workflows: 'Workflows',
+    runs: 'Recent Runs',
+    services: 'Services',
+    help: 'Help'
+};
+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 [runsView, setRunsView] = useState('list');
+    const [runModal, setRunModal] = useState({ open: false, workflowName: '' });
+    const [expandedJson, setExpandedJson] = useState({ open: false, value: null, title: '' });
+    const [toasts, setToasts] = useState([]);
+    const toastIdRef = useRef(0);
+    const value = useMemo(() => ({
+        tab,
+        search,
+        selection,
+        rightPaneTab,
+        runsView,
+        runModal,
+        expandedJson,
+        toasts,
+        setTab,
+        nextTab: () => setTab(current => {
+            const idx = TAB_ORDER.indexOf(current);
+            return TAB_ORDER[(idx + 1) % TAB_ORDER.length];
+        }),
+        prevTab: () => setTab(current => {
+            const idx = TAB_ORDER.indexOf(current);
+            return TAB_ORDER[(idx - 1 + TAB_ORDER.length) % TAB_ORDER.length];
+        }),
+        openSearch: () => setSearch(prev => ({ open: true, query: prev.query })),
+        closeSearch: () => setSearch(prev => ({ open: false, query: prev.query })),
+        clearSearch: () => setSearch({ open: false, query: '' }),
+        setSearchQuery: (query) => setSearch(prev => ({ open: prev.open, query })),
+        setSelection,
+        setRightPaneTab,
+        setRunsView,
+        openRunModal: (workflowName) => setRunModal({ open: true, workflowName }),
+        closeRunModal: () => setRunModal({ open: false, workflowName: '' }),
+        openExpandedJson: (value, title) => setExpandedJson({ open: true, value, title }),
+        closeExpandedJson: () => setExpandedJson({ open: false, value: null, title: '' }),
+        pushToast: (message, tone = 'info') => {
+            const id = ++toastIdRef.current;
+            setToasts(prev => [...prev, { id, message, tone }]);
+        },
+        dismissToast: (id) => setToasts(prev => prev.filter(t => t.id !== id))
+    }), [tab, search, selection, rightPaneTab, runsView, runModal, expandedJson, toasts]);
+    return _jsx(UiStateContext.Provider, { value: value, children: children });
+};
+export const useUiState = () => {
+    const ctx = useContext(UiStateContext);
+    if (!ctx) {
+        throw new Error('useUiState must be used inside <UiStateProvider>');
+    }
+    return ctx;
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Workflow type emitted by Temporal's catalog refresh, used to drop the
+ * routine completed catalog rows from the Recent Runs list while still
+ * surfacing failing or running ones for diagnostics.
+ */
+export declare const CATALOG_WORKFLOW_NAME = "$catalog";
+/**
+ * Visible row counts and per-pane layout knobs. Co-located here so the
+ * top-of-file constant blocks across panels stay terse.
+ */
+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 HELP_DOCS_URL = "https://docs.output.ai";

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

@@ -0,0 +1,17 @@
+/**
+ * Workflow type emitted by Temporal's catalog refresh, used to drop the
+ * routine completed catalog rows from the Recent Runs list while still
+ * surfacing failing or running ones for diagnostics.
+ */
+export const CATALOG_WORKFLOW_NAME = '$catalog';
+/**
+ * Visible row counts and per-pane layout knobs. Co-located here so the
+ * top-of-file constant blocks across panels stay terse.
+ */
+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 HELP_DOCS_URL = 'https://docs.output.ai';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+interface CursorPos {
+    line: number;
+    col: number;
+}
+export declare const cursorToPosition: (buffer: string, cursor: number) => CursorPos;
+export declare const positionToCursor: (buffer: string, line: number, col: number) => number;
+export declare const tryParseJson: (text: string) => {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+};
+export declare const JsonEditor: React.FC<{
+    seed: unknown;
+    title: string;
+    isActive?: boolean;
+    onSubmit: (value: unknown) => void;
+    onCancel: () => void;
+}>;
+export {};

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

@@ -0,0 +1,117 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+export const cursorToPosition = (buffer, cursor) => {
+    const before = buffer.slice(0, cursor);
+    const lines = before.split('\n');
+    return { line: lines.length - 1, col: lines[lines.length - 1].length };
+};
+export const positionToCursor = (buffer, line, col) => {
+    const allLines = buffer.split('\n');
+    const targetLine = Math.max(0, Math.min(line, allLines.length - 1));
+    const targetCol = Math.max(0, Math.min(col, allLines[targetLine].length));
+    const charsBefore = allLines.slice(0, targetLine).reduce((acc, l) => acc + l.length + 1, 0);
+    return charsBefore + targetCol;
+};
+export const tryParseJson = (text) => {
+    if (text.trim().length === 0) {
+        return { ok: false, error: 'Empty' };
+    }
+    try {
+        JSON.parse(text);
+        return { ok: true };
+    }
+    catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+    }
+};
+const VISIBLE_BUFFER = 6;
+export const JsonEditor = ({ seed, title, isActive = true, onSubmit, onCancel }) => {
+    const initial = JSON.stringify(seed ?? {}, null, 2);
+    const [buffer, setBuffer] = useState(initial);
+    const [cursor, setCursor] = useState(initial.length);
+    const [status, setStatus] = useState(() => tryParseJson(initial));
+    const [submitMessage, setSubmitMessage] = useState(null);
+    useEffect(() => {
+        setStatus(tryParseJson(buffer));
+    }, [buffer]);
+    const insert = (text) => {
+        setBuffer(b => b.slice(0, cursor) + text + b.slice(cursor));
+        setCursor(c => c + text.length);
+    };
+    const removeBeforeCursor = () => {
+        if (cursor === 0) {
+            return;
+        }
+        setBuffer(b => b.slice(0, cursor - 1) + b.slice(cursor));
+        setCursor(c => Math.max(0, c - 1));
+    };
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.ctrl && input === 's') {
+            const parsed = tryParseJson(buffer);
+            if (!parsed.ok) {
+                setSubmitMessage(`Cannot submit — ${parsed.error}`);
+                return;
+            }
+            try {
+                onSubmit(JSON.parse(buffer));
+            }
+            catch (err) {
+                setSubmitMessage(err instanceof Error ? err.message : String(err));
+            }
+            return;
+        }
+        if (key.return) {
+            insert('\n');
+            return;
+        }
+        if (key.tab) {
+            insert('  ');
+            return;
+        }
+        if (key.backspace || key.delete) {
+            removeBeforeCursor();
+            return;
+        }
+        if (key.leftArrow) {
+            setCursor(c => Math.max(0, c - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            setCursor(c => Math.min(buffer.length, c + 1));
+            return;
+        }
+        if (key.upArrow) {
+            const pos = cursorToPosition(buffer, cursor);
+            setCursor(positionToCursor(buffer, pos.line - 1, pos.col));
+            return;
+        }
+        if (key.downArrow) {
+            const pos = cursorToPosition(buffer, cursor);
+            setCursor(positionToCursor(buffer, pos.line + 1, pos.col));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            insert(input);
+        }
+    }, { isActive });
+    const lines = buffer.split('\n');
+    const cursorPos = cursorToPosition(buffer, cursor);
+    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) => {
+                    const lineIdx = startLine + i;
+                    if (lineIdx !== cursorPos.line) {
+                        return _jsx(Text, { 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));
+                }) }), !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_editor.spec.d.ts

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

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

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { cursorToPosition, positionToCursor, tryParseJson } from './json_editor.js';
+describe('cursorToPosition', () => {
+    it('returns line 0 col 0 for an empty buffer', () => {
+        expect(cursorToPosition('', 0)).toEqual({ line: 0, col: 0 });
+    });
+    it('tracks column on a single-line buffer', () => {
+        expect(cursorToPosition('hello', 3)).toEqual({ line: 0, col: 3 });
+    });
+    it('crosses newline boundaries', () => {
+        // 'ab\ncd' — cursor 3 is just before `c` on line 1
+        expect(cursorToPosition('ab\ncd', 3)).toEqual({ line: 1, col: 0 });
+    });
+    it('lands at the end of a line', () => {
+        expect(cursorToPosition('ab\ncd', 5)).toEqual({ line: 1, col: 2 });
+    });
+});
+describe('positionToCursor', () => {
+    it('returns 0 for an empty buffer', () => {
+        expect(positionToCursor('', 0, 0)).toBe(0);
+    });
+    it('computes index for a column on a given line', () => {
+        expect(positionToCursor('ab\ncd', 1, 1)).toBe(4);
+    });
+    it('clamps the column to the line length', () => {
+        expect(positionToCursor('ab\ncd', 0, 99)).toBe(2);
+    });
+    it('clamps to the last line when over-shooting', () => {
+        expect(positionToCursor('ab\ncd', 99, 0)).toBe(3);
+    });
+    it('clamps to the first line when under-shooting', () => {
+        expect(positionToCursor('ab\ncd', -5, 1)).toBe(1);
+    });
+    it('roundtrips with cursorToPosition', () => {
+        const buffer = 'foo\nbar\nbaz';
+        for (const cursor of [0, 2, 4, 7, 10]) {
+            const pos = cursorToPosition(buffer, cursor);
+            expect(positionToCursor(buffer, pos.line, pos.col)).toBe(cursor);
+        }
+    });
+});
+describe('tryParseJson', () => {
+    it('rejects empty input', () => {
+        expect(tryParseJson('')).toEqual({ ok: false, error: 'Empty' });
+        expect(tryParseJson('   \n  ')).toEqual({ ok: false, error: 'Empty' });
+    });
+    it('accepts valid JSON', () => {
+        expect(tryParseJson('{"a":1}')).toEqual({ ok: true });
+    });
+    it('returns the parser error for invalid JSON', () => {
+        const result = tryParseJson('{a:1}');
+        expect(result.ok).toBe(false);
+        if (!result.ok) {
+            expect(result.error.length).toBeGreaterThan(0);
+        }
+    });
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ColoredToken {
+    text: string;
+    color?: string;
+}
+export declare const tokenizeLine: (line: string) => ColoredToken[];
+export declare const formatJsonText: (value: unknown) => string;
+export declare const countJsonLines: (value: unknown) => number;
+export declare const JsonView: React.FC<{
+    value: unknown;
+    maxLines?: number;
+    offset?: number;
+    truncateLine?: boolean;
+    showOverflowFooter?: boolean;
+}>;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const RAW_TOKEN_RE = /"(?:\\.|[^"\\])*"|true|false|null|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}\[\]:,]|\s+/g;
+const KEY_COLOR = 'cyan';
+const STRING_COLOR = 'green';
+const NUMBER_COLOR = 'yellow';
+const BOOLEAN_COLOR = 'magenta';
+const NULL_COLOR = 'red';
+const PUNCT_COLOR = 'gray';
+const classifyRaw = (text) => {
+    if (/^\s+$/.test(text)) {
+        return { kind: 'ws', text };
+    }
+    if (text.startsWith('"')) {
+        return { kind: 'string', text };
+    }
+    if (text === 'true' || text === 'false' || text === 'null') {
+        return { kind: 'lit', text };
+    }
+    if (/^-?\d/.test(text)) {
+        return { kind: 'num', text };
+    }
+    return { kind: 'punct', text };
+};
+export const tokenizeLine = (line) => {
+    const raws = Array.from(line.matchAll(RAW_TOKEN_RE), m => classifyRaw(m[0]));
+    return raws.map((raw, idx) => {
+        if (raw.kind === 'ws') {
+            return { text: raw.text };
+        }
+        if (raw.kind === 'string') {
+            const next = raws.slice(idx + 1).find(r => r.kind !== 'ws');
+            const isKey = next?.kind === 'punct' && next.text === ':';
+            return { text: raw.text, color: isKey ? KEY_COLOR : STRING_COLOR };
+        }
+        if (raw.kind === 'lit') {
+            return { text: raw.text, color: raw.text === 'null' ? NULL_COLOR : BOOLEAN_COLOR };
+        }
+        if (raw.kind === 'num') {
+            return { text: raw.text, color: NUMBER_COLOR };
+        }
+        return { text: raw.text, color: PUNCT_COLOR };
+    });
+};
+export const formatJsonText = (value) => {
+    if (value === undefined || value === null) {
+        return '';
+    }
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(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));
+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 }) => {
+    if (value === undefined || value === null) {
+        return _jsx(Text, { dimColor: true, children: "\u2014" });
+    }
+    const text = formatJsonText(value);
+    if (!text) {
+        return _jsx(Text, { dimColor: true, children: "\u2014" });
+    }
+    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'] }))] }));
+};

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

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

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

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import { tokenizeLine, formatJsonText, countJsonLines } from './json_render.js';
+describe('tokenizeLine', () => {
+    it('classifies an object key (followed by colon) as a key', () => {
+        const tokens = tokenizeLine('  "name": "ada"');
+        const key = tokens.find(t => t.text === '"name"');
+        const value = tokens.find(t => t.text === '"ada"');
+        expect(key?.color).toBe('cyan');
+        expect(value?.color).toBe('green');
+    });
+    it('classifies a numeric value', () => {
+        const tokens = tokenizeLine('  "age": 42');
+        const num = tokens.find(t => t.text === '42');
+        expect(num?.color).toBe('yellow');
+    });
+    it('classifies booleans as magenta', () => {
+        const tokens = tokenizeLine('  "active": true');
+        expect(tokens.find(t => t.text === 'true')?.color).toBe('magenta');
+    });
+    it('classifies null as red', () => {
+        const tokens = tokenizeLine('  "owner": null');
+        expect(tokens.find(t => t.text === 'null')?.color).toBe('red');
+    });
+    it('colours punctuation gray', () => {
+        const tokens = tokenizeLine('{},[]:');
+        for (const t of tokens) {
+            expect(t.color).toBe('gray');
+        }
+    });
+    it('preserves whitespace tokens with no colour', () => {
+        const tokens = tokenizeLine('   "x"');
+        const ws = tokens.find(t => /^\s+$/.test(t.text));
+        expect(ws?.color).toBeUndefined();
+    });
+    it('handles escaped quotes inside strings', () => {
+        const tokens = tokenizeLine('  "msg": "she said \\"hi\\""');
+        const value = tokens.find(t => t.text.includes('hi'));
+        expect(value?.color).toBe('green');
+    });
+});
+describe('formatJsonText', () => {
+    it('returns an empty string for null', () => {
+        expect(formatJsonText(null)).toBe('');
+    });
+    it('returns an empty string for undefined', () => {
+        expect(formatJsonText(undefined)).toBe('');
+    });
+    it('pretty-prints with two-space indent', () => {
+        expect(formatJsonText({ a: 1 })).toBe('{\n  "a": 1\n}');
+    });
+    it('falls back to String() when stringify throws', () => {
+        const cyclic = {};
+        cyclic.self = cyclic;
+        expect(formatJsonText(cyclic)).toBe(String(cyclic));
+    });
+});
+describe('countJsonLines', () => {
+    it('returns 0 for nullish input', () => {
+        expect(countJsonLines(null)).toBe(0);
+        expect(countJsonLines(undefined)).toBe(0);
+    });
+    it('counts lines in pretty-printed output', () => {
+        expect(countJsonLines({ a: 1, b: 2 })).toBe(4);
+    });
+});

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

@@ -0,0 +1,16 @@
+/**
+ * Truncate a string to fit a column, appending an ellipsis when clipped.
+ */
+export declare const truncate: (str: string, max: number) => string;
+/**
+ * Format an ISO timestamp into the short `MMM d HH:mm` form used in panel
+ * row tables (e.g. `Apr 28 18:56`). Returns `-` when the input is missing
+ * or unparseable.
+ */
+export declare const formatStartedShort: (iso: string | undefined) => string;
+/**
+ * Compute the index of the first visible row for a windowed list. Keeps
+ * the selected row centred when possible and clamps so the window never
+ * runs off the end of the array.
+ */
+export declare const computeWindowStart: (selectedIndex: number, total: number, visibleRows: number) => number;

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

@@ -0,0 +1,32 @@
+import { format, parseISO } from 'date-fns';
+/**
+ * Truncate a string to fit a column, appending an ellipsis when clipped.
+ */
+export const truncate = (str, max) => str.length > max ? `${str.slice(0, max - 1)}…` : str;
+/**
+ * Format an ISO timestamp into the short `MMM d HH:mm` form used in panel
+ * row tables (e.g. `Apr 28 18:56`). Returns `-` when the input is missing
+ * or unparseable.
+ */
+export const formatStartedShort = (iso) => {
+    if (!iso) {
+        return '-';
+    }
+    try {
+        return format(parseISO(iso), 'MMM d HH:mm');
+    }
+    catch {
+        return '-';
+    }
+};
+/**
+ * Compute the index of the first visible row for a windowed list. Keeps
+ * the selected row centred when possible and clamps so the window never
+ * runs off the end of the array.
+ */
+export const computeWindowStart = (selectedIndex, total, visibleRows) => {
+    const half = Math.floor(visibleRows / 2);
+    const start = Math.max(0, selectedIndex - half);
+    const maxStart = Math.max(0, total - visibleRows);
+    return Math.min(start, maxStart);
+};

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

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