tickmarkr 1.91.0 → 1.92.0

package/dist/tui/ink/frame.d.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+export declare function inkOutput(output: NodeJS.WriteStream): NodeJS.WriteStream;
+export declare function inkInput(input: NodeJS.ReadStream, initialInput: string[]): {
+    stream: NodeJS.ReadStream;
+    stop(): void;
+};
+/** Alt-screen guard: only the operator's real terminal, never injected test streams. */
+export declare function enterAltScreen(output: NodeJS.WriteStream): () => void;
+export declare const INK: {
+    readonly brand: "ansi256(41)";
+    readonly brandBright: "ansi256(84)";
+    readonly warn: "yellow";
+    readonly fail: "red";
+};
+/** 1048576 → "1m" · 262144 → "262k" · 200000 → "200k" · undefined → "" */
+export declare function fmtCtx(tokens?: number): string;
+/** ($3, $15) → "$3/15" — omp-style per-Mtok pair. Either side missing → "". */
+export declare function fmtUsdPair(input?: number, output?: number): string;
+/** 4169 → "4.2s" */
+export declare function fmtMs(ms?: number): string;
+/** Hard cell clamp with ellipsis — model ids are ASCII, plain length is the width. */
+export declare function clip(text: string, width: number): string;
+/** Path clamp that keeps the LAST segment — the distinguishing half of a deep model id.
+ * `prime-agent/prime-inference/anthropic/claude-fable-5` at 34 → `prime-agent/prime-i…/claude-fable-5`;
+ * end-clipping the same id hid exactly the part that told models apart (operator review, 80-col). */
+export declare function clipPathTail(text: string, width: number): string;
+export declare const padCell: (text: string, width: number) => string;
+export declare const padCellStart: (text: string, width: number) => string;
+export type KeyBind = {
+    key: string;
+    label: string;
+};
+/** One dim keybar line: `Enter assign · ↑/↓ move · Esc close` with bright keys. */
+export declare function KeyBar({ binds }: {
+    binds: KeyBind[];
+}): import("react").JSX.Element;
+/** Search prompt row — brand cursor while the search mode is live; dim hint when idle and empty. */
+export declare function SearchRow({ filter, active, hint }: {
+    filter: string;
+    active: boolean;
+    hint?: string;
+}): import("react").JSX.Element;
+/** Elision marker rows for windowed lists. */
+export declare function ElisionMark({ count, side, hint }: {
+    count: number;
+    side: "above" | "below";
+    hint?: string;
+}): import("react").JSX.Element | null;
+/** Pointer cell: two columns everywhere so rows never shift when the cursor moves. */
+export declare function Pointer({ on }: {
+    on: boolean;
+}): import("react").JSX.Element;
+/** Verdict/toggle glyph vocabulary, colored per the design contract. */
+export declare function Glyph({ kind }: {
+    kind: "on" | "off" | "fail" | "warn" | "unknown" | "neutral";
+}): import("react").JSX.Element;
+/** Bordered overlay panel (rendered in the body region — the rail stays put). */
+export declare function OverlayPanel({ title, children, width }: {
+    title: string;
+    children: ReactNode;
+    width?: number;
+}): import("react").JSX.Element;

package/dist/tui/ink/frame.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emitKeypressEvents } from "node:readline";
+import { PassThrough } from "node:stream";
+import { Box, Text } from "ink";
+import { compactTokens, GLYPHS } from "../../brand.js";
+// ── ink stream bridges ───────────────────────────────────────────────────────
+// Hoisted from fleet-app.tsx / init-app.tsx (both files carried byte-identical
+// copies with a "hoist on the third act" note — this is that hoist).
+const escape = String.fromCharCode(27);
+const inkBookkeepingWrites = {
+    "": true,
+    [`${escape}[?25l`]: true,
+    [`${escape}[?25h`]: true,
+    [`${escape}[?2026h`]: true,
+    [`${escape}[?2026l`]: true,
+};
+export function inkOutput(output) {
+    if (typeof output.on === "function" && typeof output.off === "function")
+        return output;
+    const facade = Object.create(output);
+    const write = output.write.bind(output);
+    facade.write = ((chunk, ...args) => {
+        const text = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
+        if (inkBookkeepingWrites[text])
+            return true;
+        return Reflect.apply(write, output, [chunk, ...args]);
+    });
+    facade.on = () => facade;
+    facade.off = () => facade;
+    return facade;
+}
+export function inkInput(input, initialInput) {
+    const productionInput = typeof input.ref === "function" && typeof input.unref === "function";
+    // Isolate Ink's listeners on a bridge so every editor exit can detach the
+    // one listener it owns from the operator's terminal. Older injected FleetIO
+    // streams can arrive as decoded keypress events, while real TTYs forward raw
+    // data and leave decoding entirely to Ink.
+    const stream = new PassThrough();
+    stream.isTTY = input.isTTY;
+    stream.setRawMode = input.setRawMode?.bind(input);
+    stream.ref = () => {
+        if (productionInput)
+            input.ref();
+        return stream;
+    };
+    stream.unref = () => {
+        if (productionInput)
+            input.unref();
+        return stream;
+    };
+    const queued = [...initialInput];
+    let active = true;
+    let scheduled;
+    const pump = () => {
+        scheduled = undefined;
+        if (!active)
+            return;
+        const next = queued.shift();
+        if (next === undefined)
+            return;
+        stream.write(next);
+        scheduled = setTimeout(pump, 0);
+    };
+    const onData = (chunk) => {
+        queued.push(typeof chunk === "string" ? chunk : chunk.toString("utf8"));
+        scheduled ??= setTimeout(pump, 0);
+    };
+    const onKeypress = (sequence, key) => {
+        const token = key?.sequence ?? sequence;
+        if (token === undefined)
+            return;
+        queued.push(token);
+        scheduled ??= setTimeout(pump, 0);
+    };
+    if (productionInput) {
+        input.on("data", onData);
+    }
+    else {
+        emitKeypressEvents(input);
+        input.on("keypress", onKeypress);
+    }
+    input.resume();
+    if (queued.length > 0)
+        scheduled = setTimeout(pump, 0);
+    return {
+        stream: stream,
+        stop() {
+            active = false;
+            clearTimeout(scheduled);
+            if (productionInput)
+                input.off("data", onData);
+            else
+                input.off("keypress", onKeypress);
+            input.pause();
+            stream.end();
+        },
+    };
+}
+/** Alt-screen guard: only the operator's real terminal, never injected test streams. */
+export function enterAltScreen(output) {
+    if (output !== process.stdout || output.isTTY !== true)
+        return () => { };
+    output.write(`${escape}[?1049h${escape}[H`);
+    return () => output.write(`${escape}[?1049l`);
+}
+// ── palette (ink color names over the brand contract in src/brand.ts) ────────
+// brand green ramp anchor 41 = ok/authed/selection accent; amber = attention;
+// red = fail. Chrome is dim. Data is plain. (docs/codebase/CLI-DESIGN.md)
+export const INK = {
+    brand: "ansi256(41)",
+    brandBright: "ansi256(84)",
+    warn: "yellow",
+    fail: "red",
+};
+// ── compact formatters for metadata columns ──────────────────────────────────
+/** 1048576 → "1m" · 262144 → "262k" · 200000 → "200k" · undefined → "" */
+export function fmtCtx(tokens) {
+    if (tokens === undefined || !Number.isFinite(tokens) || tokens <= 0)
+        return "";
+    return compactTokens(tokens);
+}
+const trimUsd = (n) => {
+    const fixed = n >= 10 ? String(Math.round(n)) : String(Math.round(n * 100) / 100);
+    return fixed.replace(/\.0+$/, "");
+};
+/** ($3, $15) → "$3/15" — omp-style per-Mtok pair. Either side missing → "". */
+export function fmtUsdPair(input, output) {
+    if (input === undefined && output === undefined)
+        return "";
+    if (input === undefined || output === undefined)
+        return `$${trimUsd(input ?? output ?? 0)}`;
+    return `$${trimUsd(input)}/${trimUsd(output)}`;
+}
+/** 4169 → "4.2s" */
+export function fmtMs(ms) {
+    if (ms === undefined || !Number.isFinite(ms) || ms < 0)
+        return "";
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+/** Hard cell clamp with ellipsis — model ids are ASCII, plain length is the width. */
+export function clip(text, width) {
+    if (width <= 0)
+        return "";
+    if (text.length <= width)
+        return text;
+    if (width === 1)
+        return "…";
+    return `${text.slice(0, width - 1)}…`;
+}
+/** Path clamp that keeps the LAST segment — the distinguishing half of a deep model id.
+ * `prime-agent/prime-inference/anthropic/claude-fable-5` at 34 → `prime-agent/prime-i…/claude-fable-5`;
+ * end-clipping the same id hid exactly the part that told models apart (operator review, 80-col). */
+export function clipPathTail(text, width) {
+    if (text.length <= width)
+        return text;
+    const cut = text.lastIndexOf("/");
+    if (cut === -1)
+        return clip(text, width);
+    const tail = text.slice(cut);
+    if (tail.length + 2 > width)
+        return clip(text, width); // no room for any head — fall back
+    return `${text.slice(0, width - tail.length - 1)}…${tail}`;
+}
+export const padCell = (text, width) => clip(text, width).padEnd(width);
+export const padCellStart = (text, width) => clip(text, width).padStart(width);
+/** One dim keybar line: `Enter assign · ↑/↓ move · Esc close` with bright keys. */
+export function KeyBar({ binds }) {
+    return (_jsx(Text, { children: binds.map((bind, index) => (_jsxs(Text, { children: [index > 0 && _jsx(Text, { dimColor: true, children: "  ·  " }), _jsx(Text, { children: bind.key }), _jsx(Text, { dimColor: true, children: ` ${bind.label}` })] }, bind.key + bind.label))) }));
+}
+/** Search prompt row — brand cursor while the search mode is live; dim hint when idle and empty. */
+export function SearchRow({ filter, active, hint }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  " }), _jsx(Text, { color: active ? INK.brand : undefined, dimColor: !active, children: "> " }), filter === "" && !active && hint ? _jsx(Text, { dimColor: true, children: hint }) : _jsx(Text, { children: filter }), active ? _jsx(Text, { color: INK.brand, children: "█" }) : _jsx(Text, { children: " " })] }));
+}
+/** Elision marker rows for windowed lists. */
+export function ElisionMark({ count, side, hint = "type to search" }) {
+    if (count <= 0)
+        return null;
+    return _jsx(Text, { dimColor: true, children: `  … ${count} ${side}${side === "below" ? ` — ${hint}` : ""}` });
+}
+/** Pointer cell: two columns everywhere so rows never shift when the cursor moves. */
+export function Pointer({ on }) {
+    return on ? _jsx(Text, { color: INK.brand, children: `${GLYPHS.pointer} ` }) : _jsx(Text, { children: "  " });
+}
+/** Verdict/toggle glyph vocabulary, colored per the design contract. */
+export function Glyph({ kind }) {
+    switch (kind) {
+        case "on":
+            return _jsx(Text, { color: INK.brand, children: GLYPHS.toggleActive });
+        case "off":
+            return _jsx(Text, { dimColor: true, children: GLYPHS.toggleInactive });
+        case "fail":
+            return _jsx(Text, { color: INK.fail, children: GLYPHS.fail });
+        case "warn":
+            return _jsx(Text, { color: INK.warn, children: GLYPHS.attention });
+        case "unknown":
+            return _jsx(Text, { color: INK.warn, children: "?" });
+        default:
+            return _jsx(Text, { dimColor: true, children: GLYPHS.neutral });
+    }
+}
+/** Bordered overlay panel (rendered in the body region — the rail stays put). */
+export function OverlayPanel({ title, children, width }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderDimColor: true, paddingX: 1, width: width, alignSelf: "flex-start", children: [_jsx(Text, { bold: true, color: INK.brand, children: title }), children] }));
+}

package/dist/tui/ink/init-app.d.ts

@@ -22,8 +22,9 @@ export type InitWizardResult = {
 } | {
     kind: "quit";
 };
-export declare function InitWizardApp({ fields }: {
+export declare function InitWizardApp({ fields, frameColumns }: {
     fields: InitWizardFields;
+    frameColumns?: number;
 }): import("react").JSX.Element;
 export declare function runInitWizardApp(opts: {
     fields: InitWizardFields;

package/dist/tui/ink/init-app.js

@@ -1,103 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { emitKeypressEvents } from "node:readline";
-import { PassThrough } from "node:stream";
 import { Box, render, Text, useApp, useInput } from "ink";
 import { useRef, useState } from "react";
-import { GLYPHS } from "../../brand.js";
 import { ToggleMark } from "./components.js";
+import { clip, INK, inkInput, inkOutput, KeyBar, padCell, Pointer } from "./frame.js";
 const DRIVERS = ["auto", "herdr", "subprocess"];
 const VISIBILITY = ["pane", "headless"];
-// inkOutput/inkInput replicate the compatibility bridges in fleet-app.tsx — they are
-// not exported there and a sibling change owns that file, so importing was not an option when
-// this act landed. If a third Ink act appears, hoist the pair into a shared module.
-const escape = String.fromCharCode(27);
-const inkBookkeepingWrites = {
-    "": true,
-    [`${escape}[?25l`]: true,
-    [`${escape}[?25h`]: true,
-    [`${escape}[?2026h`]: true,
-    [`${escape}[?2026l`]: true,
-};
-function inkOutput(output) {
-    if (typeof output.on === "function" && typeof output.off === "function")
-        return output;
-    const facade = Object.create(output);
-    const write = output.write.bind(output);
-    facade.write = ((chunk, ...args) => {
-        const text = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
-        if (inkBookkeepingWrites[text] === true)
-            return true;
-        return Reflect.apply(write, output, [chunk, ...args]);
-    });
-    facade.on = () => facade;
-    facade.off = () => facade;
-    return facade;
-}
-function inkInput(input, initialInput) {
-    const productionInput = typeof input.ref === "function" && typeof input.unref === "function";
-    // Isolate Ink's listeners on a bridge so every editor exit can detach the one listener it
-    // owns from the operator's terminal (see fleet-app.tsx for the full provenance).
-    const stream = new PassThrough();
-    stream.isTTY = input.isTTY;
-    stream.setRawMode = input.setRawMode?.bind(input);
-    stream.ref = () => {
-        if (productionInput)
-            input.ref();
-        return stream;
-    };
-    stream.unref = () => {
-        if (productionInput)
-            input.unref();
-        return stream;
-    };
-    const queued = [...initialInput];
-    let active = true;
-    let scheduled;
-    const pump = () => {
-        scheduled = undefined;
-        if (!active)
-            return;
-        const next = queued.shift();
-        if (next === undefined)
-            return;
-        stream.write(next);
-        scheduled = setTimeout(pump, 0);
-    };
-    const onData = (chunk) => {
-        queued.push(typeof chunk === "string" ? chunk : chunk.toString("utf8"));
-        scheduled ??= setTimeout(pump, 0);
-    };
-    const onKeypress = (sequence, key) => {
-        const token = key?.sequence ?? sequence;
-        if (token === undefined)
-            return;
-        queued.push(token);
-        scheduled ??= setTimeout(pump, 0);
-    };
-    if (productionInput) {
-        input.on("data", onData);
-    }
-    else {
-        emitKeypressEvents(input);
-        input.on("keypress", onKeypress);
-    }
-    input.resume();
-    if (queued.length > 0)
-        scheduled = setTimeout(pump, 0);
-    return {
-        stream: stream,
-        stop() {
-            active = false;
-            clearTimeout(scheduled);
-            if (productionInput)
-                input.off("data", onData);
-            else
-                input.off("keypress", onKeypress);
-            input.pause();
-            stream.end();
-        },
-    };
-}
 // Three fields, one toggle, one action — a descriptor array, deliberately not a forms framework.
 function buildRows(offerSkills) {
     const rows = [
@@ -127,11 +34,9 @@ function buildRows(offerSkills) {
     rows.push({ id: "continue", label: "Continue →", desc: "save these preferences and continue to discovery" });
     return rows;
 }
-const HINT_BAR = "Enter/Space to change · Tab to jump sections · ↑/↓ to move · Enter on Continue · Esc to quit";
-export function InitWizardApp({ fields }) {
+export function InitWizardApp({ fields, frameColumns = 74 }) {
     const { exit } = useApp();
     const rows = buildRows(fields.offerSkills);
-    const sections = fields.offerSkills ? ["Run", "Skills"] : ["Run"];
     const [cursor, setCursor] = useState(0);
     const cursorRef = useRef(0);
     const driverRef = useRef(fields.driver);
@@ -247,13 +152,31 @@ export function InitWizardApp({ fields }) {
                 return "";
         }
     };
-    const currentSection = rows.slice(0, cursor + 1).reduce((section, row) => row.section ?? section, rows[0].section);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "tickmarkr init" }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Preferences" }), _jsx(Text, { dimColor: true, children: " \u00B7 Discovery \u00B7 Fleet" })] }), _jsx(Text, { dimColor: true, children: "act 1 of 3 \u2014 run preferences for this repo" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Box, { flexDirection: "column", width: 10, marginRight: 2, children: sections.map((section) => (_jsx(Text, { bold: section === currentSection, dimColor: section !== currentSection, children: section }, section))) }), _jsx(Box, { flexDirection: "column", children: rows.map((row, index) => (_jsxs(Text, { bold: index === cursor, children: [index === cursor ? `${GLYPHS.pointer} ` : "  ", row.id === "continue" ? row.label : row.label.padEnd(24), valueOf(row)] }, row.id))) })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: rows[cursor].desc }), _jsx(Text, { dimColor: true, children: HINT_BAR })] })] }));
+    const width = Math.max(58, Math.min(frameColumns, 100));
+    const rendered = [];
+    for (const [index, row] of rows.entries()) {
+        if (row.section && rows[index - 1]?.section !== row.section) {
+            if (index > 0)
+                rendered.push(_jsx(Text, { children: " " }, `${row.section}-gap`));
+            rendered.push(_jsx(Text, { dimColor: true, children: row.section }, row.section));
+        }
+        if (row.id === "continue")
+            rendered.push(_jsx(Text, { children: " " }, "continue-gap"));
+        rendered.push(_jsxs(Text, { children: [_jsx(Pointer, { on: index === cursor }), _jsx(Text, { bold: index === cursor, children: row.id === "continue" ? row.label : padCell(row.label, 26) }), _jsx(Text, { color: index === cursor ? INK.brand : undefined, children: valueOf(row) })] }, row.id));
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: INK.brand, children: " tickmarkr init" }), _jsx(Text, { dimColor: true, children: " · act 1 of 3" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "round", borderDimColor: true, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: INK.brand, children: "Preferences" }), _jsx(Text, { dimColor: true, children: " › Discovery › Fleet" })] }), _jsx(Text, { children: " " }), rendered] }), _jsx(Text, { dimColor: true, children: ` ${clip(rows[cursor].desc, width - 2)}` }), _jsx(KeyBar, { binds: [
+                    { key: "Enter/Space", label: "change" },
+                    { key: "Tab", label: "section" },
+                    { key: "↑↓", label: "move" },
+                    { key: "Esc", label: "quit" },
+                ] })] }));
 }
 export async function runInitWizardApp(opts) {
     const bridgedInput = inkInput(opts.input, opts.initialInput ?? []);
     const legacyOutput = typeof opts.output.on !== "function" || typeof opts.output.off !== "function";
-    const app = render(_jsx(InitWizardApp, { fields: opts.fields }), {
+    // OBS-527: geometry is a live input — rebuild the element on resize (same pattern as fleet-app)
+    const wizardElement = () => _jsx(InitWizardApp, { fields: opts.fields, frameColumns: opts.output.columns ?? 74 });
+    const app = render(wizardElement(), {
         stdin: bridgedInput.stream,
         stdout: inkOutput(opts.output),
         exitOnCtrlC: false,
@@ -262,10 +185,15 @@ export async function runInitWizardApp(opts) {
         // fleet-app.tsx): disable Ink's render throttling only for that facade.
         debug: legacyOutput,
     });
+    const onResize = () => app.rerender(wizardElement());
+    if (!legacyOutput)
+        opts.output.on("resize", onResize);
     try {
         return await app.waitUntilExit();
     }
     finally {
+        if (!legacyOutput)
+            opts.output.off("resize", onResize);
         app.unmount();
         bridgedInput.stop();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tickmarkr",
-  "version": "1.91.0",
+  "version": "1.92.0",
   "description": "Spec in, verified work out.",
   "type": "module",
   "license": "MIT",