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

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { StatusIcon, statusColor } from '#components/status_icon.js';
+import { elapsedMs, formatDurationCompact } from '#utils/date_formatter.js';
+import { Footer } from '#views/dev/chrome/footer.js';
+import { SelectionIndicator } from '#views/dev/chrome/selection_indicator.js';
+import { useUiState } from '#views/dev/state/ui_state.js';
+import { MasterDetailPanel } from '#views/dev/components/master_detail_panel.js';
+import { formatStartedShort } from '#views/dev/utils/panel_helpers.js';
+import { WORKFLOWS_VISIBLE_ROWS, WORKFLOWS_RECENT_RUNS_LIMIT } from '#views/dev/utils/constants.js';
+const COL = {
+    indicator: 3,
+    name: 30
+};
+const matchesQuery = (workflow, query) => {
+    if (!query) {
+        return true;
+    }
+    const q = query.toLowerCase();
+    if ((workflow.name ?? '').toLowerCase().includes(q)) {
+        return true;
+    }
+    if ((workflow.description ?? '').toLowerCase().includes(q)) {
+        return true;
+    }
+    return (workflow.aliases ?? []).some(a => a.toLowerCase().includes(q));
+};
+const sortByName = (workflows) => [...workflows].sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''));
+const buildVisibleWorkflows = (workflows, query) => {
+    const list = query ? workflows.filter(w => matchesQuery(w, query)) : workflows;
+    return sortByName(list);
+};
+const HeaderRow = () => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { dimColor: true, bold: true, children: "WORKFLOW" }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { dimColor: true, bold: true, children: "DESCRIPTION" }) })] }));
+const WorkflowRow = ({ workflow, selected }) => (_jsxs(Box, { children: [_jsx(Box, { width: COL.indicator, children: _jsx(SelectionIndicator, { selected: selected }) }), _jsx(Box, { width: COL.name, children: _jsx(Text, { bold: selected, wrap: "truncate-end", children: workflow.name ?? '-' }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { dimColor: !selected, wrap: "truncate-end", children: workflow.description ?? 'No description' }) })] }));
+const SidebarRunRow = ({ run }) => {
+    const status = run.status ?? 'unknown';
+    const duration = run.startedAt ? formatDurationCompact(elapsedMs(run.startedAt, run.completedAt)) : '-';
+    return (_jsxs(Box, { children: [_jsx(StatusIcon, { status: status }), _jsx(Text, { children: " " }), _jsx(Box, { width: 10, children: _jsx(Text, { color: statusColor(status), children: status }) }), _jsx(Box, { width: 9, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: formatStartedShort(run.startedAt) }) })] }));
+};
+const DetailPane = ({ workflow, runs }) => {
+    if (!workflow) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Select a workflow to see details." }) }));
+    }
+    const wfRuns = runs.filter(r => r.workflowType === workflow.name);
+    const stats = {
+        total: wfRuns.length,
+        running: wfRuns.filter(r => r.status === 'running').length,
+        failed: wfRuns.filter(r => r.status === 'failed').length,
+        completed: wfRuns.filter(r => r.status === 'completed').length
+    };
+    const recent = wfRuns.slice(0, WORKFLOWS_RECENT_RUNS_LIMIT);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: "white", children: workflow.name }) }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: [stats.total, " runs"] }), stats.running > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "blue", children: ["\u25CF ", stats.running, " running"] })] }), stats.failed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "red", children: ["\u2717 ", stats.failed, " failed"] })] }), stats.completed > 0 && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "   " }), _jsxs(Text, { color: "green", children: ["\u25CF ", stats.completed, " ok"] })] })] }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 2, children: _jsx(Text, { wrap: "wrap", children: workflow.description ?? 'No description' }) }), _jsxs(Box, { flexDirection: "column", width: 42, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, paddingLeft: 2, children: [_jsx(Text, { dimColor: true, bold: true, children: "RECENT RUNS" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: recent.length === 0 ? (_jsx(Text, { dimColor: true, children: "No runs yet" })) : (recent.map((run, i) => _jsx(SidebarRunRow, { run: run }, `${run.runId ?? i}`))) })] })] })] }));
+};
+const HINTS = [
+    { key: '↑/↓', label: 'navigate' },
+    { key: 'enter', label: 'show runs' },
+    { key: 'r', label: 'run' },
+    { key: '/', label: 'search' },
+    { key: 'tab', label: 'next tab' }
+];
+export const WorkflowsPanel = ({ workflows, runs }) => {
+    const ui = useUiState();
+    const filtered = useMemo(() => buildVisibleWorkflows(workflows, ui.search.query), [workflows, ui.search.query]);
+    // Lazy initializer — runs once on mount. Restores the previously
+    // highlighted workflow after the run modal unmounts and remounts the
+    // panel.
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        const previousName = ui.selection.workflowName;
+        if (!previousName) {
+            return 0;
+        }
+        const initial = buildVisibleWorkflows(workflows, ui.search.query);
+        const i = initial.findIndex(w => w.name === previousName);
+        return i >= 0 ? i : 0;
+    });
+    const isActive = ui.tab === 'workflows' && !ui.search.open && !ui.runModal.open;
+    const clamped = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
+    const selectedWorkflow = filtered[clamped];
+    useEffect(() => {
+        if (clamped !== selectedIndex) {
+            setSelectedIndex(clamped);
+        }
+    }, [clamped, selectedIndex]);
+    const setSelection = ui.setSelection;
+    useEffect(() => {
+        setSelection({ workflowName: selectedWorkflow?.name });
+    }, [selectedWorkflow?.name, setSelection]);
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(i => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex(i => Math.min(filtered.length - 1, i + 1));
+        }
+        else if (key.return && selectedWorkflow?.name) {
+            ui.setSearchQuery(selectedWorkflow.name);
+            ui.setTab('runs');
+        }
+        else if (input === 'r' && selectedWorkflow?.name) {
+            ui.openRunModal(selectedWorkflow.name, selectedWorkflow.path);
+        }
+    }, { isActive });
+    if (workflows.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Workflows" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Loading catalog\u2026 (waiting for the API to come up)" }) }), _jsx(Footer, { hints: [{ key: 'tab', label: 'next tab' }, { key: '?', label: 'help' }] })] }));
+    }
+    if (filtered.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Workflows" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["No workflows match `", ui.search.query, "`. Press "] }), _jsx(Text, { bold: true, children: "esc" }), _jsx(Text, { dimColor: true, children: " to clear." })] }), _jsx(Footer, { hints: HINTS, itemCount: 0, itemLabel: "workflows" })] }));
+    }
+    return (_jsx(MasterDetailPanel, { items: filtered, selectedIndex: clamped, visibleRows: WORKFLOWS_VISIBLE_ROWS, renderHeader: () => _jsx(HeaderRow, {}), renderRow: (wf, selected) => _jsx(WorkflowRow, { workflow: wf, selected: selected }), rowKey: (wf, i) => wf.name ?? `row-${i}`, detail: _jsx(DetailPane, { workflow: selectedWorkflow, runs: runs }), hints: HINTS, itemLabel: "workflows" }));
+};

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

@@ -0,0 +1,5 @@
+import { type ChildProcessWithoutNullStreams } from 'node:child_process';
+export declare const restartService: (dockerComposePath: string, serviceName: string) => Promise<void>;
+export declare const restartStack: (dockerComposePath: string) => Promise<void>;
+export declare const stopService: (dockerComposePath: string, serviceName: string) => Promise<void>;
+export declare const tailLogs: (dockerComposePath: string, serviceName: string, tailLines?: number) => ChildProcessWithoutNullStreams;

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

@@ -0,0 +1,25 @@
+import { spawn } from 'node:child_process';
+// stdio: 'pipe' so docker's stderr/stdout never reach the host terminal
+// while INK owns the screen. Stderr is buffered and surfaced through the
+// rejected Promise so the panel can present it as a banner instead of
+// having garbled output collide with the rendered TUI.
+const run = (args) => new Promise((resolve, reject) => {
+    const child = spawn('docker', args, { stdio: 'pipe' });
+    const stderrChunks = [];
+    child.stderr.on('data', chunk => {
+        stderrChunks.push(chunk.toString());
+    });
+    child.on('error', reject);
+    child.on('exit', code => {
+        if (code === 0) {
+            resolve();
+            return;
+        }
+        const stderr = stderrChunks.join('').trim();
+        reject(new Error(stderr || `docker ${args.join(' ')} exited with code ${code}`));
+    });
+});
+export const restartService = (dockerComposePath, serviceName) => run(['compose', '-f', dockerComposePath, 'restart', serviceName]);
+export const restartStack = (dockerComposePath) => run(['compose', '-f', dockerComposePath, 'restart']);
+export const stopService = (dockerComposePath, serviceName) => run(['compose', '-f', dockerComposePath, 'stop', serviceName]);
+export const tailLogs = (dockerComposePath, serviceName, tailLines = 200) => spawn('docker', ['compose', '-f', dockerComposePath, 'logs', '-f', '--no-color', '--tail', String(tailLines), serviceName], { stdio: 'pipe' });

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, workflowPath?: string) => Promise<unknown>;
+export declare const writeScenario: (workflowName: string, scenarioName: string, content: unknown, workflowPath?: string) => Promise<string>;

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

@@ -0,0 +1,41 @@
+import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { findWorkflowDirectoryFromPath, resolveScenarioPath } from '#utils/scenario_resolver.js';
+import { getWorkflowsBasePath } from '#utils/paths.js';
+const WORKFLOWS_PATHS = ['src/workflows', 'workflows'];
+export const readScenario = async (workflowName, scenarioName, workflowPath) => {
+    const resolution = await resolveScenarioPath(workflowName, scenarioName, getWorkflowsBasePath(), workflowPath);
+    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, workflowPath) => {
+    const basePath = getWorkflowsBasePath();
+    const pathDir = findWorkflowDirectoryFromPath(workflowPath, basePath);
+    if (pathDir) {
+        return pathDir;
+    }
+    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, workflowPath) => {
+    const dir = findWorkflowDirectory(workflowName, workflowPath);
+    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,61 @@
+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;
+    workflowPath?: 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, workflowPath?: 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, workflowPath) => setRunModal({ open: true, workflowName, workflowPath }),
+        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;
+}>;