create-pmos 0.494.0 → 0.496.0

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

@@ -55,7 +55,8 @@ import { statusOf as ivStatus } from './ini-view-model.js';
 import { initiativeRename, taskRename } from './rename-press.js';
 import { setSay } from './cozy-xv.js';
 import { narrowForm } from './pn-narrow.js';
-import * as BP2 from './bd-pane.js';   // the Board as the first panel: fit(), the rows that open beside, the open row's mark
+import * as BP2 from './bd-pane.js';
+import * as LS from './load-shapes.js';   // the skeleton and the slow-case line while the board is read (page-open-speed, SpD)   // the Board as the first panel: fit(), the rows that open beside, the open row's mark
 
 const VIEW_KEY = 'pmos.board.view', PVIEW_KEY = 'pmos.board.pview', SPAN_KEY = 'pmos.board.span', GROUPING_KEY = 'pmos.board.grouping';
 let M = null;                     // the model
@@ -68,6 +69,8 @@ let span = SPANS.some(([k]) => k === store.get(SPAN_KEY)) ? store.get(SPAN_KEY)
 let tab = 'ini';
 let SH_N = 0; let SH_FULL = false; let SH_LOADED = false;   // the Shared tab's number, whether it has read the teams, whether the first count was asked
 let readTimer = null;
+const SKEL = $('#ibBody').innerHTML;   // the grey rows the page opens with (premium-board.html), put back if a failure line replaced them
+LS.slowLine($('#ibBody'), () => M);
 let readTries = 0;     // reads that answered "reading" in a row: the next ask waits longer each time
 let foldOpen = false;             // the Monitor and Evaluate rows under the table
 let sprintSet = false;            // "This sprint" starts on, once, when the board has a sprint
@@ -101,7 +104,7 @@ const I = {
   flag: 'M5 21V4M5 4h11l-2 4 2 4H5', note: 'M4 5h16v11h-9l-5 4v-4H4z', spark: 'M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z',
   doc: 'M6 3h9l4 4v14H6zM14 3v5h5', link: 'M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1', chev: 'M7 10l5 5 5-5', chevUp: 'M7 14l5-5 5 5',
   move: 'M4 12h12M12 6l6 6-6 6M20 5v14', hold: 'M9 5v14M15 5v14', archive: 'M4 5h16v4H4zM6 9v10h12V9M10 13h4',
-  track: 'M3 5h18v4H3zM3 11h18v4H3zM3 17h12v3H3z', time: 'M4 6h9M8 12h11M6 18h7',
+  track: 'M3 5h18v4H3zM3 11h18v4H3zM3 17h12v3H3z', time: 'M4 6h9M8 12h11M6 18h7', info: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 11v5M12 8h.01',
 };
 const plural = (n, a, b) => (n === 1 ? a : b);
 const ago = (iso, short) => { const t = Date.parse(iso || ''); if (!t) return ''; const m = Math.max(0, Math.round((Date.now() - t) / 60000)); return m < 1 ? 'just now' : m < 60 ? m + ' min' + (short ? '' : ' ago') : m < 60 * 36 ? Math.round(m / 60) + ' h' + (short ? '' : ' ago') : Math.round(m / 1440) + ' days' + (short ? '' : ' ago'); };
@@ -242,52 +245,77 @@ function drawHead() {
   setPageGaps(((M.header && M.header.missing) || []).length);
 }
 let jiraReading = false;   // a press is reading Jira again: the chip's Adler wears his glasses until the next read of the Board lands
-const CHIP_F = [['late', 'late', 'm-warn', (n) => n + ' late'], ['risk', 'risk', 'm-warn', (n) => n + ' at risk'], ['blocked', 'red', 'm-crit', (n) => n + ' blocked'], ['idle', 'q', '', (n) => n + ' idle 30+ days']];
+const CHIP_F = [['late', 'late', 'm-warn', 'Late'], ['risk', 'risk', 'm-warn', 'At risk'], ['blocked', 'red', 'm-crit', 'Blocked'], ['idle', 'q', '', 'Idle 30+ days']];
 /** The sprint filter (the "Sprint N only" chip and Filter's Sprint group) shows on the Sprint span only among the timeline's spans (TsSprintFilter);
  *  the stage track keeps its chip. */
 const curView = () => (PHONE.matches ? pview : narrow() ? nview : view);
 const sprintFilterOn = () => curView() !== 'time' || span === 'sprint';
+/** What needs a look (batch 24 item 7, canvas BbB): new asks, late, at risk, blocked and idle are ONE pill of dots and numbers. A press opens the
+ *  rows; a row opens what its chip opened (the asks, a metric's trend, whose "Show only" filters); a filter that is on turns off at once.
+ *  A row that is zero is not listed, and the pill is not drawn when every row is zero (zero is silence). */
+function needHtml(C, open) {
+  const rows = [];
+  if (C.asks) rows.push({ k: 'asks', dot: 'you m-info', n: C.asks, name: plural(C.asks, 'New ask', 'New asks'), say: C.asks + ' new ' + plural(C.asks, 'ask', 'asks') });
+  for (const [k, tone, mo, name] of CHIP_F) if (C[k]) rows.push({ k, dot: tone + (mo ? ' ' + mo : ''), n: C[k], name, say: C[k] + ' ' + name.toLowerCase() });
+  if (!rows.length) return '';
+  const on = rows.some((r) => F.chips.has(r.k));
+  const item = (r) => (r.k === 'asks'
+    ? `<button type="button" class="bd-nr" id="chAsks" aria-haspopup="dialog"><i class="cz-dot ${r.dot}"></i>${esc(r.name)}<span class="k">${r.n}</span></button>`
+    : `<button type="button" class="bd-nr${F.chips.has(r.k) ? ' on' : ''}" data-f="${r.k}" aria-pressed="${F.chips.has(r.k)}"><i class="cz-dot ${r.dot}"></i>${esc(r.name)}<span class="k">${r.n}</span></button>`);
+  return `<span class="bd-grpw2 bd-needw" id="bdNeedw"><button type="button" class="bd-chip bd-need${on ? ' on' : ''}" id="chNeed" aria-haspopup="true" aria-expanded="${open}" aria-controls="bdNeedMenu" aria-label="${esc(rows.map((r) => r.say).join(', '))}. Show them" title="${esc(rows.map((r) => r.say).join(' · '))}">`
+    + rows.map((r) => `<span><i class="cz-dot ${r.dot}"></i>${r.n}</span>`).join('') + SV(I.chev) + '</button>'
+    + `<span class="bd-grpm bd-needm" id="bdNeedMenu" role="group" aria-label="Needs a look"${open ? '' : ' hidden'}><span class="bd-mlbl">Needs a look</span>${rows.map(item).join('')}</span></span>`;
+}
+const menuOpen = (id) => !!$('#' + id) && !$('#' + id).hidden;
 function drawChips() {
   const J = M.jira || {}, C = M.chips || {}, sp = J.sprint, rel = J.release, phone = small();
-  const jira = J.readAt ? (phone ? 'Jira ' + ago(J.readAt, true) : 'Jira · read ' + ago(J.readAt)) : phone ? 'Jira not read' : 'Jira · not read';
+  const jira = J.readAt ? 'Jira · read ' + ago(J.readAt) : 'Jira · not read';
   const sprint = [sp ? sp.name : null, rel ? rel.name + ' ships ' + rel.at.replace(/^(\d+) (\w+)$/, '$2 $1') : null].filter(Boolean).join(' · ') || 'No sprint on record';
-  const asks = C.asks == null ? 'New asks · not read' : null;
-  const flt = (keys) => CHIP_F.filter(([k]) => keys.includes(k)).map(([k, tone, mo, word]) => (C[k] ? `<button type="button" class="bd-chip gh${F.chips.has(k) ? ' on' : ''}" data-f="${k}" aria-pressed="${F.chips.has(k)}"><i class="cz-dot ${tone} ${mo}"></i>${esc(word(C[k]))}</button>` : '')).join('');
   const thisSprint = sp && (view === 'track' || view === 'time' || phone) && sprintFilterOn() ? `<button type="button" class="bd-chip${F.chips.has('sprint') ? ' on' : ''}" data-f="sprint" aria-pressed="${F.chips.has('sprint')}" title="${F.chips.has('sprint') ? 'Shows only the initiatives with work in ' + esc(sp.name) + '. Press to show all.' : 'Press to show only the initiatives with work in ' + esc(sp.name) + '.'}">${esc(sp.name)} only</button>` : '';   // it named no sprint and read like a heading (testing fixes)
-  // All products (PgBoard): one Jira chip with the oldest read of any product, and every product's new asks; the sprint stays per product
-  // AdM2: the chip's S face carries the read's mood: calm when Jira was read within a day and a half, honest when it was not, glasses on while
-  // a press reads it again. Settings > Adler > Off keeps the refresh icon.
+  // All products (PgBoard): one Jira control with the oldest read of any product, and every product's new asks; the sprint stays per product
+  // AdM2: Adler's S face carries the read's mood: calm when Jira was read within a day and a half, honest when it was not, glasses on while
+  // a press reads it again. Settings > Adler > Off keeps the refresh icon. Batch 24 item 7 (BbB): the face alone, an amber pip when the read is
+  // old, the words on hover (and for a screen reader).
   const jMood = jiraReading ? 'thinking' : J.readAt && Date.now() - Date.parse(J.readAt) < 36 * 3600000 ? 'handled' : 'honest';
-  const jiraChip = `<button type="button" class="bd-chip bd-adc" id="chJira" title="${ALL ? 'Read Jira again for every product' : 'Read Jira again'}">${faceOr(jMood, 's', SV(I.refresh), { label: false })}<span>${esc(jira)}</span></button>`;
-  const askChip = `<button type="button" class="bd-chip" id="chAsks" aria-haspopup="dialog">${asks ? esc(asks) : `<i class="cz-dot you${C.asks ? ' m-info' : ''}"></i><b>${C.asks}</b> new ${plural(C.asks, 'ask', 'asks')}`}</button>`;
+  const jSay = jira + '. ' + (ALL ? 'Press to read Jira again for every product' : 'Press to read Jira again');
+  const jiraChip = `<button type="button" class="bd-chip bd-jf" id="chJira" title="${esc(jSay)}" aria-label="${esc(jSay)}">${faceOr(jMood, 's', SV(I.refresh), { label: false })}${jMood === 'honest' ? '<i class="bd-pip" aria-hidden="true"></i>' : ''}<span class="vh">${esc(jira)}</span></button>`;
+  const need = needHtml(C, menuOpen('bdNeedMenu'));
   if (phone) {
-    const docs = M.docs && M.docs.rows ? M.docs.rows.length : 0;
-    $('#bdChipset').innerHTML = thisSprint + jiraChip + askChip + flt(['late', 'risk', 'blocked', 'idle']) + `<button type="button" class="bd-chip" id="chDocs">Docs ${docs}</button><button type="button" class="bd-chip" id="chShared">Shared${SH_N ? ' ' + SH_N : ''}</button>`;
+    $('#bdChipset').innerHTML = thisSprint + jiraChip + need + `<button type="button" class="bd-chip" id="chShared">Shared${SH_N ? ' ' + SH_N : ''}</button>`;
     return;
   }
-  // the timeline's legend sits at the end of the chip row (PgTimeline), with a program milestone only where a program is drawn and "On hold" only
-  // where a hold is drawn (feedback batch 9 item 8: zero is silence)
-  const lgd = view === 'time' && span !== 'sprint' ? '<span class="bd-sp"></span>' + legendHtml(!byProduct && !!groups(visible()), hasHold(visible()), { ...planKeys(visible()), ...gapKeys(visible()), range: visible().some((r) => fcRange(r)) }) : '';
-  $('#bdChipset').innerHTML = jiraChip
-    + (ALL ? '' : `<button type="button" class="bd-chip" id="chSprint" aria-haspopup="dialog">${SV(I.cal)}<span>${esc(sprint)}</span></button>`)
-    + askChip + '<span class="bd-vr"></span>' + flt(['late', 'risk', 'blocked', 'idle'])
-    + (thisSprint ? '<span class="bd-sp"></span>' + thisSprint : '') + lgd;
+  // the timeline's legend (PgTimeline) goes behind an info icon at the end of the row (BbB), with a program milestone only where a program is drawn
+  // and "On hold" only where a hold is drawn (feedback batch 9 item 8: zero is silence)
+  const lo = menuOpen('bdLgdMenu');
+  const lgd = view === 'time' && span !== 'sprint' ? `<span class="bd-grpw2 bd-lgdw"><button type="button" class="bd-ib bd-lgdb" id="bdLgdBtn" aria-haspopup="true" aria-expanded="${lo}" aria-controls="bdLgdMenu" aria-label="What the bars mean" title="What the bars mean">${SV(I.info)}</button>`
+    + `<span class="bd-grpm bd-lgdm" id="bdLgdMenu"${lo ? '' : ' hidden'}><span class="bd-mlbl">What the bars mean</span>${legendHtml(!byProduct && !!groups(visible()), hasHold(visible()), { ...planKeys(visible()), ...gapKeys(visible()), range: visible().some((r) => fcRange(r)) })}</span></span>` : '';
+  $('#bdChipset').innerHTML = (ALL ? '' : `<button type="button" class="bd-chip" id="chSprint" aria-haspopup="dialog">${SV(I.cal)}<span>${esc(sprint)}</span></button>`)
+    + thisSprint + '<span class="bd-sp"></span>' + need + lgd + jiraChip;
 }
+const closeMenu = (id, btn) => { const m = $('#' + id); if (m && !m.hidden) { m.hidden = true; const b = $('#' + btn); if (b) b.setAttribute('aria-expanded', 'false'); return true; } return false; };
+const toggleMenu = (id, btn) => { const m = $('#' + id), o = m.hidden; m.hidden = !o; $('#' + btn).setAttribute('aria-expanded', String(o)); if (o) { const f = m.querySelector('button'); if (f) f.focus(); } };
 $('#bdChipset').addEventListener('click', (e) => {
+  if (e.target.closest('#bdLgdBtn')) { closeMenu('bdNeedMenu', 'chNeed'); toggleMenu('bdLgdMenu', 'bdLgdBtn'); return; }
+  if (e.target.closest('#chNeed')) { closeMenu('bdLgdMenu', 'bdLgdBtn'); toggleMenu('bdNeedMenu', 'chNeed'); return; }
   const f = e.target.closest('[data-f]');
   if (f) {
-    const k = f.dataset.f;
-    // a metric chip opens its trend (BdPanel), whose "Show only" filters; a chip that is on turns off at once
-    if (k !== 'sprint' && !F.chips.has(k)) { Acts.open.trend(k, f); return; }
-    if (F.chips.has(k)) F.chips.delete(k); else F.chips.add(k); drawChips(); drawInit(); return;
+    const k = f.dataset.f, inNeed = !!f.closest('#bdNeedMenu');
+    if (inNeed) closeMenu('bdNeedMenu', 'chNeed');
+    // a metric row opens its trend (BdPanel), whose "Show only" filters; a row that is on turns off at once
+    if (k !== 'sprint' && !F.chips.has(k)) { Acts.open.trend(k, inNeed ? $('#chNeed') : f); return; }
+    if (F.chips.has(k)) F.chips.delete(k); else F.chips.add(k); drawChips(); drawInit(); if (inNeed) { const b = $('#chNeed') || $('#bdFilter'); b.focus(); } return;
   }
   const b = e.target.closest('button'); if (!b) return;
   if (b.id === 'chJira') refreshJira(b);
   else if (b.id === 'chSprint') Acts.open.sprint(b);
-  else if (b.id === 'chAsks') Acts.open.asks(b);
-  else if (b.id === 'chDocs') setTab('docs');
+  else if (b.id === 'chAsks') { closeMenu('bdNeedMenu', 'chNeed'); Acts.open.asks($('#chNeed')); }
   else if (b.id === 'chShared') setTab('shared');
 });
+$('#bdChipset').addEventListener('keydown', (e) => {
+  if (e.key !== 'Escape') return;
+  if (closeMenu('bdNeedMenu', 'chNeed')) { e.stopPropagation(); $('#chNeed').focus(); } else if (closeMenu('bdLgdMenu', 'bdLgdBtn')) { e.stopPropagation(); $('#bdLgdBtn').focus(); }
+});
+document.addEventListener('click', (e) => { if (!e.target.closest('#bdNeedw')) closeMenu('bdNeedMenu', 'chNeed'); if (!e.target.closest('.bd-lgdw')) closeMenu('bdLgdMenu', 'bdLgdBtn'); });
 /** Read Jira again: the Jira source's own refresh (POST /api/sources/refresh), the one the Sources list runs. It starts a read and changes no record. */
 async function refreshJira(btn) {
   if (btn) btn.disabled = true;
@@ -517,9 +545,8 @@ function drawInit() {
   $$('#ibTabs [data-v]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.v === v)));
   { const sb = $('#bdSort'), Ls = SO.labels(); if (sb) { sb.setAttribute('aria-label', Ls.aria); sb.title = Ls.title; sb.classList.toggle('on', Ls.on); } }
   $('#bdView').innerHTML = SV(v === 'time' ? I.time : I.track); $('#bdView').setAttribute('aria-label', 'Change view. Now: ' + (v === 'time' ? 'Timeline' : 'Stage track'));
-  $('#bdSpans').hidden = v !== 'time' || phone;
+  drawSpanPicker('desk', v === 'time' && !phone);
   $('#bdColsw').hidden = v !== 'time' || phone; if ($('#bdColsw').hidden) closeCols();
-  $$('#bdSpans [data-sp]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.sp === span)));
   drawSpanPick(phone && v === 'time');
   document.body.dataset.bdView = v;
   $('#stage').dataset.bdDesk = view;   // what fit() measures: the desktop's view, so the narrow form never flips it back and forth
@@ -571,22 +598,27 @@ $('#bdShowing').addEventListener('click', (e) => {
   if (u.dataset.unf === 'q') F.q = ''; else if (u.dataset.unf === 'wf') WF.setPick(''); else F[u.dataset.unf].clear(); drawChips(); drawInit();
 });
 function setSpan(s) { span = s; store.set(SPAN_KEY, span); drawChips(); drawInit(); }
-$('#bdSpans').addEventListener('click', (e) => { const b = e.target.closest('[data-sp]'); if (!b || !M) return; setSpan(b.dataset.sp); });
-/** A phone's span picker (TsCPhone, TsCPhoneSpan): the six span buttons become one picker beside the product picker, and the span row goes. */
-function drawSpanPick(on) {
-  const w = $('#bdSpanPick'); document.body.classList.toggle('bd-spick', on);
+/** The span picker: one chip that opens the six spans (batch 24 item 7, canvas BbB, as a phone's TsCPhone, TsCPhoneSpan). A desktop draws it in the
+ *  chip row after the tabs (#bdSpans, items data-sp); a phone draws it beside the product picker (#bdSpanPick, items data-spick), and the page title
+ *  gives it the room. */
+const SPK = { desk: ['bdSpans', 'bdSpansBtn', 'bdSpansMenu', 'sp'], phone: ['bdSpanPick', 'bdSpanBtn', 'bdSpanMenu', 'spick'] };
+function drawSpanPicker(which, on) {
+  const [wid, bid, mid, attr] = SPK[which], w = $('#' + wid);
   w.hidden = !on; if (!on) { w.innerHTML = ''; return; }
-  const open = !!$('#bdSpanMenu') && !$('#bdSpanMenu').hidden, name = (SPANS.find(([k]) => k === span) || SPANS[1])[1];
-  w.innerHTML = `<button type="button" class="bd-chip bd-spk" id="bdSpanBtn" aria-haspopup="menu" aria-expanded="${open}" aria-label="Span: ${esc(name)}. Change the span">${esc(name)}${SV(I.chev)}</button>`
-    + `<span class="bd-grpm" id="bdSpanMenu" role="menu"${open ? '' : ' hidden'}>${SPANS.map(([k, n]) => `<button type="button" role="menuitemradio" aria-checked="${k === span}" data-spick="${k}">${esc(n)}</button>`).join('')}</span>`;
-}
-const closeSpanPick = () => { const m = $('#bdSpanMenu'); if (m && !m.hidden) { m.hidden = true; $('#bdSpanBtn').setAttribute('aria-expanded', 'false'); return true; } return false; };
-$('#bdSpanPick').addEventListener('click', (e) => {
-  const k = e.target.closest('[data-spick]'); if (k) { closeSpanPick(); setSpan(k.dataset.spick); const b = $('#bdSpanBtn'); if (b) b.focus(); return; }
-  if (e.target.closest('#bdSpanBtn')) { const m = $('#bdSpanMenu'), o = m.hidden; m.hidden = !o; $('#bdSpanBtn').setAttribute('aria-expanded', String(o)); if (o) m.querySelector('[aria-checked="true"]').focus(); }
-});
-$('#bdSpanPick').addEventListener('keydown', (e) => { if (e.key === 'Escape' && closeSpanPick()) { e.stopPropagation(); $('#bdSpanBtn').focus(); } });
-document.addEventListener('click', (e) => { if (!e.target.closest('#bdSpanPick')) closeSpanPick(); });
+  const open = menuOpen(mid), name = (SPANS.find(([k]) => k === span) || SPANS[1])[1];
+  w.innerHTML = `<button type="button" class="bd-chip bd-spk" id="${bid}" aria-haspopup="menu" aria-expanded="${open}" aria-label="Span: ${esc(name)}. Change the span">${esc(name)}${SV(I.chev)}</button>`
+    + `<span class="bd-grpm" id="${mid}" role="menu"${open ? '' : ' hidden'}>${SPANS.map(([k, n]) => `<button type="button" role="menuitemradio" aria-checked="${k === span}" data-${attr}="${k}">${esc(n)}</button>`).join('')}</span>`;
+}
+function drawSpanPick(on) { document.body.classList.toggle('bd-spick', on); drawSpanPicker('phone', on); }
+for (const which of Object.keys(SPK)) {
+  const [wid, bid, mid, attr] = SPK[which], w = $('#' + wid);
+  w.addEventListener('click', (e) => {
+    const k = e.target.closest(`[data-${attr}]`); if (k && M) { closeMenu(mid, bid); setSpan(k.dataset[attr]); const b = $('#' + bid); if (b) b.focus(); return; }
+    if (e.target.closest('#' + bid)) { const m = $('#' + mid), o = m.hidden; m.hidden = !o; $('#' + bid).setAttribute('aria-expanded', String(o)); if (o) m.querySelector('[aria-checked="true"]').focus(); }
+  });
+  w.addEventListener('keydown', (e) => { if (e.key === 'Escape' && closeMenu(mid, bid)) { e.stopPropagation(); $('#' + bid).focus(); } });
+  document.addEventListener('click', (e) => { if (!e.target.closest('#' + wid)) closeMenu(mid, bid); });
+}
 $('#ibBody').addEventListener('click', (e) => {
   if (e.target.closest('#fold, [data-mefold]')) { foldOpen = !foldOpen; drawInit(); const f = $('#fold') || $('#ibBody [data-mefold]'); if (f) f.focus(); return; }
   const gf = e.target.closest('[data-fold]'); if (gf) { const k = gf.dataset.fold; PG.fold(k); drawInit(); const b = $$('#ibBody [data-fold]').find((x) => x.dataset.fold === k); if (b) b.focus(); return; }
@@ -860,24 +892,20 @@ $('#bdPublish').addEventListener('click', (e) => { const btn = e.currentTarget;
 /* ── tabs: Initiatives and Documents (Documents has no frame yet: a plain list) ──────────────────────────────────────────────────────── */
 function setTab(t) {
   tab = t;
-  $('#tabIni').setAttribute('aria-selected', String(t === 'ini')); $('#tabDocs').setAttribute('aria-selected', String(t === 'docs')); $('#tabShared').setAttribute('aria-selected', String(t === 'shared'));
-  $('#cIni').hidden = t !== 'ini'; $('#cDocs').hidden = t !== 'docs'; $('#cShared').hidden = t !== 'shared';
-  if (t === 'docs') { closePanel(); drawDocs(); loadDocMeta(); }
+  $('#tabIni').setAttribute('aria-selected', String(t === 'ini')); $('#tabShared').setAttribute('aria-selected', String(t === 'shared'));
+  $('#cIni').hidden = t !== 'ini'; $('#cShared').hidden = t !== 'shared';
   // Shared (initiative board-publish, slice 4): reads each joined team's host now, on opening the tab and on Refresh, and never in between
   if (t === 'shared') { closePanel(); import('./bd-shared.js').then((S) => { SH_FULL = true; S.show($('#cShared'), { onCount: setSharedCount }); }); }
 }
 $('#tabIni').onclick = () => setTab('ini');
-$('#tabDocs').onclick = () => setTab('docs');
 $('#tabShared').onclick = () => setTab('shared');
-$('.bd-tabs').addEventListener('keydown', (e) => { if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return; const ord = ['ini', 'docs', 'shared']; const n = ord[(ord.indexOf(tab) + (e.key === 'ArrowRight' ? 1 : ord.length - 1)) % ord.length]; setTab(n); $('#' + { ini: 'tabIni', docs: 'tabDocs', shared: 'tabShared' }[n]).focus(); });
+$('.bd-tabs').addEventListener('keydown', (e) => { if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return; const ord = ['ini', 'shared']; const n = ord[(ord.indexOf(tab) + (e.key === 'ArrowRight' ? 1 : ord.length - 1)) % ord.length]; setTab(n); $('#' + { ini: 'tabIni', shared: 'tabShared' }[n]).focus(); });
 /** The number on the Shared tab and on the phone's Shared chip: nothing when there is nothing (zero is silence). Your own open links at load, every open copy after a read. */
 function setSharedCount(n) { SH_N = n; $('#nShared').textContent = n ? String(n) : ''; const c = $('#chShared'); if (c) c.textContent = 'Shared' + (n ? ' ' + n : ''); }
 document.addEventListener('bd:links', (e) => { if (!SH_FULL && e.detail) setSharedCount(e.detail.n); });
 
-/** Documents (BdDocs): the kind chips, the rows and their history; a row opens the document's panel (pm/bd-acts.js). */
-function drawDocs() { if (M) $('#docBody').innerHTML = V.docsHtml(); }
-$('#docBody').addEventListener('click', (e) => { const k = e.target.closest('[data-dkind]'); if (k) { V.setDocKind(k.dataset.dkind); drawDocs(); const b = $(`#docBody [data-dkind="${k.dataset.dkind}"]`); if (b) b.focus(); } });
-/** The history of the documents on screen (GET /api/board-docs): when each last changed, by whom, its last commits. Read-only. */
+/** The history of the documents (GET /api/board-docs) for the document panel of pm/bd-acts.js. Batch 24 item 7 took the Documents tab off the Board,
+ *  so nothing on the Board opens that panel now; it is kept for a later way in (see the PR).: when each last changed, by whom, its last commits. Read-only. */
 async function loadDocMeta(list) {
   if (!M) return;
   // each document is read from its own product's workspace (All products lists every product's documents)
@@ -891,7 +919,6 @@ async function loadDocMeta(list) {
     for (const p of P) DM[ws + ':' + p] = r.docs[p] || { none: true };
     got = true;
   }
-  if (got && tab === 'docs') drawDocs();
 }
 const docMeta = (p, ws) => { const d = DM[(ws || (M && M.board.ws) || '') + ':' + p]; return d && !d.none ? d : null; };
 
@@ -976,8 +1003,6 @@ function draw() {
   drawHead(); drawChips(); drawInit();
   { const g = $('#bdGone'), G = M.initiatives.gone || { cancelled: [], archived: [] }, n = [G.cancelled.length ? G.cancelled.length + ' cancelled' : '', G.archived.length ? G.archived.length + ' archived' : ''].filter(Boolean).join(' · ');
     if (g) g.textContent = 'Cancelled and archived' + (n ? ' · ' + n : ''); }   // the ⋯ menu item counts them
-  if (tab === 'docs') drawDocs();
-  $('#docCap').textContent = String(V.docRows().length);
   // an open panel follows the new read
   if (peek && peek.kind === 'ini') BI.refresh();   // a row that left the Board (cancelled, archived) closes it
 }
@@ -1037,7 +1062,7 @@ async function readAll(q) {
 async function load() {
   // while the board is read (the pick's default board, then the picked ones) the page says so and shows no row instead of a guess
   const reading = () => {
-    const t0 = Date.now(), tick = () => { const s = 'Reading the board · ' + Math.round((Date.now() - t0) / 1000) + ' s so far'; $('#snap').textContent = s; if (!M) $('#ibBody').innerHTML = `<p class="bd-msg"><b>${esc(s)}</b> The board derives each initiative from its records. This page shows nothing until it has read, rather than guess.</p>`; };
+    const t0 = Date.now(), tick = () => { const s = 'Reading the board · ' + Math.round((Date.now() - t0) / 1000) + ' s so far'; $('#snap').textContent = s; if (!M && !$('#ibBody .ls-bd')) { $('#ibBody').innerHTML = SKEL; LS.slowLine($('#ibBody'), () => M); } };
     tick(); readTimer = setInterval(tick, 1000);
     // a first read after a restart usually lands within a second: ask again soon, then less often (page-speed)
     setTimeout(load, Math.min(3000, 300 * 2 ** readTries++));
@@ -1153,7 +1178,7 @@ V.init({ M: () => M, wf: wfState, statusOf, usual: usualOf, trail: TI, docMeta,
   groups: (L) => groups(L), folded: PG.folded, laneHead: (g) => PG.laneHtml(g, g.kind === 'program' ? progState(g.program) : null), subTile: (n) => PG.tileHtml(n, 'bd-ti s'),
   memberIcon: (id) => PG.memberIcon(PGS, id), product: () => (M.board.product || M.board.name || ''), programOf: (r) => programOf(PGS, r.ws || M.board.ws || '', r.id), tileHtml: PG.tileHtml, progTile: PG.progTile });
 Asks.init({ M: () => M, load, say, panel: actsPanel, close: closePanel, rowOf, openIni: openIniAny, openDoc: viewDoc, anchors, programs: () => PGS, reloadPrograms: loadPrograms });
-Acts.init({ M: () => M, wf: wfState, load, say, panel: actsPanel, close: closePanel, redraw: () => { drawChips(); drawInit(); if (tab === 'docs') drawDocs(); }, F, rowOf, statusOf, openIni: openIniAny,
+Acts.init({ M: () => M, wf: wfState, load, say, panel: actsPanel, close: closePanel, redraw: () => { drawChips(); drawInit(); }, F, rowOf, statusOf, openIni: openIniAny,
   openTicket: (ini, tk) => openTicket(ini, tk, $('#bdFind')), askHref, pageHref, trail: TI, docMeta, loadDocMeta, viewDoc,
   grouping: () => ({ on: groupingOn(), byProduct }), setGrouping, sprintFilter: sprintFilterOn, timeline: () => curView() === 'time' });
 BI.mount({ M: () => M, statusOf, dayTitle, usual: usualOf, fmt, md, ago, segHtml, barHtml: V.barHtml, grill: (id) => GR[id], rowOf, pageHref, askHref, refreshJira: () => refreshJira(), viewDoc,

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/readonly.js

@@ -17,8 +17,8 @@ export const RO = !!PACK;
 
 /** What a reader can do. Each is a selector; a press inside a match is let through. */
 export const VIEW_CONTROLS = [
-  // the Timeline: the span, a column's sort, back to today, the Deliveries lane, the folds, an initiative's name (opens its viewer)
-  '#bdSpans button', '.tg-chd', '.tg-tback', '.dl-fb', '.dl-dn', '.dl-e[aria-label*="press to open"]', '.bd-fold', '.bd-prdb', 'label.tg-n', 'button.tg-n.ini2',
+  // the Timeline: the span, the legend behind (i), a column's sort, back to today, the Deliveries lane, the folds, an initiative's name (opens its viewer)
+  '#bdSpans button', '#bdLgdBtn', '.tg-chd', '.tg-tback', '.dl-fb', '.dl-dn', '.dl-e[aria-label*="press to open"]', '.bd-fold', '.bd-prdb', 'label.tg-n', 'button.tg-n.ini2',
   // the stage track: the switch between it and the Timeline (the two views a publisher shares), an initiative's name, the Monitor and Evaluate fold
   '#ibTabs [data-v="track"]', '#ibTabs [data-v="time"]', 'button.bt-nm', '#fold',
   // the viewer: the layout, the close, the folds, the Tasks view menu, a stage's fold and its done tasks
@@ -36,7 +36,7 @@ const HIDE = ['#ibTabs [data-v="stages"]', '#ibTabs [data-v="list"]', '#bdView',
 /** Controls the code draws that write, or lead to something a share does not hold: removed. */
 const REMOVE = [
   '.po-grip', '.bd-nxa',
-  '#bdChipset > :not(.tg-lgd)', '#askDates', '.tg-ft',
+  '#bdChipset > :not(.bd-lgdw)', '#askDates', '.tg-ft',
   '.cz-vw-ib[aria-label="Discuss in chat"]', '.cz-vw-ib[aria-label="More"]', '.iv-addp', '.iv-prog', '.iv-plus', '.iv-car', '.iv-scgn', '.iv-gx-a',
   '.sm-card', '.pp-p', '.lk-chip.mv',   // what Claude proposes to the publisher (batch 20 item 1): the pack carries none, and none is drawn
   // the program page's writes and what a share does not hold (batch 21 item 2): proposals, adding, the charter, a document's file, the talk line

package/workspace/public/pm/split-merge.js

@@ -98,9 +98,10 @@ export async function press(c, act) {
   if (act === 'no') {
     // the pressed button holds the focus inside the Viewer, and a host does not redraw a body that holds it
     if (typeof document !== 'undefined' && document.activeElement && document.activeElement.blur) document.activeElement.blur();
-    const x = await c.pmPost('/api/initiatives/suggest', { ws: c.ws, id: r.id, of: sg.kind, fp: sg.fp }).catch(() => null);
+    const facts = sg.kind === 'merge' ? { into: sg.into } : { moves: [...(sg.tasks || []), ...(sg.tickets || [])] };
+    const x = await c.pmPost('/api/initiatives/suggest', { ws: c.ws, id: r.id, of: sg.kind, fp: sg.fp, ...facts }).catch(() => null);
     if (!x || !x.ok) { c.say((x && x.error) || 'It is still shown. The server did not say why.'); return; }
-    c.say('Not now. Claude asks again when the tasks change.');
+    c.say(sg.kind === 'merge' ? 'Not now. Claude will not suggest this merge again.' : 'Not now. Claude will not suggest this split again.');
     await c.reload();
     return;
   }

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); }

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

@@ -1,6 +1,7 @@
 /* pm/wf-page.js — Settings › Workflows (initiative workflows per initiative, D99; canvas WfAModel, WfAStage, WfACond, WfARemove, WfANew,
  * WfADraft). One page, reached from Settings:
- *   the list   every workflow with its count of initiatives and +; Product feature first, archived ones last and quiet
+ *   the list   every workflow with its count of initiatives and +; Product feature first, archived ones last and quiet. The star on a row
+ *              (batch 24 item 3, canvas DfA) makes that workflow the default a new initiative starts on (POST /api/workflows/default)
  *   the picked workflow   one numbered list across the To do, In progress and Done columns; drag a stage to reorder it or to move it to
  *              another column; Add a stage per column; the dashed Won't do · Archived column (in every workflow); ⋯ = Copy, Archive.
  *              The name is the rename press (RnA*: tap it, one field with a check).
@@ -35,6 +36,8 @@ const DRAG = 'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01', PLUS = '
 const S = { list: null, sel: null, draft: null, edit: null, err: '', msg: '', renaming: false, renErr: '', busy: false, pop: null, chat: null, poll: 0, phoneOpen: false };
 const wfOf = (id) => (S.edit && id === S.edit.id ? S.edit : (S.list || []).find((w) => w.id === id) || null);
 const cur = () => (S.sel && S.sel !== 'new' ? wfOf(S.sel) : null);
+/** A New workflow chat is still going (its key is kept until Create), or PMOS has drafted one. */
+const draftLive = () => !!(store.get(CHAT_KEY) || S.draft);
 const readOnly = (wf) => !!wf && (wf.builtin || wf.id === PRODUCT_FEATURE_ID);
 
 function toast(text, undo) {
@@ -62,19 +65,30 @@ async function readDraft() {
   const d = r && r.ok && r.draft ? r.draft.draft || null : null;   // { draft, note, at } | null
   const was = JSON.stringify(S.draft), now = JSON.stringify(d);
   S.draft = d;
+  if (was !== now && S.sel !== 'new') drawList();   // the draft row's name follows the draft
   if (was !== now && S.sel === 'new') { drawList(); if (d) showDraft(); else if (VW.current() && VW.current().id === 'wf-draft') VW.close(); }
 }
 
 /* ── the list (WfAModel's left column) ── */
+// the star (batch 24 item 3, canvas DfA): gold and filled on the default, an outline on hover or focus elsewhere; archived rows have none
+const STAR = 'M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9 6.8 19.6l1-5.8-4.3-4.1 5.9-.9z';
+function starHtml(w) {
+  if (w.archived) return '';
+  const label = w.default ? 'Default for new initiatives' : 'Make ' + w.name + ' the default for new initiatives';
+  return `<button type="button" class="wfs${w.default ? ' on' : ''}" data-wf-star="${esc(w.id)}" aria-pressed="${w.default ? 'true' : 'false'}" aria-label="${esc(label)}" title="${w.default ? 'Default for new initiatives' : 'Make default'}">`
+    + `<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="${w.default ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${STAR}"/></svg></button>`;
+}
 function rowHtml(w) {
   const n = w.count > 0 ? `<span class="n">${w.count}</span>` : '';   // zero is silence
-  return `<button type="button" class="wfl${S.sel === w.id ? ' sel' : ''}${w.archived ? ' arch' : ''}" data-wf="${esc(w.id)}"${S.sel === w.id ? ' aria-current="true"' : ''}>${wfIcon(w, 22)}<span class="t">${esc(w.name)}</span>${n}</button>`;
+  return `<div class="wfl${S.sel === w.id ? ' sel' : ''}${w.archived ? ' arch' : ''}"><button type="button" class="wfb" data-wf="${esc(w.id)}"${S.sel === w.id ? ' aria-current="true"' : ''}>${wfIcon(w, 22)}<span class="t">${esc(w.name)}</span></button>${starHtml(w)}${n}</div>`;
 }
 function drawList() {
   const el = $('#wfList'); if (!el) return;
   const L = S.list;
   const on = (L || []).filter((w) => !w.archived), off = (L || []).filter((w) => w.archived);
-  const newRow = S.sel === 'new' ? `<button type="button" class="wfl sel" data-wf="new" aria-current="true"><span class="wfi new" aria-hidden="true">${svg(PLUS, 14)}</span><span class="t">${esc((S.draft && S.draft.name) || 'New workflow')}</span><span class="n">draft</span></button>` : '';
+  // a live draft keeps its row while another workflow is open, so its chat and draft are one press away (batch 24 item 4)
+  const onNew = S.sel === 'new';
+  const newRow = onNew || draftLive() ? `<button type="button" class="wfl${onNew ? ' sel' : ''}" data-wf="new"${onNew ? ' aria-current="true"' : ''}><span class="wfi new" aria-hidden="true">${svg(PLUS, 14)}</span><span class="t">${esc((S.draft && S.draft.name) || 'New workflow')}</span><span class="n">draft</span></button>` : '';
   el.innerHTML = `<div class="lhead"><h2>Workflows</h2><button type="button" class="ib sm" data-wf-new aria-label="New workflow: describe it and PMOS drafts it" title="New workflow: describe it and PMOS drafts it">${svg(PLUS, 16)}</button></div>`
     + (L === null ? '<p class="wf-mut wf-small wf-pad">Reading the workflows.</p>' : on.map(rowHtml).join('') + newRow
       + (off.length ? `<p class="wf-sub">Archived</p>${off.map(rowHtml).join('')}` : ''));
@@ -234,6 +248,17 @@ async function archive(wf, on) {
   await load();
   toast(on ? 'Archived ' + wf.name + '.' : 'Restored ' + wf.name + '.', () => archive(wf, !on));
 }
+async function makeDefault(id, undoTo) {
+  const w = (S.list || []).find((x) => x.id === id);
+  if (!w || (w.default && !undoTo)) return;
+  const was = (S.list || []).find((x) => x.default);
+  const r = await post('/api/workflows/default', { id });
+  if (!(r && r.ok)) { S.msg = (r && r.error) || 'Not changed.'; drawMain(); return; }
+  for (const x of S.list) { if (x.id === id) x.default = true; else delete x.default; }
+  drawList();
+  const b = document.querySelector(`#wfList [data-wf-star="${CSS.escape(id)}"]`); if (b) b.focus();
+  if (!undoTo) toast('New initiatives start on ' + w.name + '.', was ? () => makeDefault(was.id, true) : null);
+}
 async function rename(wf, name) {
   const v = String(name || '').trim();
   if (!v || v === wf.name) { S.renaming = false; S.renErr = ''; drawMain(); return; }
@@ -389,8 +414,10 @@ function bindDrag(main) {
 function bind() {
   $('#wfList').addEventListener('click', (e) => {
     if (e.target.closest('[data-wf-new]')) { startNew(); return; }
-    const b = e.target.closest('[data-wf]'); if (!b) return;
-    if (b.dataset.wf === 'new') return;
+    const star = e.target.closest('[data-wf-star]'); if (star) { makeDefault(star.dataset.wfStar); return; }
+    const row = e.target.closest('.wfl');
+    const b = e.target.closest('[data-wf]') || (row && row.querySelector('[data-wf]')); if (!b) return;
+    if (b.dataset.wf === 'new') { if (S.sel !== 'new') startNew(); return; }   // back to the live draft: its chat and draft viewer
     select(b.dataset.wf);
   });
   const main = $('#wfMain');
@@ -431,5 +458,6 @@ export function boot() {
   draw();
   load();
   if (new URLSearchParams(location.search).get('new') === '1') startNew();
+  else if (store.get(CHAT_KEY)) readDraft();   // a draft from before shows as its row, by name
 }
 if (typeof document !== 'undefined' && document.getElementById('wfMain')) boot();

package/workspace/public/premium-board.html

@@ -13,6 +13,7 @@
 <link rel="stylesheet" href="/pm/cozy.css" />
 <link rel="stylesheet" href="/pm/cozy-pick.css" />
 <link rel="stylesheet" href="/pm/cozy-board.css" />
+<link rel="stylesheet" href="/pm/load-shapes.css" />
 <link rel="stylesheet" href="/pm/bd-pin-card.css" />
 <link rel="stylesheet" href="/pm/cozy-panel.css" />
 </head>
@@ -50,27 +51,23 @@
    <div class="tools tools-top"><span class="vh" id="snap" role="status">Reading the board</span></div>
   </div>
  </div>
- <!-- the tabs, the timeline spans and the chips: Jira read time, sprint and release, new asks, late, at risk, blocked, idle, This sprint -->
+ <!-- the tabs (Initiatives, Shared; batch 24 item 7 took Documents off: an initiative's Documents fold and Search's Documents filter reach them),
+  the span picker and the chips: sprint and release, This sprint, one pill for new asks, late, at risk, blocked and idle, the legend behind (i), Jira as Adler -->
  <div class="bd-chiprow">
   <div class="bd-tabs" role="tablist" aria-label="Board">
    <button type="button" role="tab" class="bd-tab" id="tabIni" aria-selected="true" aria-controls="cIni">Initiatives <span class="n" id="nIni"></span></button>
-   <button type="button" role="tab" class="bd-tab" id="tabDocs" aria-selected="false" aria-controls="cDocs">Documents <span class="n" id="docCap"></span></button>
    <button type="button" role="tab" class="bd-tab" id="tabShared" aria-selected="false" aria-controls="cShared">Shared <span class="n" id="nShared"></span></button>
   </div>
-  <div class="bd-seg bd-spans" id="bdSpans" role="group" aria-label="Span" hidden>
-   <button type="button" data-sp="sprint" aria-pressed="false">Sprint</button><button type="button" data-sp="quarter" aria-pressed="true">Quarter</button><button type="button" data-sp="half" aria-pressed="false">Half</button><button type="button" data-sp="year" aria-pressed="false">Year</button><button type="button" data-sp="y2" aria-pressed="false">2 yr</button><button type="button" data-sp="y5" aria-pressed="false">5 yr</button>
-  </div>
+  <!-- the span picker (batch 24 item 7, canvas BbB): one chip that opens Sprint to 5 yr; the timeline only -->
+  <span class="bd-grpw2 bd-spw" id="bdSpans" role="group" aria-label="Span" hidden></span>
   <div class="bd-chipset" id="bdChipset"></div>
  </div>
 
  <section class="bd-sec" id="cIni" role="tabpanel" aria-labelledby="tabIni">
   <h2 class="vh" id="hIni">Initiatives</h2>
   <div id="bdShowing" hidden></div>
-  <div id="ibBody"></div>
- </section>
- <section class="bd-sec" id="cDocs" role="tabpanel" aria-labelledby="tabDocs" hidden>
-  <h2 class="vh" id="hDocs">Documents</h2>
-  <div id="docBody"></div>
+  <!-- the skeleton until the board is read (page-open-speed, SpD): grey rows shaped like programs and initiatives, no names, no counts -->
+  <div id="ibBody"><div class="ls-bd" aria-hidden="true"><div class="ls-bh"><i class="ls-sk ls-w40"></i><span class="ls-stg"><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i><i class="ls-sk"></i></span><i class="ls-sk ls-w30"></i></div><div class="ls-br pg"><i class="ls-sk ls-w60"></i><span></span><i class="ls-sk ls-w55"></i></div><div class="ls-br"><i class="ls-sk ls-w75"></i><div class="ls-trk"><i class="ls-tdot"></i><i class="ls-tdot on"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i></div><i class="ls-sk ls-w70"></i></div><div class="ls-br"><i class="ls-sk ls-w75"></i><div class="ls-trk"><i class="ls-tdot"></i><i class="ls-tdot on"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i></div><i class="ls-sk ls-w70"></i></div><div class="ls-br pg"><i class="ls-sk ls-w60"></i><span></span><i class="ls-sk ls-w55"></i></div><div class="ls-br"><i class="ls-sk ls-w75"></i><div class="ls-trk"><i class="ls-tdot"></i><i class="ls-tdot on"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i></div><i class="ls-sk ls-w70"></i></div><div class="ls-br pg"><i class="ls-sk ls-w60"></i><span></span><i class="ls-sk ls-w55"></i></div><div class="ls-br"><i class="ls-sk ls-w75"></i><div class="ls-trk"><i class="ls-tdot"></i><i class="ls-tdot on"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i><i class="ls-tdot"></i></div><i class="ls-sk ls-w70"></i></div></div></div>
  </section>
  <section class="bd-sec" id="cShared" role="tabpanel" aria-labelledby="tabShared" hidden></section>
 

package/workspace/public/premium.html

@@ -24,6 +24,7 @@
 <link rel="stylesheet" href="/pm/home-impact.css" />
 <link rel="stylesheet" href="/pm/cozy-panel.css" />
 <link rel="stylesheet" href="/pm/cozy-onboard.css" />
+<link rel="stylesheet" href="/pm/load-shapes.css" />
 </head>
 <body class="cz cz-home">
 <header class="hm-top" id="hmTop">