tickmarkr 2.4.2 → 2.5.0

package/dist/run/supervision.js

@@ -1,6 +1,7 @@
-import { mkdirSync, readdirSync, readFileSync, renameSync, rmSync, statSync, writeFileSync, } from "node:fs";
+import { existsSync, mkdirSync, readdirSync, readFileSync, realpathSync, renameSync, rmSync, statSync, writeFileSync, } from "node:fs";
 import { randomUUID } from "node:crypto";
 import { dirname, join, resolve } from "node:path";
+import { parseRunId } from "./journal.js";
 import { stateDirName, tickmarkrDir } from "../graph/graph.js";
 // SUP-01: supervision liveness as FILE STATE, not as a report — lock.ts's proven shape, one file per
 // tier. A watcher beats its OWN file; every other seat derives that tier's state by stat()ing it. So
@@ -102,8 +103,8 @@ const presenceNames = (repoRoot, tier) => {
     try {
         return readdirSync(supervisionDir(repoRoot)).filter((n) => n.startsWith(presencePrefix(tier)));
     }
-    catch {
-        return [];
+    catch (error) {
+        return error.code === "ENOENT" ? [] : undefined;
     }
 };
 /**
@@ -113,7 +114,10 @@ const presenceNames = (repoRoot, tier) => {
 function stalePeersIfLast(repoRoot, tier, id, now = Date.now()) {
     const own = `${presencePrefix(tier)}${id}`;
     const stale = [];
-    for (const name of presenceNames(repoRoot, tier)) {
+    const peers = presenceNames(repoRoot, tier);
+    if (!peers)
+        return undefined;
+    for (const name of peers) {
         if (name === own)
             continue;
         try {
@@ -121,7 +125,10 @@ function stalePeersIfLast(repoRoot, tier, id, now = Date.now()) {
                 return undefined;
             stale.push(name);
         }
-        catch { /* a vanished peer needs no cleanup and is not evidence of a live watcher */ }
+        catch (error) {
+            if (error.code !== "ENOENT")
+                return undefined;
+        }
     }
     return stale;
 }
@@ -254,8 +261,10 @@ export function armSupervision(repoRoot, tier, beatMs = SUPERVISION_BEAT_MS, sea
     // Presence is refreshed with the beat, so it ages by the same clock and needs no separate loop.
     const mark = () => {
         try {
-            writeSupervisionBeat(repoRoot, tier, seat, id); // creates the directory presence is written into
+            tickmarkrDir(repoRoot);
+            mkdirSync(dirname(presence), { recursive: true });
             writeFileSync(presence, JSON.stringify({ tier, exitedWriterPid: process.pid, id }) + "\n");
+            writeSupervisionBeat(repoRoot, tier, seat, id);
         }
         catch { /* repo gone / disk full / no seat — the tier ages out rather than crashing its watcher */ }
     };
@@ -263,7 +272,10 @@ export function armSupervision(repoRoot, tier, beatMs = SUPERVISION_BEAT_MS, sea
     const timer = setInterval(mark, beatMs);
     timer.unref();
     let stoodDown = false;
+    let released = false;
     return {
+        id,
+        released: () => released,
         // Stand down: stop beating AND say so. Idempotence lets a watcher safely share cleanup across
         // multiple exit paths; the recorded instant belongs to the first stand-down.
         disarm: () => {
@@ -272,9 +284,12 @@ export function armSupervision(repoRoot, tier, beatMs = SUPERVISION_BEAT_MS, sea
             stoodDown = true;
             clearInterval(timer);
             try {
-                rmSync(presence, { force: true, recursive: true });
+                rmSync(presence, { force: true });
+                released = !existsSync(presence);
             }
-            catch { /* ages out on its own */ }
+            catch { /* no acknowledgement: ages out */ }
+            if (!released)
+                return;
             // The marker speaks for the TIER, so only the last watcher out may write one: a peer still
             // present means the tier is not down, and saying it is would render that live board's own tier
             // DISARMED. The snapshot also fixes the cleanup set: a board arming after this decision receives
@@ -296,14 +311,6 @@ export function armSupervision(repoRoot, tier, beatMs = SUPERVISION_BEAT_MS, sea
                 renameSync(tmp, p);
             }
             catch { /* unrecordable stand-down ages out as STALE — pessimistic, which is the safe way to fail */ }
-            // Sweep only stale names in the pre-publication snapshot. Re-reading here used to catch and
-            // delete a newer board that armed between the peer check and this older board's rename.
-            for (const name of stalePeers) {
-                try {
-                    rmSync(join(supervisionDir(repoRoot), name), { force: true, recursive: true });
-                }
-                catch { /* next sweep */ }
-            }
         },
     };
 }
@@ -441,7 +448,8 @@ export function supervisionStatus(repoRoot, tier, now = Date.now()) {
     if (standDown === "UNREADABLE")
         return withClearObligation(repoRoot, tier, { tier, state: "UNREADABLE" });
     const beatOutranksStandDown = standDown !== "NONE" && typeof beat === "object" && (beat.mtimeMs > standDown.mtimeMs || (now - beat.mtimeMs <= SUPERVISION_STALE_MS &&
-        beat.armId !== undefined && standDown.armId !== undefined && beat.armId !== standDown.armId));
+        beat.armId !== undefined && standDown.armId !== undefined && beat.armId !== standDown.armId &&
+        existsSync(supervisionPresencePath(repoRoot, tier, beat.armId))));
     if (standDown !== "NONE" && !beatOutranksStandDown) {
         // the seat that stood down is named by the marker, falling back to whatever its last beat named
         const seat = standDown.seat ?? (typeof beat === "object" ? beat.seat : undefined);
@@ -460,3 +468,116 @@ export const readSupervision = (repoRoot, now = Date.now()) => SUPERVISION_TIERS
 export const supervisionText = (tiers, divider = " · ") => `supervision: ${tiers.map((t) => `${t.tier} ${t.state}${t.seat ? ` (${t.seat})` : ""}` +
     `${t.clearOwedSince ? ` CLEAR-OWED since ${t.clearOwedSince}` : ""}` +
     `${t.clearOwedUnreadable ? " CLEAR-OWED unreadable" : ""}`).join(divider)}`;
+export const WATCH_OWNER_ENV = "TICKMARKR_WATCH_OWNER";
+const boardPath = (repo, runId) => join(supervisionDir(repo), `watch-board.${parseRunId(runId)}.json`);
+const boardMessagePath = (owner, kind) => {
+    if (!/^[a-f0-9-]{36}$/.test(owner.token))
+        throw new Error("invalid watch owner token");
+    return join(supervisionDir(owner.repo), `watch-board.${owner.token}.${kind}`);
+};
+function atomicRecord(path, value) {
+    mkdirSync(dirname(path), { recursive: true });
+    const tmp = `${path}.${randomUUID()}.tmp`;
+    try {
+        writeFileSync(tmp, JSON.stringify(value) + "\n");
+        renameSync(tmp, path);
+    }
+    finally {
+        rmSync(tmp, { force: true });
+    }
+}
+export function readWatchBoard(repo, runId) {
+    try {
+        const owner = JSON.parse(readFileSync(boardPath(repo, runId), "utf8"));
+        if (owner.repo !== realpathSync(repo) || owner.runId !== runId ||
+            typeof owner.name !== "string" || typeof owner.driver !== "string" ||
+            typeof owner.workspace !== "string" || typeof owner.pane !== "string" ||
+            !/^[a-f0-9-]{36}$/.test(owner.token))
+            return undefined;
+        return owner;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Only a driver that has just verified placement may reserve this binding. */
+export function reserveWatchBoard(owner) {
+    const record = { ...owner, repo: realpathSync(owner.repo), token: randomUUID() };
+    atomicRecord(boardPath(record.repo, record.runId), record);
+    return record;
+}
+export function requestWatchBoardStop(owner) {
+    if (readWatchBoard(owner.repo, owner.runId)?.token !== owner.token)
+        throw new Error("watch ownership changed; cleanup protected");
+    atomicRecord(boardMessagePath(owner, "stop"), { token: owner.token });
+}
+export function watchBoardAcknowledged(owner) {
+    try {
+        const current = readWatchBoard(owner.repo, owner.runId);
+        const ack = JSON.parse(readFileSync(boardMessagePath(owner, "ack"), "utf8"));
+        return current?.token === owner.token && typeof current.armId === "string" &&
+            ack.token === owner.token && ack.armId === current.armId && ack.pid === current.pid &&
+            !existsSync(supervisionPresencePath(owner.repo, "watch", current.armId));
+    }
+    catch {
+        return false;
+    }
+}
+export async function stopWatchBoard(owner, time = {
+    now: () => Date.now(), sleep: (ms) => new Promise(resolve => setTimeout(resolve, ms)),
+}, timeoutMs = 5000) {
+    requestWatchBoardStop(owner);
+    const deadline = time.now() + timeoutMs;
+    while (!watchBoardAcknowledged(owner)) {
+        if (time.now() >= deadline)
+            throw new Error(`watch cleanup unacknowledged for ${owner.name}; owned pane protected`);
+        await time.sleep(Math.min(100, deadline - time.now()));
+    }
+}
+/** The UI alone publishes acknowledgement, after releasing its own presence. */
+export function observeNamedRun(repo, runId, env = process.env) {
+    const armed = armWatchSupervision(repo);
+    let owner;
+    try {
+        const token = env[WATCH_OWNER_ENV];
+        if (token) {
+            const candidate = readWatchBoard(repo, runId);
+            if (!candidate || candidate.token !== token || candidate.pid !== undefined)
+                throw new Error("watch ownership unknown; refusing narrator acknowledgement");
+            owner = { ...candidate, pid: process.pid, armId: armed.id };
+            atomicRecord(boardPath(repo, runId), owner);
+        }
+    }
+    catch (error) {
+        armed.disarm();
+        throw error;
+    }
+    let closed = false;
+    return {
+        stopRequested: () => {
+            if (!owner)
+                return false;
+            try {
+                return JSON.parse(readFileSync(boardMessagePath(owner, "stop"), "utf8")).token === owner.token;
+            }
+            catch (error) {
+                if (error.code === "ENOENT")
+                    return false;
+                throw error;
+            }
+        },
+        close: () => {
+            if (closed)
+                return;
+            closed = true;
+            armed.disarm();
+            if (!armed.released?.())
+                throw new Error("watch presence cleanup unacknowledged");
+            if (owner) {
+                if (readWatchBoard(repo, runId)?.token !== owner.token)
+                    throw new Error("watch owner changed before cleanup acknowledgement");
+                atomicRecord(boardMessagePath(owner, "ack"), { token: owner.token, armId: armed.id, pid: process.pid });
+            }
+        },
+    };
+}

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

@@ -233,3 +233,22 @@ export type RegeneratedColourFrame = ColourFrameCase & {
  * bytes.
  */
 export declare function regenerateColourFrames(binaryVersion?: string): Promise<readonly RegeneratedColourFrame[]>;
+/** Capture the actual FINAL mount, retaining one frame, through its production input path. */
+export declare function captureShellOutput(options: {
+    cwd: string;
+    runId: string;
+    columns: number;
+    rows: number;
+    view: "home" | "run" | "evidence";
+    binaryVersion?: string;
+    environment?: NodeJS.ProcessEnv;
+    stripAnsi?: boolean;
+}): Promise<string>;
+/** Contract-moved retirement, not UAT re-freezing: historical anchors/source bytes stay intact. */
+export declare const FINAL_SHELL_RETIREMENT: {
+    readonly reason: "FINAL §3.1–3.3 moves the integrated shell's geometry, palette and installed keys";
+    readonly corrections: "Ship: flow the six Home tiles at 80x24, report measured overflow, select committed rows, and advertise only supported actions; retain original evidence";
+    readonly retained: readonly ["tests/fixtures/cockpit/anchors/", "tests/fixtures/cockpit/sources/", "tests/fixtures/cockpit/colour/sources/"];
+    readonly replacement: readonly ["home.120x40", "home.80x24", "run.120x40", "run.80x24", "evidence.120x40", "evidence.80x24"];
+    readonly refreeze: "pending accepted UAT; no protected bytes rewritten";
+};

package/dist/tui/cockpit/capture.js

@@ -13,7 +13,8 @@ import { planFrame, RAIL_COLUMNS, resolveCockpitLayout, } from "./layout.js";
 import { deriveRunCockpitData, deriveRunViewRows, RunCockpitFrame, } from "./run-cockpit.js";
 import { deriveSetupCockpitData, SetupCockpitFrame, } from "./setup-cockpit.js";
 import { formatKeybarEntries, initialRunInteractionState, projectRunKeyEntries, } from "./keys.js";
-import { cellWidth } from "./width.js";
+import { cellWidth, fitCells } from "./width.js";
+import { resolveShellColourMode } from "./theme.js";
 export const WIDTH_BAND_CASES = [
     { arrangement: "stacked", columns: 80 },
     { arrangement: "folded-keys", columns: 100 },
@@ -640,3 +641,90 @@ export async function regenerateColourFrames(binaryVersion) {
     }
     return regenerated;
 }
+/** Capture the actual FINAL mount, retaining one frame, through its production input path. */
+export async function captureShellOutput(options) {
+    const { Writable } = await import("node:stream");
+    const { runLiveCockpit } = await import("./live.js");
+    let lastFrame = "";
+    let frameRevision = 0;
+    const frameListeners = new Set();
+    const output = new Writable({ write(chunk, _encoding, next) {
+            const text = String(chunk);
+            if (text.includes("tickmarkr") && text.includes("q Quit")) {
+                lastFrame = text.slice(-20000);
+                frameRevision += 1;
+                for (const listener of frameListeners)
+                    listener();
+            }
+            next();
+        } });
+    Object.assign(output, { isTTY: true, columns: options.columns, rows: options.rows });
+    const input = new PassThrough();
+    Object.assign(input, { isTTY: true, setRawMode: () => input, ref: () => input, unref: () => input });
+    let delivery;
+    const previousColourLevel = chalk.level;
+    const mode = resolveShellColourMode(options.environment);
+    chalk.level = mode === "truecolor" ? 3 : mode === "reduced" ? 1 : 0;
+    const mounted = runLiveCockpit({ ...options, input, output, binaryVersion: options.binaryVersion ?? "capture", debug: true, refreshMs: 2 ** 30, onShellDelivery: d => { delivery = d; } });
+    const waitForFrame = (view, afterRevision = -1) => {
+        const expected = `| ${view.toUpperCase()} |`;
+        if (frameRevision > afterRevision && lastFrame.includes(expected))
+            return Promise.resolve();
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                frameListeners.delete(inspect);
+                reject(new Error(`timed out waiting for committed ${view} capture frame`));
+            }, 2_000);
+            const inspect = () => {
+                if (frameRevision <= afterRevision || !lastFrame.includes(expected))
+                    return;
+                clearTimeout(timeout);
+                frameListeners.delete(inspect);
+                resolve();
+            };
+            frameListeners.add(inspect);
+            inspect();
+        });
+    };
+    try {
+        await waitForFrame("home");
+        const beforeSelection = frameRevision;
+        delivery?.key({ input: { home: "1", run: "4", evidence: "5" }[options.view], key: {} });
+        await waitForFrame(options.view, beforeSelection);
+    }
+    finally {
+        try {
+            delivery?.key({ input: "q", key: {} });
+            await mounted;
+        }
+        finally {
+            input.destroy();
+            output.destroy();
+            chalk.level = previousColourLevel;
+        }
+    }
+    // The evidence identity remains absolute in the live UI and callbacks. A
+    // committed capture records the fixture role instead of its mkdtemp path,
+    // making regeneration byte-identical on macOS and Linux.
+    const portableFrame = options.stripAnsi === false
+        ? lastFrame
+        : lastFrame.replace(/Original journal [^│\n]*/gu, (line) => fitCells("Original journal <engagement>/journal.jsonl", cellWidth(line)));
+    // Ink drops a row's trailing padding only when no escape survives it, so the
+    // same frame carries padding under truecolor and none under NO_COLOR. A plain
+    // capture trims its own rows; otherwise its bytes encode the capturing
+    // machine's TERM/COLORTERM and byte-identity holds on that machine alone.
+    const frame = options.stripAnsi === false
+        ? portableFrame
+        : portableFrame
+            .replace(/\x1b\][\s\S]*?(?:\x07|\x1b\\)|\x1b\[[0-9;?]*[ -/]*[@-~]/g, "")
+            .replace(/[^\S\n]+$/gmu, "");
+    return frame.replace(/\n$/, "");
+}
+/** Contract-moved retirement, not UAT re-freezing: historical anchors/source bytes stay intact. */
+export const FINAL_SHELL_RETIREMENT = {
+    reason: "FINAL §3.1–3.3 moves the integrated shell's geometry, palette and installed keys",
+    corrections: "Ship: flow the six Home tiles at 80x24, report measured overflow, select committed rows, and advertise only supported actions; retain original evidence",
+    retained: ["tests/fixtures/cockpit/anchors/", "tests/fixtures/cockpit/sources/", "tests/fixtures/cockpit/colour/sources/"],
+    replacement: ["home.120x40", "home.80x24", "run.120x40", "run.80x24", "evidence.120x40", "evidence.80x24"],
+    refreeze: "pending accepted UAT; no protected bytes rewritten",
+};

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

@@ -1,6 +1,20 @@
 import { type ReactElement, type ReactNode } from "react";
-import { TEXT_EMPHASIS_TOKENS } from "./theme.js";
+import { type ShellColourMode, type ShellPalette, TEXT_EMPHASIS_TOKENS } from "./theme.js";
 export { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
+/** The consolidated shell opts in; legacy print/capture consumers retain their presentation. */
+export declare const ShellPresentation: import("react").Context<boolean>;
+export declare const ShellTheme: import("react").Context<{
+    readonly mode: ShellColourMode;
+    readonly palette: ShellPalette;
+}>;
+export declare function ShellGridFlow({ width, columns, rowHeight, children }: {
+    width: number;
+    columns: number;
+    rowHeight: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The shell observes the leaf's selected original identity, including removal. */
+export declare const ShellJournalSelection: import("react").Context<((id: string | undefined) => void) | undefined>;
 /**
  * The hover highlight's non-colour half: one cell wide, drawn in the separator
  * the row already spends, from the block family the cockpit already draws with.

package/dist/tui/cockpit/components.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { Children } from "react";
+import { Children, createContext, useContext, useCallback, useId, useLayoutEffect, useState } from "react";
 import { GLYPHS } from "../../brand.js";
-import { COCKPIT_DATA_RAMP, COCKPIT_INKS, TEXT_EMPHASIS_TOKENS, } from "./theme.js";
+import { COCKPIT_DATA_RAMP, COCKPIT_INKS, SHELL_PALETTE, TEXT_EMPHASIS_TOKENS, } from "./theme.js";
 import { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
 export { SPARKLINE_BUCKET_WINDOW } from "./derive.js";
 import { formatKeybarEntries, keybarEntries, SETUP_KEY_BINDINGS, } from "./keys.js";
@@ -17,6 +17,33 @@ import { formatKeybarEntries, keybarEntries, SETUP_KEY_BINDINGS, } from "./keys.
  * no longer imported here.
  */
 import { cellWidth as stringWidth, sliceCells } from "./width.js";
+/** The consolidated shell opts in; legacy print/capture consumers retain their presentation. */
+export const ShellPresentation = createContext(false);
+export const ShellTheme = createContext({ mode: "truecolor", palette: SHELL_PALETTE });
+/** Consecutive leaf grids may share a row at the shell's narrower breakpoint.
+ * Registration counts children, not labels or fixture identities; the leaves
+ * keep supplying the actual tiles and their input controllers. */
+const GridFlow = createContext(undefined);
+const InlineTileTitle = createContext(0);
+export function ShellGridFlow({ width, columns, rowHeight, children }) {
+    const [groups, setGroups] = useState([]);
+    const register = useCallback((id, count) => {
+        setGroups(old => [...old.filter(group => group.id !== id), { id, count }]);
+        return () => setGroups(old => old.filter(group => group.id !== id));
+    }, []);
+    return _jsx(GridFlow.Provider, { value: { width, columns, rowHeight, groups, register }, children: children });
+}
+/** Data visuals retain their measured ramp in truecolor and the explicit
+ * reduced-color mapping; legacy printed consumers keep their original ink. */
+function useDataColour() {
+    const compact = useContext(ShellPresentation);
+    const shell = useContext(ShellTheme);
+    return (hex) => !compact || shell.mode === "truecolor"
+        ? hex
+        : shell.mode === "none" ? undefined : shell.palette.passed;
+}
+/** The shell observes the leaf's selected original identity, including removal. */
+export const ShellJournalSelection = createContext(undefined);
 const SPARKLINE_GLYPHS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
 /**
  * The hover highlight's non-colour half: one cell wide, drawn in the separator
@@ -44,8 +71,10 @@ export const KEYBAR_KEYS = {
     setupAdditional: SETUP_ADDITIONAL_KEYS,
 };
 export function BodyText({ children, emphasis = "normal", }) {
+    const compact = useContext(ShellPresentation);
+    const shell = useContext(ShellTheme);
     const token = TEXT_EMPHASIS_TOKENS[emphasis];
-    return (_jsx(Text, { bold: token.weight === "bold", dimColor: token.dimmed, children: children }));
+    return (_jsx(Text, { wrap: compact ? "truncate-end" : "wrap", color: compact && shell.mode !== "none" ? shell.palette.text : undefined, bold: token.weight === "bold", dimColor: token.dimmed, children: children }));
 }
 function longestBandLine(column) {
     return Math.max(1, ...[column.title, ...column.lines].map((line) => stringWidth(line)));
@@ -194,21 +223,54 @@ function statePresentation(state) {
     }
 }
 export function StateGlyph({ state }) {
-    const presentation = statePresentation(state);
-    return (_jsx(Text, { color: presentation.color, dimColor: presentation.dimmed, children: presentation.glyph }));
+    const compact = useContext(ShellPresentation);
+    const shell = useContext(ShellTheme);
+    const presentation = compact ? {
+        active: { glyph: "● running", color: shell.palette.running },
+        inactive: { glyph: "- disabled", color: shell.palette.disabled },
+        pass: { glyph: "✓ passed", color: shell.palette.passed },
+        fail: { glyph: "✗ terminal failure", color: shell.palette.failure },
+        warn: { glyph: "! human park", color: shell.palette.human },
+        neutral: { glyph: "? unknown", color: shell.palette.unknown },
+    }[state] : statePresentation(state);
+    const glyph = (_jsx(Text, { color: compact && shell.mode === "none" ? undefined : presentation.color, dimColor: "dimmed" in presentation ? presentation.dimmed : undefined, children: presentation.glyph }));
+    if (!compact)
+        return glyph;
+    return (_jsx(Box, { flexShrink: 0, children: glyph }));
 }
 export function Panel({ title, focused = false, width, flexGrow, children, }) {
+    const compact = useContext(ShellPresentation);
+    const shell = useContext(ShellTheme);
+    const inlineTitle = useContext(InlineTileTitle);
     const content = Children.map(children, (child) => typeof child === "string" || typeof child === "number"
         ? _jsx(BodyText, { children: child })
         : child);
+    if (compact && inlineTitle) {
+        const items = Children.toArray(content);
+        return _jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 0, children: [_jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { color: shell.mode === "none" ? undefined : shell.palette.chrome, bold: true, children: [title.replace(" (historical)", ""), " "] }) }), _jsx(Box, { flexShrink: 1, overflow: "hidden", children: items[0] })] }), inlineTitle > 1 && items.slice(1)] });
+    }
+    if (compact)
+        return _jsxs(Box, { flexDirection: "column", flexShrink: 0, flexGrow: flexGrow, width: width, children: [_jsx(Text, { wrap: "truncate-end", color: shell.mode === "none" ? undefined : shell.palette.chrome, bold: true, children: title }), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: content })] });
     return (_jsxs(Box, { flexDirection: "column", flexGrow: flexGrow, width: width, paddingX: 1, borderStyle: focused ? "double" : "round", borderColor: focused ? COCKPIT_DATA_RAMP[0].hex : COCKPIT_DATA_RAMP[3].hex, borderDimColor: !focused, children: [_jsx(Box, { children: focused ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: COCKPIT_DATA_RAMP[0].hex, 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 flow = useContext(GridFlow);
+    const id = useId();
+    const register = flow?.register;
+    useLayoutEffect(() => register?.(id, items.length), [register, id, items.length]);
     const widths = columns !== undefined
         && columnContents?.length === items.length
         ? allocateBandColumns(columns, columnContents, allocation)
         : undefined;
+    if (flow) {
+        const groupIndex = flow.groups.findIndex(group => group.id === id);
+        const start = flow.groups.slice(0, Math.max(0, groupIndex)).reduce((sum, group) => sum + group.count, 0);
+        const firstRow = Math.floor(start / flow.columns);
+        const tileWidth = Math.floor((flow.width - flow.columns + 1) / flow.columns);
+        const height = (Math.ceil((start + items.length) / flow.columns) - firstRow) * flow.rowHeight;
+        return _jsx(Box, { width: flow.width, height: height, flexShrink: 0, marginTop: start % flow.columns ? -flow.rowHeight : 0, children: _jsx(InlineTileTitle.Provider, { value: flow.columns < 3 || flow.rowHeight === 1 ? flow.rowHeight : 0, children: items.map((child, index) => _jsx(Box, { position: "absolute", marginLeft: ((start + index) % flow.columns) * (tileWidth + 1), marginTop: (Math.floor((start + index) / flow.columns) - firstRow) * flow.rowHeight, width: tileWidth, height: flow.rowHeight, overflow: "hidden", flexDirection: "column", children: child }, index)) }) });
+    }
     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) {
@@ -217,6 +279,7 @@ function sparklineLevel(value, minimum, maximum) {
     return Math.round(((value - minimum) / (maximum - minimum)) * (SPARKLINE_GLYPHS.length - 1));
 }
 export function Sparkline({ samples, }) {
+    const dataColour = useDataColour();
     const buckets = samples
         .slice(-SPARKLINE_BUCKET_WINDOW)
         .map((sample) => typeof sample === "number" && Number.isFinite(sample) ? sample : null);
@@ -229,20 +292,21 @@ export function Sparkline({ samples, }) {
             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: ink.hex, children: SPARKLINE_GLYPHS[level] }, `${index}:${sample}`));
+            return (_jsx(Text, { color: dataColour(ink.hex), 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 dataColour = useDataColour();
     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: COCKPIT_DATA_RAMP[0].hex, children: "█".repeat(filled) }), _jsx(Text, { dimColor: true, children: "░".repeat(safeWidth - filled) }), _jsxs(BodyText, { emphasis: "strong", children: [" ", valueLabel, "%"] })] }));
+    return (_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", height: 1, overflow: "hidden", "aria-role": "progressbar", "aria-label": `${valueLabel}% complete`, children: [_jsx(Text, { color: dataColour(COCKPIT_DATA_RAMP[0].hex), 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 }));
@@ -284,7 +348,13 @@ 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", selection, hover, }) {
-    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 }), _jsx(BodyText, { emphasis: index === hover ? "strong" : "normal", children: index === hover ? HOVER_MARKER : " " }), index === selection && (_jsxs(BodyText, { emphasis: "strong", children: [GLYPHS.pointer, " "] })), index === hover
-                    ? (_jsx(Text, { inverse: true, color: COCKPIT_DATA_RAMP[0].hex, children: row.text }))
+    const dataColour = useDataColour();
+    const reportSelection = useContext(ShellJournalSelection);
+    const compact = useContext(ShellPresentation);
+    const selectedId = selection === undefined ? undefined : rows[selection]?.id;
+    useLayoutEffect(() => { reportSelection?.(selectedId); }, [selectedId, reportSelection]);
+    return (_jsx(Panel, { title: title, focused: focused, width: width, children: rows.map((row, index) => (_jsxs(Box, { ref: compact ? node => { if (node)
+                node.attributes.shellEvidence = row.id; } : undefined, flexDirection: "row", flexWrap: "nowrap", height: 1, overflow: "hidden", children: [_jsx(BodyText, { emphasis: "dim", children: row.time }), _jsx(BodyText, { children: " " }), _jsx(StateGlyph, { state: row.state }), _jsx(BodyText, { emphasis: index === hover ? "strong" : "normal", children: index === hover ? HOVER_MARKER : " " }), index === selection && (_jsxs(BodyText, { emphasis: "strong", children: [GLYPHS.pointer, " "] })), index === hover
+                    ? (_jsx(Text, { inverse: true, color: dataColour(COCKPIT_DATA_RAMP[0].hex), children: row.text }))
                     : _jsx(BodyText, { children: row.text })] }, row.id))) }));
 }