create-pmos 0.534.0 → 0.536.0

package/workspace/public/pm/premium-report-read.js

@@ -57,6 +57,7 @@ import { presentInRecording } from './cozy-rec-bridge.js';   // while a meeting
 import { placeholderHtml } from './cozy-placeholder.js';
 import { vzStyle } from './premium-vw-open.js';
 import { reviewHtml, chatOf as rfChatOf, ICON as RF_ICON } from './report-flow.js';   // Claude's review and the template icon (batch 22 item 14, canvas RfH2, RfH6)
+import * as OU from './report-orders-ui.js';   // batch 27 item 16: the orders of a draft (canvas TpA, TpD, TpE)
 import { adler } from './cozy-adler.js';   // registers window.czViews; vzStyle adds the Viewer's sheet (cozy-vw.css)
 import { cycleGroups, cycleName, briefModel, briefGlanceHtml, briefConfirmHtml, briefWhyHtml, briefLooksHtml, paperModel, paperHtml, liveModel, liveHtml, presentHtml, dayMon, reportSummary,
   rpSumHtml, rpBarHtml, cadenceWords, goesOutWords, FORMATS, RP_ICONS } from './rp-parts.js';
@@ -73,7 +74,7 @@ const P = {
   warn: '<path d="M12 4l9 16H3zM12 10v4M12 17h.01"/>', bin: '<path d="M5 7h14M10 7V4h4v3M7 7l1 13h8l1-13"/>', box: '<path d="M4 5h16v4H4zM5 9v10h14V9M10 13h4"/>', lock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>',
   redo2: '<path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/>', undo: '<path d="M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3"/>', redo: '<path d="m15 14 5-5-5-5M20 9H9a5 5 0 0 0 0 10h3"/>',
   people: '<path d="M9 11a3.5 3.5 0 1 0 0-7a3.5 3.5 0 1 0 0 7M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 6.5M18 14a6 6 0 0 1 3.5 6"/>', list: '<path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01"/>',
-  plus: '<path d="M12 5v14M5 12h14"/>', dl: '<path d="M12 4v11M7 10l5 5 5-5M5 20h14"/>', live: '<path d="M3 17l5-5 4 4 8-8M16 8h4v4"/>', layout: '<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M10 10v10"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>', grid: '<rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/>', mark: '<path d="M7 4h10v16l-5-4-5 4z"/>', dl: '<path d="M12 4v11M7 10l5 5 5-5M5 20h14"/>', live: '<path d="M3 17l5-5 4 4 8-8M16 8h4v4"/>', layout: '<rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M10 10v10"/>',
   theme: '<path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-1-.8-1.4-.8-2.4 0-1 .8-1.6 1.8-1.6H17a4 4 0 0 0 4-4c0-4.6-4-8.4-9-8.4z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10.5" cy="7.5" r="1"/><circle cx="15" cy="7.5" r="1"/>',
 };
 const ic = (k, n) => svg(P[k], n);
@@ -437,7 +438,7 @@ function deckHtml() {
   if (!L.length) return '<p class="vz-empty">This cycle has no slides. Read it as a page.</p>';
   const i = R.i = Math.max(0, Math.min(R.i, L.length - 1));
   return `<div class="vz-slide" tabindex="0" role="group" aria-roledescription="slide" aria-label="Slide ${i + 1} of ${L.length}: ${esc(L[i].h)}. Use the arrow keys to change slide." data-r="slide">${slideCard(L[i])}</div>`
-    + `<div class="rp-nav">${ib('prev', ic('prev', 15), 'Previous slide', { off: i === 0 })}<span class="rp-count" aria-live="polite">Slide ${i + 1} of ${L.length}</span>${ib('next', ic('next', 15), 'Next slide', { off: i === L.length - 1 })}</div>`
+    + `<div class="rp-nav">${ib('prev', ic('prev', 15), 'Previous slide', { off: i === 0 })}<span class="rp-count" aria-live="polite">Slide ${i + 1} of ${L.length}</span>${ib('next', ic('next', 15), 'Next slide', { off: i === L.length - 1 })}${R.pyr && !R.cyc && R.ord && R.ord.engine && !R.edit ? ib('ord|slide', ic('mark', 15), 'Save this slide\'s layout to My slides', { cls: ' ro-slmark', off: R.busy }) : ''}</div>`
     + `<div class="vz-thumbs rp-thumbs" role="group" aria-label="Slides">`
     + L.map((x, j) => `<button type="button" class="vz-th rp-th${x.k === 'title' ? ' rp-tt' : ''}" data-r="go|${j}"${j === i ? ' aria-current="true"' : ''} aria-label="Slide ${j + 1}: ${esc(x.h)}" title="${j + 1} · ${esc(x.h)}"><span>${slideCard(x, true)}</span></button>`).join('')
     + '</div>';
@@ -473,11 +474,11 @@ function rfhHtml() {
     R.archived ? null : { act: 'share', label: 'Share', icon: 'share', exp: R.pop === 'share', pop: 'dialog' },
     { act: 'dlm', label: 'Download', icon: 'dl', exp: R.pop === 'dl' }] });
   const view = R.err ? `<p class="vz-msg" data-tone="bad" role="alert">The document could not be read: ${esc(R.err)}</p>` : !R.W ? '<p class="vz-empty" role="status">Reading the report.</p>'
-    : R.view === 'doc' ? pageHtml() : deckHtml();
+    : R.gal ? galView() : (R.view === 'doc' ? pageHtml() : deckHtml()) + ordAssHtml();
   const conf = confirm && R.BF ? czSections([{ id: 'confirm', title: 'Please confirm', count: confirm, open: true, render: () => briefConfirmHtml(R.BF, { issued: R.issued, busy: R.busy }) + (R.bfMsg ? `<p class="vz-msg" role="status">${esc(R.bfMsg)}</p>` : '') }], { key: 'report' }) : '';
   const pri = R.archived ? { act: 'unarch|' + R.row.path, label: 'Bring back', icon: 'back' } : R.issued ? null : { act: 'issue', label: 'Issue it', icon: 'send' };
   const foot = pri ? `<div class="rp-foot"><button type="button" class="rp-pri" data-r="${esc(pri.act)}" aria-label="${esc(pri.label)}" title="${esc(pri.label)}"${R.busy ? ' disabled' : ''}><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${RP_ICONS[pri.icon]}"/></svg></button></div>` : '';
-  return `<div class="vz-rpb rp-rfh">${R.conf ? confHtml() : ''}${chips}${st}${R.W && !R.err ? tools : ''}${view}${R.W && !R.err && !R.issued ? rvHtml() : ''}${conf}${askHtml()}${foot}</div>`;
+  return `<div class="vz-rpb rp-rfh">${R.conf ? confHtml() : ''}${chips}${st}${R.W && !R.err ? ordRowHtml() + tools : ''}${view}${R.W && !R.err && !R.issued ? rvHtml() : ''}${conf}${askHtml()}${foot}</div>`;
 }
 function bodyHtml() {
   if (!R.edit && rfhOn()) return rfhHtml();
@@ -488,8 +489,85 @@ function bodyHtml() {
       + (R.view === 'deck' ? '' : `<div class="vz-r1">${WAIT('Page editor')}</div>`) + '<div class="vz-ed" data-vz-ed></div></div>';
   }
   const view = R.err ? `<p class="vz-msg" data-tone="bad" role="alert">The document could not be read: ${esc(R.err)}</p>` : !R.W ? '<p class="vz-empty" role="status">Reading the report.</p>'
-    : R.view === 'deck' ? deckHtml() : R.view === 'live' ? liveView() : pageHtml();
-  return `<div class="vz-rpb">${R.conf ? confHtml() : R.W ? sumHtml() : ''}${R.W && !R.err ? cutsHtml() : ''}${R.msg ? `<p class="vz-msg" role="status" data-tone="${R.msg.tone || ''}">${esc(R.msg.text)}</p>` : ''}${R.edit ? '' : waitHtml()}${R.W && !R.err ? barHtml() : ''}${view}${R.W && !R.err && !R.issued ? rvHtml() : ''}${R.W && !R.err ? foldsHtml() : ''}${askHtml()}</div>`;
+    : R.gal ? galView() : (R.view === 'deck' ? deckHtml() : R.view === 'live' ? liveView() : pageHtml()) + ordAssHtml();
+  return `<div class="vz-rpb">${R.conf ? confHtml() : R.W ? sumHtml() + ordRowHtml() : ''}${R.W && !R.err ? cutsHtml() : ''}${R.msg ? `<p class="vz-msg" role="status" data-tone="${R.msg.tone || ''}">${esc(R.msg.text)}</p>` : ''}${R.edit ? '' : waitHtml()}${R.W && !R.err ? barHtml() : ''}${view}${R.W && !R.err && !R.issued ? rvHtml() : ''}${R.W && !R.err ? foldsHtml() : ''}${askHtml()}</div>`;
+}
+/* ── the orders of a draft (batch 27 item 16; canvas TpA, TpD, TpE; report-orders-ui.js, GET /api/report-orders) ── */
+const ORD_HIDE = 'pmos-report-orders-hidden';
+function ordHidden() { try { return new Set(JSON.parse(localStorage.getItem(ORD_HIDE) || '[]')); } catch { return new Set(); } }
+const PICS = new Map();   // order id → its slides drawn small with placeholder words (GET /api/report-orders/preview), 'wait' while read
+function ordOpts() {
+  return { esc, ic, slideCard, busy: R.busy, issued: R.issued, hidden: R.ordHide, now: R.pyr || R.cyc ? slides() : null,
+    pics: (id) => { const x = PICS.get(R.ws + '|' + id); return Array.isArray(x) ? x : null; } };
+}
+const ordRowHtml = () => (R.ord ? OU.rowHtml(R.ord, ordOpts()) : '');
+const ordAssHtml = () => (R.ord && !R.edit ? OU.assHtml(R.ord, ordOpts()) : '');
+function galView() { readPics(); return OU.galHtml(R.ord, R.gal, ordOpts()); }
+/** The pictures of the orders the gallery shows, each read once and kept (they hold placeholder words only). */
+function readPics() {
+  const me = R, S = R.ord; if (!S || !S.ok) return;
+  const ids = R.gal && R.gal.sel ? [R.gal.sel] : S.orders.map((o) => o.id).concat((S.slides || []).map((x) => x.id));
+  for (const id of ids) {
+    const k = R.ws + '|' + id; if (id === 'now' || PICS.has(k)) continue;
+    PICS.set(k, 'wait');
+    textOf('/api/report-orders/preview?' + q({ ws: R.ws, order: id })).then((h) => { const x = splitRender(h); PICS.set(k, x.slides.map((y) => ({ k: 'frame', h: y.h, html: y.html, css: x.style }))); })
+      .catch(() => PICS.set(k, [])).then(() => { if (R === me && R.gal) draw(); });
+  }
+}
+const dropPics = () => { for (const k of [...PICS.keys()]) if (/\|mine-/.test(k)) PICS.delete(k); };
+let ordT = null;
+async function readOrders() {
+  const me = R; if (!R || !R.row.path) return;
+  const j = await Promise.resolve(pmGet('/api/report-orders?' + q({ ws: R.ws, path: R.row.path }))).catch(() => null);
+  if (R !== me) return;
+  R.ord = j && j.ok ? j : null;
+  if (R.gal && !R.ord) R.gal = null;
+  draw();
+  // while the report's session writes the draft again, read the state until it lands (the file watch redraws the slides)
+  clearTimeout(ordT);
+  if (R.ord && R.ord.undo && R.ord.undo.state === 'drafting') ordT = setTimeout(() => { if (R === me) readOrders(); }, 6000);
+}
+async function ordAct(k, v) {
+  const me = R, S = R.ord;
+  if (k === 'gal') { R.gal = { sel: null }; R.pop = null; return draw(); }
+  if (k === 'close') { R.gal = null; return draw(); }
+  if (k === 'back') { R.gal = { sel: null }; return draw(); }
+  if (k === 'open') { R.gal = { sel: v, i: 0 }; return draw(); }
+  if (k === 'at') { if (R.gal) R.gal.i = +v; return draw(); }
+  if (k === 'hide') { R.ordHide.add(OU.hideKey(S, v)); try { localStorage.setItem(ORD_HIDE, JSON.stringify([...R.ordHide].slice(-200))); } catch { /* kept for this visit */ } return draw(); }
+  if (k === 'ren') { const o = S && [...S.orders, ...(S.slides || [])].find((x) => x.id === v); if (R.gal && o) R.gal.ren = o.name; draw(); const f = bodyEl() && bodyEl().querySelector('#roName'); if (f) f.focus(); return; }
+  if (R.busy) return;
+  const post = async (sub, body) => { R.busy = true; draw(); const r = await pmPost('/api/report-orders/' + sub, { ws: R.ws, ...body }).catch(() => null); if (R !== me) return null; R.busy = false; return r || { ok: false, error: 'the page could not reach PMOS' }; };
+  if (k === 'apply') {
+    const r = await post('apply', { path: R.row.path, order: v }); if (!r) return;
+    if (!r.ok) return say('The order was not applied: ' + r.error + '.', 'bad');
+    R.gal = null;
+    await readOrders(); if (R !== me) return;
+    return say(r.next ? `From the next cycle this report starts in the ${r.next.name} order. Today's draft stays as agreed.` : `Claude is writing this draft again in the ${r.order.name} order. Undo puts this one back, for one day.`);
+  }
+  if (k === 'undo') {
+    const r = await post('undo', { path: R.row.path }); if (!r) return;
+    if (!r.ok) return say('Nothing was undone: ' + r.error + '.', 'bad');
+    await reread(); if (R !== me) return; await readOrders(); if (R !== me) return;
+    return say('The draft is back as it was before the redraft.');
+  }
+  if (k === 'save' || k === 'slide') {
+    const r = await post(k, k === 'save' ? { path: R.row.path } : { path: R.row.path, n: R.i }); if (!r) return;
+    if (!r.ok) return say('Nothing was saved: ' + r.error + '.', 'bad');
+    R.ordHide.add(OU.hideKey(S, 'edit')); dropPics(); await readOrders(); if (R !== me) return;
+    return say(k === 'save' ? 'Saved to My orders. It is first in the orders, marked Mine. Only its parts and slide layouts are kept.' : `Saved to My slides: ${r.name}, its layout only.`);
+  }
+  if (k === 'renok') {
+    const r = await post('rename', { id: v, name: (R.gal && R.gal.ren) || '' }); if (!r) return;
+    if (!r.ok) return say('The name did not change: ' + r.error + '.', 'bad');
+    if (R.gal) R.gal.ren = null; dropPics(); return readOrders();
+  }
+  if (k === 'del') {
+    const r = await post('remove', { id: v }); if (!r) return;
+    if (!r.ok) return say('It was not deleted: ' + r.error + '.', 'bad');
+    R.gal = { sel: null }; dropPics(); await readOrders(); if (R !== me) return;
+    return say('Deleted from your orders. No report changed.');
+  }
 }
 /* ── Claude's review (batch 22 item 14, canvas RfH2): the checks PMOS runs on the draft, as ✦ fixes the report's own session makes ── */
 function rvHtml() {
@@ -605,9 +683,10 @@ function wire(b) {
     e.preventDefault(); act(t.dataset.r.split('|'), t);
   };
   b.onchange = (e) => { if (e.target.dataset.r === 'stime') R.sch.time = e.target.value || '09:00'; };
-  b.oninput = (e) => { if (e.target.dataset.r === 'shpass') R.shr.pass = e.target.value; };
+  b.oninput = (e) => { if (e.target.dataset.r === 'shpass') R.shr.pass = e.target.value; if (e.target.dataset.r === 'ord-name' && R.gal) R.gal.ren = e.target.value; };
   b.onkeydown = (e) => {
     if (e.key === 'Escape' && R.pop) { e.preventDefault(); e.stopPropagation(); R.pop = null; draw(); return; }
+    if (e.key === 'Escape' && R.gal) { e.preventDefault(); e.stopPropagation(); R.gal = R.gal.sel ? { sel: null } : null; draw(); return; }
     if (!R.edit && R.view === 'deck' && /^Arrow(Left|Right)$/.test(e.key) && !e.target.closest('input')) { const L = slides().length, j = R.i + (e.key === 'ArrowRight' ? 1 : -1); if (j >= 0 && j < L) { e.preventDefault(); R.i = j; draw(); const s = bodyEl().querySelector('.vz-slide'); if (s) s.focus(); } }
   };
   /* a phone swipes the slide (RpPhone "swipe for the next") */
@@ -634,6 +713,7 @@ export function fit(root) { root.querySelectorAll('.vz-fr').forEach((c) => { if
 const say = (text, tone) => { R.msg = { text, tone }; draw(); const me = R, m = R.msg; if (tone !== 'bad') setTimeout(() => { if (R === me && R.msg === m) { R.msg = null; draw(); } }, 9000); };
 async function act([k, v], t) {
   if (k === 'rv-do' || k === 'rv-no' || k === 'rv-all') return rvAct(k, v);
+  if (k === 'ord') return ordAct(v, t.dataset.r.split('|').slice(2).join('|'));
   if (k === 'pop') { R.pop = v || null; return draw(); }
   if (k === 'cut') return cutTo(v);
   if (k === 'bf') return briefAct(v, t.dataset.r.split('|').slice(2).join('|'));
@@ -1030,7 +1110,7 @@ export async function openReport(row, hand = {}) {
   if (R) present(false);
   const me = R = { row, ws: hand.ws || '', id: c.cadence, name: hand.name || row.name || c.cadence || 'Report', audience: hand.audience || '', issued: row.state === 'issued', archived: !!row.archived,
     text: '', err: '', W: null, view: 'deck', BF: null, bfRaw: null, bfMsg: '', LV: null, blank: false, i: 0, cyc: null, pyr: null, setup: undefined, pop: null, conf: false, checks: null, issueErr: '', busy: false, ask: '', askErr: '', edit: false, msg: null,
-    sch: schedPick(null), schErr: '', shr: null, rv: null, rvHide: new Set(), rvSent: new Set(), shares: null, more: [], hand, cuts: hand.cuts ? { on: 'team', team: null, sponsors: null, err: '' } : null, cycles: (hand.cycles || []).slice(), onIssue: hand.onIssue || null, onChange: hand.onChange || null, vid: 'report:' + row.path };
+    sch: schedPick(null), schErr: '', shr: null, ord: null, gal: null, ordHide: ordHidden(), rv: null, rvHide: new Set(), rvSent: new Set(), shares: null, more: [], hand, cuts: hand.cuts ? { on: 'team', team: null, sponsors: null, err: '' } : null, cycles: (hand.cycles || []).slice(), onIssue: hand.onIssue || null, onChange: hand.onChange || null, vid: 'report:' + row.path };
   const head = me.head = () => ({ id: me.vid, kind: 'Report' + (me.audience ? ' · ' + me.audience : ''), title: me.name, icon: me.view === 'doc' ? 'doc' : 'report', full: true, url: viewUrl(row, me.ws), more: me.more,
     // the template behind one icon (batch 22 item 14, canvas RfH1): format, readers, when it goes out, and its history
     presses: me.setup ? [{ act: 'chat', label: 'Talk to Claude about this report', icon: RF_ICON.chat }, { act: 'template', label: 'Template: format, readers, look, sources', icon: RF_ICON.tune }] : [],
@@ -1048,6 +1128,7 @@ export async function openReport(row, hand = {}) {
   if (R !== me) return me;
   readBrief();   // the Brief tab's count shows at once
   readReview();
+  readOrders();
   if (hand.say) me.msg = { text: hand.say };
   if (vCur() && vCur().id === me.vid && (vCur().title !== me.name || me.audience || me.setup)) { me.reopen = true; vOpen(head()); me.reopen = false; }   // the name and audience are known now
   draw();
@@ -1067,7 +1148,7 @@ async function watchFile(me) {
     if (R !== me || !h) continue;
     // a session writes the draft in many steps: read it when the file has been still for one more check, so a burst of writes is one redraw
     if (seen && h !== seen) { seen = h; pending = true; continue; }
-    if (pending) { pending = false; await reread(); if (R === me && !me.edit && !me.pop) { me.fromFile = true; draw(); me.fromFile = false; readReview(); } }
+    if (pending) { pending = false; await reread(); if (R === me && !me.edit && !me.pop) { me.fromFile = true; draw(); me.fromFile = false; readReview(); readOrders(); } }
     seen = h;
   }
 }

package/workspace/public/pm/report-orders-ui.js

@@ -0,0 +1,115 @@
+/* pm/report-orders-ui.js — the orders of a report draft in the report Viewer (batch 27 item 16; main canvas TpA, TpD, TpE). Pure html builders;
+ * premium-report-read.js holds the state and the presses (data-r="ord|…") and reads GET /api/report-orders (lib/routes-report-orders.js).
+ * The app says "order", never "template".
+ *
+ *   rowHtml(S, o)       the order line in the summary: the order's name as a chip (zero is silence for the standard order), the grid icon that
+ *                       opens the gallery (a draft), the bookmark (save as my order), Undo while its day lasts, and the next cycle's order
+ *   assHtml(S, o)       the one ✦ under the slide: Claude's pick (✕ · grid · ✓ redraft) | "Redrafting in …" | after the PM edited an order,
+ *                       "You changed this order … Save it as yours?" (✕ · bookmark). Nothing to say → ''.
+ *   galHtml(S, G, o)    the gallery: Now, then Mine, then the seven PMOS orders, each with the pictures of its first four layouts and its slide
+ *                       count; My slides; a pressed card shows its slides, its parts, what it adds or drops, and ✓ (Redraft in this order, or
+ *                       Use from the next cycle on an agreed outline). Rename and Delete on Mine only.
+ *   S = the GET answer · G = { sel, i, ren } · o = { esc, ic, slideCard, pics(id) → [slide] | null, now: [slide], busy, hidden: Set, issued }
+ */
+
+const keyOf = (S, k) => k + ':' + (S && S.slot) + ':' + ((S && S.pick && S.pick.id) || (S && S.now && S.now.id) || '');
+export const hideKey = keyOf;
+const words = (L) => (L.length <= 1 ? L.join('') : L.slice(0, -1).join(', ') + ' and ' + L[L.length - 1]);
+const ALWAYS = new Set(['overview', 'sources']);
+/** "adds Why, Scope and People; drops The week" (pure). */
+export function diffWords(d) {
+  const a = (d && d.adds) || [], r = (d && d.drops) || [];
+  if (!a.length && !r.length) return 'Same parts as your draft.';
+  return 'Compared with your draft: ' + [a.length ? 'adds ' + words(a) : '', r.length ? 'drops ' + words(r) : ''].filter(Boolean).join('; ') + '.';
+}
+const btn = (o, act, icon, label, cls = '') => `<button type="button" class="rp-tl vz-hv ro-ib${cls}" data-r="${o.esc(act)}" aria-label="${o.esc(label)}" title="${o.esc(label)}"${o.busy ? ' disabled' : ''}>${o.ic(icon, 16)}</button>`;
+
+/** The order line under the summary. */
+export function rowHtml(S, o) {
+  if (!S || !S.ok) return '';
+  const e = o.esc, n = S.now || {}, out = [];
+  const named = n.kind !== 'standard';
+  if (!o.issued) out.push(`<button type="button" class="rp-mc ro-chip" data-r="ord|gal" aria-label="${e(named ? n.name + ': see the orders' : 'See the orders')}" title="See the orders">${o.ic('grid', 14)}${named ? e(n.name) + (n.edited ? ', edited' : '') : ''}</button>`);
+  else if (named) out.push(`<span class="rp-mc ro-chip">${o.ic('grid', 14)}${e(n.name)}</span>`);
+  if (S.next) out.push(`<span class="rp-mc ro-next">Next cycle: ${e(S.next.name)}</span>`);
+  if (S.engine) out.push(btn(o, 'ord|save', 'mark', 'Save as my order'));
+  if (S.undo && S.undo.state !== 'drafting' && !o.issued) out.push(btn(o, 'ord|undo', 'undo', 'Undo the redraft'));
+  return `<div class="rp-mcs ro-row">${out.join('')}</div>`;
+}
+
+const parts = (o, list, adds, cls) => list.filter((p) => !ALWAYS.has(p.layout)).map((p) => `<span class="ro-pt${adds && adds.includes(p.part) ? ' add' : ''}${cls || ''}">${o.esc(p.part)}</span>`).join('');
+/** The one ✦ under the slide. */
+export function assHtml(S, o) {
+  if (!S || !S.ok || o.issued) return '';
+  const e = o.esc, h = o.hidden || new Set();
+  const U = S.undo;
+  if (U && U.state !== 'done' && U.order) {
+    const late = U.state === 'late';
+    return `<div class="ro-ass" role="status"><p><b class="ro-st" aria-hidden="true">✦</b> ${late ? 'The redraft in the ' + e(U.order.name) + ' order has not landed yet.' : 'Redrafting in the ' + e(U.order.name) + ' order.'}</p>`
+      + `<p class="ro-note">${late ? 'Undo puts the draft back as it was.' : 'It takes a few minutes. Every reading stays; the new draft shows here when it lands.'}</p></div>`;
+  }
+  if (S.pick && !h.has(keyOf(S, 'pick'))) {
+    const ord = (S.orders || []).find((x) => x.id === S.pick.id);
+    if (!ord) return '';
+    return `<div class="ro-ass" role="group" aria-label="Claude's pick"><p><b class="ro-st" aria-hidden="true">✦</b> The ${e(ord.name)} order fits this report's question.</p>`
+      + `<p class="ro-pts">${parts(o, ord.parts, S.pick.adds)}${(S.pick.drops || []).map((x) => `<span class="ro-pt cut">${e(x)}</span>`).join('')}</p>`
+      + `<p class="ro-note">Blue is added${(S.pick.drops || []).length ? ', struck through is dropped' : ''}. Every reading stays.</p>`
+      + `<div class="ro-acts">${btn(o, 'ord|hide|pick', 'x', 'Not now')}${btn(o, 'ord|open|' + ord.id, 'grid', 'See it with the other orders')}${btn(o, 'ord|apply|' + ord.id, 'check', 'Redraft in this order', ' rp-pri')}</div></div>`;
+  }
+  const n = S.now || {};
+  if (S.engine && n.kind === 'order' && n.edited && !h.has(keyOf(S, 'edit'))) {
+    const c = n.changes || {}, said = [(c.drops || []).length ? 'dropped ' + words(c.drops.map((x) => '“' + x + '”')) : '', (c.adds || []).length ? 'added ' + words(c.adds.map((x) => '“' + x + '”')) : ''].filter(Boolean).join(', ');
+    return `<div class="ro-ass" role="group" aria-label="Save your order"><p><b class="ro-st" aria-hidden="true">✦</b> You changed the ${e(n.name)} order${said ? ': ' + e(said) : ''}. Save it as yours?</p>`
+      + `<p class="ro-pts">${parts(o, n.parts, c.adds)}</p><p class="ro-note">It saves the parts and their slide layouts. Not the numbers or the words.</p>`
+      + `<div class="ro-acts">${btn(o, 'ord|hide|edit', 'x', 'Not now')}${btn(o, 'ord|save', 'mark', 'Save as my order', ' rp-pri')}</div></div>`;
+  }
+  return '';
+}
+
+/** Up to four pictures of an order's layouts (real slides, drawn small). Until they are read: grey boxes. */
+function pics(o, L, n = 4) {
+  if (!L) return `<span class="ro-pics" aria-hidden="true">${'<span class="ro-pic ro-wait"></span>'.repeat(n)}</span>`;
+  return `<span class="ro-pics" aria-hidden="true">${L.slice(0, n).map((s) => `<span class="ro-pic">${o.slideCard(s, true)}</span>`).join('')}</span>`;
+}
+const more = (n) => n + (n === 1 ? ' slide' : ' slides') + (n > 4 ? ' · +' + (n - 4) + ' more' : '');
+function cardHtml(S, o, c) {
+  const e = o.esc, mark = c.now ? '<span class="ro-tag">Now</span>' : c.mine ? '<span class="ro-tag">Mine</span>' : S.pick && S.pick.id === c.id ? '<span class="ro-tag ro-star" aria-label="Claude\'s pick">✦</span>' : '';
+  return `<button type="button" class="ro-card${c.now ? ' now' : ''}" data-r="ord|open|${e(c.id)}"${c.now ? ' aria-current="true"' : ''}>${pics(o, c.now ? o.now : o.pics(c.id))}`
+    + `<span class="ro-cn">${mark}<b>${e(c.name)}</b></span><small>${more(c.n)}</small></button>`;
+}
+/** The gallery (TpD), or one order pressed open. */
+export function galHtml(S, G, o) {
+  if (!S || !S.ok) return '<p class="vz-empty" role="status">Reading the orders.</p>';
+  const e = o.esc;
+  const close = `<button type="button" class="rp-tl vz-hv ro-ib" data-r="ord|close" aria-label="Close the orders" title="Close">${o.ic('x', 16)}</button>`;
+  if (G.sel) return detailHtml(S, G, o);
+  const n = S.now || {};
+  const head = S.now.kind === 'agreed'
+    ? `<p class="ro-note">Your readers agreed this order${n.since ? ' when the ' + e(n.since) + ' report went out' : ''}. A pick here is used from the next cycle; today's draft stays as agreed.</p>`
+    : S.pick ? `<p class="ro-note"><b class="ro-st" aria-hidden="true">✦</b> The ${e((S.orders.find((x) => x.id === S.pick.id) || {}).name || '')} order fits this report's question. Press a card to see it, or pick another.</p>` : '';
+  const cards = [{ id: 'now', now: true, name: n.name, n: (o.now || []).length || n.parts.length }].concat(S.orders.filter((x) => x.mine), S.orders.filter((x) => !x.mine));
+  const sl = (S.slides || []).length ? `<p class="rp-lbl">My slides</p><div class="ro-slides">${S.slides.map((s) => `<button type="button" class="ro-sl" data-r="ord|open|${e(s.id)}">${pics(o, o.pics(s.id), 1)}<small>${e(s.name)}</small></button>`).join('')}</div>` : '';
+  return `<div class="ro-gal" role="region" aria-label="Orders"><div class="ro-gh"><b>Orders</b>${close}</div>${head}`
+    + `<div class="ro-grid">${cards.map((c) => cardHtml(S, o, c)).join('')}</div>${sl}`
+    + `<p class="ro-note">An order is a default order of slides. The writer keeps every reading and may add or drop a part.</p></div>`;
+}
+function detailHtml(S, G, o) {
+  const e = o.esc;
+  const isNow = G.sel === 'now';
+  const slide = (S.slides || []).find((x) => x.id === G.sel);
+  const ord = isNow ? { id: 'now', name: S.now.name, n: (o.now || []).length, parts: S.now.parts } : slide ? { id: slide.id, name: slide.name, n: 1, parts: [{ part: slide.part, layout: slide.layout }], mine: true, slide: true } : S.orders.find((x) => x.id === G.sel);
+  if (!ord) return '';
+  const L = isNow ? o.now : o.pics(ord.id);
+  const i = Math.max(0, Math.min(G.i || 0, L ? L.length - 1 : 0));
+  const big = L && L[i] ? `<div class="vz-slide ro-big">${o.slideCard(L[i], false)}</div>` : '<div class="vz-slide ro-big"><span class="ro-pic ro-wait"></span></div>';
+  const strip = L && L.length > 1 ? `<div class="vz-thumbs rp-thumbs ro-strip" role="group" aria-label="Slides">${L.map((s, j) => `<button type="button" class="vz-th rp-th" data-r="ord|at|${j}"${j === i ? ' aria-current="true"' : ''} aria-label="Slide ${j + 1}: ${e(s.h)}"><span>${o.slideCard(s, true)}</span></button>`).join('')}</div>` : '';
+  const agreed = S.now.kind === 'agreed';
+  const sub = isNow ? 'Now' : ord.slide ? 'My slide · its layout only' : (ord.mine ? 'Mine · ' : '') + more(ord.n).split(' · ')[0] + (ord.sub ? ' · ' + ord.sub : '');
+  const diff = isNow || ord.slide ? '' : `<p class="ro-note">${e(diffWords(ord))}${agreed ? ' From the next cycle: today\'s draft stays as agreed.' : ' Every reading stays.'}</p>`;
+  const ren = G.ren ? `<div class="ro-ren"><label class="vz-lab" for="roName">Name</label><input id="roName" data-r="ord-name" value="${e(G.ren)}" maxlength="80"><button type="button" class="rp-tl vz-hv ro-ib rp-pri" data-r="ord|renok|${e(ord.id)}" aria-label="Keep this name" title="Keep this name"${o.busy ? ' disabled' : ''}>${o.ic('check', 16)}</button></div>` : '';
+  const acts = [btn(o, 'ord|back', 'prev', 'Back to the orders')];
+  if (ord.mine) acts.push(btn(o, 'ord|del|' + ord.id, 'bin', 'Delete'), btn(o, 'ord|ren|' + ord.id, 'pen', 'Rename'));
+  if (!isNow && !ord.slide && !o.issued) acts.push(btn(o, 'ord|apply|' + ord.id, 'check', agreed ? 'Use from the next cycle' : 'Redraft in this order', ' rp-pri'));
+  return `<div class="ro-gal ro-one" role="region" aria-label="${e(ord.name)}"><div class="ro-gh"><span><b>${e(ord.name)}</b><small>${e(sub)}</small></span></div>${big}${strip}`
+    + `<p class="ro-pts">${ord.parts.map((p, j) => `<span class="ro-pt${!isNow && j === i ? ' on' : ''}">${e(p.part)}</span>`).join('')}</p>${diff}${ren}<div class="ro-acts">${acts.join('')}</div></div>`;
+}

package/workspace/skills/report-write.skill

@@ -33,7 +33,7 @@ Procedure:
 5. Choose the outline for these readers and this question. Any sections, any titles, any order.
    - A recurring report keeps `agreed_outline`, the sections of its last issued issue. Add a section only when a finding needs one, drop one only when it would be empty, and say so in `outline_note` (one line).
    - `earlier_outline` is the shape of an issue written before the engine (the old fixed frame). It is an example, not an agreement: keep what served the readers.
-   - `template` is set when the PM started the report from a report template (`pmos report make <id> --template <name>`; `pmos report library --json` lists them). Its `outline` is a default order of parts, each with its slide layout: use it as the starting outline, retitle each part as a finding, and add or drop a part when the findings say so. An agreed outline wins over a template.
+   - `template` is set when the PM started the report from a report template (`pmos report make <id> --template <name>`; `pmos report library --json` lists them). Its `outline` is a default order of parts, each with its slide layout: use it as the starting outline, retitle each part as a finding, and add or drop a part when the findings say so. An agreed outline wins over a template, except when `template.chosen` is true: the PM picked that order for this cycle, so use it, and read `earlier_outline` as an example only. The template can also be an order the PM saved (its id starts with `mine-`) or one the PM applied from the report's orders; it reads the same way.
    - Each section title is a finding, not a label: "Sign-up stalls before submit", not "Sign-up". Reading only the titles tells the story.
    - Shapes other reports took, as examples and never a menu: a decision (the lean · the options and what each costs · what could reverse it · your call); a watch (today against yesterday and the week · the drop that moved most · why); a stakeholder update (are the dates on track · what each team needs and by when · open decisions · what could stop it); a review (the summary for decision · the outcomes by segment · the challenges and answers · method); did-it-work (what was promised · what we got · the verdict).
 6. Write `<slot>.report.json` (in a scratch file, then `pmos report write <id> --from <file>`):

package/workspace/test-lists/report-orders.json

@@ -0,0 +1,11 @@
+{
+  "_comment": "Batch 27 item 16: apply an order to a report draft (the ✦ pick, the orders gallery's state and pictures, the redraft in the report's own session, Undo for one day, the next cycle's order on an agreed outline) and my saved orders and slides (per-user ledger). Node only.",
+  "modules": [
+    "report-orders.test.js",
+    "report-orders-page.test.mjs"
+  ],
+  "seconds": {
+    "report-orders.test.js": 2,
+    "report-orders-page.test.mjs": 1
+  }
+}