sign-off-axi 0.4.4 → 0.4.5

package/dist/cli.js

@@ -10,7 +10,7 @@ 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 { deliverVault, errors, readVaultExpiry, sweepVault, takeVaultExpiries, VaultError } from './vault.js';
 const FORMAT = 'https://github.com/umeranjum17/sign-off/blob/main/docs/file-formats.md';
@@ -484,7 +484,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 +515,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 +525,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 +604,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 +620,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 +976,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 +984,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');
             }
         }
@@ -1072,7 +1074,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 +1357,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 +1370,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);
@@ -2359,7 +2362,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 +2384,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/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.5",
   "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

@@ -359,6 +359,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); }
@@ -955,7 +976,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) => {
@@ -1206,6 +1228,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 +1241,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 +1261,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.
@@ -1365,6 +1468,7 @@
   });
 
   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.

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 = [];