tickmarkr 1.79.0 → 1.80.0

package/dist/tui/cockpit/components.d.ts

@@ -0,0 +1,179 @@
+import { type ReactElement, type ReactNode } from "react";
+import { TEXT_EMPHASIS_TOKENS } from "./theme.js";
+export { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
+export declare const PANEL_CHROME_ROWS = 3;
+export declare const BAND_CONTINUATION_PREFIX = "\u21B3 ";
+export type BandColumnContent = {
+    readonly title: string;
+    readonly lines: readonly string[];
+};
+export type BandAllocationOptions = {
+    readonly chromeColumns?: number;
+    readonly minimumReadableColumns?: number;
+};
+export type TextEmphasis = keyof typeof TEXT_EMPHASIS_TOKENS;
+export type ComponentState = "active" | "inactive" | "pass" | "fail" | "warn" | "neutral";
+export type KeybarSurface = "run" | "setup";
+export type KeybarItem = {
+    readonly key: string;
+    readonly label: string;
+};
+export declare const KEYBAR_KEYS: {
+    readonly run: readonly [{
+        readonly key: "↑↓";
+        readonly label: "Move";
+    }, {
+        readonly key: "⏎";
+        readonly label: "Open";
+    }, {
+        readonly key: "←";
+        readonly label: "Back";
+    }, {
+        readonly key: "Tab";
+        readonly label: "Panel";
+    }, {
+        readonly key: "?";
+        readonly label: "Help";
+    }, {
+        readonly key: "q";
+        readonly label: "Quit";
+    }, {
+        readonly key: "f";
+        readonly label: "Follow";
+    }, {
+        readonly key: "/";
+        readonly label: "Filter";
+    }];
+    readonly setup: readonly [{
+        readonly key: "↑↓";
+        readonly label: "Move";
+    }, {
+        readonly key: "⏎";
+        readonly label: "Next";
+    }, {
+        readonly key: "←";
+        readonly label: "Back";
+    }, {
+        readonly key: "Tab";
+        readonly label: "Panel";
+    }, {
+        readonly key: "?";
+        readonly label: "Help";
+    }, {
+        readonly key: "q";
+        readonly label: "Quit";
+    }, {
+        readonly key: "␣";
+        readonly label: "Toggle";
+    }, {
+        readonly key: "a";
+        readonly label: "All";
+    }, {
+        readonly key: "r";
+        readonly label: "Re-probe";
+    }, {
+        readonly key: "s";
+        readonly label: "Save";
+    }, {
+        readonly key: "n";
+        readonly label: "Next";
+    }, {
+        readonly key: "p";
+        readonly label: "Prev";
+    }];
+    readonly setupAdditional: readonly [{
+        readonly key: "␣";
+        readonly label: "Toggle";
+    }, {
+        readonly key: "a";
+        readonly label: "All";
+    }, {
+        readonly key: "r";
+        readonly label: "Re-probe";
+    }, {
+        readonly key: "s";
+        readonly label: "Save";
+    }, {
+        readonly key: "n";
+        readonly label: "Next";
+    }, {
+        readonly key: "p";
+        readonly label: "Prev";
+    }];
+};
+export type JournalRow = {
+    readonly id?: string;
+    readonly time: string;
+    readonly state: ComponentState;
+    readonly text: string;
+};
+export declare function BodyText({ children, emphasis, }: {
+    children: ReactNode;
+    emphasis?: TextEmphasis;
+}): ReactElement;
+/**
+ * Give each panel the columns its own longest line calls for. Surplus is shared
+ * evenly after every line fits; scarcity is apportioned by unmet content need.
+ */
+export declare function allocateBandColumns(columns: number, content: readonly BandColumnContent[], options?: BandAllocationOptions): readonly number[];
+/**
+ * Compose one data line into visible rows. A fitting line is byte-for-byte
+ * untouched. Every wrapped row carries a continuation marker before any
+ * separator or data token, so it cannot masquerade as a new item.
+ */
+export declare function composeBandLine(text: string, columns: number): readonly string[];
+export declare function BandLines({ lines, columns, emphasis, }: {
+    lines: readonly string[];
+    columns: number;
+    emphasis?: TextEmphasis;
+}): ReactElement;
+/** Rows drawn by a band of bordered panels at the same allocated widths. */
+export declare function measureBandRows(columns: number, content: readonly BandColumnContent[]): number;
+export declare function StateGlyph({ state }: {
+    state: ComponentState;
+}): ReactElement;
+export declare function Panel({ title, focused, width, flexGrow, children, }: {
+    title: string;
+    focused?: boolean;
+    width?: number | string;
+    flexGrow?: number;
+    children: ReactNode;
+}): ReactElement;
+export declare function CockpitGrid({ children, columns, columnContents, allocation, }: {
+    children: ReactNode;
+    columns?: number;
+    columnContents?: readonly BandColumnContent[];
+    allocation?: BandAllocationOptions;
+}): ReactElement;
+export declare function Sparkline({ samples, }: {
+    samples: readonly (number | null)[];
+}): ReactElement;
+export declare function StatTile({ label, value, samples, focused, width, }: {
+    label: string;
+    value: ReactNode;
+    samples: readonly (number | null)[];
+    focused?: boolean;
+    width?: number | string;
+}): ReactElement;
+export declare function ProgressMeter({ value, width, }: {
+    value: number;
+    width?: number;
+}): ReactElement;
+export declare function Keybar({ surface, width, }: {
+    surface: KeybarSurface;
+    width: number;
+}): ReactElement;
+export type StatusStripItem = {
+    readonly state: ComponentState;
+    readonly text: string;
+};
+export declare function StatusStrip({ items, width, }: {
+    items: readonly StatusStripItem[];
+    width: number;
+}): ReactElement;
+export declare function JournalRowPanel({ rows, width, focused, title, }: {
+    rows: readonly JournalRow[];
+    width?: number | string;
+    focused?: boolean;
+    title?: string;
+}): ReactElement;

package/dist/tui/cockpit/components.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { Children } from "react";
+import stringWidth from "string-width";
+import { GLYPHS } from "../../brand.js";
+import { COCKPIT_DATA_RAMP, COCKPIT_INKS, TEXT_EMPHASIS_TOKENS, } from "./theme.js";
+import { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
+export { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
+const SPARKLINE_GLYPHS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+const BAND_GAP_COLUMNS = 1;
+const PANEL_HORIZONTAL_CHROME = 4;
+const READABLE_PANEL_COLUMNS = 20;
+export const PANEL_CHROME_ROWS = 3;
+export const BAND_CONTINUATION_PREFIX = "↳ ";
+const RUN_KEYS = [
+    { key: "↑↓", label: "Move" },
+    { key: "⏎", label: "Open" },
+    { key: "←", label: "Back" },
+    { key: "Tab", label: "Panel" },
+    { key: "?", label: "Help" },
+    { key: "q", label: "Quit" },
+    { key: "f", label: "Follow" },
+    { key: "/", label: "Filter" },
+];
+const SETUP_ADDITIONAL_KEYS = [
+    { key: "␣", label: "Toggle" },
+    { key: "a", label: "All" },
+    { key: "r", label: "Re-probe" },
+    { key: "s", label: "Save" },
+    { key: "n", label: "Next" },
+    { key: "p", label: "Prev" },
+];
+const SETUP_KEYS = [
+    RUN_KEYS[0],
+    { key: RUN_KEYS[1].key, label: "Next" },
+    RUN_KEYS[2],
+    RUN_KEYS[3],
+    RUN_KEYS[4],
+    RUN_KEYS[5],
+    ...SETUP_ADDITIONAL_KEYS,
+];
+export const KEYBAR_KEYS = {
+    run: RUN_KEYS,
+    setup: SETUP_KEYS,
+    setupAdditional: SETUP_ADDITIONAL_KEYS,
+};
+export function BodyText({ children, emphasis = "normal", }) {
+    const token = TEXT_EMPHASIS_TOKENS[emphasis];
+    return (_jsx(Text, { bold: token.weight === "bold", dimColor: token.dimmed, children: children }));
+}
+function longestBandLine(column) {
+    return Math.max(1, ...[column.title, ...column.lines].map((line) => stringWidth(line)));
+}
+function apportion(available, weights) {
+    if (weights.length === 0)
+        return [];
+    if (available <= 0)
+        return weights.map(() => 0);
+    const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
+    if (totalWeight <= 0) {
+        return weights.map((_, index) => Math.floor(available / weights.length)
+            + (index < available % weights.length ? 1 : 0));
+    }
+    const exact = weights.map((weight) => (available * weight) / totalWeight);
+    const granted = exact.map(Math.floor);
+    let remainder = available - granted.reduce((sum, value) => sum + value, 0);
+    const order = exact.map((value, index) => ({
+        index,
+        fraction: value - granted[index],
+        weight: weights[index],
+    })).sort((left, right) => right.fraction - left.fraction
+        || right.weight - left.weight
+        || left.index - right.index);
+    for (const item of order) {
+        if (remainder <= 0)
+            break;
+        granted[item.index] += 1;
+        remainder -= 1;
+    }
+    return granted;
+}
+/**
+ * Give each panel the columns its own longest line calls for. Surplus is shared
+ * evenly after every line fits; scarcity is apportioned by unmet content need.
+ */
+export function allocateBandColumns(columns, content, options = {}) {
+    if (content.length === 0)
+        return [];
+    const chromeColumns = Math.max(0, Math.floor(options.chromeColumns ?? PANEL_HORIZONTAL_CHROME));
+    const minimumColumns = chromeColumns + 1;
+    const minimumReadableColumns = Math.max(minimumColumns, Math.floor(options.minimumReadableColumns ?? READABLE_PANEL_COLUMNS));
+    const total = Math.max(0, Math.floor(columns));
+    const usable = Math.max(0, total - BAND_GAP_COLUMNS * (content.length - 1));
+    if (usable < minimumColumns * content.length) {
+        return apportion(usable, content.map((column) => longestBandLine(column)));
+    }
+    const preferred = content.map((column) => longestBandLine(column) + chromeColumns);
+    const preferredTotal = preferred.reduce((sum, value) => sum + value, 0);
+    if (preferredTotal <= usable) {
+        const surplus = apportion(usable - preferredTotal, content.map(() => 1));
+        return preferred.map((value, index) => value + surplus[index]);
+    }
+    const readable = preferred.map((value) => Math.min(value, minimumReadableColumns));
+    const readableTotal = readable.reduce((sum, value) => sum + value, 0);
+    const base = readableTotal <= usable
+        ? readable
+        : content.map(() => minimumColumns);
+    const shares = apportion(usable - base.reduce((sum, value) => sum + value, 0), preferred.map((value, index) => value - base[index]));
+    return base.map((value, index) => value + shares[index]);
+}
+function takeDisplayColumns(value, columns) {
+    const characters = [...value];
+    let used = 0;
+    let taken = 0;
+    while (taken < characters.length) {
+        const width = stringWidth(characters[taken]);
+        if (taken > 0 && used + width > columns)
+            break;
+        if (taken === 0 && width > columns) {
+            taken = 1;
+            break;
+        }
+        used += width;
+        taken += 1;
+    }
+    const concatenate = (items) => items.reduce((result, character) => result + character, "");
+    return [
+        concatenate(characters.slice(0, taken)),
+        concatenate(characters.slice(taken)),
+    ];
+}
+/**
+ * Compose one data line into visible rows. A fitting line is byte-for-byte
+ * untouched. Every wrapped row carries a continuation marker before any
+ * separator or data token, so it cannot masquerade as a new item.
+ */
+export function composeBandLine(text, columns) {
+    const width = Math.max(1, Math.floor(columns));
+    if (stringWidth(text) <= width)
+        return [text];
+    const words = text.split(" ");
+    const rendered = [];
+    let current = "";
+    let continuation = false;
+    const emptyLine = () => continuation
+        ? BAND_CONTINUATION_PREFIX.slice(0, width)
+        : "";
+    for (const sourceWord of words) {
+        let word = sourceWord;
+        for (;;) {
+            if (current.length === 0)
+                current = emptyLine();
+            const hasData = current !== emptyLine();
+            const separator = hasData ? " " : "";
+            const candidate = `${current}${separator}${word}`;
+            if (stringWidth(candidate) <= width) {
+                current = candidate;
+                break;
+            }
+            if (hasData) {
+                rendered.push(current);
+                continuation = true;
+                current = "";
+                continue;
+            }
+            const available = Math.max(1, width - stringWidth(current));
+            const [head, tail] = takeDisplayColumns(word, available);
+            current += head;
+            word = tail;
+            if (word.length === 0)
+                break;
+            rendered.push(current);
+            continuation = true;
+            current = "";
+        }
+    }
+    if (current.length > 0)
+        rendered.push(current);
+    return rendered.length > 0 ? rendered : [text];
+}
+export function BandLines({ lines, columns, emphasis, }) {
+    return (_jsx(Box, { flexDirection: "column", children: lines.flatMap((line, lineIndex) => composeBandLine(line, columns).map((visible, visibleIndex) => (_jsx(BodyText, { emphasis: emphasis, children: visible }, `${lineIndex}:${visibleIndex}:${visible}`)))) }));
+}
+/** Rows drawn by a band of bordered panels at the same allocated widths. */
+export function measureBandRows(columns, content) {
+    const widths = allocateBandColumns(columns, content);
+    return Math.max(0, ...content.map((column, index) => PANEL_CHROME_ROWS
+        + column.lines.reduce((rows, line) => rows + composeBandLine(line, Math.max(1, widths[index] - PANEL_HORIZONTAL_CHROME)).length, 0)));
+}
+function statePresentation(state) {
+    switch (state) {
+        case "active":
+            return {
+                glyph: GLYPHS.toggleActive,
+                color: `ansi256(${COCKPIT_DATA_RAMP[1].xterm})`,
+            };
+        case "inactive":
+            return { glyph: GLYPHS.toggleInactive, dimmed: true };
+        case "pass":
+            return {
+                glyph: GLYPHS.pass,
+                color: `ansi256(${COCKPIT_DATA_RAMP[1].xterm})`,
+            };
+        case "fail":
+            return {
+                glyph: GLYPHS.fail,
+                color: `ansi256(${COCKPIT_INKS.failure.xterm})`,
+            };
+        case "warn":
+            return {
+                glyph: GLYPHS.attention,
+                color: `ansi256(${COCKPIT_INKS.warning.xterm})`,
+            };
+        case "neutral":
+            return { glyph: GLYPHS.neutral, dimmed: true };
+    }
+}
+export function StateGlyph({ state }) {
+    const presentation = statePresentation(state);
+    return (_jsx(Text, { color: presentation.color, dimColor: presentation.dimmed, children: presentation.glyph }));
+}
+export function Panel({ title, focused = false, width, flexGrow, children, }) {
+    const content = Children.map(children, (child) => typeof child === "string" || typeof child === "number"
+        ? _jsx(BodyText, { children: child })
+        : child);
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: flexGrow, width: width, paddingX: 1, borderStyle: focused ? "double" : "round", borderColor: `ansi256(${focused ? COCKPIT_DATA_RAMP[0].xterm : COCKPIT_DATA_RAMP[3].xterm})`, borderDimColor: !focused, children: [_jsx(Box, { children: focused ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: `ansi256(${COCKPIT_DATA_RAMP[0].xterm})`, children: GLYPHS.pointer }), _jsxs(BodyText, { emphasis: "strong", children: [" ", title] })] })) : (_jsx(BodyText, { emphasis: "strong", children: title })) }), _jsx(Box, { flexDirection: "column", children: content })] }));
+}
+export function CockpitGrid({ children, columns, columnContents, allocation, }) {
+    const items = Children.toArray(children);
+    const widths = columns !== undefined
+        && columnContents?.length === items.length
+        ? allocateBandColumns(columns, columnContents, allocation)
+        : undefined;
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "nowrap", gap: BAND_GAP_COLUMNS, width: columns, children: items.map((child, index) => (_jsx(Box, { flexDirection: widths ? "column" : undefined, flexGrow: widths ? 0 : 1, flexShrink: widths ? 0 : 1, flexBasis: widths ? undefined : 0, width: widths?.[index], children: child }, index))) }));
+}
+function sparklineLevel(value, minimum, maximum) {
+    if (maximum === minimum)
+        return 0;
+    return Math.round(((value - minimum) / (maximum - minimum)) * (SPARKLINE_GLYPHS.length - 1));
+}
+export function Sparkline({ samples, }) {
+    const buckets = samples
+        .slice(-SPARKLINE_BUCKET_WINDOW)
+        .map((sample) => typeof sample === "number" && Number.isFinite(sample) ? sample : null);
+    const populated = buckets.filter((sample) => sample !== null);
+    const minimum = populated.length > 0 ? Math.min(...populated) : 0;
+    const maximum = populated.length > 0 ? Math.max(...populated) : 0;
+    return (_jsx(Box, { flexDirection: "row", height: 1, "aria-label": "metric sparkline", children: buckets.map((sample, index) => {
+            if (sample === null)
+                return _jsx(Text, { children: " " }, `gap:${index}`);
+            const level = sparklineLevel(sample, minimum, maximum);
+            const rampIndex = COCKPIT_DATA_RAMP.length - 1 - Math.round((level / (SPARKLINE_GLYPHS.length - 1)) * (COCKPIT_DATA_RAMP.length - 1));
+            const ink = COCKPIT_DATA_RAMP[rampIndex] ?? COCKPIT_DATA_RAMP[0];
+            return (_jsx(Text, { color: `ansi256(${ink.xterm})`, children: SPARKLINE_GLYPHS[level] }, `${index}:${sample}`));
+        }) }));
+}
+export function StatTile({ label, value, samples, focused, width, }) {
+    return (_jsxs(Panel, { title: label, focused: focused, width: width, flexGrow: 1, children: [_jsx(BodyText, { emphasis: "strong", children: value }), _jsx(Sparkline, { samples: samples })] }));
+}
+export function ProgressMeter({ value, width = 24, }) {
+    const safeWidth = Math.max(1, Math.floor(width));
+    const percentage = Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0));
+    const filled = Math.round((percentage / 100) * safeWidth);
+    const valueLabel = Number.isInteger(percentage)
+        ? percentage.toFixed(0)
+        : percentage.toFixed(1);
+    return (_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", height: 1, overflow: "hidden", "aria-role": "progressbar", "aria-label": `${valueLabel}% complete`, children: [_jsx(Text, { color: `ansi256(${COCKPIT_DATA_RAMP[0].xterm})`, children: "█".repeat(filled) }), _jsx(Text, { dimColor: true, children: "░".repeat(safeWidth - filled) }), _jsxs(BodyText, { emphasis: "strong", children: [" ", valueLabel, "%"] })] }));
+}
+function OneLineItems({ children, width, label, }) {
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "nowrap", width: width, height: 1, overflow: "hidden", "aria-label": label, children: children }));
+}
+export function Keybar({ surface, width, }) {
+    return (_jsx(OneLineItems, { width: width, label: `${surface} cockpit keys`, children: KEYBAR_KEYS[surface].map((item, index) => (_jsxs(Box, { flexShrink: 0, children: [index > 0 && _jsx(BodyText, { emphasis: "dim", children: " \u00B7 " }), _jsx(BodyText, { emphasis: "strong", children: item.key }), _jsxs(BodyText, { emphasis: "dim", children: [" ", item.label] })] }, item.key))) }));
+}
+export function StatusStrip({ items, width, }) {
+    return (_jsx(OneLineItems, { width: width, label: "cockpit status", children: items.map((item, index) => (_jsxs(Box, { flexShrink: 0, children: [index > 0 && _jsx(BodyText, { emphasis: "dim", children: " \u00B7 " }), _jsx(StateGlyph, { state: item.state }), _jsxs(BodyText, { children: [" ", item.text] })] }, `${item.state}:${item.text}`))) }));
+}
+export function JournalRowPanel({ rows, width, focused, title = "JOURNAL", }) {
+    return (_jsx(Panel, { title: title, focused: focused, width: width, children: rows.map((row, index) => (_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", height: 1, overflow: "hidden", children: [_jsx(BodyText, { emphasis: "dim", children: row.time }), _jsx(BodyText, { children: " " }), _jsx(StateGlyph, { state: row.state }), _jsxs(BodyText, { children: [" ", row.text] })] }, row.id ?? `${row.time}:${row.state}:${index}`))) }));
+}

package/dist/tui/cockpit/demo.d.ts

@@ -0,0 +1,41 @@
+export declare const DEMO_KEYS: {
+    readonly surface: "v";
+    readonly capture: "c";
+    readonly quit: "q";
+};
+export type CaptureEvent = {
+    readonly ts: string;
+    readonly event: string;
+    readonly taskId?: string;
+    readonly data: Record<string, unknown>;
+};
+export type DemoFileCapture = {
+    readonly fileName: string;
+    readonly raw: string;
+};
+export type DemoJournalCapture = DemoFileCapture & {
+    readonly events: readonly CaptureEvent[];
+};
+export type DemoJsonCapture = DemoFileCapture & {
+    readonly data: Record<string, unknown>;
+};
+export type DemoCaptures = {
+    readonly files: readonly DemoFileCapture[];
+    readonly journals: readonly DemoJournalCapture[];
+    readonly doctor: DemoJsonCapture;
+    readonly config: {
+        readonly global: DemoFileCapture;
+        readonly repo: DemoFileCapture;
+    };
+};
+/**
+ * The only capture boundary for both cockpit demos. It returns the event
+ * captures, detection cache and both configuration layers in one immutable set.
+ */
+export declare function loadDemoCaptures(directory?: string): DemoCaptures;
+export declare function runCockpitDemo({ input, output, binaryVersion, debug, }: {
+    input: NodeJS.ReadStream;
+    output: NodeJS.WriteStream;
+    binaryVersion: string;
+    debug?: boolean;
+}): Promise<void>;

package/dist/tui/cockpit/demo.js

@@ -0,0 +1,144 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { render, useApp, useInput } from "ink";
+import { createElement, useMemo, useState } from "react";
+import { resolveCockpitLayout } from "./layout.js";
+import { deriveRunCockpitData, RunCockpitFrame, } from "./run-cockpit.js";
+import { deriveSetupCockpitData, SetupCockpitFrame, } from "./setup-cockpit.js";
+const CAPTURE_DIRECTORY = join(dirname(fileURLToPath(import.meta.url)), "../../../tests/fixtures/cockpit/sources");
+const CAPTURE_FILE_NAMES = [
+    "run-20260724-194619.journal.jsonl",
+    "run-20260724-231138.journal.jsonl",
+    "run-20260725-025004.interrupted.journal.jsonl",
+    "doctor.json",
+    "config.global.yaml",
+    "config.repo.yaml",
+];
+export const DEMO_KEYS = {
+    surface: "v",
+    capture: "c",
+    quit: "q",
+};
+function parseEvents(raw) {
+    return raw.split("\n").flatMap((line) => {
+        if (line.trim().length === 0)
+            return [];
+        return [JSON.parse(line)];
+    });
+}
+/**
+ * The only capture boundary for both cockpit demos. It returns the event
+ * captures, detection cache and both configuration layers in one immutable set.
+ */
+export function loadDemoCaptures(directory = CAPTURE_DIRECTORY) {
+    const files = CAPTURE_FILE_NAMES.map((fileName) => ({
+        fileName,
+        raw: readFileSync(join(directory, fileName), "utf8"),
+    }));
+    const byName = new Map(files.map((capture) => [capture.fileName, capture]));
+    const required = (fileName) => {
+        const capture = byName.get(fileName);
+        if (!capture)
+            throw new Error(`missing cockpit capture: ${fileName}`);
+        return capture;
+    };
+    const journal = (fileName) => {
+        const capture = required(fileName);
+        return { ...capture, events: parseEvents(capture.raw) };
+    };
+    const doctor = required("doctor.json");
+    return {
+        files,
+        journals: [
+            journal("run-20260724-194619.journal.jsonl"),
+            journal("run-20260724-231138.journal.jsonl"),
+            journal("run-20260725-025004.interrupted.journal.jsonl"),
+        ],
+        doctor: {
+            ...doctor,
+            data: JSON.parse(doctor.raw),
+        },
+        config: {
+            global: required("config.global.yaml"),
+            repo: required("config.repo.yaml"),
+        },
+    };
+}
+function DemoApp({ binaryVersion, columns, rows, }) {
+    const { exit } = useApp();
+    const captures = useMemo(() => loadDemoCaptures(), []);
+    const [surface, setSurface] = useState("run");
+    const [captureIndex, setCaptureIndex] = useState(() => {
+        const eventful = captures.journals.findIndex((capture) => capture.fileName === "run-20260724-231138.journal.jsonl");
+        if (eventful < 0)
+            throw new Error("eventful cockpit capture is missing");
+        return eventful;
+    });
+    useInput((input, key) => {
+        if (input === DEMO_KEYS.quit || (key.ctrl && input === "c")) {
+            exit();
+            return;
+        }
+        if (input === DEMO_KEYS.surface) {
+            setSurface((current) => current === "run" ? "setup" : "run");
+            return;
+        }
+        if (input === DEMO_KEYS.capture) {
+            setCaptureIndex((current) => (current + 1) % captures.journals.length);
+        }
+    });
+    let frame;
+    if (surface === "setup") {
+        const data = deriveSetupCockpitData(captures, binaryVersion);
+        frame = createElement(SetupCockpitFrame, {
+            data,
+            columns,
+            rows,
+        });
+    }
+    else {
+        const data = deriveRunCockpitData(captures.journals[captureIndex], binaryVersion, { isDaemonAlive: () => false });
+        frame = createElement(RunCockpitFrame, {
+            data,
+            columns,
+            rows,
+        });
+    }
+    return frame;
+}
+export async function runCockpitDemo({ input, output, binaryVersion, debug = false, }) {
+    const columns = output.columns ?? 80;
+    const rows = output.rows ?? 24;
+    const layout = resolveCockpitLayout(columns, rows);
+    if (layout.renderer === "plain") {
+        const { captureCockpitOutput } = await import("./capture.js");
+        await captureCockpitOutput({
+            cockpit: "run",
+            output,
+            binaryVersion,
+            columns,
+            rows,
+            interactive: output.isTTY === true,
+            ci: process.env.CI === "true",
+        });
+        return;
+    }
+    const app = render(createElement(DemoApp, {
+        binaryVersion,
+        columns,
+        rows,
+    }), {
+        stdin: input,
+        stdout: output,
+        exitOnCtrlC: false,
+        patchConsole: false,
+        debug,
+    });
+    try {
+        await app.waitUntilExit();
+    }
+    finally {
+        app.unmount();
+    }
+}

package/dist/tui/cockpit/derive.d.ts

@@ -0,0 +1,39 @@
+import type { JournalRow, StatusStripItem } from "./components.js";
+export declare const SPARKLINE_BUCKET_WINDOW = 12;
+export declare function selectSparklineBucketWidthMs(elapsedMs: number): number;
+type MetricSample = number | null;
+export type RunStatus = "done" | "failed" | "interrupted" | "running";
+export type RunCockpitData = {
+    readonly binaryVersion: string;
+    readonly runId: string;
+    readonly branch: string;
+    readonly status: RunStatus;
+    readonly elapsed: string;
+    readonly tasks: {
+        readonly done: number;
+        readonly total: number;
+        readonly samples: readonly MetricSample[];
+    };
+    readonly gates: {
+        readonly passed: number;
+        readonly total: number;
+        readonly samples: readonly MetricSample[];
+    };
+    readonly passRate: {
+        readonly value: number;
+        readonly samples: readonly MetricSample[];
+    };
+    readonly progress: number;
+    readonly progressCaption: string;
+    readonly journalRows: readonly JournalRow[];
+    readonly statusItems: readonly StatusStripItem[];
+};
+export type RunCockpitSource = {
+    readonly fileName: string;
+    readonly raw: string;
+};
+export type RunCockpitDeriveOptions = {
+    readonly isDaemonAlive?: (pid: number) => boolean;
+};
+export declare function deriveRunCockpitData(source: RunCockpitSource, binaryVersion: string, options?: RunCockpitDeriveOptions): RunCockpitData;
+export {};