sign-off-axi 0.4.4 → 0.4.6

package/dist/cli.js

@@ -10,8 +10,9 @@ import { basename, delimiter, dirname, extname, isAbsolute, join, relative, reso
 import { parseArgs } from 'node:util';
 import { encode } from '@toon-format/toon';
 import { AxiError, runAxiCli } from 'axi-sdk-js';
-import { CHAPTERS_MAX, SIGNED_IN, CLEARED, InputError, MEDIA_MAX, NOTE_MAX, REPLY, answersPath, appendAnnotation, appendAnswer, appendDismissed, appendSendBack, appendDesignAnswer, appendMessage, appendRound, isKey, loadDecisions, markDelivered, markSeen, messagesPath, readAnnotations, readAnswers, readDismissed, readItems, readMessages, readRounds, roundsPath, seenBy, seenPath, sentIds, unreadable as reasonOf, writeItems } from './store.js';
+import { CHAPTERS_MAX, SIGNED_IN, CLEARED, InputError, MEDIA_MAX, NOTE_MAX, REPLY, answersPath, appendAnnotation, appendAnswer, appendDismissed, appendSendBack, appendDesignAnswer, appendMessage, appendRound, awaitsVerdict, isKey, loadDecisions, markDelivered, markSeen, messagesPath, readAnnotations, readAnswers, readDismissed, readItems, readMessages, readRounds, roundsPath, seenBy, seenPath, sentIds, unreadable as reasonOf, writeItems } from './store.js';
 import { ContractError, KINDS, MEDIA_BYTES, REPORT_INIT, checkMessage, mediaFiles, parseMessage, reportPage } from './contract.js';
+import { faults } from './evidence-text.js';
 import { deliverVault, errors, readVaultExpiry, sweepVault, takeVaultExpiries, VaultError } from './vault.js';
 const FORMAT = 'https://github.com/umeranjum17/sign-off/blob/main/docs/file-formats.md';
 const CONTRACT = 'https://github.com/umeranjum17/sign-off/blob/main/docs/contract.md';
@@ -206,7 +207,7 @@ An empty items list removes that filer's items.
 --type diagram and --type interactive are a decision shown with a picture: --view names one board-relative file,
 an image (.svg, .png, .jpg, .jpeg, .webp, 5 MB or less) shown at card width for a diagram, or one self-contained .html page for interactive.
 The page runs in a sandboxed frame: no fetch, no remote files, no access to the dashboard or its tab. Answers work as for a decision.
---type evidence posts the next numbered update (key update-<number>): 1 to ${MEDIA_MAX} screenshots or recordings (.png, .jpg, .jpeg, .webp, .mp4, .webm, 50 MB each), copied into evidence/<number>/ next to the board, with a short note and an optional commit or PR link.
+--type evidence posts the next numbered update (key update-<number>): 1 to ${MEDIA_MAX} screenshots or recordings (.png, .jpg, .jpeg, .webp, .mp4, .webm, 50 MB each), copied into evidence/<number>/ next to the board, with a short note and an optional commit or PR link. A still that is not a picture of the product is refused: mostly text (a log, receipt or summary), a colour-bar test card or a placeholder card. Post a real capture of the running product; a colour-bar or placeholder card already posted is not shown on the board.
 The user gives a verdict, pass, fail or needs-work, with an optional note; read it with answers or wait --key update-<number>.
 --type explainer is a decision shown with a narrated video you made: one --media .mp4 or .webm (50 MB or less), copied into evidence/<number>/ like evidence
 and played on the card. --about is its short summary; up to ${CHAPTERS_MAX} --chapter m:ss=<title> (in order) are buttons that jump the video there. Answers work as for a decision.
@@ -484,7 +485,7 @@ function filerOf(values, session = false) {
 const waitFor = (on, filer, key) => (filer ? `Run \`sign-off-axi wait${on} --filer ${filer}\` to block until the user answers`
     : `Run \`sign-off-axi wait${on}${key ? ` --key ${key}` : ''}\` to block until the user answers`);
 /** Still waiting on the user: not answered, not dismissed, and something to answer (an item with no options and no reply is only shown). */
-const waits = (d) => !d.dismissed && !d.answer && (d.options.length > 0 || !!d.reply || d.type === 'signin' || d.type === 'plan' || d.type === 'design');
+const waits = (d) => !d.dismissed && awaitsVerdict(d.type, d.answer) && (d.options.length > 0 || !!d.reply || d.type === 'signin' || d.type === 'plan' || d.type === 'design');
 /** The board's decisions with their latest answer; a missing board file is an empty board.
  *  A dismissal hides an item from the board and is not waiting here either, checked against the same dismissed log the board reads. */
 function board(file, say = warn) {
@@ -515,7 +516,7 @@ function ready(file, on, root) {
 }
 function list(args) {
     const { file, values, on } = parse('list', args, TIERS);
-    const rows = board(file), waiting = rows.filter(waits), answered = rows.filter((d) => d.answer && !d.dismissed).length;
+    const rows = board(file), waiting = rows.filter(waits), answered = rows.filter((d) => d.answer && !awaitsVerdict(d.type, d.answer) && !d.dismissed).length;
     if (values.json)
         return JSON.stringify({ board: file, decisions: rows.map(({ dismissed, ...d }) => ({ ...d, ...(d.type === 'signin' && { link: undefined }), ...(dismissed && { dismissed }) })) });
     const help = [
@@ -525,7 +526,7 @@ function list(args) {
     ];
     const where = tilde(file) + (existsSync(file) ? '' : ' (no file yet; raise creates it)');
     if (values.full) {
-        return toon({ board: where, decisions: rows.map((d) => ({ key: d.key, status: d.answer?.answer ?? (d.dismissed ? 'dismissed' : 'waiting'), title: d.title, about: d.about ?? '', detail: d.detail ?? '',
+        return toon({ board: where, decisions: rows.map((d) => ({ key: d.key, status: awaitsVerdict(d.type, d.answer) ? (d.dismissed ? 'dismissed' : 'waiting') : d.answer.answer, title: d.title, about: d.about ?? '', detail: d.detail ?? '',
                 recommend: d.recommend_value ?? '', default_if_silent: d.default_if_silent ?? '', close: d.close })) }, help);
     }
     return toon({
@@ -604,7 +605,9 @@ async function wait(args) {
     const seconds = Number(values.timeout), deadline = Date.now() + seconds * 1000, key = values.key === undefined ? '' : ` --key ${values.key}`;
     // With a filer, only its own items count, and an answer it has not taken yet is new however old it is.
     const mine = (rows) => (filer === undefined ? rows : rows.filter((d) => d.filer === filer));
-    const before = new Set(board(file).flatMap((d) => (d.answer ? [d.key] : [])));
+    // A design with only screen notes still waits: it counts as unanswered here until its design verdict lands.
+    const open = (rows) => rows.map((d) => (awaitsVerdict(d.type, d.answer) ? { ...d, answer: undefined } : d));
+    const before = new Map(open(board(file)).flatMap((d) => (d.answer ? [[d.key, JSON.stringify(d.answer)]] : [])));
     // Rounds seen before waiting starts stay quiet; only a newly asked round wakes the loop.
     const seenRounds = new Map();
     for (const r of readRounds(file))
@@ -618,8 +621,8 @@ async function wait(args) {
         }
         catch { }
         for (let first = true;; first = false) {
-            const rows = mine(board(file, first ? warn : () => { })), waiting = rows.filter(waits).length, taken = filer === undefined ? undefined : seenBy(file);
-            const hit = rows.filter((d) => (values.key !== undefined ? d.key === values.key : d.answer && (taken ? !taken(d.answer) : !before.has(d.key))));
+            const rows = mine(open(board(file, first ? warn : () => { }))), waiting = rows.filter(waits).length, taken = filer === undefined ? undefined : seenBy(file);
+            const hit = rows.filter((d) => (values.key !== undefined ? d.key === values.key : d.answer && (taken ? !taken(d.answer) : before.get(d.key) !== JSON.stringify(d.answer))));
             const counts = new Map(), asked = [];
             for (const r of readRounds(file, first ? warn : () => { })) {
                 counts.set(r.key, (counts.get(r.key) ?? 0) + 1);
@@ -974,7 +977,7 @@ function replace(file, named, on, from, filer) {
         // A key whose answer outlived it may not come back: the board and the answers are read here, under the lock the feed writes with.
         const saved = readAnswers(file);
         for (const i of fed.items)
-            if (i?.kind !== undefined && !first.has(i?.key) && Object.hasOwn(saved, i?.key)) {
+            if (i?.kind !== undefined && !first.has(i?.key) && Object.hasOwn(saved, i?.key) && !awaitsVerdict(i.kind, saved[i.key])) {
                 throw fail(`key ${i.key} was answered on ${tilde(file)} and is no longer there`, 'CONFLICT', 'Post it under a new key');
             }
         const current = board(file);
@@ -982,7 +985,7 @@ function replace(file, named, on, from, filer) {
             const d = incoming.find((x) => x.key === had.key);
             if (filer && d && had.filer && had.filer !== filer)
                 throw fail(`key ${d.key} on ${tilde(file)} was posted by another filer`, 'CONFLICT', 'Feed it under a new key');
-            if (had.answer && d && question(d) !== question(had)) {
+            if (had.answer && !awaitsVerdict(had.type, had.answer) && d && question(d) !== question(had)) {
                 throw fail(`key ${d.key} was answered and now holds a different question on ${tilde(file)}`, 'CONFLICT', 'Post the new question under a new key');
             }
         }
@@ -1019,6 +1022,11 @@ function replace(file, named, on, from, filer) {
 }
 /** Copies the media into evidence/<n>/ next to the board and adds the item, numbered under the board lock: update-<n>, or an explainer under its own key.
  * `message` is a checked contract evidence message (post --kind evidence): its key, if any, takes only the same message again, and its run is stored as `evidence`. */
+const UNFIT = {
+    text: (path) => `--media ${path} is mostly text: a picture of a log, receipt or summary is not evidence`,
+    'colour bars': (path) => `--media ${path} is a colour-bar test card, not evidence`,
+    placeholder: (path) => `--media ${path} is a placeholder card, not evidence`,
+};
 function postMedia(file, named, on, values, type, filer, message) {
     fits(values.title);
     const explainer = type === 'explainer';
@@ -1058,6 +1066,10 @@ function postMedia(file, named, on, values, type, filer, message) {
             throw fail(`--media ${tilde(path)} is over 50 MB`, 'VALIDATION_ERROR', 'Trim or compress the recording');
         return path;
     });
+    // A still that is not a picture of the product (text, colour bars or a placeholder) is measured before anything is copied.
+    const [unfit] = explainer ? [] : sources.flatMap((src) => /\.(png|jpe?g|webp)$/i.test(src) ? faults(src).map((f) => ({ src, f })) : []);
+    if (unfit)
+        throw fail(UNFIT[unfit.f](tilde(unfit.src)), 'VALIDATION_ERROR', 'Post a real capture of the running product instead: a screenshot or recording of the screen the user sees');
     mkdirSync(dirname(file), { recursive: true, mode: 0o700 });
     return locked(`${file}.lock`, () => {
         const { items, extra } = existsSync(file) ? readItems(file) : { items: [], extra: {} };
@@ -1072,7 +1084,8 @@ function postMedia(file, named, on, values, type, filer, message) {
             }
             return toon({ board: tilde(file), posted: [{ key: own, number: had.number, media: sources.length, title: had.title, status: 'already posted' }] }, [`Run \`sign-off-axi open${on}\` so the user can give a verdict`]);
         }
-        if (message && own && Object.hasOwn(readAnswers(file), own))
+        const answers = readAnswers(file);
+        if (message && own && Object.hasOwn(answers, own) && !awaitsVerdict(message.kind, answers[own]))
             throw fail(`key ${own} was answered on ${tilde(file)} and is no longer there`, 'CONFLICT', 'Post it under a new key');
         if (own && current.some((d) => d.key === own))
             throw fail(`key ${own} is already used on ${tilde(file)}`, 'CONFLICT', 'Post it under a new --key');
@@ -1354,7 +1367,7 @@ function storeIncoming(file, named, on, { incoming, raw }, filer, exact = false)
                 return fail(`key ${d.key} ${why}`, 'CONFLICT', contract ? 'Post it under a new key' : 'Raise it under a new --key');
             };
             // An answer outlives its item: a new question under that key would inherit it.
-            if (!had && Object.hasOwn(saved, d.key))
+            if (!had && Object.hasOwn(saved, d.key) && !awaitsVerdict(d.type, saved[d.key]))
                 throw refuse(`already has a saved answer on ${tilde(file)} from an item no longer there`);
             // The same question from another filer, or at another time, is the same question: it keeps its first filer and time.
             const same = (x) => JSON.stringify({ ...x, answer: undefined, dismissed: undefined, filer: undefined, filed: undefined, options: [...x.options].sort((a, b) => a.value.localeCompare(b.value)) });
@@ -1367,7 +1380,7 @@ function storeIncoming(file, named, on, { incoming, raw }, filer, exact = false)
                 fits(d.title, d.key);
                 items.push({ filed: now, ...raw[i] });
             }
-            return { key: d.key, status: !had ? 'raised' : had.answer ? `already answered ${had.answer.answer}` : waits({ ...had, dismissed: false }) ? 'already waiting' : 'already posted', title: d.title };
+            return { key: d.key, status: !had ? 'raised' : had.answer && !awaitsVerdict(had.type, had.answer) ? `already answered ${had.answer.answer}` : waits({ ...had, dismissed: false }) ? 'already waiting' : 'already posted', title: d.title };
         });
         if (raised.some((r) => r.status === 'raised')) {
             const before = waitingKeys(file);
@@ -2078,6 +2091,22 @@ const page = readFileSync(new URL('../web/index.html', import.meta.url));
 /** Added to each design mock page and plan page so the person can point at a part of it; see web/point.js. */
 const pointer = Buffer.from(`<script>${readFileSync(new URL('../web/point.js', import.meta.url), 'utf8')}</script>`);
 const sha256 = (bytes) => createHash('sha256').update(bytes).digest('hex');
+/** A card whose picture is a colour-bar test card or a placeholder is not shown: a card posted before the guard can hold one. Read by the
+ * stored hash, so each picture is measured once. */
+const unfitMedia = new Map();
+const fakeEvidence = (d) => d.type === 'evidence' && (d.media ?? []).some((m) => {
+    if (!unfitMedia.has(m.sha256)) {
+        let found;
+        try {
+            found = faults(under(dirname(file), m.path)).some((f) => f !== 'text');
+        }
+        catch {
+            return false;
+        }
+        unfitMedia.set(m.sha256, found);
+    }
+    return unfitMedia.get(m.sha256);
+});
 const state = () => {
     reap();
     // The page marks sent comments in annotations, so answers and rounds go without theirs: a read-only board or an export carries none.
@@ -2088,7 +2117,7 @@ const state = () => {
         mockBase: `/mock/${loopback(bind) ? 'local' : mockPass(tokenOf(file))}/`,
         // Who filed an item stays in the file: the page only learns that its filer took the answer.
         // A sign-in's start command stays on this host too: the page only learns that a tap makes a new link, and how the last run went.
-        decisions: loadDecisions(file).map(({ filer: _, start, ...d }) => ({ ...d, ...(d.type === 'design' && answers[d.key]?.answer === 'approve' && { status: 'approved' }), ...(start && { start: true, run: signinState(d.key) }), evidenceCard: d.evidence ? evidenceCard(d.evidence) : null,
+        decisions: loadDecisions(file).filter((d) => !fakeEvidence(d)).map(({ filer: _, start, ...d }) => ({ ...d, ...(d.type === 'design' && answers[d.key]?.answer === 'approve' && { status: 'approved' }), ...(start && { start: true, run: signinState(d.key) }), evidenceCard: d.evidence ? evidenceCard(d.evidence) : null,
             ...(d.mocks && { mocks: d.mocks.map((m) => ({ ...m, hash: mockHash(m.path) })) }) })),
         readonly: readOnly(),
         answers_only: answersOnly(),
@@ -2359,7 +2388,7 @@ async function route(req) {
         appendRound(file, key, note.trim(), comments);
         return [200, state()];
     }
-    const { key, answer, note = '', notes, decisions, verdict, pick } = JSON.parse(body) ?? {};
+    const { key, answer, note = '', notes, decisions, verdict, pick, requested } = JSON.parse(body) ?? {};
     if (typeof note !== 'string' || [...note.trim()].length > NOTE_MAX)
         return [400, { error: `The note must be text of ${NOTE_MAX} characters or fewer` }];
     const d = loadDecisions(file).find((x) => x.key === key);
@@ -2381,7 +2410,9 @@ async function route(req) {
     }
     if (d.kind === 'design') {
         try {
-            answered(appendDesignAnswer(file, d, verdict, notes, pick), d);
+            const before = readAnswers(file)[d.key]?.answer, a = appendDesignAnswer(file, d, verdict, notes, pick, requested);
+            if (a && !awaitsVerdict(d.type, a) && (verdict !== undefined || a.answer !== before))
+                answered(a, d);
         }
         catch (e) {
             if (e instanceof InputError)

package/dist/evidence-text.js

@@ -0,0 +1,182 @@
+import { spawnSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import { inflateSync } from 'node:zlib';
+/** A picture of text (a log, receipt or summary) is a few colours: paper, ink and their anti-aliased blends, with no large flat block of a
+ * third colour. A real capture of the product has colour, images and icons off that line, or a grey panel covering a good part of the
+ * picture. Measured on the calibration set in the PR: text renders, lossy ones too, have at most 0.01% of pixels off the line and a flat
+ * third colour of 1.7% at most; real captures have 1.5% or more off the line and a flat third colour of 8.9% or more. */
+const OFF_LINE_MAX = 0.005;
+/** The largest flat area in a third colour (any colour but the paper or the ink), as a share of the picture. */
+const SOLID_MAX = 0.04;
+/** A saturated colour is at least this far between its brightest and dimmest channel; a colour band must cover this share of the picture.
+ * A colour-bar card has at least five such bands, together most of the picture; the real captures measured have one at most. */
+const SATURATED = 96;
+const BAND_MIN = 0.05;
+const BARS_MIN = 5;
+const BARS_SHARE_MIN = 0.6;
+/** A placeholder is one flat colour over this share of the picture; the real captures measured top out at 75%, the text renders are text. */
+const PLACEHOLDER_MIN = 0.9;
+/** A picture with no ink at all (a flat colour) is not text, so it passes. */
+const INK_MIN = 0.005;
+/** How close (0-255 RGB distance) a pixel must be to the paper or to the paper-ink line to count as text. */
+const NEAR = 24;
+const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+/** Samples per pixel for each PNG colour type: grey, RGB, palette, grey with alpha, RGB with alpha. */
+const CHANNELS = { 0: 1, 2: 3, 3: 1, 4: 2, 6: 4 };
+/** Adam7 interlace passes: x start, y start, x step, y step. A non-interlaced PNG is one pass over every pixel. */
+const ADAM7 = [[0, 0, 8, 8], [4, 0, 8, 8], [0, 4, 4, 8], [2, 0, 4, 4], [0, 2, 2, 4], [1, 0, 2, 2], [0, 1, 1, 2]];
+const WHOLE = [[0, 0, 1, 1]];
+/** The share of pixels that are ink (a colour off the paper), of pixels off the paper-ink line, and of the largest flat area in any other colour,
+ * or undefined when the file cannot be decoded. */
+export function palette(file) {
+    const rgb = decode(file);
+    if (!rgb)
+        return undefined;
+    const total = rgb.length / 3, bins = new Uint32Array(32768);
+    const centre = (b) => [(b >> 10) * 8 + 4, ((b >> 5) & 31) * 8 + 4, (b & 31) * 8 + 4];
+    for (let i = 0; i < rgb.length; i += 3)
+        bins[(rgb[i] >> 3) << 10 | (rgb[i + 1] >> 3) << 5 | (rgb[i + 2] >> 3)]++;
+    const paperBin = bins.indexOf(Math.max(...bins)), paper = centre(paperBin);
+    let inkBin = -1;
+    for (let b = 0; b < bins.length; b++) {
+        if (bins[b] && dist(centre(b), paper) > 128 && (inkBin < 0 || bins[b] > bins[inkBin]))
+            inkBin = b;
+    }
+    let solid = 0;
+    bins.forEach((count, b) => {
+        if (b !== paperBin && b !== inkBin && count / total > solid)
+            solid = count / total;
+    });
+    // Saturated flat colours: a colour-bar test card has several, each a band of the picture.
+    let bars = 0, barShare = 0;
+    bins.forEach((count, b) => {
+        const c = centre(b), share = count / total;
+        if (Math.max(...c) - Math.min(...c) >= SATURATED && share >= BAND_MIN)
+            bars++, (barShare += share);
+    });
+    const top = bins[paperBin] / total;
+    if (inkBin < 0)
+        return { ink: 0, off: 0, solid: 0, top, bars, barShare };
+    const [pr, pg, pb] = paper, [ar, ag, ab] = centre(inkBin).map((c, i) => c - paper[i]), len2 = ar * ar + ag * ag + ab * ab;
+    let ink = 0, off = 0;
+    for (let i = 0; i < rgb.length; i += 3) {
+        const dr = rgb[i] - pr, dg = rgb[i + 1] - pg, db = rgb[i + 2] - pb;
+        if (dr * dr + dg * dg + db * db <= NEAR * NEAR)
+            continue;
+        const t = Math.min(1, Math.max(0, (dr * ar + dg * ag + db * ab) / len2));
+        const er = dr - t * ar, eg = dg - t * ag, eb = db - t * ab;
+        if (er * er + eg * eg + eb * eb <= NEAR * NEAR)
+            ink++;
+        else
+            off++;
+    }
+    return { ink: ink / total, off: off / total, solid, top, bars, barShare };
+}
+/** Why a still is not a picture of the product: text (a log, receipt or summary), colour bars (a test card) or a placeholder (a flat card
+ * standing in for a picture). A file that cannot be decoded has no faults: it is not refused. */
+export function faults(file) {
+    const share = palette(file);
+    if (!share)
+        return [];
+    const text = share.ink >= INK_MIN && share.off <= OFF_LINE_MAX && share.solid <= SOLID_MAX;
+    return [
+        ...(text ? ['text'] : []),
+        ...(share.bars >= BARS_MIN && share.barShare >= BARS_SHARE_MIN ? ['colour bars'] : []),
+        ...(!text && share.top >= PLACEHOLDER_MIN ? ['placeholder'] : []),
+    ];
+}
+const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+/** The picture as packed 8-bit RGB. PNG is decoded here; JPEG, WebP and any PNG this decoder refuses go through ImageMagick, when it is installed. */
+function decode(file) {
+    const bytes = readFileSync(file);
+    if (bytes.subarray(0, 8).equals(PNG_SIGNATURE)) {
+        const own = pngRgb(bytes);
+        if (own)
+            return own;
+    }
+    const out = spawnSync('convert', [file, 'png24:-'], { maxBuffer: 1 << 30, timeout: 30_000 });
+    return out.status === 0 && out.stdout.subarray(0, 8).equals(PNG_SIGNATURE) ? pngRgb(out.stdout) : undefined;
+}
+/** Packed 8-bit RGB of a PNG, every colour type and bit depth, interlaced or not. undefined for a PNG it does not read. */
+function pngRgb(buf) {
+    try {
+        let width = 0, height = 0, type = 0, depth = 0, interlace = 0, palette;
+        const idat = [];
+        for (let at = 8; at + 8 <= buf.length;) {
+            const len = buf.readUInt32BE(at), name = buf.toString('latin1', at + 4, at + 8), data = buf.subarray(at + 8, at + 8 + len);
+            if (name === 'IHDR')
+                [width, height, depth, type, interlace] = [data.readUInt32BE(0), data.readUInt32BE(4), data[8], data[9], data[12]];
+            else if (name === 'PLTE')
+                palette = data;
+            else if (name === 'IDAT')
+                idat.push(data);
+            else if (name === 'IEND')
+                break;
+            at += 12 + len;
+        }
+        const channels = CHANNELS[type];
+        if (!channels || ![1, 2, 4, 8, 16].includes(depth) || (type === 3 && (!palette || depth > 8)))
+            return undefined;
+        const bits = channels * depth, bpp = Math.max(1, bits >> 3), raw = inflateSync(Buffer.concat(idat));
+        const rgb = Buffer.alloc(width * height * 3);
+        const to8 = (v) => (depth < 8 ? Math.round((v * 255) / ((1 << depth) - 1)) : v);
+        let at = 0;
+        for (const [x0, y0, dx, dy] of interlace ? ADAM7 : WHOLE) {
+            const pw = Math.ceil((width - x0) / dx), ph = Math.ceil((height - y0) / dy);
+            if (pw <= 0 || ph <= 0)
+                continue;
+            const rowBytes = Math.ceil(pw * bits / 8), px = Buffer.alloc(rowBytes * ph);
+            for (let y = 0; y < ph; y++, at += rowBytes + 1) {
+                const filter = raw[at];
+                for (let i = 0; i < rowBytes; i++) {
+                    const a = i >= bpp ? px[y * rowBytes + i - bpp] : 0, b = y ? px[(y - 1) * rowBytes + i] : 0;
+                    let predict = 0;
+                    if (filter === 1)
+                        predict = a;
+                    else if (filter === 2)
+                        predict = b;
+                    else if (filter === 3)
+                        predict = (a + b) >> 1;
+                    else if (filter === 4) {
+                        const c = i >= bpp && y ? px[(y - 1) * rowBytes + i - bpp] : 0, p = a + b - c;
+                        const pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
+                        predict = pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+                    }
+                    px[y * rowBytes + i] = (raw[at + 1 + i] + predict) & 0xff;
+                }
+            }
+            // The sample at index `n` of a row: a whole byte, a packed value of 1, 2 or 4 bits, or the high byte of 16 bits.
+            const sample = (y, n) => {
+                if (depth === 16)
+                    return px[y * rowBytes + n * 2];
+                if (depth === 8)
+                    return px[y * rowBytes + n];
+                const shift = 8 - depth - ((n * depth) & 7);
+                return (px[y * rowBytes + ((n * depth) >> 3)] >> shift) & ((1 << depth) - 1);
+            };
+            for (let y = 0; y < ph; y++) {
+                for (let x = 0; x < pw; x++) {
+                    const n = x * channels, o = ((y0 + y * dy) * width + x0 + x * dx) * 3;
+                    if (type === 3) {
+                        const k = sample(y, n) * 3;
+                        rgb[o] = palette[k] ?? 0;
+                        rgb[o + 1] = palette[k + 1] ?? 0;
+                        rgb[o + 2] = palette[k + 2] ?? 0;
+                    }
+                    else if (channels <= 2) {
+                        rgb[o] = rgb[o + 1] = rgb[o + 2] = to8(sample(y, n));
+                    }
+                    else {
+                        rgb[o] = to8(sample(y, n));
+                        rgb[o + 1] = to8(sample(y, n + 1));
+                        rgb[o + 2] = to8(sample(y, n + 2));
+                    }
+                }
+            }
+        }
+        return rgb;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/store.js

@@ -280,27 +280,41 @@ function saveAnswer(decisionsPath, d, option, note, comments = [], by) {
     appendLine(answersPath(decisionsPath), answer);
     return answer;
 }
-/** Saves a design answer with screen-specific notes and an optional listed direction pick. */
-export function appendDesignAnswer(decisionsPath, d, verdict, notes, pick) {
+/** A design answer that holds only screen notes while the design has no design-wide verdict: it still waits for one. */
+export const SCREENS_ONLY = 'screens';
+/** True while an answer leaves the item waiting: none yet, or only screen notes. */
+export const awaitsVerdict = (type, a) => !a || (type === 'design' && a.answer === SCREENS_ONLY);
+const DESIGN_LABEL = { approve: 'Approved', change: 'Changes requested', [SCREENS_ONLY]: 'Screens reviewed' };
+/** Saves a design answer with screen-specific notes and an optional listed direction pick. A screen save omits the verdict: the design keeps its saved verdict, a change on a screen of an approved design sets it to change, and with none yet it waits as screens-only. */
+export function appendDesignAnswer(decisionsPath, d, verdict, notes, pick, requested) {
     const bad = (rule) => new InputError(`key ${d.key}: ${rule}`);
-    if (verdict !== 'approve' && verdict !== 'change')
-        throw bad('verdict must be approve or change');
+    if (verdict !== undefined && verdict !== 'approve' && verdict !== 'change')
+        throw bad('verdict must be approve or change, or omitted to save a screen');
     if (!Array.isArray(notes) || (verdict === 'change' && !notes.length))
         throw bad('notes must be a list, with at least one note on change');
+    if (verdict === undefined && !notes.some(n => n?.journey !== undefined))
+        throw bad('a screen save names its screen');
+    if (requested === true && (verdict !== undefined || !notes.some(n => n?.journey !== undefined && (n.verdict ?? 'change') === 'change')))
+        throw bad('a requested change is a screen save with a change note on a screen');
     const screens = new Set((d.journeys ?? []).flatMap(j => j.screens.map(s => `${j.id}/${s.id}`)));
     for (const n of notes) {
         const hasJourney = n?.journey !== undefined, hasScreen = n?.screen !== undefined;
-        if (!n || hasJourney !== hasScreen || (hasJourney && !screens.has(`${n.journey}/${n.screen}`)) || !isText(n.note) || !n.note.trim() || [...n.note].length > NOTE_MAX) {
-            throw bad('each note needs both a known journey and screen, or neither for a design-level note, with text of 500 characters or fewer');
+        if (!n || hasJourney !== hasScreen || (hasJourney && !screens.has(`${n.journey}/${n.screen}`)) ||
+            (n.verdict !== undefined && !['approve', 'change'].includes(n.verdict)) ||
+            (n.note !== undefined && (!isText(n.note) || [...n.note].length > NOTE_MAX)) || ((n.verdict ?? 'change') === 'change' && !n.note?.trim())) {
+            throw bad('each note needs both a known journey and screen, or neither for a design-level note; verdict must be approve or change, with text required on change (500 characters or fewer)');
         }
     }
     if (new Set(notes.map(n => n.journey === undefined ? '' : `${n.journey}/${n.screen}`)).size !== notes.length)
         throw bad('notes must name each screen once, or contain one design-level note');
     const options = d.options ?? [];
-    if (options.length ? !options.some(o => o.value === pick) : pick !== undefined)
-        throw bad('pick must be one listed option, or omitted when no options were offered');
-    const answer = { key: d.key, answer: verdict, label: verdict === 'approve' ? 'Approved' : 'Changes requested', close: d.close ?? 'done', at: now(), notes, ...(pick !== undefined && { pick: pick }) };
+    if (pick !== undefined ? !options.some(o => o.value === pick) : verdict !== undefined && options.length > 0)
+        throw bad('pick must be one listed option, and a design verdict needs one when options were offered');
     const current = readAnswers(decisionsPath)[d.key];
+    const decided = current?.answer === 'approve' || current?.answer === 'change' ? current.answer : undefined;
+    const kept = (verdict ?? (decided === 'approve' && requested === true ? 'change' : decided ?? SCREENS_ONLY));
+    const keptPick = (pick ?? (options.some(o => o.value === current?.pick) ? current?.pick : undefined));
+    const answer = { key: d.key, answer: kept, label: DESIGN_LABEL[kept], close: d.close ?? 'done', at: now(), notes, ...(keptPick !== undefined && { pick: keptPick }) };
     if (current?.answer === answer.answer && JSON.stringify([current.notes, current.pick]) === JSON.stringify([answer.notes, answer.pick]))
         return;
     appendLine(answersPath(decisionsPath), answer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sign-off-axi",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "One review board for evidence, quick yes/no decisions and retro changes.",
   "type": "module",
   "bin": { "sign-off-axi": "dist/cli.js" },

package/web/index.html

@@ -67,34 +67,25 @@
   .i-waiting .vis .icon svg { width: 2.25rem; height: 2.25rem; }
   .i-reports .mark { width: 0.375rem; height: 1.25rem; border-radius: 2px; background: var(--area); }
   .pair, .areas { display: grid; gap: 1rem; margin-top: 1rem; }
-  /* What needs you first and the ask in Triage: its pictures side by side and its answers stacked at one width. */
-  .needs .row, .focus .row { padding: 0; border: 0; background: none; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
-  .needs .row .choices, .focus .row .choices { display: grid; grid-template-columns: minmax(0, 1fr); }
+  /* Needs you first keeps the existing answer controls at a readable width. */
+  .needs .row { padding: 0; border: 0; background: none; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
+  .needs .row .choices { display: grid; grid-template-columns: minmax(0, 1fr); }
   .needs .row .choices, .needs .rung { max-width: 28rem; }
-  .needs .media, .focus .media { flex-wrap: nowrap; }
-  .needs .media > *, .focus .media > * { flex: 1 1 0; min-width: 0; }
-  .needs .mocks, .focus .mocks { grid-auto-columns: minmax(0, 1fr); max-width: 16rem; margin: 0; }
-  .focus .mocks { max-width: 24rem; }
-  .focus .shot { aspect-ratio: 3 / 4; }
+  .needs .media { flex-wrap: nowrap; }
+  .needs .media > * { flex: 1 1 0; min-width: 0; }
+  .needs .mocks { grid-auto-columns: minmax(0, 1fr); max-width: 16rem; margin: 0; }
   .needs .shot { aspect-ratio: 1; }
-  /* Triage: the open asks one at a time, the question big and the answers big enough for a thumb; at desktop the queue sits beside it. */
-  .fhead { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 650; }
-  .pbar { height: 4px; margin: 0.5rem 0 1rem; border-radius: 4px; background: var(--line); overflow: hidden; }
-  .pbar i { display: block; height: 100%; background: var(--c-waiting); }
-  .focus .since { margin: -0.375rem 0 1rem; font-weight: 600; } .needs > .since { margin: -0.25rem 0 0.5rem; font-weight: 600; }
-  .focus .row h3 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; }
-  .focus .choices button, .needs .choices .rec { min-height: 4rem; border-radius: 1rem; font-size: 1.125rem; font-weight: 600; }
-  @media (min-width: 60rem) { .focus .choices button, .needs .choices .rec { min-height: 2.75rem; } }
+  .needs > .since { margin: -0.25rem 0 0.5rem; font-weight: 600; }
   /* On Summary the recommended answer is the large button, and the others are pills under it. */
   .needs .choices button { font-weight: 600; } .needs .choices button:not(.rec) { justify-self: start; border-radius: 999px; }
   .needs .choices button[aria-pressed="true"] { padding-right: 2.75rem; }
-  .quiet { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
-  .quiet button { border: 0; background: none; color: var(--muted); font-weight: 600; }
-  .upnext { display: grid; margin-top: 1rem; }
-  .upnext .meta { margin: 0; font-weight: 700; }
-  .hint { text-align: center; }
-  .queue, .keys { display: none; }
-  .caught { text-align: center; }
+  .needs .choices .rec { min-height: 4rem; border-radius: 1rem; font-size: 1.125rem; font-weight: 600; }
+  @media (min-width: 60rem) { .needs .choices .rec { min-height: 2.75rem; } }
+  @media (max-width: 59.999rem) {
+    body:has(.decide) { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
+    .top:has(+ .decide) .back { display: none; }
+  }
+
   /* Reports: a card per report, its steps as numbered nodes on a line with only the marks that matter under each; Open lists them in place. */
   .reports { display: grid; gap: 0.75rem; }
   .report { display: grid; gap: 0.75rem; scroll-margin-top: 4.5rem; }
@@ -244,8 +235,72 @@
   .readonly .rung iframe { height: 80vh; }
   .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; padding: 1rem; scroll-margin-top: 4.5rem;
     background: var(--surface); border-radius: 0.875rem; }
-  /* Waiting cards carry the accent stripe; answered ones sit flat and quiet. */
-  .in-waiting .row { border-left: 3px solid var(--accent); padding-left: calc(1rem - 3px); }
+  /* Waiting and Decide use separate board cards; the R1 answer renderer remains the source of answer writes. */
+  .waiting-lede { margin: 0; color: var(--muted); }
+  .plan-hero { display: grid; overflow: hidden; margin: 0 0 2rem; border-radius: 1.125rem; background: var(--surface); }
+  .plan-preview { width: 100%; height: 12rem; min-width: 0; overflow: hidden; background: var(--sunk); }
+  .plan-preview .rung { height: 100%; }
+  .plan-preview .rung .frame, .plan-preview .rung iframe { height: 100%; min-height: 0; border: 0; border-radius: 0; }
+  .plan-preview .rung > .meta { display: none; }
+  .plan-copy { display: grid; align-content: center; gap: .5rem; padding: 1.25rem; }
+  .plan-copy .eyebrow, .ask-card .kind { margin: 0; color: var(--warn); font-size: .875rem; font-weight: 600; }
+  .plan-copy h2 { margin: 0; font-size: 1.75rem; }
+  .plan-copy .about { margin: 0; color: var(--muted); -webkit-line-clamp: 1; }
+  .plan-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--muted); font-size: .875rem; }
+  .plan-meta span { white-space: nowrap; }
+  .open-link.plan-open { display: inline-flex; width: fit-content; min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
+  .ask-group { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1rem; overflow: hidden; border-radius: 1rem; background: var(--surface); }
+  .ask-group > li { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 4.125rem; padding: .5rem .5rem .5rem 0; }
+  .ask-group > li + li { border-top: .5px solid var(--line); }
+  .ask-card { display: flex; flex: 1; min-width: 0; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
+  .ask-card .icon { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--action); }
+  .ask-card .icon svg { width: 1.125rem; height: 1.125rem; stroke: white; }
+  .ask-card .copy { display: grid; flex: 1; min-width: 0; gap: .125rem; }
+  .ask-card .title { font-size: 1.0625rem; font-weight: 550; line-height: 1.3; }
+  .ask-card .meta { margin: 0; color: var(--muted); font-size: .9375rem; }
+  .ask-group .x { margin: 0; }
+  .decide { max-width: 44rem; margin: 0 auto; padding-bottom: 1rem; }
+  .decide-preview { margin: .5rem 0 .75rem; padding: 1rem; min-height: 8rem; display: grid; place-items: center; overflow: hidden; border-radius: 1.125rem; background: var(--surface); }
+  .decide-preview > img { display: block; max-width: 100%; max-height: 15rem; object-fit: contain; border-radius: .75rem; }
+  .decide-preview .rung { width: 100%; }
+  .decide-preview .rung .frame, .decide-preview .rung iframe { max-height: 15rem; }
+  .decide-preview .mocks { --tall: min(32svh, 16rem); }
+  .decide-preview .shot { aspect-ratio: 236 / 273; }
+  .decide-preview .mock figcaption .label { flex: 1 1 auto; min-width: 0; font-size: .75rem; }
+  .decide-preview .mock figcaption .badge { padding: .1rem .25rem; font-size: .6875rem; white-space: nowrap; }
+  @media (max-width: 59.999rem) {
+    .top:has(+ .decide) { padding: .25rem 0 0; }
+    .decide-preview { margin: .25rem 0 .5rem; padding: .75rem; }
+    .decide-preview .mocks { grid-auto-columns: min(85%, 8rem); --tall: min(20svh, 10rem); }
+    .decide-preview .shot { aspect-ratio: 1; }
+    .decide .lead h2 { margin: .25rem 0; }
+    .decide .pick-label { margin: .5rem 0; }
+    .decide .silent-line { margin: .5rem 0; }
+    .decide .pick-option { min-height: 3.125rem; padding: .5rem 1rem .5rem 0; }
+    body:has(.decide) #toast { bottom: calc(9.5rem + env(safe-area-inset-bottom)); }
+  }
+  .decide h2 { margin: .5rem 0 .5rem; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; }
+  .decide .why { margin: 0; color: var(--muted); font-size: 1.0625rem; font-weight: 400; }
+  .pick-label { margin: 1rem 0 .5rem; color: var(--muted); font-size: .875rem; letter-spacing: .02em; }
+  .pick-list { list-style: none; margin: 0; padding: 0 0 0 1rem; overflow: hidden; border-radius: 1rem; background: var(--surface); }
+  .pick-list li + li { border-top: .5px solid var(--line); }
+  .pick-option { display: flex; width: 100%; min-height: 2.75rem; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
+  .pick-option .words { display: grid; flex: 1; min-width: 0; gap: .125rem; }
+  .pick-option .label-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
+  .pick-option .label { font-size: 1.25rem; line-height: 1.3; }
+  .pick-option .reason { color: var(--muted); font-size: 1rem; line-height: 1.35; }
+  .pick-option .recommend { color: var(--accent); font-size: .9375rem; }
+  .pick-option .check { width: 1.5rem; color: var(--accent); font-size: 1.5rem; visibility: hidden; }
+  .pick-option[aria-pressed="true"] { color: var(--text); background: transparent; }
+  .pick-option[aria-pressed="true"]::before { content: none; }
+  .pick-option[aria-pressed="true"] .check { visibility: visible; }
+  .silent-line { margin: 1.25rem 0; color: var(--muted); }
+  .decide-bar { position: fixed; z-index: 1; left: 0; right: 0; bottom: calc(4.125rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .5rem;
+    padding: .75rem max(1.25rem, env(safe-area-inset-right)) .75rem max(1.25rem, env(safe-area-inset-left)); background: var(--bg); }
+  .decide-bar .answer { flex: 1; background: var(--action); color: var(--on-accent); }
+  .decide-bar .later { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--accent); background: transparent; }
+  .decide-bar .skip { color: var(--muted); background: transparent; }
+  .ask-group + .gone-asks { margin-top: 1rem; }
   .in-answered .row { background: transparent; box-shadow: none; }
   .in-answered .row h3 { color: var(--muted); font-weight: 500; }
   /* A sign-in: one big Open for its link, off once the link expired. */
@@ -359,6 +414,27 @@
   .design-review .foot > * { flex: 1; }
   .design-review .foot button.open-link { background: var(--action); color: var(--on-accent); }
   .design-review > a { display: block; max-width: 56rem; margin: 1rem auto; color: var(--accent); }
+  .design-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); }
+  .design-viewer[open] { display: flex; flex-direction: column; }
+  .design-viewer header { display: flex; gap: 1rem; align-items: center; padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
+  .design-viewer header > div { flex: 1; min-width: 0; max-height: 22dvh; overflow: auto; }
+  .design-viewer h2, .design-viewer p { margin: 0; }
+  .design-viewer h2 { font-size: 1.25rem; line-height: 1.2; }
+  .design-viewer .meta { font-size: 1rem; }
+  .design-viewer-panel button { padding: 0 0.75rem; font-size: 1rem; white-space: nowrap; }
+  .design-viewer button, .design-viewer select { min-height: 2.75rem; }
+  .design-viewer-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 1; min-height: 0; }
+  .design-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sunk); touch-action: pan-y; }
+  .design-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+  .design-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
+  .design-viewer-panel { overflow: auto; padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)); background: var(--surface); }
+  .design-viewer-panel .foot { display: flex; gap: 0.75rem; margin: 0.5rem 0; }
+  .design-viewer-panel .foot > * { flex: 1; }
+  .design-viewer-panel label { display: grid; gap: 0.25rem; margin: 0.5rem 0; }
+  .design-viewer-panel textarea { min-height: 3rem; max-height: 6rem; margin: 0; }
+  .design-viewer-panel .open-link { background: var(--action); color: var(--on-accent); }
+  @media (min-width: 60rem) { .design-viewer header h2 { font-size: 2.125rem; } .design-viewer-body { grid-template: minmax(0, 1fr) / minmax(0, 1fr) 22.5rem; } .design-viewer-panel { padding: 1.25rem; } }
+  @media (max-height: 550px) { .design-viewer-body { overflow: auto; grid-template-rows: minmax(12rem, 1fr) auto; } }
   .needs .foot .open-link { min-height: 2.75rem; padding: 0 1rem; background: var(--action); color: var(--on-accent); text-align: center; }
   /* The asks dismissed from Waiting on you: one muted row that opens to a list, each with Restore. */
   .gone-asks { margin-top: 0.5rem; } .gone-asks summary { color: var(--muted); }
@@ -416,14 +492,18 @@
   button:focus-visible, summary:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   .shot:focus-visible { outline-offset: -2px; }
   .empty { margin: 0; padding: 1.5rem 1rem; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 0.875rem; }
+  @media (max-width: 44.999rem) {
+    .plan-preview { display: none; }
+    .plan-copy .about { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; overflow: visible; }
+  }
   @media (min-width: 45rem) {
     main { padding: 0 2rem; }
     .row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.875rem 2rem; padding: 1.125rem 1.25rem; }
-    .in-waiting .row { padding-left: calc(1.25rem - 3px); }
     .row.design, .row.update { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
     /* The frames share the card width down to 11rem each; only a list longer than that scrolls. */
     .mocks { grid-auto-columns: minmax(11rem, calc(var(--tall) * 9 / 19.5)); }
     .rung iframe { height: min(32rem, 75vh); }
+    .plan-hero { grid-template-columns: 46% minmax(0, 1fr); min-height: 20rem; }
     /* A picture card stacks like a design card: the picture, then its buttons at their own width. */
     .row:has(> .rung) { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
     .row:has(> .rung) .choices { justify-content: start; }
@@ -456,12 +536,11 @@
     .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
     .pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
     .areas { grid-template-columns: 1fr 1fr; align-items: start; }
-    .tri { display: grid; grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
-    .queue { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
-    .queue button { display: grid; width: 100%; padding: 0.75rem 1rem; border-color: transparent; background: none; text-align: left; }
-    .queue button[aria-current] { border-color: var(--line); background: var(--surface); }
-    .queue .meta { margin: 0.125rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-    .hint, .upnext { display: none; }
+    .plan-preview { height: 20rem; }
+    .plan-preview .rung .frame, .plan-preview .rung iframe { min-height: 0; }
+    .plan-copy { padding: 2rem; }
+    .plan-copy h2, .decide h2 { font-size: 2.5rem; line-height: 1.1; }
+    .decide-bar { position: static; margin: 1rem 0 0; padding: .75rem 0; background: transparent; }
     .reports { grid-template-columns: 1fr 1fr; align-items: start; }
     /* Answered sets each row as its own card, two across; an opened row takes the whole width. */
     .rows.i-answered { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; padding: 0; border: 0; background: none; box-shadow: none; }
@@ -469,7 +548,6 @@
     .rows.i-answered > li:has(.done[open]) { grid-column: 1 / -1; }
     /* Evidence sets its updates two across; a page that is not an update keeps the whole width. */
     .list.in-evidence { grid-template-columns: 1fr 1fr; align-items: start; } .in-evidence > .row:not(.update) { grid-column: 1 / -1; }
-    .keys { display: block; }
   }
 </style>
 </head>
@@ -511,20 +589,31 @@
 
   const clearIfSaved = (key, sent) => () => { if (drafts.get(key) === sent) drafts.delete(key); keep(); };
 
-  function save(d, o, buttons, err) {
-    buttons.forEach((b) => (b.disabled = true));
+  function lock(...btns) {
+    const controls = [...btns, ...(btns[0].closest('.decide, .row')?.querySelectorAll('button') ?? [])].filter((b) => !b.disabled);
+    controls.forEach((b) => (b.disabled = true));
+    return () => controls.forEach((b) => (b.disabled = false));
+  }
+
+  async function save(d, o, buttons, err, after) {
+    const unlock = lock(...buttons);
     // An answers-only board takes no comments, and words sent as the answer are the answer itself (a reply item's also go as a comment).
     const typed = state.answers_only || (o.value === 'text' && !d.reply) ? '' : (drafts.get(d.key) ?? '').trim();
     const note = drafts.get(d.key) ?? noteOf(d), before = answerOf(d.key);
     const drop = clearIfSaved(d.key, drafts.get(d.key));
-    call('/api/answers', {
-      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, answer: o.value, note }),
-    }, () => { forget(d.key); if (!typed) drop(); }).then(() => offerUndo(d, before)).then(() => typed && call('/api/messages', {
-      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kind: 'comment', key: d.key, text: typed }),
-    }, drop)).catch((e) => {
+    try {
+      await call('/api/answers', {
+        method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, answer: o.value, note }),
+      }, () => { forget(d.key); if (!typed) drop(); });
+    } catch (e) {
       shown(err).textContent = `Couldn't save: ${e.message}`;
-      buttons.forEach((b) => (b.disabled = false));
-    });
+      return unlock();
+    }
+    offerUndo(d, before);
+    after?.();
+    if (typed) call('/api/messages', {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ kind: 'comment', key: d.key, text: typed }),
+    }, drop).catch(() => say('Could not save your comment', 8000));
   }
 
   const toast = document.getElementById('toast'), toastText = document.getElementById('toast-text'), undoBtn = document.getElementById('undo');
@@ -550,11 +639,12 @@
     undoBtn.setAttribute('aria-label', `Undo, ${headline(d)}`);
     say(`Saved: ${now.answer === 'text' ? 'your reply' : now.label}`, 5000, () => {
       undoBtn.disabled = true;
-      cur = d.key; // Triage shows the ask again.
       call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ key: d.key, answer: before?.answer ?? '', note: before?.note ?? '' }) })
-        .then(() => say(before ? `Back to: ${before.answer === 'text' ? 'your reply' : before.label}` : 'Undone: not answered', 3000),
-          (e) => say(`Couldn't undo: ${e.message}`, 8000));
+        .then(() => {
+          if (!before) location.hash = askHref(d);
+          say(before ? `Back to: ${before.answer === 'text' ? 'your reply' : before.label}` : 'Undone: not answered', 3000);
+        }, (e) => say(`Couldn't undo: ${e.message}`, 8000));
     });
     // The tap redrew its card and took the focus with it: put it on Undo so the keyboard can reach it in time.
     if (document.activeElement === document.body || !document.activeElement) undoBtn.focus();
@@ -565,11 +655,11 @@
 
   /** Sends a comment or a queued prompt for the agent; the typed text stays until the server has it. */
   function send(btn, err, body, draft, text) {
-    btn.disabled = true;
+    const unlock = lock(btn);
     call('/api/messages', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ ...body, text }) },
       clearIfSaved(draft, drafts.get(draft))).catch((e) => {
       shown(err).textContent = `Couldn't send: ${e.message}`;
-      btn.disabled = false;
+      unlock();
     });
   }
 
@@ -680,17 +770,20 @@
       ro ? '' : other(d, saved, err), err, tech(d));
   }
 
+  /** A count with its unit in the form it deserves: 1 section, 2 sections. */
+  const plural = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
   /** A plan: its one-line answer, how many sections and decisions it asks about, and one Open plan for its page over the board. */
   function plan(d, lead) {
-    const count = (n, one) => `${n} ${one}${n === 1 ? '' : 's'}`;
     return el('article', { class: 'row plan', id: `item-${d.key}` }, el('div', {}, lead,
-      el('p', { class: 'meta' }, `${count(d.sections.length, 'section')} · ${count(d.decisions.length, 'decision')}`)),
+      el('p', { class: 'meta' }, `${plural(d.sections.length, 'section')} · ${plural(d.decisions.length, 'decision')}`)),
     el('a', { class: 'open-link', href: `#${area(d)}/${d.key}`, 'aria-label': `Open plan, ${d.title}` }, 'Open plan'));
   }
+  /** A span of minutes: whole minutes under the hour, hours and the rest over it. */
+  const mins = (m) => (m < 60 ? `${m} min` : `${Math.floor(m / 60)} h${m % 60 ? ` ${m % 60} min` : ''}`);
   /** The time left on a sign-in link, in whole minutes. */
   const expiry = (at) => {
     const m = Math.ceil((Date.parse(at) - Date.now()) / 60_000);
-    return m <= 0 ? 'Link expired. Ask for a new link.' : `Expires in ${m < 60 ? `${m} min` : `${Math.floor(m / 60)} h${m % 60 ? ` ${m % 60} min` : ''}`}`;
+    return m <= 0 ? 'Link expired. Ask for a new link.' : `Expires in ${mins(m)}`;
   };
   /** A sign-in: the service, what it unlocks, who waits, the time left and one Open for its link. Its poster closes it with signin done. */
   function signin(d, lead, saved, err) {
@@ -751,24 +844,24 @@
   /** The one place to type on a card, folded behind Other answer so the buttons come first and typing is the last resort.
    * Sent on its own the words are the answer (`text`); typed before a button is picked they go with that answer as its note.
    * On a normal board they can also ask for another round (not on an evidence update) or go as a comment. */
-  function other(d, saved, err) {
+  function other(d, saved, err, after) {
     const box = el('textarea', { id: `note-${d.key}`, rows: 2, maxlength: 500, dir: 'auto' });
     box.value = drafts.get(d.key) ?? (saved?.answer === 'text' ? '' : noteOf(d));
     box.oninput = () => { drafts.set(d.key, box.value); keep(); };
     // An option valued text would be the same answer, so that item takes words only as a note.
     const words = !d.options.some((o) => o.value === 'text'), talk = !state.answers_only, round = talk && d.type !== 'evidence';
     const sendBtn = el('button', { 'aria-label': `Send reply, ${headline(d)}` }, 'Send reply');
-    sendBtn.onclick = () => (box.value.trim() ? save(d, { value: 'text' }, [sendBtn], err) : (shown(err).textContent = 'Write the reply first.'));
+    sendBtn.onclick = () => (box.value.trim() ? save(d, { value: 'text' }, [sendBtn], err, after) : (shown(err).textContent = 'Write the reply first.'));
     const roundBtn = el('button', { class: 'quick', 'aria-label': `Another round, ${headline(d)}` }, 'Another round');
     roundBtn.onclick = () => {
-      roundBtn.disabled = true;
+      const unlock = lock(roundBtn);
       const note = (drafts.get(d.key) ?? noteOf(d)).trim();
       const drop = clearIfSaved(d.key, drafts.get(d.key));
       call('/api/rounds', {
         method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, note }),
       }, () => { forget(d.key); drop(); }).catch((e) => {
         shown(err).textContent = `Couldn't ask: ${e.message}`;
-        roundBtn.disabled = false;
+        unlock();
       });
     };
     const commentBtn = el('button', { 'aria-label': `Send as a comment, ${headline(d)}` }, 'Send as a comment');
@@ -955,7 +1048,8 @@
     you: 'M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4.5 20.5c1.2-3.6 4-5.5 7.5-5.5s6.3 1.9 7.5 5.5' };
   // The drawings are fixed strings from this page, never text from the board file.
   const icon = (a) => { const s = el('span', { class: `icon i-${a}`, 'aria-hidden': 'true' }); s.innerHTML = `<svg viewBox="0 0 24 24"><path d="${ICONS[a]}"/></svg>`; return s; };
-  const isAnswered = (d) => Object.hasOwn(state.answers, d.key);
+  // A design with only screen notes (answer 'screens') still waits for its design-wide verdict.
+  const isAnswered = (d) => Object.hasOwn(state.answers, d.key) && !(d.type === 'design' && state.answers[d.key].answer === 'screens');
   /** Each item lives in one area: answered items, then the area the item names, then evidence updates, then what is only to read (explainers, pages with nothing to answer), then the open asks.
    *  A plan has no options but waits for its send-back. */
   const area = (d) => {
@@ -967,6 +1061,13 @@
   /** A page to open: an .html view, framed in a sandbox. */
   const reads = (d) => /\.html$/i.test(d.view ?? '');
   const hhmm = (at) => new Date(at).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+  /** Where an item opens: its own area, and inside Waiting on you a plan or a design has its own screen; every other ask opens on Decide. */
+  const askHref = (d) => {
+    const a = area(d);
+    if (a !== 'waiting') return `#${a === 'notes' ? 'reports' : a}`;
+    return d.type === 'plan' ? `#waiting/${d.key}` : d.kind === 'design' ? `#designs/${d.key}` : `#decide/${d.key}`;
+  };
+  const left = (at) => { const m = Math.ceil((Date.parse(at) - Date.now()) / 60_000); return m <= 0 ? 'deadline passed' : `${mins(m)} left`; };
   const isToday = (at) => new Date(at).toDateString() === new Date().toDateString();
   const day = (at) => new Date(at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
   const when = (at) => (isToday(at) ? hhmm(at) : `${day(at)} ${hhmm(at)}`);
@@ -1023,7 +1124,7 @@
   /** A short list of an area on the Summary: a picture and the title; a tap opens the area at that item. */
   function section(a, items) {
     const SHOWN = 4, line = (d) => {
-      const link = el('a', { class: 'compact', href: a === 'reports' && reads(d) ? `#reports/${d.key}` : `#${a}` }, ...compact(d, a));
+      const link = el('a', { class: 'compact', href: a === 'reports' && reads(d) ? `#reports/${d.key}` : a === 'waiting' ? askHref(d) : `#${a}` }, ...compact(d, a));
       link.onclick = () => (jump = d.key);
       return el('li', {}, link, xBtn(d));
     };
@@ -1131,7 +1232,7 @@
     }
     main.append(el('p', { class: 'eyebrow' }, icon('plan'), 'Plan'), el('h2', { dir: 'auto' }, d.title), el('p', { dir: 'auto' }, d.about ?? ''));
     if (!saved) main.append(el('iframe', { class: 'plan-view', src: url, title: `Plan: ${d.title}`, sandbox: 'allow-scripts' }),
-      el('p', { class: 'plan-summary' }, icon('plan'), `${d.sections.length} sections to approve or change, and ${d.decisions.length} decisions to make. Nothing is built until you send back.`));
+      el('p', { class: 'plan-summary' }, icon('plan'), `${plural(d.sections.length, 'section')} to approve or change, and ${plural(d.decisions.length, 'decision')} to make. Nothing is built until you send back.`));
     main.append(el('h2', {}, saved ? 'What you sent' : 'The plan'), saved ? '' : el('p', { class: 'meta' }, 'Approve or change each part. A change needs a note, an approval can carry a comment, and a decision takes an option or your own words.'));
     d.sections.forEach((s, i) => {
       const card = el('section', { class: 'plan-section', id: `plan-section-${s.id}`, 'aria-label': s.heading });
@@ -1206,6 +1307,11 @@
     return el('div', { class: `plan-scroll${saved ? ' sent' : ''}` }, el('div', { class: `plan-layout${saved ? ' sent' : ''}` }, main, panel));
   }
 
+  let designSession, boardStale = false;
+  addEventListener('message', (e) => {
+    const viewer = document.querySelector('.design-viewer[open]');
+    if (viewer && e.source === viewer.querySelector('iframe')?.contentWindow && e.data?.['sign-off'] === 'viewer-nav') viewer.dispatchEvent(new KeyboardEvent('keydown', { key: e.data.key }));
+  });
   function designReview(d) {
     const saved = state.answers[d.key], screens = (d.journeys ?? []).flatMap((journey) => journey.screens.map((screen) => ({ journey, screen }))), savedNote = saved?.notes?.[0];
     const screenKey = (target) => target && `${target.journey.id}/${target.screen.id}`, screenFor = (key) => screens.find((target) => screenKey(target) === key);
@@ -1214,11 +1320,19 @@
     for (const option of d.options ?? []) pick.append(el('option', { value: option.value }, option.label));
     pick.value = saved?.pick ?? '';
     const screenSelect = screens.length > 1 ? el('select', { 'aria-label': 'Screen for note' }, ...screens.map((target) => el('option', { value: screenKey(target) }, `${target.journey.title} — ${target.screen.title}`))) : '';
-    const selectedKey = savedNote?.journey && savedNote?.screen ? `${savedNote.journey}/${savedNote.screen}` : screenKey(screens[0]);
+    if (designSession?.key !== d.key) designSession = { key: d.key, open: false, selected: '', drafts: new Map() };
+    const session = designSession;
+    const selectedKey = session.selected || (savedNote?.journey && savedNote?.screen ? `${savedNote.journey}/${savedNote.screen}` : screenKey(screens[0]));
     if (screenSelect) screenSelect.value = screenFor(selectedKey) ? selectedKey : screenKey(screens[0]);
     const target = () => screenSelect ? screenFor(screenSelect.value) : screens[0];
-    note.value = savedNote?.note ?? '';
-    const previewPath = () => (target() && Object.values(target().screen.views)[0]) || d.preview;
+    const currentNote = () => state.answers[d.key]?.notes?.find((n) => n.journey === target()?.journey.id && n.screen === target()?.screen.id);
+    const screenLine = () => (currentNote() ? (currentNote().verdict === 'approve' ? 'Screen approved' : 'Changes requested') : 'Not reviewed yet');
+    note.value = session.drafts.get(screenKey(target())) ?? currentNote()?.note ?? '';
+    note.oninput = () => session.drafts.set(screenKey(target()), note.value);
+    const previewPath = () => {
+      const views = target()?.screen.views, form = innerWidth < 960 ? 'phone' : 'computer', theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      return views?.[`${form}_${theme}`] || views?.[`${form}_${theme === 'dark' ? 'light' : 'dark'}`] || (views && Object.values(views)[0]) || d.preview;
+    };
     const previewElement = (path) => /\.html?$/i.test(path) ? el('iframe', { class: 'design-review-preview', src: src(designUrl(d, path)), title: `Design preview: ${d.title}`, sandbox: 'allow-scripts' }) : el('img', { class: 'design-review-preview', src: src(designUrl(d, path)), alt: `Design preview: ${d.title}` });
     const preview = previewPath() ? el('div', { class: 'design-preview-window' }, previewElement(previewPath())) : '';
     const fullPreview = previewPath() ? el('a', { class: 'design-preview-full', href: src(designUrl(d, previewPath())), target: '_blank', rel: 'noopener noreferrer' }, 'Open full preview') : '';
@@ -1226,23 +1340,91 @@
       const path = previewPath();
       if (preview) preview.replaceChildren(previewElement(path));
       if (fullPreview) fullPreview.href = src(designUrl(d, path));
+      session.selected = screenKey(target());
+      note.value = session.drafts.get(session.selected) ?? currentNote()?.note ?? '';
     };
     const status = el('p', { class: 'meta', role: 'status' }, saved ? saved.label : d.status === 'draft' ? 'Draft' : 'In review');
     const err = el('p', { class: 'err', role: 'alert' });
+    let saving = false;
     const save = (verdict) => {
-      if (d.options?.length && !pick.value) { err.textContent = 'Choose a direction before sending your review.'; pick.focus(); return Promise.resolve(); }
-      const selected = target(), text = note.value.trim();
-      return call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, verdict,
-        notes: text ? [{ ...(selected && { journey: selected.journey.id, screen: selected.screen.id }), note: text }] : [], ...(pick.value && { pick: pick.value }) }) }, render);
+      const screen = session.open;
+      if (!screen && d.options?.length && !pick.value) { err.textContent = 'Choose a direction before sending your review.'; pick.focus(); return Promise.resolve(); }
+      // A screen save (the viewer) sends no design-wide verdict; a note carries the verdict of the button that saved it, on a screen or at design level.
+      const selected = target(), text = note.value.trim(), writes = (selected && screen) || text, live = new Set(screens.map(screenKey));
+      const notes = (state.answers[d.key]?.notes ?? []).filter((n) => (!n.journey || live.has(`${n.journey}/${n.screen}`)) && (n.journey !== selected?.journey.id || n.screen !== selected?.screen.id));
+      if (writes) notes.push({ ...(selected && { journey: selected.journey.id, screen: selected.screen.id }), verdict, note: text });
+      saving = true; approve.disabled = change.disabled = true;
+      return call('/api/answers', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: d.key, ...(!screen && { verdict }), ...(screen && { requested: verdict === 'change' }),
+        notes, ...(pick.value && { pick: pick.value }) }) }, () => session.drafts.delete(screenKey(selected)))
+        .finally(() => { saving = false; approve.disabled = change.disabled = state.readonly || !!state.answers_only; if (session.open) screenStatus.textContent = screenLine(); });
     };
     const approve = el('button', { class: 'open-link' }, 'Approve'), change = el('button', {}, 'Change');
     approve.disabled = change.disabled = state.readonly || !!state.answers_only;
     approve.onclick = () => save('approve').catch((e) => { err.textContent = `Couldn't save: ${e.message}`; });
     change.onclick = () => { if (!note.value.trim()) { err.textContent = 'Add a note describing what should change.'; note.focus(); return; } save('change').catch((e) => { err.textContent = `Couldn't save: ${e.message}`; }); };
-    return el('div', { class: 'design-review' }, status, d.about ? el('p', { class: 'about' }, d.about) : '', preview, fullPreview,
-      screenSelect ? el('label', {}, 'Screen for note', screenSelect) : '', d.options?.length ? el('label', {}, 'Pick a direction', pick) : '',
-      el('label', {}, screens.length ? 'Screen note' : 'Design note', note), el('div', { class: 'foot' }, approve, change), err,
+    const controls = el('div', {}, d.options?.length ? el('label', {}, 'Pick a direction', pick) : '',
+      el('label', {}, screens.length ? 'Screen note' : 'Design note', note), el('div', { class: 'foot' }, approve, change), err);
+    const open = el('button', { class: 'open-link', 'aria-haspopup': 'dialog', 'data-design': d.key }, 'Review full screen');
+    const root = el('div', { class: 'design-review' }, status, d.about ? el('p', { class: 'about' }, d.about) : '', preview, fullPreview,
+      screens.length ? open : '', screenSelect ? el('label', {}, 'Screen for note', screenSelect) : '', controls,
       d.link ? el('a', { href: d.link, target: '_blank', rel: 'noopener noreferrer' }, 'Open original design') : '');
+    if (!screens.length) return root;
+    const heading = el('h2', { id: 'design-screen-title', dir: 'auto' }), count = el('p', { class: 'meta', 'aria-live': 'polite' });
+    const stage = el('div', { class: 'design-stage' }), screenStatus = el('p', { class: 'meta', role: 'status' });
+    const previous = el('button', { 'aria-label': 'Previous screen' }, '‹ Previous'), next = el('button', { 'aria-label': 'Next screen' }, 'Next ›');
+    const close = el('button', { 'aria-label': 'Close viewer' }, 'Close');
+    const viewer = el('dialog', { class: 'design-viewer', 'aria-labelledby': heading.id }, el('header', {}, el('div', {}, count, heading), close),
+      el('div', { class: 'design-viewer-body' }, stage, el('section', { class: 'design-viewer-panel', 'aria-label': 'Screen review' },
+        el('div', { class: 'foot' }, previous, next), screenStatus)));
+    const panel = viewer.querySelector('.design-viewer-panel');
+    const draw = () => {
+      const i = screens.indexOf(target());
+      heading.textContent = `${target().journey.title} — ${target().screen.title}`;
+      count.textContent = `${i + 1} of ${screens.length}`;
+      previous.disabled = i === 0; next.disabled = i === screens.length - 1;
+      stage.replaceChildren(previewElement(previewPath())); stage.scrollTop = 0;
+      screenStatus.textContent = screenLine();
+      approve.textContent = 'Approve screen'; change.textContent = 'Request change'; err.textContent = '';
+    };
+    const step = (delta) => {
+      const i = screens.indexOf(target()) + delta;
+      if (i < 0 || i >= screens.length || saving) return;
+      session.drafts.set(screenKey(target()), note.value);
+      if (screenSelect) { screenSelect.value = screenKey(screens[i]); screenSelect.onchange(); }
+      draw();
+    };
+    previous.onclick = () => step(-1); next.onclick = () => step(1);
+    const key = (e) => {
+      if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); viewer.close(); }
+      else if (!e.target.closest?.('textarea, input, select') && !e.ctrlKey && !e.metaKey && !e.altKey && ['ArrowLeft', 'ArrowRight'].includes(e.key)) {
+        e.preventDefault(); step(e.key === 'ArrowRight' ? 1 : -1);
+      }
+    };
+    viewer.onkeydown = key;
+    let touch;
+    stage.addEventListener('touchstart', (e) => { touch = e.touches[0]; }, { passive: true });
+    stage.addEventListener('touchend', (e) => {
+      const end = e.changedTouches[0];
+      if (touch && Math.abs(end.clientX - touch.clientX) > 60 && Math.abs(end.clientX - touch.clientX) > Math.abs(end.clientY - touch.clientY) * 1.5) step(end.clientX < touch.clientX ? 1 : -1);
+      touch = null;
+    });
+    const controlsNext = controls.nextSibling;
+    open.onclick = () => {
+      session.open = true; panel.append(controls); root.append(viewer); draw(); viewer.showModal();
+    };
+    close.onclick = () => viewer.close();
+    viewer.onclose = () => {
+      session.open = false;
+      if (boardStale) {
+        boardStale = false;
+        render();
+        document.querySelector(`[data-design="${CSS.escape(d.key)}"]`)?.focus();
+        return;
+      }
+      root.insertBefore(controls, controlsNext); approve.textContent = 'Approve'; change.textContent = 'Change';
+      open.focus();
+    };
+    return root;
   }
 
   /** The report a #reports/<key> link opens (or the plan a #waiting/<key> link opens), over the whole board: a bar with the way back and its title, then its page in a sandboxed frame.
@@ -1324,47 +1506,95 @@
     sel.onchange = () => { waitSort = sel.value; try { localStorage.setItem(SORT_KEY, waitSort); } catch {} reshow('.sort select'); };
     return el('div', { class: 'filters' }, el('div', { class: 'chips', role: 'group', 'aria-label': 'Filter by type' }, ...chips), el('label', { class: 'sort' }, 'Sort', sel));
   }
-  /** Triage: the open asks one at a time, in the order the filters chose. Skip moves on without answering and is not stored; an answer moves on to the next ask. */
-  let cur = null, curAt = 0;
-  const reshow = (control) => { cur = null; curAt = 0; render(); document.querySelector(control)?.focus({ preventScroll: true }); };
-  function triage(items, hidden) {
-    if (!items.length) return el('section', { class: 'card caught' }, el('h2', {}, 'All caught up'), el('p', { class: 'meta' }, 'Nothing is waiting on you.'),
-      el('a', { class: 'more', href: '#' }, 'Back to Summary'), dismissed(hidden));
-    let i = items.findIndex((d) => d.key === cur);
-    if (i < 0) i = Math.min(curAt, items.length - 1);
-    const d = items[i], next = items[i + 1], n = items.length, card = row(d, { x: false }), dis = xBtn(d, 'Dismiss');
-    [cur, curAt] = [d.key, i];
-    const go = (key) => () => { cur = key; render(); scrollTo(0, 0); }, skip = n > 1 && el('button', { class: 'skip' }, 'Skip for now'), rec = card.querySelector('.choices .rec');
-    if (skip) skip.onclick = go(items[(i + 1) % n].key);
-    // On a phone a swipe right on the ask picks the recommended answer and a swipe left skips; a swipe in the picture row only scrolls it.
-    let start;
-    card.addEventListener('touchstart', (e) => (start = e.target.closest('.mocks, textarea') ? null : e.touches[0]), { passive: true });
-    card.addEventListener('touchend', (e) => {
-      const t = e.changedTouches[0], dx = start ? t.clientX - start.clientX : 0;
-      if (Math.abs(dx) > 90 && Math.abs(t.clientY - start.clientY) < Math.abs(dx) / 2) (dx > 0 ? rec : skip)?.click();
+  /** The plan is the lead card; the remaining asks are a grouped list linking to a focused decision. */
+  function planCard(d) {
+    const meta = [el('span', {}, plural(d.sections.length, 'section')), el('span', {}, plural(d.decisions.length, 'decision')),
+      el('span', {}, `Agent${d.filed ? ` · ${when(d.filed)}` : ''}`)];
+    return el('article', { class: 'plan-hero', id: `item-${d.key}` }, el('div', { class: 'plan-preview' }, rung(d)),
+      el('div', { class: 'plan-copy' }, el('p', { class: 'eyebrow' }, `Plan${d.project ? ` · ${d.project}` : ''}`),
+        el('h2', { dir: 'auto' }, d.title), el('p', { class: 'about', dir: 'auto' }, d.about ?? ''),
+        el('div', { class: 'plan-meta' }, ...meta), el('a', { class: 'open-link plan-open', href: `#waiting/${d.key}` }, 'Open plan')));
+  }
+  const askIcon = (d) => { const a = { design: 'designs', signin: 'you', plan: 'plan' }[typeOf(d)] ?? 'waiting'; return ICONS[a] ? a : 'waiting'; };
+  function waitingPage(items, hidden) {
+    const plans = items.filter((d) => d.type === 'plan'), asks = items.filter((d) => d.type !== 'plan');
+    const rows = asks.map((d) => {
+      const label = `Agent${d.silent_by ? ` · closes at ${when(d.silent_by)}` : d.filed ? ` · waiting since ${when(d.filed)}` : ''}`;
+      const link = el('a', { class: 'ask-card', id: `item-${d.key}`, href: askHref(d) }, icon(askIcon(d)),
+        el('span', { class: 'copy' }, el('span', { class: 'kind' }, kind(d)), el('strong', { class: 'title', dir: 'auto' }, title(d)),
+          d.why || d.about ? el('span', { class: 'meta', dir: 'auto' }, d.why || d.about) : '', el('span', { class: 'meta' }, label)));
+      return el('li', {}, link, xBtn(d));
     });
-    const hint = [rec && 'Swipe right for the recommended answer', skip && (rec ? 'left to skip' : 'Swipe left to skip')].filter(Boolean).join(', ');
-    const keys = [d.options.length && d.type !== 'design' && `1 to ${Math.min(d.options.length, 9)} answer`, skip && 'E skip', 'Z undo'].filter(Boolean).join(' · ');
-    const queue = el('ol', { class: 'queue', 'aria-label': `${n} ${n > 1 ? 'asks' : 'ask'}, one at a time` }, ...items.map((x) => {
-      const b = el('button', { ...(x === d && { 'aria-current': 'true' }) }, el('strong', { dir: 'auto' }, title(x)), el('span', { class: 'meta', dir: 'auto' }, sub(x)));
-      b.onclick = go(x.key);
-      return el('li', {}, b);
-    }));
-    return el('div', { class: 'tri' }, queue, el('div', { class: 'focus' }, el('p', { class: 'fhead' }, `${i + 1} of ${n}`),
-      el('div', { class: 'pbar', 'aria-hidden': 'true' }, el('i', { style: `width: ${((i + 1) / n) * 100}%` })),
-      d.filed ? el('p', { class: 'meta since' }, `Waiting since ${when(d.filed)}`) : '', card,
-      d.kind === 'design' || skip || dis ? el('div', { class: 'quiet' }, d.kind === 'design' ? el('a', { class: 'open-link', href: `#designs/${d.key}` }, 'Open designs') : skip || '', dis) : '', next ? el('div', { class: 'card upnext' }, el('p', { class: 'meta' }, 'Up next'), el('strong', { dir: 'auto' }, title(next))) : '',
-      hint ? el('p', { class: 'meta hint' }, hint) : '', el('p', { class: 'meta keys' }, `Keys: ${keys}`), dismissed(hidden)));
+    return el('div', { class: 'waiting-page' },
+      ...plans.map(planCard), ...(asks.length ? [el('p', { class: 'pick-label' }, 'ASKS'), el('ul', { class: 'ask-group' }, ...rows)] : []),
+      !items.length ? el('p', { class: 'empty' }, EMPTY.waiting) : '', dismissed(hidden));
+  }
+  const selected = new Map();
+  function decidePage(d, next) {
+    if (!d) return el('p', { class: 'empty' }, EMPTY.waiting);
+    const to = next ? `#decide/${next.key}` : '#waiting', skip = next && !state.readonly ? el('button', { class: 'skip' }, 'Skip for now') : null;
+    if (skip) skip.onclick = () => (location.hash = to);
+    const swipe = (page, right) => {
+      let start;
+      page.addEventListener('touchstart', (e) => (start = e.target.closest('.mocks, textarea') ? null : e.touches[0]), { passive: true });
+      page.addEventListener('touchend', (e) => {
+        const t = e.changedTouches[0], dx = start ? t.clientX - start.clientX : 0;
+        if (!start || Math.abs(dx) <= 90 || Math.abs(t.clientY - start.clientY) >= Math.abs(dx) / 2) return;
+        if (dx > 0) right?.(); else skip?.click();
+      });
+    };
+    if (d.type === 'signin') {
+      const signinPage = el('div', { class: 'decide' }, row(d, { x: false }), el('div', { class: 'decide-bar' }, skip || '', el('a', { class: 'later', href: '#waiting' }, 'Later')));
+      if (!state.readonly) swipe(signinPage);
+      return signinPage;
+    }
+    const err = el('div', { class: 'err', role: 'alert', id: `err-${d.key}` }), opts = d.options ?? [], live = !state.readonly;
+    // A pick remembered from an earlier round only counts while the ask still offers it.
+    if (!opts.some((o) => o.value === selected.get(d.key))) selected.delete(d.key);
+    const initial = selected.get(d.key) ?? d.recommend_value ?? opts[0]?.value;
+    const optionButtons = opts.map((o) => {
+      const recommended = o.value === d.recommend_value, b = el('button', { class: 'pick-option', 'aria-pressed': String(o.value === initial) },
+        el('span', { class: 'words' }, el('span', { class: 'label-line' }, el('span', { class: 'label' }, o.label),
+          recommended ? el('span', { class: 'recommend' }, 'Recommended') : ''), o.outcome ? el('span', { class: 'reason', dir: 'auto' }, o.outcome) : ''), el('span', { class: 'check', 'aria-hidden': 'true' }, '✓'));
+      b.onclick = () => { selected.set(d.key, o.value); optionButtons.forEach((btn) => btn.setAttribute('aria-pressed', String(btn === b))); answer.textContent = `Answer ${o.label}`; };
+      return b;
+    });
+    const selectedOption = () => opts.find((o) => o.value === (selected.get(d.key) ?? initial));
+    const answer = el('button', { class: 'answer' }, `Answer ${selectedOption()?.label ?? 'now'}`);
+    const answerWith = (o) => save(d, o, [...optionButtons, answer], err, () => (location.hash = to));
+    answer.onclick = () => { const o = selectedOption(); if (o) answerWith(o); };
+    const recOpt = opts.find((o) => o.value === d.recommend_value);
+    const cards = d.mocks?.length && d.options?.length ? mockCards(d, []) : null;
+    const preview = cards ?? (d.view ? rung(d) : pic(d) ? thumb('waiting', pic(d)) : proof(d));
+    const quiet = opts.find((o) => o.value === d.default_if_silent);
+    const silent = quiet ? `If you stay quiet: ${quiet.label}${d.silent_by ? ` · ${left(d.silent_by)}` : ''}` : '';
+    const head = el('div', { class: 'lead' }, el('p', { class: 'eyebrow' }, kind(d)), el('h2', { dir: 'auto' }, headline(d)));
+    const why = d.why || d.tradeoff || d.about;
+    const back = el('a', { class: 'later', href: '#waiting' }, 'Later');
+    const page = el('section', { class: 'decide' }, preview ? el('div', { class: 'decide-preview' }, preview) : '',
+      ...(d.mocks?.length ? [annotations(d)] : []), head,
+      why ? el('p', { class: 'why', dir: 'auto' }, why) : '',
+      ...(live && opts.length ? [el('p', { class: 'pick-label' }, typeOf(d) === 'yes-no' ? 'YES OR NO' : 'PICK ONE'),
+        el('ul', { class: 'pick-list', 'aria-label': d.title }, ...optionButtons.map((b) => el('li', {}, b)))] : []),
+      ...(live ? [other(d, answerOf(d.key), err, () => (location.hash = to))] : []),
+      silent ? el('p', { class: 'silent-line' }, silent) : '', err,
+      el('div', { class: 'decide-bar' }, live && opts.length ? answer : '', skip || '', back));
+    if (live) swipe(page, () => { if (recOpt && !answer.disabled) answerWith(recOpt); });
+    return page;
   }
-  // Triage keys at a desk: a number picks that answer (in the order shown), E skips, Z takes back the last tap.
+  const reshow = (control) => { render(); document.querySelector(control)?.focus({ preventScroll: true }); };
+  // On Decide, a number selects and submits an answer; E skips to the next ask, Z undoes the last answer.
   addEventListener('keydown', (e) => {
-    if (location.hash !== '#waiting' || e.ctrlKey || e.metaKey || e.altKey || e.target.closest?.('textarea, input, select')) return;
-    const k = e.key.toLowerCase(), pick = /^[1-9]$/.test(k) && document.querySelectorAll('.focus .choices button')[k - 1];
-    const act = pick || (k === 'e' ? document.querySelector('.quiet .skip') : k === 'z' && !toast.hidden && !undoBtn.hidden ? undoBtn : null);
+    if (e.ctrlKey || e.metaKey || e.altKey || e.target.closest?.('textarea, input, select')) return;
+    const k = e.key.toLowerCase(), onDecide = /^#decide\//.test(location.hash), choices = [...document.querySelectorAll('.decide .pick-option')];
+    const pick = onDecide && /^[1-9]$/.test(k) ? choices[Number(k) - 1] : null;
+    if (pick) { e.preventDefault(); pick.click(); document.querySelector('.decide-bar .answer')?.click(); return; }
+    const act = k === 'e' && onDecide ? document.querySelector('.decide .skip') : k === 'z' && (location.hash === '#waiting' || onDecide) && !toast.hidden && !undoBtn.hidden ? undoBtn : null;
     if (act && !act.disabled) e.preventDefault(), act.click();
   });
 
   function render() {
+    if (designSession?.open) return (boardStale = true);
     const by = { waiting: [], designs: [], evidence: [], reports: [], answered: [], notes: [] };
     // The board file appends new items at the end, so each list reads newest first; answers sort by their time.
     // One decision is one card: a card an open ask merges is not shown; that ask's answer closes it.
@@ -1384,23 +1614,30 @@
     const shown = waitType === 'all' ? by.waiting : by.waiting.filter((d) => typeOf(d) === waitType);
     const hidden = state.decisions.filter((d) => gone.has(d.key) && !merged.has(d.key) && area(d) === 'waiting');
     by.answered.sort((x, y) => state.answers[y.key].at.localeCompare(state.answers[x.key].at));
-    const [, at, key] = /^#(waiting|designs|evidence|reports|answered)(?:\/([\w.-]+))?$/.exec(location.hash) ?? [];
-    const link = (a, name, n) => el('a', { href: `#${a}`, ...(a === (at ?? '') && { 'aria-current': 'page' }) }, icon(a || 'summary'), name, n === undefined ? '' : el('span', { class: 'n' }, String(n)));
+    const [, at, key] = /^#(waiting|decide|designs|evidence|reports|answered)(?:\/([\w.-]+))?$/.exec(location.hash) ?? [];
+    const decideQueue = by.waiting.filter((d) => d.type === 'signin' || (d.type !== 'plan' && d.kind !== 'design'));
+    const askAt = decideQueue.findIndex((d) => d.key === key), decideAt = key ? askAt : 0;
+    const active = at === 'decide' ? 'waiting' : at;
+    const link = (a, name, n) => el('a', { href: `#${a}`, ...(a === (active ?? '') && { 'aria-current': 'page' }) }, icon(a || 'summary'), name, n === undefined ? '' : el('span', { class: 'n' }, String(n)));
     document.getElementById('nav').replaceChildren(el('p', { class: 'brand' }, 'sign-off'), link('', 'Summary'), ...Object.keys(AREAS).map((a) => link(a, NAV[a], by[a].length)));
     document.getElementById('tabs').replaceChildren(...Object.keys(AREAS).map((a) => el('a', { href: `#${a}`, 'aria-label': `${AREAS[a]}, ${by[a].length}`,
-      ...(a === at && { 'aria-current': 'page' }) }, icon(a), TAB[a])));
+      ...(a === active && { 'aria-current': 'page' }) }, icon(a), TAB[a])));
     const ro = state.readonly ? 'Read only' : FROZEN ? `Read-only copy, ${FROZEN.exported}` : '';
-    const top = el('header', { class: 'top' }, at ? el('a', { class: 'back', href: '#' }, '‹ Summary')
+    const pageTitle = at === 'decide' ? 'Decide' : AREAS[at];
+    const top = el('header', { class: 'top' }, at ? el('a', { class: 'back', href: at === 'decide' ? '#waiting' : '#' }, at === 'decide' ? '‹ Waiting on you' : '‹ Summary')
       : el('p', { class: 'date' }, new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' })),
-    el('h1', { tabindex: '-1' }, at ? AREAS[at] : 'Summary'), at ? '' : icon('you'), ro ? el('p', { class: 'meta' }, ro) : '',
-    at === 'reports' && !state.readonly && by.reports.length ? el('p', { class: 'lede' }, by.reports.some((d) => d.steps)
+    el('h1', { tabindex: '-1' }, at ? pageTitle : 'Summary'), at ? '' : icon('you'), ro ? el('p', { class: 'meta' }, ro) : '',
+    at === 'waiting' && !state.readonly && by.waiting.length ? el('p', { class: 'lede waiting-lede' }, `${shown.length} ${shown.length === 1 ? 'item needs' : 'items need'} you · ${new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' })}`)
+      : at === 'reports' && !state.readonly && by.reports.length ? el('p', { class: 'lede' }, by.reports.some((d) => d.steps)
       ? 'How the tools work, step by step. Tap one to open it.' : 'Explainers the agents made for you. Tap one to open it.')
       : at === 'answered' && by.answered.length ? el('p', { class: 'lede' }, `${by.answered.filter((d) => isToday(state.answers[d.key].at)).length} answered today.`)
       : at === 'evidence' && by.evidence.length ? el('p', { class: 'lede' }, updates(by.evidence)) : '');
-    const first = by.waiting[0], more = by.waiting.length > 1 ? `Answer all ${by.waiting.length} in Triage →` : 'Open in Triage →';
+    const first = by.waiting[0], more = by.waiting.length > 1 ? `Review all ${by.waiting.length} →` : 'Review ask →';
     const needs = el('section', { class: 'card needs' }, el('h2', {}, 'Needs you first'), ...(first ? [first.filed ? el('p', { class: 'meta since' }, `Waiting since ${when(first.filed)}`) : '', row(first, { x: false }),
       el('div', { class: 'foot' }, xBtn(first, 'Dismiss'), first.kind === 'design' ? el('a', { class: 'open-link', href: `#designs/${first.key}` }, 'Open designs') : el('a', { class: 'more', href: '#waiting' }, more))] : [el('p', { class: 'meta' }, 'Nothing is waiting on you.')]), dismissed(hidden));
-    document.getElementById('board').replaceChildren(top, ...(at === 'waiting' && !state.readonly ? [filters(by.waiting), triage(shown, hidden)]
+    document.getElementById('board').replaceChildren(top, ...(at === 'waiting' && !state.readonly ? [filters(by.waiting), waitingPage(shown, hidden)]
+      : at === 'decide' ? [decideAt < 0 ? el('p', { class: 'empty' }, 'Nothing to decide for that question.')
+        : decidePage(decideQueue[decideAt], decideQueue.length > 1 ? decideQueue[(decideAt + 1) % decideQueue.length] : undefined)]
       : at === 'designs' ? [...designGroups(by.designs)] : at === 'reports' && !state.readonly ? [by.reports.some((d) => d.steps) ? el('p', { class: 'card legend' }, ...Object.keys(MARKS).map((m) => el('span', {}, el('span', { class: `mk mk-${m}` }), MARKS[m]))) : '',
         ...(by.reports.length ? reportGroups(by.reports) : [el('p', { class: 'empty' }, EMPTY.reports)]), notes(by.notes)] : at === 'answered' && by.answered.length ? done(by.answered) : at ? [at === 'evidence' && by[at].length ? el('div', { class: 'sec-head' }, el('h2', {}, 'Updates')) : '', at === 'waiting' ? filters(by.waiting) : '', by[at].length ? el('div', { class: `list in-${at}${state.readonly ? ' readonly' : ''}` }, ...(at === 'waiting' ? shown : by[at]).map(row))
       : el('p', { class: 'empty' }, at === 'answered' && state.decisions.some((d) => gone.has(d.key) && isAnswered(d)) ? 'All done items cleared.' : EMPTY[at])] : [el('div', { class: 'tiles' }, ...Object.keys(AREAS).map((a) => tile(a, by[a]))),
@@ -1411,7 +1648,7 @@
   }
   function freeze() {
     // Answers stay as they are, but nothing in the copy can be sent.
-    document.querySelectorAll('#board .choices button, #board .mock button, #board .note button, #board .note textarea').forEach((e) => (e.disabled = true));
+    document.querySelectorAll('#board .choices button, #board .pick-list button, #board .decide-bar .answer, #board .mock button, #board .note button, #board .note textarea').forEach((e) => (e.disabled = true));
     // A browser will not open a data: link in a new tab; the inline preview is the copy.
     document.querySelectorAll('#board a[href^="data:"]').forEach((a) => a.removeAttribute('href'));
   }
@@ -1419,7 +1656,7 @@
   // Closing a report or plan goes back to its card, with the focus on its link; an open report takes the focus on its title.
   addEventListener('hashchange', () => {
     const back = !reader.hidden && reader.dataset.key;
-    if (jump && location.hash === '#waiting') [cur, jump] = [jump, null];
+    if (jump && location.hash === '#waiting') jump = null;
     if (location.hash === '#waiting') waitType = 'all';
     render();
     if (!reader.hidden) { scrollTo(0, 0); return reader.querySelector('h1').focus({ preventScroll: true }); }

package/web/point.js

@@ -17,7 +17,17 @@
   };
   window.signOffFind = find;
   if (parent === window) return;
-  let on = false;
+  let on = false, touch;
+  const navigate = (key) => parent.postMessage({ 'sign-off': 'viewer-nav', key }, '*');
+  addEventListener('keydown', (e) => {
+    if (!e.target.closest?.('textarea, input, select, [contenteditable]') && !e.ctrlKey && !e.metaKey && !e.altKey && ['ArrowLeft', 'ArrowRight', 'Escape'].includes(e.key)) navigate(e.key);
+  });
+  addEventListener('touchstart', (e) => { touch = e.touches[0]; }, { passive: true });
+  addEventListener('touchend', (e) => {
+    const end = e.changedTouches[0];
+    if (touch && Math.abs(end.clientX - touch.clientX) > 60 && Math.abs(end.clientX - touch.clientX) > Math.abs(end.clientY - touch.clientY) * 1.5) navigate(end.clientX < touch.clientX ? 'ArrowRight' : 'ArrowLeft');
+    touch = null;
+  }, { passive: true });
   const ref = (e) => {
     if (e === document.documentElement) return 'html';
     const path = [];