create-pmos 0.493.0 → 0.495.0

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

@@ -18,7 +18,9 @@
  *   Issue       a confirm with the three checks of GET /api/viewer-report/checks, Issue it and Not yet. POST /api/report/issue freezes the cycle.
  *   Issued      the lock line "Issued, so it stays as sent. Changes go into the next cycle." with Start the next cycle (RpStates).
  *   Discard     a card at the foot of the panel: "Discard the Oct 12 draft?", the cycle that stays, "This cannot be undone." (RpStates).
- *   Slides      the current slide, ‹ "Slide 1 of 5" ›, and a thumbnail of each slide.
+ *   Slides      the current slide, ‹ "Slide 1 of 5" ›, and a thumbnail of each slide. A cadence draft with no designed render shows the
+ *               Pyramid deck (canvas RsA; GET /api/report-design/pyramid, lib/report-pyramid.js): answer first, the scorecard, the timeline,
+ *               Needs your call and the sources. PDF prints the same slides, one to a page; the PowerPoint file draws them too.
  *   Document    the words as paper pages: the eyebrow, the title, "In one minute", numbered sections, tables, the sources as footnotes,
  *               "Page n of N" and Download as PDF or Word (RpDoc; rp-parts.js paperModel). A designed cycle shows its designed page.
  *   Live page   the numbers Insights reads (GET /api/insights-premium): the goal tiles, Goals on track, Shipped and At risk, the picked goal's
@@ -54,7 +56,7 @@ import * as MP from './premium-mtg-present.js';   // the one presenter window fo
 import { presentInRecording } from './cozy-rec-bridge.js';   // while a meeting records, the recording tab presents it (rule 10)
 import { placeholderHtml } from './cozy-placeholder.js';
 import { vzStyle } from './premium-vw-open.js';
-import { reviewHtml, ICON as RF_ICON } from './report-flow.js';   // Claude's review and the template icon (batch 22 item 14, canvas RfH2, RfH6)
+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 { 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';
@@ -170,6 +172,8 @@ const frame = (style, inner, cls, title) => `<iframe sandbox="" tabindex="-1" ti
 /* ── what is shown ── */
 function slides() {
   if (R.cyc && R.cyc.slides.length) return R.cyc.slides.map((x) => ({ k: 'frame', h: x.h, html: x.html, css: R.cyc.style }));
+  // a cadence draft with no designed render: the finished Pyramid deck (canvas RsA), in the report's saved look or the standard PMOS look
+  if (R.pyr && R.pyr.slides.length) return R.pyr.slides.map((x) => ({ k: 'frame', h: x.h, html: x.html, css: R.pyr.style }));
   const w = R.W || { title: R.name, sections: [] };
   return [titleSlide(w)]
     .concat(w.sections.map((x) => ({ k: 'text', h: x.h, html: slideHtml(x.lines) })));
@@ -493,6 +497,16 @@ async function rvAct(k, v) {
   say((r.started ? 'The report\'s session started with ' : 'Passed to the report\'s session: ') + (todo.length === 1 ? 'one change' : todo.length + ' changes') + '. They show here as it writes them. Nothing is issued.');
 }
 function openTemplate() { import('./premium-report-tab.js').then((M) => M.openReportTab({ kind: 'report', id: R.id }, { panel: 'template' })); }
+/** The chat icon (Wawan, 2026-11-02): the report's own conversation beside it. Home opens it in its chat (pmos-chat-about); another page goes
+ *  to Home with the report open, and the conversation's context waits in sessionStorage for Home to read. */
+async function openChat() {
+  const me = R; if (!me || !me.id) return;
+  const st = await pmGet('/api/report-flow?' + q({ ws: me.ws, id: me.id })).catch(() => null);
+  const t = rfChatOf({ name: me.name, ...(st && st.ok !== false ? st : {}), latest: (st && st.latest) || { path: me.row.path } }, me.id);
+  if (!dispatchEvent(new CustomEvent('pmos-chat-about', { detail: t, cancelable: true }))) return;   // Home took it
+  try { sessionStorage.setItem('pmos-chat-about', JSON.stringify(t)); } catch { /* Home opens the chat with no context */ }
+  location.href = '/premium.html?' + q({ about: t.key, label: t.title, open: innerWidth > 760 ? 'report:' + me.id : '' });   // a phone: the chat takes the page
+}
 /** What Claude is still doing on this report, said where the PM reads it (Wawan, 2026-11-01, batch 22 item 13: "I have to wait, but there's
  *  no indication of me having to wait"). Nothing running → ''. */
 export function waitWords(x, draft) {
@@ -910,6 +924,8 @@ function saveMd() {
 function printHtml() {
   const t = esc(R.name + ' ' + (R.row.slot || ''));
   if (R.cyc) return frameDoc(R.cyc.style, R.view === 'deck' && R.cyc.slides.length ? R.cyc.slides.map((x) => x.html).join('') : R.cyc.body, R.view === 'deck' && R.cyc.slides.length ? 'pmos-print pmos-print-deck' : 'pmos-print pmos-print-doc').replace('<head>', '<head><title>' + t + '</title>');
+  // PDF = the same Pyramid slides, one to a 1280 x 720 page (canvas RsA, RsD)
+  if (R.pyr && R.pyr.slides.length && R.view === 'deck') return frameDoc(R.pyr.style, R.pyr.slides.map((x) => x.html).join(''), 'pmos-print pmos-print-deck').replace('<head>', '<head><title>' + t + '</title>');
   const css = '<link rel="stylesheet" href="' + esc(href('premium-report-print.css')) + '">';
   const w = R.W || { title: R.name, sections: [] };
   const inner = R.view === 'deck'
@@ -930,7 +946,7 @@ function printIt() {
  *  its saved design is HTML the presenter cannot read yet, so it, and a presenter that does not start, use the full-screen view below. */
 function presentIt() {
   const me = R;
-  if (R.cyc || !R.W || R.err) return present(true);
+  if (R.cyc || (R.pyr && R.view === 'deck') || !R.W || R.err) return present(true);
   if (presentInRecording({ kind: R.view === 'deck' ? 'pmos-deck' : 'report', ref: R.row.path, title: R.name, ws: R.ws })) return;
   if (typeof MP.presentMaterial === 'function') {
     const win = typeof MP.openAudience === 'function' ? MP.openAudience() : null;
@@ -971,7 +987,9 @@ async function readCycle() {
   const c = await Promise.resolve(pmGet('/api/report-design/cycle?' + q({ ws: R.ws, path: R.row.path }))).catch(() => null);
   if (R !== me) return;
   R.cyc = null;
-  if (c && c.ok && c.designed) { try { const x = splitRender(await textOf('/api/report-design/cycle-html?' + q({ ws: R.ws, path: R.row.path }))); if (R === me) R.cyc = x; } catch { /* the words are shown */ } }
+  if (c && c.ok && c.designed) { try { const x = splitRender(await textOf('/api/report-design/cycle-html?' + q({ ws: R.ws, path: R.row.path }))); if (R === me) { R.cyc = x; R.pyr = null; } } catch { /* the words are shown */ } }
+  // not designed: the Pyramid deck of a cadence draft (404 for any other report, which keeps the title slide and a slide per section)
+  else { let x = null; try { x = splitRender(await textOf('/api/report-design/pyramid?' + q({ ws: R.ws, path: R.row.path }))); } catch { x = null; } if (R === me) R.pyr = x && x.slides.length ? x : null; }
 }
 const viewUrl = (row, ws) => '/premium-viewer.html?' + q({ open: 'report', path: row.path, ws });
 
@@ -985,11 +1003,12 @@ export async function openReport(row, hand = {}) {
   vzStyle(); rpStyle();
   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, setup: undefined, pop: null, conf: false, checks: null, issueErr: '', busy: false, ask: '', askErr: '', edit: false, msg: null,
+    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 };
   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: 'template', label: 'Template: format, readers, look, sources', icon: RF_ICON.tune }] : [], onPress: (a) => { if (a === 'template' && R === me) openTemplate(); },
+    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 }] : [],
+    onPress: (a) => { if (R !== me) return; if (a === 'template') openTemplate(); else if (a === 'chat') openChat(); },
     render: (b) => { syncMore(); b.innerHTML = panelHtml(); wire(b); }, onClose: () => { if (R === me && !me.reopen) { present(false); R = null; } } });
   vOpen(head());
   try { R.text = await textOf('/api/doc?' + q({ ws: R.ws, path: row.path })); R.W = wordsOf(R.text, R.name); if (!hand.name && R.W.title) R.name = R.W.title; } catch (x) { R.err = String((x && x.message) || x); R.W = { title: R.name, sections: [] }; }

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

@@ -23,7 +23,9 @@
  *   A CHANGE Claude passes from the chat (block.change) goes to the report's own session (POST /api/report-flow/ask), then the report opens.
  *   THE TEMPLATE (panel 'template', the header icon): the same questions on the current version, "changed" marks, Template history with Go back
  *     (POST /api/report-flow/restore), Keep the current template and Make a different template (POST /api/report-flow/template). Its sections and
- *     look, the cycles and Delete template stay one press further (panel 'manage', the view described above).
+ *     look show as two read-only rows (canvas TplA): a sections change the PM named in the chat (block.sections) or a newer look made in Design
+ *     is ONE ✦ "Make T<n+1>" (✕ drops it, ✓ makes it, with the settings, in one press). Editing the sections and look, the cycles and Delete
+ *     template stay one press further (panel 'manage', the view described above).
  *
  * Every write is a press here, behind the launch nonce (http.js pmPost). Claude writes nothing: the routes refuse an agent session. A render is
  * HTML the server sanitized, shown in a frame with an empty sandbox, so nothing in it runs. Nothing is sent outward. */
@@ -79,16 +81,37 @@ export function openReportTab(block, o = {}) {
   if (!t && block.proposal) { setTimeout(() => adoptSetUp(id, block.proposal.name), 0); }
   if (!t || JSON.stringify(t.block) !== JSON.stringify(block) || (o.panel && o.panel !== t.panel)) {
     t = { id, block, nv: 'deck', sched: block.proposal ? (block.proposal.schedule || 'off') : null, open: false, view: 'structure', busy: false, msg: '', setup: null, docs: [], S: null, Z: null, sv: null, dv: null, render: new Map(), gone: false, loaded: false, i: 0, ask: null,
-      q: block.proposal ? RF.picksOf(block.proposal) : null, panel: block.proposal ? 'new' : o.panel || 'current', chat: o.chat || (t && t.chat) || null, F: null, tq: null, passed: t ? t.passed : false };
+      q: block.proposal ? RF.picksOf(block.proposal) : null, panel: block.proposal ? 'new' : o.panel || (tplAsk(block) ? 'template' : 'current'), chat: o.chat || (t && t.chat) || null, F: null, tq: null, passed: t ? t.passed : false };
     T.set(id, t);
     if (block.id && t.panel === 'manage') load(t);
   } else if (o.chat) t.chat = o.chat;
   // a change passes on the PM's press of the chip only; an answer that opens the view by itself shows the report as it is
   if (block.id && block.change && !t.passed && !o.auto && !PASSED.has(JSON.stringify(block))) { PASSED.add(JSON.stringify(block)); t.passed = true; passChange(t); return show(t); }
   if (block.id && t.panel === 'current') return current(t);
-  if (block.id && t.panel === 'template') { const v = show(t); loadFlow(t).then(() => redraw(t)); return v; }
+  if (block.id && t.panel === 'template') { const v = show(t); loadFlow(t).then(() => { redraw(t); if (!o.auto) makeLook(t); }); return v; }
   return show(t);
 }
+/** A chat change to a set-up report's sections or look opens its template (canvas TplA), where it waits as one ✦. */
+const tplAsk = (b) => !!(b && b.id && !b.change && ((Array.isArray(b.sections) && b.sections.length) || (typeof b.design === 'string' && b.design.trim())));
+/** The look the PM asked for in words is made first (a design job, as Design's turn), once per chat change, on the PM's press of the chip; when
+ * it lands it is the newer look, and the ✦ offers it with the sections. Nothing is saved before ✓. */
+async function makeLook(t) {
+  const words = typeof t.block.design === 'string' ? t.block.design.trim() : '';
+  const key = 'look:' + JSON.stringify(t.block);
+  if (!words || PASSED.has(key) || !t.F || !t.F.ok) return;
+  PASSED.add(key);
+  const had = t.F.look && t.F.look.newer ? t.F.look.newer.n : null;
+  const r = await post('/api/report-design/turn', { id: t.block.id, text: words, points: [] });
+  if (!r || !r.ok) { t.msg = 'The look was not started: ' + why(r, 'the page could not reach PMOS') + '.'; redraw(t); return; }
+  t.making = words; redraw(t);
+  const end = Date.now() + POLL_MAX;
+  while (Date.now() < end && T.get(t.id) === t) {
+    await new Promise((ok) => setTimeout(ok, POLL_MS * 2));
+    const F = await get('/api/report-flow', { id: t.block.id });
+    if (F && F.ok && F.look && F.look.newer && F.look.newer.n !== had) { t.F = Object.assign({}, t.F, { look: F.look }); t.making = null; t.tplDrop = false; redraw(t); return; }
+  }
+  t.making = null; t.msg = 'The look is not ready yet. It shows here when you open the template again.'; redraw(t);
+}
 /** The report's state from GET /api/report-flow; for the template, the answers start from its current version. */
 async function loadFlow(t) {
   const F = await get('/api/report-flow', { id: t.block.id });
@@ -122,11 +145,19 @@ async function waitFor(t) {
   }
   t.waiting = false;
 }
-/** A change Claude passed from the chat: to the report's own session, then the report opens (RfH2). */
+/** A change Claude passed from the chat: to the report's own session, on the latest draft by its file, then the report opens (RfH2).
+ * An issued latest cycle is frozen: the change is not passed, and the PM is told to change the template instead. */
 async function passChange(t) {
-  const r = await post('/api/report-flow/ask', { id: t.block.id, text: t.block.change });
-  const said = r && r.ok ? (r.started ? "The report's session started with your change. It shows in the report as it writes it. Nothing is issued." : "Passed to the report's session. It shows in the report as it writes it. Nothing is issued.")
-    : 'The change was not passed on: ' + why(r, 'the page could not reach PMOS') + '.';
+  const F = await loadFlow(t);
+  const to = F && F.ok ? RF.changeTargetOf(F) : {};
+  let said;
+  if (to.frozen) said = `The ${to.frozen} report is issued, so it is frozen. The change was not passed on: change the template for the next cycle.`;
+  else {
+    const r = await post('/api/report-flow/ask', { id: t.block.id, text: t.block.change, ...(to.path ? { path: to.path } : {}) });
+    const which = to.slot ? `the ${to.slot} draft` : 'the draft';
+    said = r && r.ok ? (r.started ? `The report's session started with your change to ${which}. It shows in the report as it writes it. Nothing is issued.` : `Passed to the report's session for ${which}. It shows in the report as it writes it. Nothing is issued.`)
+      : 'The change was not passed on: ' + why(r, 'the page could not reach PMOS') + '.';
+  }
   t.block = { kind: 'report', id: t.block.id }; t.passed = false;
   return current(t, said);
 }
@@ -239,19 +270,38 @@ function currentHtml(t) {
 function templateHtml(t) {
   if (!t.F) return '<p class="vz-empty" role="status">Reading the template.</p>';
   if (t.F.err) return `<p class="vz-msg" data-tone="bad">${esc(t.F.err)}</p>`;
-  const T0 = t.F.template || {};
-  const tpl = { base: t.base, current: T0.current, versions: T0.versions || [], diff: RF.diffOf(t.tq, t.base) };
-  return RF.questionsHtml(t.tq, { template: tpl, busy: t.busy, msg: t.msg })
+  return RF.questionsHtml(t.tq, { template: tplOf(t), name: t.F.name, making: t.making, busy: t.busy, msg: t.msg })
     + `<p class="vz-note">Its sections and look, and its cycles: <button type="button" class="rp-linkbtn vz-hv" data-rt="manage">Sections, look and cycles</button></p>`;
 }
 const qOf = (t) => (t.block.proposal ? t.q : t.tq);
+/** The sections a list of titles becomes when saved (lib/report-structure.js planFromSections): Sources last, and one named section alone gets
+ * "Needs your call" after it. */
+export function savedTitles(L) {
+  const seen = new Set(), list = (L || []).map((x) => String(x || '').replace(/\s+/g, ' ').trim()).filter((x) => x && !seen.has(x.toLowerCase()) && seen.add(x.toLowerCase()));
+  if (!list.length) return [];
+  const si = list.findIndex((x) => /^sources?\b/i.test(x) || /\bsources?$/i.test(x));
+  const src = si >= 0 ? list.splice(si, 1)[0] : 'Sources';
+  if (list.length === 1) list.push('Needs your call');
+  return list.concat([src]);
+}
+/** The template as the panel draws it (canvas TplA): its versions, its sections and look, and the change waiting for ✓: the sections the PM
+ * named in the chat (block.sections) when they differ from the saved ones, and a newer look made in Design and not saved yet. */
+function tplOf(t) {
+  const F = t.F || {}, T0 = F.template || {};
+  const S = F.sections || { saved: null, titles: [] }, L = F.look || null;
+  const named = Array.isArray(t.block.sections) && t.block.sections.length ? savedTitles(t.block.sections) : null;
+  const sNext = named && named.map((x) => x.toLowerCase()).join('\n') !== (S.titles || []).map((x) => String(x).toLowerCase()).join('\n') ? named : null;
+  return { base: t.base, current: T0.current, versions: T0.versions || [], diff: RF.diffOf(t.tq, t.base), dropped: !!t.tplDrop,
+    sections: { saved: S.saved, titles: S.titles || [], next: sNext },
+    look: L ? { saved: L.saved, words: L.words, follows: L.follows || [], next: L.newer || null } : null };
+}
 /** Readers, typed: kept as typed; Draft it and Make a different template wait for a name. */
 function typed(t, e) {
   const k = e.target && e.target.dataset ? e.target.dataset.rt : '';
   const q = qOf(t); if (k !== 'aud' || !q) return;
   q.audience = e.target.value;
   const b = paneOf(t) && paneOf(t).querySelector(t.block.proposal ? '[data-rt="draftit"]' : '[data-rt="maketpl"]');
-  if (b) b.disabled = t.busy || !q.audience.trim() || (!t.block.proposal && !RF.diffOf(q, t.base).length);
+  if (b) b.disabled = t.busy || !q.audience.trim() || (!t.block.proposal && !RF.templateChange(tplOf(t), q).length);
 }
 /** A pick in Goes out (how often, the day, the time). The template redraws, so its "changed" marks follow. */
 function picked(t, e) {
@@ -344,12 +394,17 @@ async function press(t, e) {
   if (a === 'draftit') { await setUp(t); return; }
   if (a === 'keep') { await current(t); return; }
   if (a === 'manage') { t.panel = 'manage'; t.loaded = false; show(t); await load(t); return; }
+  if (a === 'tpl-no') { t.tplDrop = true; t.msg = 'Dropped. Nothing is saved; the template stays T' + ((t.F && t.F.template && t.F.template.current) || 1) + '.'; redraw(t); return; }
   if (a === 'maketpl') {
+    const tp = tplOf(t), body = { id: t.block.id, settings: RF.settingsOfPicks(t.tq) };
+    if (!tp.dropped && tp.sections.next) body.sections = tp.sections.next;
+    if (!tp.dropped && tp.look && tp.look.next) body.design = tp.look.next.n;
     await act(t, async () => {
-      const r = await post('/api/report-flow/template', { id: t.block.id, settings: RF.settingsOfPicks(t.tq) });
+      const r = await post('/api/report-flow/template', body);
       if (!r || !r.ok) return 'The template did not change: ' + why(r, 'the page could not reach PMOS') + '.';
+      if (body.sections) t.block = Object.assign({}, t.block, { sections: undefined, structure: undefined });
       if (r.state) t.F = r.state; await loadFlow(t);
-      return 'T' + r.n + ' is the current template. The next draft follows it; the earlier drafts and cycles stay with their own.';
+      return 'T' + r.n + ' is the current template. The next cycle follows it; the open draft stays as it is, and the earlier cycles keep their look.';
     });
     return;
   }
@@ -358,7 +413,7 @@ async function press(t, e) {
       const r = await post('/api/report-flow/restore', { id: t.block.id, n: +v });
       if (!r || !r.ok) return 'It did not go back: ' + why(r, 'the page could not reach PMOS') + '.';
       await loadFlow(t);
-      return 'Back to T' + r.n + '. It is the current template again. Nothing is deleted.';
+      return 'Back to T' + r.n + (r.restored ? ': ' + r.restored : '') + '. It is the current template again. Nothing is deleted.';
     });
     return;
   }

package/workspace/public/pm/premium-shell.js

@@ -538,14 +538,50 @@ $('#dBody').addEventListener('click', async (e) => {
   const b = e.target.closest('[data-lead="refresh"]'); if (!b || !S.key || !S.key.startsWith('pop:')) return;
   b.disabled = true; await sendText(S.key, leadAsk(S.key));
 });
+/* A sent message shows at once (batch 24 item 2: "enter the prompt is so long to appear on the chat"): its turn draws the moment the PM presses
+ * Enter, lighter until PMOS takes it. It leaves when the transcript holds the PM's turn (the same words, or any PM turn from that moment on),
+ * and after 3 minutes at most. A message that was not sent leaves at once and its words go back in the box. Keyed by row key, or 'sid:' + id. */
+const PEND = { key: null, list: [], th: null }, PEND_MAX = 180000;
+const pendOf = (key) => { if (PEND.key !== key) { PEND.key = key; PEND.list = []; PEND.th = null; } return PEND.list; };
+function pendAdd(key, text, files) {
+  const conv = key.startsWith('sid:') ? PEND.sidConv : S.conv;
+  const p = { text, files: files || [], at: new Date().toISOString(), sent: false, n: ((conv && conv.messages) || []).filter((m) => m.role === 'user').length };
+  pendOf(key).push(p); return p;
+}
+function pendHtml(key, conv) {
+  const list = pendOf(key); if (!list.length) return '';
+  const k = (t) => splitFiles(shownUser(t)).text.replace(/\s+/g, ' ').trim();
+  const users = ((conv && conv.messages) || []).filter((m) => m.role === 'user');
+  const lastUser = users.reduce((n, m) => Math.max(n, Date.parse(m.at) || 0), 0), now = Date.now();
+  PEND.list = list.filter((p) => {
+    if (!p.sent) return true;
+    const t0 = Date.parse(p.at);
+    return now - t0 <= PEND_MAX && !(lastUser && lastUser >= t0 - 2000) && !users.slice(p.n).some((m) => k(m.text) === k(p.text));
+  });
+  return PEND.list.map((p) => `<div class="turn u pend${p.sent ? '' : ' sending'}"><div class="ub">${filesHtml(p.files)}${p.text ? userHtml(p.text) : ''}</div></div>`).join('');
+}
+/** Draws the waiting turns now, without a read: the thread as last read plus the new turn, and the stream scrolled to its end. */
+function pendDraw(key) {
+  if (key.startsWith('sid:')) { if (S.sid !== key.slice(4)) return; }
+  else if (S.key !== key) return;
+  const box = $('#dBody .stream'); if (!box) return;
+  if (!key.startsWith('sid:') && PEND.th) drawThread(PEND.th, key, S.conv);
+  else {
+    let w = $('#pendW', box); if (!w) { box.insertAdjacentHTML('beforeend', '<div id="pendW"></div>'); w = $('#pendW', box); }
+    putHtml(w, pendHtml(key, key.startsWith('sid:') ? PEND.sidConv : S.conv));
+  }
+  const b = $('#dBody'); b.scrollTop = b.scrollHeight;
+}
 export function drawThread(th, key, conv) {
   if (S.key !== key) return;
+  pendOf(key); PEND.th = th;
   const box = $('#dBody .stream'); if (!box) return;
   drawLead(box, th);
   let t = $('#thr', box); if (!t) { box.insertAdjacentHTML('beforeend', '<div id="thr"></div>'); t = $('#thr', box); }
   const b = $('#dBody'), atEnd = b.scrollHeight - b.scrollTop - b.clientHeight < 80;
   S.conv = conv;
-  putHtml(t, threadHtml(th) + sessionHtml(conv, th.goal, { answer: true }));
+  const pw = $('#pendW', box); if (pw) pw.remove();   // a first message drew its turn before the thread was read
+  putHtml(t, threadHtml(th) + sessionHtml(conv, th.goal, { answer: true }) + pendHtml(key, conv));
   ctxAuto(key, conv);
   S.goal = th.goal || null; S.draft = readyDraft(conv); S.session = th.session || null;
   syncTerm(termTarget({ live: th.session, command: th.resume, ws: new URLSearchParams(location.search).get('ws') }));
@@ -773,15 +809,29 @@ $('#dBody').addEventListener('submit', async (e) => {
   const inp = $('#askIn'), text = inp.value.trim(), key = S.key;
   if (!key && S.sid) {   // premium-session-list: a session the list opened that has no row of its own
     if (!text) { $('#askNote').textContent = 'Write a message for Claude.'; return; }
-    const id = S.sid, r = await pmPost('/api/session/say', { id, text });
-    if (!r || !r.ok) { $('#askNote').textContent = (r && r.error) || 'The message was not sent.'; return; }
-    inp.value = ''; $('#askNote').textContent = 'Sent.'; drawSlash(); setTimeout(() => loadSid(id), 400); return;
+    const id = S.sid, pk = 'sid:' + id, p = pendAdd(pk, text);
+    inp.value = ''; drawSlash(); growAsk(); pendDraw(pk);   // the turn shows at once (batch 24 item 2)
+    const r = await pmPost('/api/session/say', { id, text }).catch(() => null);
+    if (!r || !r.ok) {
+      PEND.list = pendOf(pk).filter((x) => x !== p); pendDraw(pk);
+      if (S.sid === id && !inp.value) { inp.value = text; growAsk(); }
+      $('#askNote').textContent = (r && r.error) || 'The message was not sent.'; return;
+    }
+    p.sent = true; pendDraw(pk);
+    $('#askNote').textContent = 'Sent.'; setTimeout(() => loadSid(id), 400); return;
   }
   if (!key) { $('#askNote').textContent = 'This row has no conversation, so the message was not sent.'; return; }
   const files = attachNames();
   if (files === null) { $('#askNote').textContent = 'A file is still saving. Send when its chip shows its size.'; return; }
   if (!text && !files.length) { $('#askNote').textContent = 'Write a message for Claude.'; return; }
-  if (await sendText(key, text, files)) { inp.value = ''; inp.placeholder = 'Message Claude, or type /'; clearAttach(); drawSlash(); growAsk(); }
+  // the turn shows and the box empties at once (batch 24 item 2); a send that fails takes the turn away and puts the words back
+  const p = pendAdd(key, text, files);
+  inp.value = ''; drawSlash(); growAsk(); pendDraw(key);
+  if (await sendText(key, text, files)) { p.sent = true; inp.placeholder = 'Message Claude, or type /'; clearAttach(); pendDraw(key); }
+  else {
+    PEND.list = pendOf(key).filter((x) => x !== p); pendDraw(key);
+    if (S.key === key && !inp.value) { inp.value = text; growAsk(); }
+  }
 });
 
 /* ── on scroll: a card's head sticks while its card is on screen. The old hero no longer folds into a dock (premium-agreed-design). ── */
@@ -1424,7 +1474,8 @@ async function loadSid(id) {
   syncTerm(termTarget({ live: c && c.ok && c.state !== 'ended' ? id : null }));
   const box = $('#dBody .stream'); if (!box) return;
   const b = $('#dBody'), atEnd = b.scrollHeight - b.scrollTop - b.clientHeight < 80;
-  putHtml(box, c && c.ok ? sessionHtml(c) : turnA(ptx('The conversation of this session could not be read.')));
+  if (c && c.ok) PEND.sidConv = c;
+  putHtml(box, c && c.ok ? sessionHtml(c) + pendHtml('sid:' + id, c) : turnA(ptx('The conversation of this session could not be read.')));
   $('#askNote').textContent = c && c.ask ? 'Claude is waiting for your answer above.' : 'Your message goes to this session.';
   if (atEnd) b.scrollTop = b.scrollHeight;
   if (c && c.ok && c.state !== 'ended' && $('#dlg').classList.contains('on')) R.sidTimer = setTimeout(() => loadSid(id), 2000);

package/workspace/public/pm/premium.css

@@ -285,6 +285,7 @@ a.round{color:inherit;text-decoration:none}
 .tc{min-width:0}
 .tt{margin:0;font-size:var(--fs-3);line-height:1.55;color:var(--ink);max-width:58ch}
 .turn.u{justify-items:end}
+.turn.u.pend.sending .ub{opacity:.72}   /* batch 24 item 2: a sent turn shows at once, a touch lighter until PMOS takes it */
 .ub{background:var(--solid);color:var(--on-solid);padding:11px 16px;border-radius:18px 18px 8px 18px;font-size:var(--fs-3);line-height:1.45;max-width:86%}
 .acard{margin-left:40px;background:var(--well);border-radius:var(--r-in);padding:20px 22px;display:grid;gap:14px;animation:rise .6s var(--ease) both}
 .still .turn,.still .acard{animation:none}   /* a redraw of a live chat keeps its turns still (premium-shell.js putHtml) */

package/workspace/public/pm/report-flow.js

@@ -7,9 +7,14 @@
  *   changedOf(q, base)                → ['output' | 'audience' | 'schedule']   what differs from the current template
  *   diffOf(q, base)                   → ['Format: Slides → Document', …]   the same, in words
  *   questionsHtml(q, o)               the questions (RfH4, RfH7): Format, Readers, Goes out, Look, Sources, then Draft it.
- *                                     o.template draws them as the template (RfH3): "changed" marks, the history, Keep the current template and
+ *                                     o.template draws them as the template (RfH3, TplA): Format, Readers, Goes out, Sections (chips, in
+ *                                     order, read only) and Look (a small title slide and one line); "changed" marks; ONE ✦ "Make T<n+1>" when
+ *                                     the sections or the look change (✕ drops it, ✓ makes it); the history; Keep the current template and
  *                                     Make a different template
- *   historyHtml(versions)             Template history: T<n>, what it is, when, the cycles issued with it, Go back to T<n>
+ *   templateChange(T, q)              → [words]   everything a press of ✓ would change: the settings, the sections, the look
+ *   changeTargetOf(F)                 → { path, slot } | { frozen: slot } | {}   where a change from the chat goes: the latest draft; an issued
+ *                                     latest cycle is frozen; no cycle yet → {} (the first draft takes it)
+ *   historyHtml(versions)             Template history: T<n>, what it is in words, when, the cycles issued with it, what Go back to T<n> restores
  *   waitHtml(F)                       the report's current state while no cycle is written yet: drafting, ended, or no draft (RfH1)
  *   reviewHtml(rv, o)                 Claude's review of a draft in the proposal pattern (RfH2): one line, a ✦ row per fix with Not now and Do it,
  *                                     Do all, and "N other checks found nothing"
@@ -19,7 +24,24 @@
 const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 const SV = (d, n = 16) => `<svg viewBox="0 0 24 24" width="${n}" height="${n}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
 export const ICON = { go: 'M5 12h14M13 6l6 6-6 6', x: 'M6 6l12 12M18 6L6 18', check: 'M5 12.5l4.5 4.5L19 7.5', back: 'M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3',
-  tune: 'M4 7h10M18 7h2M4 17h2M10 17h10M14 5v4M8 15v4' };
+  tune: 'M4 7h10M18 7h2M4 17h2M10 17h10M14 5v4M8 15v4', chat: 'M5 6.5A2.5 2.5 0 0 1 7.5 4h9A2.5 2.5 0 0 1 19 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4 3.5V16h.5A2.5 2.5 0 0 1 5 13.5z' };
+
+/** The chat a report's header icon opens beside it (Wawan, 2026-11-02: "How do I chat to continue adjusting the template?"): the report's own
+ *  conversation, pop:report-<id>. A pop: key carries what it is about as its opening context (lib/briefing-premium-agent.js popRow), so Claude knows
+ *  the report and its draft, and a change comes back as the change block the chip passes to the report's own session. */
+export function chatOf(st = {}, id = '') {
+  const sid = String(id).replace(/[^A-Za-z0-9._-]+/g, '-').replace(/^[^A-Za-z0-9]+/, '').slice(0, 90) || 'report';
+  const name = String(st.name || 'this report'), draft = st.latest && st.latest.path ? String(st.latest.path) : '';
+  const settings = [st.output && (FORMAT_NAMES[st.output] || [st.output])[0], st.audience].filter(Boolean).join(' · ');
+  return { key: 'pop:report-' + sid, title: name,
+    intro: 'Tell me what to change in ' + name + '. I pass it to the report\'s own session, and the draft beside us changes. Nothing is issued.',
+    placeholder: 'Change the report',
+    context: { title: name, subject: 'A report set up in PMOS (report id ' + id + ')' + (settings ? ': ' + settings : ''),
+      say: 'When the PM asks to change the draft, answer in a few lines and end with ONE fenced code block with the language tag pmos-report holding {"kind":"report","id":"' + id
+        + '","change":"the change, in the PM\'s words"}. The PM presses its chip to pass it to the report\'s own session. Do not change the draft yourself. The format, readers, schedule, look and sources change with the template icon in the report\'s header.',
+      facts: [['Report id', id]].concat(draft ? [['Latest draft', draft]] : []), files: draft ? [draft] : [] } };
+}
+
 export const FORMAT_NAMES = { 'google-slides': ['Slides', 'Read aloud or presented.'], 'google-doc': ['Document', 'Read alone, with tables and footnotes.'],
   pdf: ['PDF', 'A fixed page to read or print.'], 'google-sheets': ['Sheets', 'The numbers as a table.'], confluence: ['Confluence page', 'A page in your wiki.'] };
 export const CADENCES = [['weekly', 'Every week'], ['bi-weekly', 'Every two weeks'], ['monthly', 'Every month'], ['daily', 'Every day']];
@@ -27,6 +49,11 @@ const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
 const TIMES = ['07:00', '08:00', '09:00', '10:00', '12:00', '14:00', '16:00', '17:00'];
 
 /** The answers a new report starts with: Claude's picks. */
+export function changeTargetOf(F) {
+  const L = F && F.latest;
+  if (!L || !L.path) return {};
+  return L.state === 'issued' ? { frozen: L.slot } : { path: L.path, slot: L.slot };
+}
 export function picksOf(p = {}) {
   const s = p.schedule && typeof p.schedule === 'object' && p.schedule.cadence ? p.schedule : null;
   return { output: p.output || 'google-slides', audience: p.audience || '', repeat: !!s, cadence: s ? s.cadence : 'weekly', day: (s && s.day) || 'Mon', dayOfMonth: (s && s.dayOfMonth) || 1, time: (s && s.time) || '09:00',
@@ -100,6 +127,55 @@ function lookHtml(o) {
   const words = o.look ? `<p class="vz-note">Your words: “${esc(o.look)}”. Claude makes this look after the first draft; until then it uses the standard look.</p>` : '';
   return `<fieldset class="rf-q"><legend>Look</legend><p class="rf-fix"><b>Standard PMOS look</b><span>Nunito, navy title slides, 16:9</span></p>${words}</fieldset>`;
 }
+/* ── the template's sections and look (canvas TplA) ── */
+/** Section chips in order. was: the saved titles; a title new in `now` is marked new, a title gone is struck through. */
+function chipsHtml(now, was) {
+  const low = (L) => (L || []).map((x) => String(x).toLowerCase());
+  const w = low(was), n = low(now);
+  const on = (now || []).map((t, i) => `<span class="rf-cp"${was && !w.includes(n[i]) ? ' data-k="new"' : ''}>${esc(t)}${was && !w.includes(n[i]) ? '<span class="rf-sr"> (new)</span>' : ''}</span>`);
+  const gone = was ? (was || []).filter((t, i) => !n.includes(w[i])).map((t) => `<span class="rf-cp" data-k="gone"><s>${esc(t)}</s><span class="rf-sr"> (taken out)</span></span>`) : [];
+  return `<div class="rf-cps">${on.concat(gone).join('')}</div>`;
+}
+function tplSectionsHtml(T) {
+  const S = T.sections; if (!S) return '';
+  const next = S.next && !T.dropped ? S.next : null;
+  return `<fieldset class="rf-q"><legend>Sections${next ? ' ' + tag('changed', 'ch') : ''}</legend>${chipsHtml(next || S.titles || [], next ? S.titles || [] : null)}</fieldset>`;
+}
+function tplLookHtml(T, name, o) {
+  const L = T.look; if (!L) return '';
+  const next = L.next && !T.dropped ? L.next : null;
+  const words = next ? next.words : L.words;
+  const std = next ? next.n == null : L.saved == null;
+  const fol = !std && (L.follows || []).length ? `<small>Follows ${esc(L.follows.join(', '))}</small>` : std ? '<small>Nunito, navy title slides, 16:9</small>' : '';
+  const making = o && o.making ? `<p class="vz-note" role="status">Claude is making the look you asked for: “${esc(o.making)}”. It shows here to approve when it is ready.</p>` : '';
+  return `<fieldset class="rf-q"><legend>Look${next ? ' ' + tag('changed', 'ch') : ''}</legend><div class="rf-lk"><span class="rf-mini" data-k="${std ? 'std' : 'own'}" aria-hidden="true"><b>${esc(name || '')}</b></span>`
+    + `<p class="rf-fix"><b>${esc(words || 'Standard PMOS look')}</b>${fol}</p></div>${making}</fieldset>`;
+}
+/** Everything ✓ would change, in words: the settings (diff), then the sections and the look. */
+export function templateChange(T, q) {
+  if (!T) return [];
+  const out = (q ? changedOf(q, T.base).length : 0) ? (T.diff || []).slice() : [];
+  if (T.dropped) return out;
+  if (T.sections && T.sections.next) out.push('Sections: ' + (sectionsDiff(T.sections.titles, T.sections.next) || 'the same'));
+  if (T.look && T.look.next) out.push('Look: ' + (T.look.words || 'Standard PMOS look') + ' → ' + (T.look.next.words || 'Standard PMOS look'));
+  return out;
+}
+/** "+ Customers, − Risk watch", or "new order" (the same words lib/report-templates.js sectionsDiff says). */
+export function sectionsDiff(was, now) {
+  const A = was || [], B = now || [], a = A.map((x) => String(x).toLowerCase()), b = B.map((x) => String(x).toLowerCase());
+  const out = B.filter((t, i) => !a.includes(b[i])).map((t) => '+ ' + t).concat(A.filter((t, i) => !b.includes(a[i])).map((t) => '− ' + t));
+  return out.length ? out.join(', ') : a.join('\n') !== b.join('\n') ? 'new order' : '';
+}
+/** The ✦ that makes T<n+1> (TplA 2, 3): the change in words, "T<n> keeps its draft and cycles", ✕ drops it, ✓ makes it. Only for a sections
+ * or look change: a format, readers or schedule change the PM made here is said in the note under the questions, as before. */
+function proposalHtml(T, words, a, o) {
+  if (T.dropped || !((T.sections && T.sections.next) || (T.look && T.look.next))) return '';
+  const n = (T.versions || []).reduce((m, v) => Math.max(m, v.n), 0) + 1;
+  return `<div class="rf-fx rf-tplx"><span class="rf-star" aria-hidden="true">✦</span><span class="rf-fxt"><b>Make T${n}</b>${words.map((w) => `<span>${esc(w)}</span>`).join('')}`
+    + `<span>T${esc(T.current || 1)} keeps its draft and cycles.</span></span>`
+    + `<button type="button" class="rf-ib vz-hv" ${a}="tpl-no" aria-label="Not now" title="Not now">${SV(ICON.x)}</button>`
+    + `<button type="button" class="rf-ib pri vz-hv" ${a}="maketpl" aria-label="Make T${n}" title="Make T${n}"${o.busy ? ' disabled' : ''}>${SV(ICON.check)}</button></div>`;
+}
 function sourcesHtml(o) {
   const L = (o.sources || []).filter(Boolean);
   if (!L.length) return '';
@@ -110,9 +186,11 @@ export function historyHtml(versions = [], a = 'data-rt', o = {}) {
   if (!versions.length) return '';
   const day = (iso) => { const d = new Date(iso || ''); return Number.isFinite(d.getTime()) ? d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) : ''; };
   const pend = o.pending ? `<li class="rf-hv" data-k="new"><b>T${(versions[0] ? versions[0].n : 0) + 1}</b><span>${esc(o.pending)}<em>Unsaved · waits for Make a different template</em></span></li>` : '';
-  const rows = versions.map((v) => `<li class="rf-hv"${v.current ? ' aria-current="true"' : ''}><b>T${v.n}</b><span>${esc(v.why || v.words || '')}<em>${esc([day(v.at), v.current ? 'current' : '', v.cycles ? v.cycles + (v.cycles === 1 ? ' cycle issued' : ' cycles issued') : ''].filter(Boolean).join(' · '))}</em></span>`
+  // each version says what it is; one that is not current also says what Go back restores (TplA 4): format, readers, schedule, sections, look
+  const rows = versions.map((v) => `<li class="rf-hv"${v.current ? ' aria-current="true"' : ''}><b>T${v.n}</b><span>${esc(v.why || v.words || '')}<em>${esc([day(v.at), v.current ? 'current' : '', v.cycles ? v.cycles + (v.cycles === 1 ? ' cycle issued' : ' cycles issued') : ''].filter(Boolean).join(' · '))}</em>`
+    + (!v.current && v.words ? `<em class="rf-rest">Going back restores: ${esc(v.words)}</em>` : '') + '</span>'
     + (v.current ? '' : `<button type="button" class="rf-ib vz-hv" ${a}="restore|${v.n}" aria-label="Go back to T${v.n}" title="Go back to T${v.n}"${o.busy ? ' disabled' : ''}>${SV(ICON.back)}</button>`) + '</li>').join('');
-  return `<section class="rf-hist"><h3>Template history</h3><ol>${pend}${rows}</ol><p class="vz-note">Going back makes that version the current one. Nothing is deleted.</p></section>`;
+  return `<section class="rf-hist"><h3>Template history</h3><ol>${pend}${rows}</ol><p class="vz-note">Going back makes that version the current one. Nothing is deleted. Cycles already made keep the look they were made with; the open draft stays as it is.</p></section>`;
 }
 /**
  * The questions. q = picksOf(…) as the PM changed it. o = { template?: { base, versions, diff }, look, sources, busy, msg }.
@@ -120,16 +198,21 @@ export function historyHtml(versions = [], a = 'data-rt', o = {}) {
  */
 export function questionsHtml(q, o = {}, a = 'data-rt') {
   const T = o.template, ch = T ? changedOf(q, T.base) : [];
-  const st = T ? (ch.length ? 'Template · changed, not saved yet' : 'Template · T' + (T.current || 1)) : 'Waits on your answers';
+  const all = T ? templateChange(T, q) : [];
+  const nextN = T ? (T.versions || []).reduce((m, v) => Math.max(m, v.n), 0) + 1 : 0;
+  const st = T ? (all.length ? (ch.length ? 'Template · changed, not saved yet' : 'Template · T' + (T.current || 1) + ', T' + nextN + ' waiting') : 'Template · T' + (T.current || 1)) : 'Waits on your answers';
   const head = `<p class="rf-st"><i class="rf-dot" data-k="you" aria-hidden="true"></i>${esc(st)}</p>`;
-  const body = formatHtml(q, ch, a) + readersHtml(q, ch, a, o) + goesHtml(q, ch, a) + lookHtml(o) + (T ? '' : sourcesHtml(o));
+  const tpl = T && (T.sections || T.look);
+  const body = formatHtml(q, ch, a) + readersHtml(q, ch, a, o) + goesHtml(q, ch, a) + (tpl ? tplSectionsHtml(T) + tplLookHtml(T, o.name, o) : lookHtml(o)) + (T ? '' : sourcesHtml(o));
   const msg = o.msg ? `<p class="vz-msg" role="status">${esc(o.msg)}</p>` : '';
   if (!T) {
     return `<div class="rf-qs">${head}${body}${msg}<div class="rf-foot"><span class="vz-note">Nothing goes out</span><button type="button" class="rf-ib pri vz-hv" ${a}="draftit" aria-label="Draft it" title="Draft it"${o.busy || !q.audience.trim() ? ' disabled' : ''}>${SV(ICON.go, 18)}</button></div></div>`;
   }
-  const words = ch.length ? T.diff : [];
-  const note = words.length ? `<p class="rf-chg">${tag('changed', 'ch')} ${esc(words.join('; '))}. This makes a different template. The current one keeps its draft and its cycles.</p>` : '';
-  return `<div class="rf-qs">${head}${body}${note}${historyHtml(T.versions, a, { pending: words.length ? words.join('; ') : '', busy: o.busy })}${msg}`
+  const words = all;
+  const fx = proposalHtml(T, words, a, o);
+  const note = words.length && !fx ? `<p class="rf-chg">${tag('changed', 'ch')} ${esc(words.join('; '))}. This makes a different template. The current one keeps its draft and its cycles.</p>` : '';
+  const ask = tpl && !fx ? `<p class="vz-note">To change the look or the sections, ask in the chat. Claude proposes; you approve.</p>` : '';
+  return `<div class="rf-qs">${head}${body}${fx}${note}${ask}${historyHtml(T.versions, a, { pending: words.length ? words.join('; ') : '', busy: o.busy })}${msg}`
     + `<div class="rf-foot"><button type="button" class="rf-ib vz-hv" ${a}="keep" aria-label="Keep the current template" title="Keep the current template">${SV(ICON.back)}</button>`
     + `<button type="button" class="rf-ib pri vz-hv" ${a}="maketpl" aria-label="Make a different template" title="Make a different template"${o.busy || !words.length || !q.audience.trim() ? ' disabled' : ''}>${SV(ICON.check, 18)}</button></div></div>`;
 }

package/workspace/public/pm/wf-page.css

@@ -23,6 +23,14 @@ body.wf-page { min-height: 100vh; overflow: hidden; font-family: var(--cz-sans);
 .wfl .t { font-size: var(--fs-3); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wfl .n { font-size: var(--fs-2); color: var(--cz-ink3); font-weight: 600; }
 .wfl.arch .t { color: var(--cz-ink3); }
+.wfl .wfb { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+.wfl .wfb:focus-visible, .wfl .wfs:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; border-radius: 8px; }
+/* the star (batch 24 item 3, canvas DfA): filled on the default; an outline only on hover or focus elsewhere, and always on touch */
+.wfl .wfs { width: 30px; height: 30px; margin: -4px 0; border-radius: 999px; display: inline-grid; place-items: center; border: 0; padding: 0; background: none; color: var(--cz-ink3); cursor: pointer; flex: none; opacity: 0; }
+.wfl:hover .wfs, .wfl:focus-within .wfs, .wfl .wfs.on { opacity: 1; }
+.wfl .wfs:hover { background: var(--cz-card); color: var(--cz-ink2); box-shadow: 0 0 0 1px var(--cz-hair); }
+.wfl .wfs.on, .wfl .wfs.on:hover { color: var(--cz-risk); }
+@media (hover: none) { .wfl .wfs { opacity: 1; } }
 .wf-sub { font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink3); padding: 14px 10px 4px; }
 .wf-page .wfi { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; background: var(--cz-well); color: var(--cz-ink2); flex: none; }
 .wfl .wfi, .wf-head .wfi { background: var(--cz-well2); }