@impeccable/reviews 0.1.0

package/dist/ui/look.js

@@ -0,0 +1,368 @@
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+import { fitsTask, taskInProgress, workStarted } from '../stages.js';
+/**
+ * How the wizard's screens look, drawn as lines from what they show and the
+ * terminal's size, with no terminal behind them: the smoke renders every
+ * screen this way at any width. Every screen is one frame: a box holding the
+ * mark, one heading, a line or two of supporting text, a divider, the action
+ * line and at most two ways on, everything centered, with the version under
+ * the box on the right. Only the middle changes from screen to screen.
+ */
+export const PRODUCT = 'Impeccable for PRs';
+export const FEEDBACK = 'support@renaissance-geek.ai';
+/** The box fills the terminal up to this size, then sits in the middle of it. */
+const BOX_WIDTH = 100;
+const BOX_HEIGHT = 32;
+/** The widest supporting text runs, so it reads as a line or two. */
+const TEXT_WIDTH = 60;
+/** The widest an answer field runs. */
+const FIELD_WIDTH = 48;
+/** The running task's spinner: one glyph every third frame. */
+const SPINNER = ['◐', '◓', '◑', '◒'];
+const START = { heading: "Let's set up your app", text: 'This wizard detects your framework and wires up all the essentials.' };
+/** The invitation to the test drive, on whichever end screen shows it; the words "test drive" stay off it. */
+export const SEE_THE_REVIEW = 'See Impeccable review a change: we opened a small pull request just for that.';
+const WORDMARK = 'I M P E C C A B L E';
+/** The wordmark, IMPECCABLE with for PRs beside it on one row, centered; plain text on a dumb terminal. */
+function markRows(inner, drawing, ink) {
+    if (drawing === 'plain')
+        return [center('/ IMPECCABLE  for PRs', inner), ''];
+    return [center(`${ink.heading(WORDMARK)}  ${ink.soft('for PRs')}`, inner), ''];
+}
+export function palette(background, drawing = 'blocks') {
+    const sgr = (on, off) => (s) => `\x1b[${on}m${s}\x1b[${off}m`;
+    const link = (url, text = url) => `\x1b]8;;${url}\x1b\\${text}\x1b]8;;\x1b\\`;
+    if (!background || process.env.NO_COLOR) {
+        const bold = sgr('1', '22');
+        const dim = sgr('2', '22');
+        const ink = { full: bold, soft: (s) => s, faint: dim, heading: bold };
+        return { ...ink, mark: (inner) => markRows(inner, drawing, ink), link };
+    }
+    const { r, g, b } = background;
+    const ink = 0.299 * r + 0.587 * g + 0.114 * b < 128 ? 255 : 0;
+    const grey = (p) => [r, g, b].map((c) => Math.round(c + p * (ink - c))).join(';');
+    const fg = (p) => sgr(`38;2;${grey(p)}`, '39');
+    const levels = { full: fg(1), soft: fg(0.7), faint: fg(0.4), heading: (s) => `\x1b[1m${fg(1)(s)}\x1b[22m` };
+    return { ...levels, mark: (inner) => markRows(inner, drawing, levels), link };
+}
+export const OUTCOME = { done: '✓', partial: '!', stopped: '✗' };
+/** A line centered in `width`, cut short when it does not fit. */
+function center(line, width) {
+    const w = visibleWidth(line);
+    return w >= width ? truncateToWidth(line, width, '…') : ' '.repeat(Math.floor((width - w) / 2)) + line;
+}
+/** Lines that share one left edge, centered together as a block `size` wide (their widest, unless given): a list whose marks line up. */
+function block(lines, width, size = Math.max(0, ...lines.map((line) => visibleWidth(line)))) {
+    const left = ' '.repeat(Math.max(0, Math.floor((width - Math.min(size, width)) / 2)));
+    return lines.map((line) => left + truncateToWidth(line, width - left.length, '…'));
+}
+/** Plain text wrapped to at most `max` columns: a sentence a line when each fits, else lines as even as the words allow. */
+function balanced(text, max) {
+    const sentences = text.split(/(?<=[.!?])\s+/);
+    if (sentences.length > 1 && sentences.every((line) => visibleWidth(line) <= max))
+        return sentences;
+    const lines = wrapTextWithAnsi(text, Math.max(10, max));
+    for (let w = Math.ceil(visibleWidth(text) / lines.length); lines.length > 1 && w < max; w++) {
+        const even = wrapTextWithAnsi(text, w);
+        if (even.length === lines.length)
+            return even;
+    }
+    return lines;
+}
+/** Supporting text: wrapped, soft, each line centered. */
+const said = (text, inner, st) => balanced(text, Math.min(TEXT_WIDTH, inner)).map((line) => center(st.soft(line), inner));
+/** Wrapped text whose first line starts with `first` and the rest line up under it. */
+const hang = (text, width, first) => wrapTextWithAnsi(text, Math.max(10, width - first.length)).map((line, i) => (i ? ' '.repeat(first.length) : first) + line);
+/** An address cut into rows no wider than `width`, after a slash where one falls in the row's last two thirds, each linking to the whole of it, so any row opens it. */
+function urlRows(url, width, ink, st) {
+    const size = Math.max(10, width);
+    const rows = [];
+    for (let rest = url; rest;) {
+        const slash = rest.length > size ? rest.lastIndexOf('/', size - 1) + 1 : 0;
+        const cut = rest.length <= size ? rest.length : slash > size / 3 ? slash : size;
+        rows.push(rest.slice(0, cut));
+        rest = rest.slice(cut);
+    }
+    return rows.map((row) => st.link(url, ink(row)));
+}
+/** A label, softer, over its address. */
+const linkLines = (label, url, inner, st) => [center(st.soft(label), inner), ...block(urlRows(url, ruleWidth(inner), st.full, st), inner)];
+/** The way to put a link on the clipboard, while it is not there yet. */
+const copyWay = (inner, st) => center(`${st.soft('Copy link')} ${st.faint('[C]')}`, inner);
+/** A pull request the screen is about: its link, whole, and under it that it is on the clipboard, or the way to put it there. */
+const pullAction = (url, copied, inner, st) => [
+    ...block(urlRows(url, ruleWidth(inner), st.full, st), inner),
+    copied ? center(st.soft('Copied to clipboard!'), inner) : copyWay(inner, st),
+];
+/** What waits on the person, under the supporting text: two lines at most, the rest counted. */
+function leftLines(todo, inner, st) {
+    const shown = todo.length > 2 ? [todo[0], `${todo.length - 1} more in the report`] : todo;
+    return shown.map((line) => center(st.soft(`→ ${line}`), inner));
+}
+/** The ways on, the first at full intensity and the second softer, each with its key in brackets. */
+const waysOn = (ways, st) => ways.map(([label, key], i) => `${i ? st.soft(label) : st.full(label)} ${st.faint(`[${key}]`)}`).join('      ');
+const ruleWidth = (inner) => Math.min(inner, Math.max(20, Math.round(inner * 0.72)));
+const divider = (inner, st) => st.faint('─'.repeat(ruleWidth(inner)));
+/** Nine faint dots, one full dot passing along them and back, a dot every other frame. */
+const dots = (_width, frame, st) => {
+    const count = 9;
+    const step = Math.floor(frame / 2) % (2 * (count - 1));
+    const lit = step < count ? step : 2 * (count - 1) - step;
+    return [Array.from({ length: count }, (_, i) => (i === lit ? st.full('●') : st.faint('·'))).join('  ')];
+};
+const loader = dots;
+/**
+ * The action in `room` rows: whole when it fits, else a window over it that
+ * opens at the top when that shows its `at` line, else around it, and moves
+ * `scroll.by` rows from there, a faint line in its first or last row saying
+ * how many more lie that way.
+ */
+function windowed(lines, room, at, scroll, inner, st) {
+    const last = Math.max(0, lines.length - room);
+    const home = at <= room - 2 ? 0 : Math.min(Math.max(0, at - Math.floor(room / 2)), last);
+    const top = Math.min(Math.max(0, home + scroll.by), last);
+    // Under three rows there is no room to say how many more lie above or below.
+    const [above, below] = [room >= 3 && top > 0, room >= 3 && top < last];
+    scroll.by = top - home;
+    scroll.page = Math.max(1, room - 2);
+    scroll.hidden = at < top + Number(above) || at > top + room - 1 - Number(below);
+    if (!last)
+        return lines;
+    const shown = lines.slice(top, top + room);
+    const more = (from, to) => lines.slice(from, to).filter(Boolean).length;
+    if (above)
+        shown[0] = center(st.faint(`… ${more(0, top + 1)} more above`), inner);
+    if (below)
+        shown[room - 1] = center(st.faint(`… ${more(top + room - 1, lines.length)} more below`), inner);
+    return shown;
+}
+/** An answer field in a box `width` wide, its label in the top edge, the line the field draws inside without its prompt (the input's `> ` or the wizard's `› `): full while it has the cursor, faint otherwise. */
+function fieldBox(label, line, width, focused, st) {
+    const edge = focused ? st.full : st.faint;
+    const value = truncateToWidth(line.replace(/^[›>] /, ''), width - 4, '');
+    const top = label ? `┌ ${label} ${'─'.repeat(Math.max(0, width - visibleWidth(label) - 4))}┐` : `┌${'─'.repeat(width - 2)}┐`;
+    return [edge(top), `${edge('│')} ${(focused ? st.full : st.soft)(value)}${' '.repeat(Math.max(0, width - 4 - visibleWidth(value)))} ${edge('│')}`, edge(`└${'─'.repeat(width - 2)}┘`)];
+}
+function questionPage(qv, inner, st) {
+    const { q } = qv;
+    const note = qv.note ? [center(st.full(qv.note), inner)] : [];
+    // Go on or skip: the text under the title, then the question itself as the action line, and two ways on the question names.
+    if (q.kind === 'confirm') {
+        return {
+            heading: q.title ?? 'A question for you',
+            text: q.hint ? said(q.hint, inner, st) : [],
+            rule: divider(inner, st),
+            action: [center(st.full(q.prompt), inner), ...note],
+            asks: true,
+            ways: [[q.confirmLabel ?? 'Continue', 'Enter'], [q.skipLabel ?? 'Skip', 'Esc']],
+        };
+    }
+    // One test account: both fields under the divider, each in a box with its label in the top edge, the password as dots.
+    if (q.kind === 'account') {
+        const width = Math.min(FIELD_WIDTH, inner);
+        const label = (text) => `  ${st.soft(text)}`;
+        const hint = q.hint ? [...wrapTextWithAnsi(q.hint, width - 2).map(label), ''] : [];
+        const fields = [...fieldBox('Username or email', qv.field(width - 2), width, qv.focus !== 1, st), ...fieldBox('Password', qv.password?.() ?? '', width, qv.focus === 1, st)];
+        return {
+            heading: q.title ?? 'A test account',
+            text: said(q.prompt, inner, st),
+            rule: divider(inner, st),
+            action: [...block([...hint, ...fields], inner, width), ...note],
+            at: hint.length + (qv.focus === 1 ? 4 : 1),
+            asks: true,
+            ways: [['Continue', 'Enter'], ['Skip', 'Esc']],
+        };
+    }
+    const choices = q.kind !== 'text' && q.options?.length ? q.options : null;
+    const hint = q.hint && choices ? said(q.hint, inner, st) : [];
+    const after = [
+        ...(choices ? [center(st.faint(q.kind === 'multi' ? 'Move [↑↓]   Pick [Space]' : 'Choose [↑↓]'), inner)] : []),
+        ...note,
+    ];
+    // A field's hint is its label, in the box's top edge when it fits there, else over the box on the same left edge.
+    const field = Math.min(FIELD_WIDTH, inner);
+    const edged = q.hint && visibleWidth(q.hint) <= field - 6 ? q.hint : '';
+    const label = q.hint && !edged ? wrapTextWithAnsi(q.hint, field - 2).map((line) => `  ${st.soft(line)}`) : [];
+    const lines = (choices ?? []).map((option, i) => {
+        const here = i === qv.cursor;
+        const mark = q.kind === 'single' ? (here ? '●' : '○') : qv.picked.has(i) ? '[x]' : '[ ]';
+        return (here ? st.full : st.soft)(`${here ? '›' : ' '} ${mark} ${option.label}`);
+    });
+    const widest = Math.max(0, ...lines.map((line) => visibleWidth(line)));
+    return {
+        heading: q.title ?? 'A question for you',
+        text: said(q.prompt, inner, st),
+        rule: divider(inner, st),
+        action: choices ? [...hint, ...block(lines, inner, widest), ...after] : [...block([...label, ...fieldBox(edged, qv.field(field - 2), field, true, st)], inner, field), ...after],
+        at: choices ? hint.length + qv.cursor : label.length + 1,
+        asks: true,
+        ways: [['Continue', 'Enter'], ...(q.skippable ? [['Skip', 'Esc']] : [])],
+    };
+}
+/**
+ * The run: understanding the app, the status band's two rows under the
+ * loader, until the work after reading starts; then the tasks alone. The
+ * status line is the detail of the reading: a line about another task leaves
+ * its row empty.
+ */
+function runPage(scene, f, inner, st) {
+    const glyph = SPINNER[Math.floor((f.motion?.frame ?? 0) / 3) % SPINNER.length];
+    const task = taskInProgress(scene.tasks);
+    const [previous, current] = [scene.band.previous, scene.band.current].map((line) => (line && (!task || fitsTask(line, task)) ? line : undefined));
+    const status = [
+        previous ? center(st.faint(previous), inner) : '',
+        current ? center(`${f.motion?.at === 'status' ? `${st.full(glyph)} ` : ''}${st.soft(current)}`, inner) : '',
+    ];
+    const around = { ways: f.stopping ? [['Stop the setup', 'Esc']] : undefined };
+    if (!workStarted(scene.tasks))
+        return { heading: 'Understanding your app', rule: loader(inner, f.motion?.frame ?? 0, st), action: status, ...around };
+    const running = scene.tasks.findIndex((t) => t.status === 'in_progress');
+    const lines = scene.tasks.map((t, i) => {
+        const mark = t.status === 'completed' ? '✓'
+            : t.status === 'in_progress' ? (i === running && f.motion?.at === 'task' ? glyph : '•')
+                : t.status === 'failed' ? '✗'
+                    : t.status === 'skipped' ? '–'
+                        : '○';
+        const ink = t.status === 'in_progress' || t.status === 'failed' ? st.full : t.status === 'skipped' ? st.faint : st.soft;
+        // The task in progress carries the wait's timer, so a screen waiting on a host's build is never still.
+        const detail = t.status === 'skipped' || t.status === 'failed' ? t.status : i === running && scene.wait ? scene.wait : undefined;
+        return ink(`${mark} ${t.title}${detail ? ` · ${detail}` : ''}`);
+    });
+    const counted = scene.tasks.filter((t) => t.status !== 'skipped');
+    const skipped = scene.tasks.length - counted.length;
+    const widest = Math.max(...lines.map((line) => visibleWidth(line)));
+    return {
+        heading: 'Setting up',
+        text: said(`${counted.filter((t) => t.status === 'completed').length} of ${counted.length} done${skipped ? ` · ${skipped} skipped` : ''}`, inner, st),
+        rule: divider(inner, st),
+        action: block(lines, inner, widest),
+        at: running >= 0 ? running : Math.max(0, scene.tasks.findIndex((t) => t.status === 'pending')),
+        ...around,
+    };
+}
+function outroPage(scene, inner, st) {
+    const { outro } = scene;
+    if (outro.link) {
+        return {
+            heading: outro.title,
+            text: [...said(outro.result, inner, st), ...leftLines(outro.todo, inner, st), ...outro.warnings.map((line) => center(st.soft(`! ${line}`), inner))],
+            rule: divider(inner, st),
+            action: pullAction(outro.link, scene.copied, inner, st),
+            ways: scene.leaving ? undefined : [['Close', 'Enter']],
+        };
+    }
+    const width = Math.min(TEXT_WIDTH, inner);
+    const notes = [...outro.todo.flatMap((line) => hang(line, width, '→ ').map(st.full)), ...outro.warnings.flatMap((line) => hang(line, width, '! ').map(st.soft))];
+    const links = outro.links.flatMap((l) => linkLines(l.label, l.url, inner, st));
+    return {
+        heading: outro.title,
+        text: said(outro.result, inner, st),
+        rule: divider(inner, st),
+        action: [...block(notes, inner), ...(notes.length && links.length ? [''] : []), ...links, ...(outro.links.length === 1 ? [scene.copied ? center(st.soft('Copied to clipboard!'), inner) : copyWay(inner, st)] : [])],
+        ways: scene.leaving ? undefined : [['Close', 'Enter']],
+        foot: outro.outcome === 'stopped' ? [center(st.faint(`Questions? Write to ${FEEDBACK}`), inner)] : undefined,
+    };
+}
+function pageOf(f, inner) {
+    const st = f.style;
+    if (f.question)
+        return questionPage(f.question, inner, st);
+    const { scene } = f;
+    switch (scene.kind) {
+        case 'wait':
+            return { heading: START.heading, text: said(START.text, inner, st), rule: divider(inner, st), action: [center(st.faint('One moment…'), inner)] };
+        case 'intro':
+            return { heading: START.heading, text: said(START.text, inner, st), rule: divider(inner, st), action: [center(st.full("Let's start with login"), inner)], ways: [['Continue', 'Enter']] };
+        case 'signin': {
+            // P still takes a pasted code on a remote shell; --help says so, the screen does not.
+            const under = scene.note ?? (scene.copied ? 'Copied to clipboard!' : '');
+            const link = block(urlRows(scene.link, ruleWidth(inner), st.soft, st), inner);
+            return {
+                heading: scene.again ? 'Sign in again' : START.heading,
+                text: said(scene.again ? 'Your sign-in ran out. Approve again in your browser to carry on.' : 'Sign in with GitHub in your browser, then approve this repository.', inner, st),
+                rule: divider(inner, st),
+                action: [...link, ...(under ? ['', center(st.full(under), inner)] : []), ...(scene.copied === false ? ['', copyWay(inner, st)] : [])],
+            };
+        }
+        case 'run':
+            return runPage(scene, f, inner, st);
+        case 'pull':
+            return {
+                heading: 'Your first review is on its way',
+                text: said(SEE_THE_REVIEW, inner, st),
+                rule: divider(inner, st),
+                action: pullAction(scene.url, scene.copied, inner, st),
+                ways: [['Continue', 'Enter']],
+            };
+        case 'outro':
+            return outroPage(scene, inner, st);
+    }
+}
+/**
+ * The page top down in `rows` rows. The mark and the heading keep their rows
+ * on every screen of a terminal this tall, so only the middle changes; the
+ * parts under them sit two blank rows apart while they fit. On a terminal too
+ * short for the page, rows give way in one order: the blank rows (from the
+ * bottom up, two to one, then none, the space above the heading last), the
+ * faint lines at the foot, the supporting text from its end (a question's
+ * prompt excepted), the mark, the divider. The heading and the ways on stay,
+ * and the action keeps every line: when it still does not fit, it scrolls
+ * between them, a question's prompt at its top, the ways on in the last row.
+ */
+function stack(page, inner, rows, st, scroll) {
+    const heading = [center(st.heading(page.heading), inner)];
+    const ways = page.ways ? [center(waysOn(page.ways, st), inner)] : [];
+    let mark = st.mark(inner);
+    let text = page.text ?? [];
+    let rule = page.rule === undefined ? [] : [page.rule].flat().map((row) => center(row, inner));
+    let foot = page.foot ?? [];
+    const over = () => [mark, heading, text, rule, page.action, ways, foot].reduce((n, part) => n + part.length, 0) - rows;
+    if (over() > 0)
+        foot = [];
+    if (over() > 0 && over() < text.length && !page.asks) {
+        const keep = text.length - over();
+        text = [...text.slice(0, keep - 1), `${text[keep - 1]}${st.soft('…')}`];
+    }
+    if (over() > 0 && !page.asks)
+        text = [];
+    if (over() > 0)
+        mark = [];
+    if (over() > 0)
+        rule = [];
+    // Past this point a question's prompt scrolls with its field or choices, a blank row under it.
+    const lead = over() > 0 && page.asks ? [...text, ''] : [];
+    if (lead.length)
+        text = [];
+    const action = windowed([...lead, ...page.action], page.action.length - over(), lead.length + (page.at ?? 0), scroll, inner, st);
+    const parts = [mark, heading, text, rule, action, ways, foot].filter((part) => part.length);
+    // space[i] is the blank rows before part i, and the last is under the page; the mark's and the heading's come first.
+    const head = rows >= 26 ? 2 : rows >= 12 ? 1 : 0;
+    const space = [...parts.map((_, i) => (i <= mark.length ? head : 2)), 2];
+    const size = () => parts.reduce((n, part) => n + part.length, 0) + space.reduce((n, s) => n + s, 0);
+    const squeeze = (to, from) => {
+        for (let i = space.length - 1; i >= from && size() > rows; i--)
+            space[i] = Math.min(space[i], to);
+    };
+    squeeze(1, mark.length + 1);
+    squeeze(0, mark.length + 1);
+    squeeze(0, 0);
+    const lines = parts.flatMap((part, i) => [...Array(space[i]).fill(''), ...part]);
+    return Array.from({ length: rows }, (_, i) => lines[i] ?? '');
+}
+/** One whole screen: exactly `height` lines, none wider than `width`. */
+export function drawFrame(f) {
+    const st = f.style;
+    const width = Math.max(12, Math.min(f.width, BOX_WIDTH));
+    const height = Math.max(3, Math.min(f.height - 1, BOX_HEIGHT));
+    const inner = width - 4;
+    const left = ' '.repeat(Math.max(0, Math.floor((f.width - width) / 2)));
+    const version = st.faint(`Version v${f.version}`);
+    const lines = [
+        ...Array(Math.max(0, Math.floor((f.height - 1 - height) / 2))).fill(''),
+        left + st.soft(`┌${'─'.repeat(width - 2)}┐`),
+        ...stack(pageOf(f, inner), inner, height - 2, st, f.scroll ?? { by: 0, page: 1, hidden: false }).map((line) => `${left}${st.soft('│')} ${truncateToWidth(line, inner, '…', true)} ${st.soft('│')}`),
+        left + st.soft(`└${'─'.repeat(width - 2)}┘`),
+        left + ' '.repeat(Math.max(0, width - visibleWidth(version))) + version,
+    ];
+    return Array.from({ length: Math.max(1, f.height) }, (_, i) => truncateToWidth(lines[i] ?? '', f.width, '…'));
+}

package/dist/ui/run-state.js

@@ -0,0 +1,91 @@
+import { statusLine } from '../sync.js';
+/** The `[STATUS]` line an event carries: an assistant message that starts with one, tag stripped. */
+export function statusFromEvent(event) {
+    return event.type === 'message_end' ? statusLine(event.message) : null;
+}
+/** After this long with nothing new on screen, the status band says the run is still working. */
+const SILENCE_MS = 60_000;
+/** How long something has taken, the way the screen says it: "45 s", "2 min", "1 h 5 min". */
+export function elapsed(ms) {
+    const s = Math.max(0, Math.floor(ms / 1000));
+    if (s < 60)
+        return `${s} s`;
+    const min = Math.floor(s / 60);
+    return min < 60 ? `${min} min` : `${Math.floor(min / 60)} h${min % 60 ? ` ${min % 60} min` : ''}`;
+}
+/** A wait's timer, to the second: "0:45", "4:59". */
+function timer(ms) {
+    const s = Math.max(0, Math.floor(ms / 1000));
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+/** What the run screen shows: the task list and the status band's two most recent lines. */
+export class RunState {
+    now;
+    tasks = [];
+    previous;
+    current;
+    /** A bounded wait under way: the current line carries its timer, counting up to the limit. */
+    waiting;
+    /** When something last changed on screen: a status, the task list, an answered question. */
+    changedAt;
+    constructor(now = Date.now, first) {
+        this.now = now;
+        this.changedAt = now();
+        this.current = first;
+    }
+    /** A new current line, which ends the wait the last one carried. */
+    status(line) {
+        const text = line.trim().replace(/^\[STATUS\]\s*/, '').split('\n')[0].trim();
+        if (!text)
+            return;
+        if (text !== this.current) {
+            this.previous = this.current;
+            this.current = text;
+        }
+        this.waiting = undefined;
+        this.touch();
+    }
+    /** A bounded wait starts, its status line reported just before, or ends. */
+    wait(wait) {
+        this.waiting = wait ?? undefined;
+        this.touch();
+    }
+    /**
+     * The wait's timer, "1:05 of 5:00", while one is under way: the task in progress carries it on the tasks screen.
+     * `live` false gives the wait's start, "0:00 of 5:00", the same on every tick: a drawing that changes only when
+     * a wait begins or ends, so the frames record the wait once rather than once a second.
+     */
+    timer(live = true) {
+        return this.waiting ? `${timer(live ? this.now() - this.waiting.since : 0)} of ${timer(this.waiting.limitMs)}` : undefined;
+    }
+    setTasks(tasks) {
+        this.tasks = tasks.map((t) => ({ ...t }));
+        this.touch();
+    }
+    /** Something happened that the person saw, so the silence starts again. */
+    touch() {
+        this.changedAt = this.now();
+    }
+    /**
+     * The band's two lines as they read now: after a minute with nothing new the
+     * last line moves up, dimmed, under "Still working…" and the time since.
+     * `quiet` is false while the person is being asked. During a bounded wait
+     * the current line carries the timer, "1:05 of 5:00", so the screen never
+     * looks stalled; `live` false holds the timer at the wait's start, for a
+     * drawing that changes only when the words do.
+     */
+    band(quiet = true, live = true) {
+        if (this.waiting && this.current) {
+            return { previous: this.previous, current: `${this.current} · ${this.timer(live)}` };
+        }
+        const silence = this.now() - this.changedAt;
+        if (quiet && silence >= SILENCE_MS)
+            return { previous: this.current, current: `Still working… ${elapsed(silence)}` };
+        return { previous: this.previous, current: this.current };
+    }
+    /** Completed tasks out of all but the skipped ones. */
+    progress() {
+        const counted = this.tasks.filter((t) => t.status !== 'skipped');
+        return { completed: counted.filter((t) => t.status === 'completed').length, total: counted.length };
+    }
+}