@higherdev/cli 0.4.0 → 0.5.0

package/dist/tui/Banner.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useStdout } from "ink";
+import { UI } from "./theme.js";
+export const WORD = "HigherDEV";
+/**
+ * HigherDEV as a bitmap. Drawing the word as pixels rather than as whole block
+ * characters is what buys the resolution: a terminal cell is about twice as
+ * tall as it is wide, so a half block renders two pixel rows in one text row
+ * and the curves get somewhere to go.
+ *
+ * Rows 0-9 are cap height, 3-9 is the x-height, 10-11 is the descender.
+ */
+const GLYPHS = {
+    H: [
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "#######",
+        "#######",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        ".......",
+        ".......",
+    ],
+    i: ["##", "##", "..", "##", "##", "##", "##", "##", "##", "##", "..", ".."],
+    g: [
+        ".......",
+        ".......",
+        ".......",
+        ".######",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        ".######",
+        ".....##",
+        ".#####.",
+    ],
+    h: [
+        "##.....",
+        "##.....",
+        "##.....",
+        "##.###.",
+        "###..##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        ".......",
+        ".......",
+    ],
+    e: [
+        ".......",
+        ".......",
+        ".......",
+        ".#####.",
+        "##...##",
+        "##...##",
+        "#######",
+        "##.....",
+        "##...##",
+        ".#####.",
+        ".......",
+        ".......",
+    ],
+    r: [
+        "......",
+        "......",
+        "......",
+        "######",
+        "#####.",
+        "###...",
+        "##....",
+        "##....",
+        "##....",
+        "##....",
+        "......",
+        "......",
+    ],
+    D: [
+        "#####..",
+        "##..##.",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##..##.",
+        "#####..",
+        ".......",
+        ".......",
+    ],
+    E: [
+        "######",
+        "######",
+        "##....",
+        "##....",
+        "#####.",
+        "#####.",
+        "##....",
+        "##....",
+        "######",
+        "######",
+        "......",
+        "......",
+    ],
+    V: [
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        "##...##",
+        ".##.##.",
+        ".##.##.",
+        ".##.##.",
+        "..###..",
+        "..###..",
+        ".......",
+        ".......",
+    ],
+    " ": ["..", "..", "..", "..", "..", "..", "..", "..", "..", "..", "..", ".."],
+};
+const PIXEL_ROWS = 12;
+/** Columns each size needs. Anything wider than the terminal wraps, and a
+ * wrapped banner is worse than a small one. */
+export const BANNER_WIDTH = {
+    // 56 pixels of letter and 8 of gap, doubled, with the gaps left single.
+    large: 128,
+    small: 64,
+    text: WORD.length,
+};
+/** Rows each size occupies, so a caller can budget the space before drawing. */
+export const BANNER_HEIGHT = {
+    large: PIXEL_ROWS,
+    small: PIXEL_ROWS / 2,
+    text: 1,
+};
+/**
+ * The largest banner the terminal can hold. The large one is deliberately
+ * fussy: it is a third of a short window's height, so it waits for a terminal
+ * with room to spare rather than crowding out the board.
+ */
+export function bannerSize(columns, rows) {
+    if (columns >= BANNER_WIDTH.large + 2 && rows >= BANNER_HEIGHT.large + 26)
+        return "large";
+    // Height matters as well as width. Six rows of wordmark is most of a very
+    // short window, and a splash that fills the window is one Ink cannot repaint
+    // in place.
+    if (columns >= BANNER_WIDTH.small + 2 && rows >= BANNER_HEIGHT.small + 8)
+        return "small";
+    return "text";
+}
+/** The word as a pixel grid, one string of `#` and `.` per pixel row. */
+export function pixelRows(word = WORD, gap = 1) {
+    const rows = Array.from({ length: PIXEL_ROWS }, () => "");
+    const letters = [...word].filter((letter) => GLYPHS[letter]);
+    letters.forEach((letter, index) => {
+        const glyph = GLYPHS[letter];
+        const width = Math.max(...glyph.map((row) => row.length));
+        const spacer = index === letters.length - 1 ? 0 : gap;
+        for (let i = 0; i < PIXEL_ROWS; i += 1) {
+            rows[i] += (glyph[i] ?? "").padEnd(width, ".") + ".".repeat(spacer);
+        }
+    });
+    return rows;
+}
+const HALF = { "00": " ", "10": "▀", "01": "▄", "11": "█" };
+/**
+ * Pixels to text. `small` packs two pixel rows into one text row with a half
+ * block, which is the shape that keeps the letters square. `large` spends two
+ * columns and a whole row on each pixel, which is the same word at twice the
+ * size and the same proportions.
+ */
+export function bannerRows(size = "small", word = WORD) {
+    if (size === "text")
+        return [word];
+    if (size === "large") {
+        return pixelRows(word, 1).map((row) => [...row].map((pixel) => (pixel === "#" ? "██" : "  ")).join(""));
+    }
+    const pixels = pixelRows(word, 1);
+    const rows = [];
+    for (let i = 0; i < pixels.length; i += 2) {
+        const top = pixels[i] ?? "";
+        const bottom = pixels[i + 1] ?? "";
+        let row = "";
+        for (let x = 0; x < top.length; x += 1) {
+            const key = `${top[x] === "#" ? "1" : "0"}${bottom[x] === "#" ? "1" : "0"}`;
+            row += HALF[key];
+        }
+        rows.push(row);
+    }
+    return rows;
+}
+/**
+ * How bright the sky is. 0 is the dark between flashes, 1 the blue afterglow
+ * a strike leaves behind, 2 and 3 the flash itself.
+ */
+export const LEVELS = [
+    { color: UI.dim, dimColor: true, bold: false },
+    { color: UI.accent, dimColor: false, bold: false },
+    { color: UI.text, dimColor: false, bold: false },
+    { color: UI.text, dimColor: false, bold: true },
+];
+/** Where it comes to rest once the storm passes, and how it looks unanimated. */
+const SETTLED = { color: UI.text, dimColor: false, bold: false };
+/** Four minutes. Long enough that the terminal keeps flickering while you work. */
+export const STORM_MS = 240_000;
+function mulberry32(seed) {
+    let a = seed >>> 0;
+    return () => {
+        a = (a + 0x6d2b79f5) | 0;
+        let t = Math.imul(a ^ (a >>> 15), 1 | a);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/**
+ * A storm, as a list of frames to hold. Sheet lightning does not fade evenly:
+ * it fires two or three times in a fifth of a second, leaves the sky blue for
+ * a moment, then does nothing at all for several seconds. The gaps are what
+ * make it read as weather rather than as a blinking cursor, so they are the
+ * longest thing in here.
+ */
+export function stormSchedule(opts = {}) {
+    const durationMs = opts.durationMs ?? STORM_MS;
+    const random = mulberry32(opts.seed ?? 1);
+    const between = (min, max) => min + Math.floor(random() * (max - min + 1));
+    const frames = [];
+    let elapsed = 0;
+    const push = (frame) => {
+        frames.push(frame);
+        elapsed += frame.ms;
+    };
+    while (elapsed < durationMs) {
+        const strikes = between(2, 5);
+        for (let strike = 0; strike < strikes; strike += 1) {
+            const last = strike === strikes - 1;
+            // The final flash of a burst holds, then fades down through the levels
+            // instead of being cut off. A real strike leaves the sky lit for a
+            // moment after it, and each step of the way out is slower than the last.
+            push({ level: 3, ms: last ? between(110, 170) : between(35, 70) });
+            if (last) {
+                push({ level: 2, ms: between(120, 180) });
+                push({ level: 1, ms: between(180, 260) });
+                break;
+            }
+            push({ level: 1, ms: between(25, 55) });
+            // Some strikes flare twice before the sky lets go of them.
+            if (random() < 0.35)
+                push({ level: 2, ms: between(30, 60) });
+            push({ level: 0, ms: between(45, 160) });
+        }
+        push({ level: 0, ms: between(600, 3000), quiet: true });
+    }
+    // The last quiet stretch is cut short rather than left to run past the hour
+    // it was asked for, so the storm lasts what the caller said it would.
+    const last = frames[frames.length - 1];
+    if (last && elapsed > durationMs)
+        last.ms = Math.max(1, last.ms - (elapsed - durationMs));
+    return frames;
+}
+export function Banner({ animate = true, onDone, columns, rows, seed, durationMs, }) {
+    const { stdout } = useStdout();
+    // A pty with no size reports 0. Guessing small keeps the word inside it.
+    const wide = columns ?? (stdout?.columns && stdout.columns > 0 ? stdout.columns : 80);
+    const tall = rows ?? (stdout?.rows && stdout.rows > 0 ? stdout.rows : 24);
+    const size = bannerSize(wide, tall);
+    // Built once and only paused by `animate`, never rebuilt: a frame that grows
+    // past the window stops the flashing, and a frame that shrinks again picks up
+    // where the storm left off rather than starting a second one.
+    const storm = useMemo(() => stormSchedule({ seed: seed ?? Math.floor(Math.random() * 2 ** 31), durationMs }), [seed, durationMs]);
+    const [frame, setFrame] = useState(0);
+    const announced = useRef(false);
+    // The word settles into its readable state long before the storm ends, so
+    // whatever is waiting on the banner never waits four minutes for it.
+    useEffect(() => {
+        if (announced.current)
+            return;
+        if (!animate || storm.length === 0 || storm[frame]?.quiet) {
+            announced.current = true;
+            onDone?.();
+        }
+    }, [animate, storm, frame, onDone]);
+    useEffect(() => {
+        if (!animate || frame >= storm.length)
+            return;
+        const timer = setTimeout(() => setFrame((current) => current + 1), storm[frame].ms);
+        return () => clearTimeout(timer);
+    }, [animate, storm, frame]);
+    const over = !animate || frame >= storm.length;
+    const style = over ? SETTLED : LEVELS[storm[frame].level];
+    const lines = bannerRows(size);
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: lines.map((line, index) => (_jsx(Text, { color: style.color, dimColor: style.dimColor, bold: style.bold, children: line }, index))) }));
+}

package/dist/tui/Bubble.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { UI, speakerStyle } from "./theme.js";
+/**
+ * One turn. The frame says who is speaking, so the text can stay white
+ * throughout and still be attributable at a glance.
+ */
+export function Bubble({ message, width }) {
+    const style = speakerStyle(message.speaker);
+    const body = message.body.replace(/\s+$/, "");
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, width: width, children: _jsxs(Box, { borderStyle: style.borderStyle, borderColor: style.borderColor, ...(style.backgroundColor ? { backgroundColor: style.backgroundColor } : {}), flexDirection: "column", paddingX: 1, children: [style.label ? (_jsx(Text, { color: UI.text, bold: true, children: style.label })) : null, (message.steps ?? []).map((step, index) => (_jsx(Text, { color: UI.dim, children: step }, index))), body ? (_jsx(Text, { color: UI.text, wrap: "wrap", children: body })) : message.pending ? (_jsx(Text, { color: UI.dim, children: "thinking\u2026" })) : null] }) }));
+}

package/dist/tui/Dashboard.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { BOARD_COLUMNS, availabilityLabel, epicProgressCaption, epicProgress, statusLabel, statusTone, } from "./data.js";
+import { elapsed, truncate } from "../out/format.js";
+import { inkColor } from "../out/theme.js";
+import { UI } from "./theme.js";
+import { BoundedPanel as Panel, Heading, More, contentRows } from "./bounded.js";
+const DOT = "●";
+/**
+ * The width at which the board and the agents stop competing for the same
+ * columns and can sit next to each other. Below it they stack, because two
+ * half-width columns of truncated text read worse than one of each.
+ */
+export const SPLIT_AT = 96;
+/** How the cockpit divides the row it is given. */
+export function splitWidths(width) {
+    if (width < SPLIT_AT)
+        return null;
+    // The board carries a key, a title and an owner; the agents carry a name and
+    // a state. Three fifths and two fifths is what stops the titles truncating
+    // long before the agent rows need the room.
+    const agents = Math.max(30, Math.min(42, Math.round(width * 0.4)));
+    return { board: width - agents - 1, agents };
+}
+/**
+ * The board as one flat list, headings included. Everything that has to agree
+ * about position reads this: the cursor moves through it, the scroll window is
+ * computed over it, and the panel draws a slice of it.
+ */
+export function boardEntries(board) {
+    const entries = [];
+    for (const status of BOARD_COLUMNS) {
+        const tickets = board.tickets.filter((ticket) => ticket.status === status);
+        if (tickets.length === 0)
+            continue;
+        entries.push({ key: `h:${status}`, kind: "heading", status: status, count: tickets.length });
+        for (const ticket of tickets)
+            entries.push({ key: ticket.id, kind: "ticket", ticket });
+    }
+    return entries;
+}
+/** Ticket ids in the order they are drawn, which is the order the cursor moves. */
+export function boardTicketIds(board) {
+    return boardEntries(board)
+        .filter((entry) => entry.kind === "ticket")
+        .map((entry) => entry.key);
+}
+/**
+ * Where the cursor lands after a move. Null when there is nothing to select.
+ * It stops at both ends rather than wrapping, so holding a key down settles
+ * somewhere predictable instead of cycling.
+ */
+export function nextCursor(order, current, delta) {
+    if (order.length === 0)
+        return null;
+    const at = current ? order.indexOf(current) : -1;
+    // No selection yet: a step down starts at the top, a step up at the bottom.
+    if (at < 0)
+        return delta > 0 ? order[0] : order[order.length - 1];
+    return order[Math.min(order.length - 1, Math.max(0, at + delta))];
+}
+/**
+ * Which slice of a longer list to draw. Computed from the cursor alone rather
+ * than remembered, so the window cannot drift out of step with the selection.
+ * The cursor sits mid panel except near either end, where the list stops
+ * moving and the cursor travels instead.
+ */
+export function scrollWindow(count, rows, focus) {
+    if (rows >= count)
+        return { start: 0, end: count };
+    if (rows <= 0)
+        return { start: 0, end: 0 };
+    if (focus < 0)
+        return { start: 0, end: rows };
+    const start = Math.max(0, Math.min(focus - Math.floor(rows / 2), count - rows));
+    return { start, end: start + rows };
+}
+/**
+ * What a windowed panel is hiding, said in its heading rather than in a row.
+ * Counted in tickets, not in entries: the entry list carries a heading per
+ * group, and counting those would put numbers beside the ticket total that do
+ * not add up to it.
+ */
+export function hiddenTickets(entries, start, end) {
+    const tickets = (from, to) => entries.slice(from, to).filter((entry) => entry.kind === "ticket").length;
+    return { above: tickets(0, start), below: tickets(end, entries.length) };
+}
+function hiddenNote(total, hidden) {
+    if (hidden.above === 0 && hidden.below === 0)
+        return `${total}`;
+    return `${total}  ${hidden.above > 0 ? `${hidden.above}↑ ` : ""}${hidden.below > 0 ? `${hidden.below}↓` : ""}`.trimEnd();
+}
+export function BoardColumn({ board, width, rows, cursor, }) {
+    const entries = boardEntries(board);
+    const inner = Math.max(0, rows - 1);
+    const focus = cursor ? entries.findIndex((entry) => entry.key === cursor) : -1;
+    const { start, end } = scrollWindow(entries.length, inner, focus);
+    const title = Math.max(8, width - 10);
+    return (_jsx(Panel, { width: width, rows: rows, children: [
+            _jsx(Heading, { text: "Board", note: hiddenNote(board.tickets.length, hiddenTickets(entries, start, end)) }, "h"),
+            ...(entries.length === 0
+                ? [
+                    _jsx(Text, { color: UI.dim, children: "No tickets yet." }, "empty"),
+                ]
+                : entries.slice(start, end).map((entry) => entry.kind === "heading" ? (_jsxs(Text, { color: inkColor(statusTone(entry.status)), wrap: "truncate", children: [statusLabel(entry.status), " ", _jsxs(Text, { color: UI.dim, children: ["(", entry.count, ")"] })] }, entry.key)) : (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: UI.accent, children: entry.key === cursor ? "›" : " " }) }), _jsx(Box, { width: 8, flexShrink: 0, children: _jsx(Text, { color: UI.text, bold: true, wrap: "truncate", children: entry.ticket.key }) }), _jsx(Text, { color: entry.ticket.stuck ? UI.warn : UI.text, inverse: entry.key === cursor, wrap: "truncate", children: truncate(entry.ticket.title, title - 2) })] }, entry.key)))),
+        ] }));
+}
+export function AgentsColumn({ board, width, rows, }) {
+    // Whoever is working comes first. An idle registry is what you scroll past.
+    const ordered = [...board.agents].sort((left, right) => {
+        const busy = (id) => board.runs.some((run) => run.agent_id === id && run.status === "running") ? 0 : 1;
+        return busy(left.id) - busy(right.id) || left.display_name.localeCompare(right.display_name);
+    });
+    const shown = ordered.slice(0, contentRows(rows, ordered.length));
+    return (_jsx(Panel, { width: width, rows: rows, children: [
+            _jsx(Heading, { text: "Agents", note: `${board.agents.filter((a) => a.enabled).length} on` }, "h"),
+            ...(board.agents.length === 0
+                ? [
+                    _jsx(Text, { color: UI.dim, children: "No agents yet." }, "empty"),
+                ]
+                : []),
+            ...shown.map((agent) => {
+                const run = board.runs.find((row) => row.agent_id === agent.id && row.status === "running");
+                const ticket = run?.ticket_id
+                    ? board.tickets.find((item) => item.id === run.ticket_id)
+                    : undefined;
+                const availability = board.availability.find((row) => row.provider === agent.provider);
+                const blocked = availability && !availability.available ? availabilityLabel(availability) : "";
+                const tone = !agent.enabled ? "muted" : run ? "blue" : blocked ? "warning" : "muted";
+                const name = Math.max(8, Math.min(22, width - 14));
+                return (_jsxs(Box, { flexWrap: "nowrap", children: [_jsxs(Text, { color: inkColor(tone), children: [DOT, " "] }), _jsx(Box, { width: name, flexShrink: 0, children: _jsx(Text, { color: UI.text, wrap: "truncate", children: truncate(agent.display_name, name - 1) }) }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: run
+                                ? `${ticket ? `${ticket.key} ` : ""}${elapsed(run.started_at ?? run.created_at)}`
+                                : blocked || (agent.enabled ? "idle" : "off") })] }, agent.id));
+            }),
+            _jsx(More, { count: ordered.length - shown.length }, "more"),
+        ] }));
+}
+const KIND_COLOR = {
+    error: UI.danger,
+    tool: UI.dim,
+    status: UI.dim,
+    text: UI.text,
+};
+/**
+ * What the agents are doing, as it arrives. The panel is a fixed height on
+ * purpose: it is the one thing here that grows without limit, and a live frame
+ * that outgrows the window stops repainting in place.
+ */
+export function StreamPanel({ lines, width, rows, live, }) {
+    const name = Math.max(8, Math.min(18, Math.round(width / 5)));
+    const budget = Math.max(0, rows - 1);
+    return (_jsx(Panel, { width: width, rows: rows, children: [
+            _jsx(Heading, { text: "Activity", note: live ? "" : "idle" }, "h"),
+            ...(lines.length === 0
+                ? [
+                    _jsx(Text, { color: UI.dim, children: live ? "Waiting for the first step." : "Nothing running." }, "empty"),
+                ]
+                : []),
+            ...lines.slice(-budget).map((line) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: name, flexShrink: 0, children: _jsx(Text, { color: UI.dim, wrap: "truncate", children: truncate(line.agent, name - 1) }) }), _jsxs(Text, { color: KIND_COLOR[line.kind], wrap: "truncate", children: [line.kind === "tool" ? "· " : "", truncate(line.title, Math.max(12, width - name - 3))] })] }, line.id))),
+        ] }));
+}
+/** How many rows the epics strip wants, heading included, or none. */
+export function epicsRows(board, cap = 3) {
+    const open = epicProgress(board).filter((row) => row.epic.status !== "done");
+    return open.length === 0 ? 0 : Math.min(open.length, cap) + 1;
+}
+/**
+ * Epic progress, above the board it explains. Capped hard: this is the summary
+ * line, and the tickets underneath are what you are here to read.
+ */
+export function EpicsStrip({ board, width, rows }) {
+    const open = epicProgress(board).filter((row) => row.epic.status !== "done");
+    if (open.length === 0 || rows < 2)
+        return null;
+    const shown = open.slice(0, contentRows(rows, open.length));
+    const title = Math.max(12, Math.min(52, width - 24));
+    return (_jsx(Panel, { width: width, rows: rows, children: [
+            _jsx(Heading, { text: "Epics", note: `${open.length}` }, "h"),
+            ...shown.map((row) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: title, flexShrink: 0, children: _jsx(Text, { color: UI.text, wrap: "truncate", children: truncate(row.epic.title, title - 1) }) }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: epicProgressCaption(row.merged, row.total, row.cancelled) })] }, row.epic.id))),
+            _jsx(More, { count: open.length - shown.length }, "more"),
+        ] }));
+}
+/** The board and the agents together, side by side when there is room. */
+export function Cockpit({ board, width, rows, cursor, }) {
+    // The epics strip is spent out of the same budget, so adding it shortens the
+    // board rather than making the frame taller.
+    const epics = Math.min(epicsRows(board), Math.max(0, rows - 4));
+    const rest = rows - (epics > 0 ? epics + 1 : 0);
+    const columns = renderColumns(board, width, rest, cursor);
+    if (epics === 0)
+        return columns;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(EpicsStrip, { board: board, width: width, rows: epics }), _jsx(Box, { height: 1 }), columns] }));
+}
+function renderColumns(board, width, rows, cursor) {
+    const split = splitWidths(width);
+    if (!split) {
+        // Stacked, so the two share the budget instead of each taking all of it,
+        // and the blank row between them is spent out of the same allowance. When
+        // there is not enough for both, the agents win: a board cropped to one
+        // heading says less than a short list of who is working.
+        const agents = Math.max(1, Math.min(board.agents.length + 1, Math.floor(rows / 3)));
+        const boardRows = Math.max(0, rows - agents - 1);
+        return (_jsxs(Box, { flexDirection: "column", children: [boardRows > 0 ? (_jsx(BoardColumn, { board: board, width: width, rows: boardRows, cursor: cursor })) : null, boardRows > 0 ? _jsx(Box, { height: 1 }) : null, _jsx(AgentsColumn, { board: board, width: width, rows: agents })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "row", flexWrap: "nowrap", children: [_jsx(BoardColumn, { board: board, width: split.board, rows: rows, cursor: cursor }), _jsx(Box, { width: 1, flexShrink: 0 }), _jsx(AgentsColumn, { board: board, width: split.agents, rows: rows })] }));
+}

package/dist/tui/Decision.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { relativeTime, truncate } from "../out/format.js";
+import { clipToRows } from "./Panels.js";
+import { decisionOptions } from "./data.js";
+import { UI } from "./theme.js";
+/**
+ * Everything the panel spends that is not question or options: two rows of
+ * frame, the heading, the line saying how to answer, and the blank row after.
+ */
+const DECISION_CHROME = 5;
+/**
+ * Rows the flag wants, so the caller can take them out of the panel budget
+ * before anything is drawn. Zero when nothing is waiting.
+ */
+export function decisionRows(decisions, cap = 9) {
+    if (decisions.length === 0)
+        return 0;
+    // Two rows of question is the least worth reading, and the options after it.
+    return Math.min(cap, DECISION_CHROME + 2 + decisionOptions(decisions[0]).length);
+}
+/**
+ * A decision waiting on you, in the way of the prompt rather than counted in
+ * the status line. This is the one thing in the frame that is not a report:
+ * nothing moves on the ticket it blocks until it is answered, so it stays in
+ * front of you until it is.
+ */
+export function DecisionPanel({ decisions, board, width, rows, }) {
+    if (decisions.length === 0)
+        return null;
+    const decision = decisions[0];
+    const ticket = board?.tickets.find((row) => row.id === decision.ticket_id);
+    const options = decisionOptions(decision);
+    const inner = Math.max(8, width - 4);
+    const forBody = rows - DECISION_CHROME;
+    // Too little room for a frame at all. The flag still has to appear, so it
+    // shrinks to the one line that says something is waiting and how to answer.
+    if (forBody < 1) {
+        return (_jsxs(Box, { width: width, flexWrap: "nowrap", children: [_jsx(Text, { color: UI.warn, bold: true, wrap: "truncate", children: decisions.length > 1 ? `${decisions.length} decisions waiting` : "Decision waiting" }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: `  ${truncate(decision.question_md, Math.max(8, width - 26))}  /decide` })] }));
+    }
+    // The question gets a row before any option does, and the options take what
+    // is left after it.
+    const optionRows = Math.min(options.length, Math.max(0, forBody - 1));
+    const question = clipToRows(decision.question_md.trim(), inner, forBody - optionRows);
+    return (_jsxs(Box, { borderStyle: "single", borderColor: UI.warn, flexDirection: "column", paddingX: 1, width: width, marginBottom: 1, children: [_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Text, { color: UI.warn, bold: true, wrap: "truncate", children: decisions.length > 1 ? `Decision 1 of ${decisions.length}` : "Decision" }), _jsxs(Text, { color: UI.dim, wrap: "truncate", children: [ticket ? `  ${ticket.key}` : "", `  asked by ${decision.asked_by_role}`, `  ${relativeTime(decision.created_at)}`] })] }), _jsx(Text, { color: UI.text, wrap: "wrap", children: question }), options.slice(0, optionRows).map((option, index) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: 3, flexShrink: 0, children: _jsxs(Text, { color: UI.accent, children: [index + 1, ")"] }) }), _jsx(Text, { color: UI.text, wrap: "truncate", children: truncate(option, Math.max(8, inner - 4)) })] }, index))), _jsx(Text, { color: UI.dim, wrap: "truncate", children: options.length
+                    ? `/decide 1 to ${options.length}, or /decide <your answer>`
+                    : "/decide <your answer>" })] }));
+}

package/dist/tui/Help.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { UI } from "./theme.js";
+import { helpNameColumn } from "./height.js";
+export const HELP_FOOTER = "Anything not starting with / goes to whoever you are talking to. Ctrl-C leaves.";
+/** Everything you can type. The app is driven from here, not from flags. */
+export const COMMANDS = [
+    { name: "/board", help: "the kanban board" },
+    { name: "/inbox", help: "decisions and messages waiting on you" },
+    { name: "/ticket", args: "HD-12", help: "open one ticket" },
+    { name: "/decide", args: "2 | text", help: "answer the decision on screen" },
+    { name: "/agents", help: "every agent in full, and the live run stream" },
+    { name: "/settings", help: "change provider caps and agent settings" },
+    { name: "/workspace", args: "[slug]", help: "switch workspace, or list the ones you can reach" },
+    { name: "/feed", help: "what just happened" },
+    { name: "/orchestrator", help: "talk to the agent that gets work in flight finished" },
+    { name: "/refresh", help: "reload the board now" },
+    { name: "/help", help: "this list" },
+    { name: "/exit", help: "leave" },
+];
+/**
+ * One line saying the list exists, for a window too short to hold it. `/help`
+ * prints the list into the log, which scrolls, so nothing is out of reach.
+ */
+export function HelpHint({ width }) {
+    return (_jsx(Box, { width: width, marginBottom: 1, flexWrap: "nowrap", children: _jsx(Text, { color: UI.dim, wrap: "truncate", children: `${COMMANDS.length} commands. Type /help for the list, or just say what you want.` }) }));
+}
+export function Help({ width }) {
+    return (_jsxs(Box, { borderStyle: "single", borderColor: UI.text, flexDirection: "column", paddingX: 2, width: width, children: [_jsx(Text, { color: UI.text, bold: true, children: "Commands" }), COMMANDS.map((command) => (_jsxs(Box, { flexWrap: "nowrap", children: [_jsx(Box, { width: helpNameColumn(COMMANDS), flexShrink: 0, children: _jsxs(Text, { color: UI.text, wrap: "truncate", children: [command.name, command.args ? ` ${command.args}` : ""] }) }), _jsx(Text, { color: UI.dim, wrap: "truncate", children: command.help })] }, command.name))), _jsx(Text, { color: UI.dim, children: HELP_FOOTER })] }));
+}