create-pmos 0.186.0 → 0.188.0

package/workspace/public/pm/c3-ib-initiatives.js

@@ -1,96 +1,144 @@
-/* pm/c3-ib-initiatives.js — the Initiatives tab of a board (mockup v5, 34-initiatives.js tabInitiatives / iniToolbar / iniRow).
+/* pm/c3-ib-initiatives.js — the Initiatives tab of a board (mockup v5, 34-initiatives.js tabInitiatives / iniToolbar / iniRow; its header and
+ * lifecycle from mockup v2 of c3-initiative-lifecycle, approved 2026-10-13).
  *   registerBoardTab('initiatives', (host, ctx) => ...)   ctx is documented in the header of c3-initiatives.js.
- * What it draws, all of it paged on the server (GET /api/boards/backlog; q, view, cat, stage, status, owner, horizon, sort, offset, limit):
- *   - a search box (debounced), the saved views as pills (Now and next, Mine, At risk, No owner, All) and New initiative;
- *   - the selects Category, Stage, Status, Owner and Horizon, the Sort select and a direction toggle (sort=-key is descending). "Not done"
- *     and "At risk or late" are comma lists (status=on track,at risk,late), which the server reads as any of;
- *   - one console3 row per initiative: id, its workflow template, the stage dots of its own workflow, status, owner, progress, dates,
- *     warnings; Move (a menu of its own stages, ctx.moveTo) and Open;
- *   - a numbered pager of 25 ("26–50 of 312", Previous, 1 2 … 13, Next).
+ * What it draws, all of it paged on the server (GET /api/boards/backlog; q, view, cat, stage, status, owner, horizon, sort, offset, limit, archived):
+ *   - one row of controls: a search box with an icon (debounced), the view menu (Now and next, Mine, At risk, No owner, All), a filter
+ *     icon whose menu holds Status (grouped Active, Paused, Closed), Stage, Category, Owner and Horizon and whose badge counts the
+ *     filters on, a sort icon whose menu holds the sort keys and the direction, and New initiative. "All active" and "At risk or late"
+ *     are comma lists (status=on track,at risk,late), which the server reads as any of;
+ *   - the filters on, as removable chips in the list header, and Clear;
+ *   - one console3 row per initiative: id, its workflow template, the stage dots of its own workflow, status, then owner, progress,
+ *     dates and warnings (or, when it is on hold or cancelled, since when, the check-back day and the reason), "Merged from", the
+ *     duplicate hint; a "…" menu (Move to a stage, Status, Tidy up: c3-ini-life.js rowMenu) and Open;
+ *   - a footer: the numbered pager of 25, "N cancelled hidden" (opens All with Status: Cancelled) and "N archived" (opens the archive);
+ *   - the archive: a search box and Back to initiatives, each archived initiative with its reason or "Merged into <id>", Restore or
+ *     Undo merge.
  * ctx.filter (from the URL or a Summary tile) opens the tab on that view and those filters. One request is in flight at a time; a change
- * made meanwhile is sent when it returns and the older answer is dropped. host.dataset.ibbState is loading | ready | error and
- * host.dataset.ibbSeq counts the answers drawn (the browser suite polls both). */
+ * made meanwhile is sent when it returns and the older answer is dropped. After a hold, cancel or resume the list reads again until the
+ * row shows it (the engine derives a lifecycle change in a child process). host.dataset.ibbState is loading | ready | error and
+ * host.dataset.ibbSeq counts the answers drawn (the browser suites poll both). */
 import { el } from './dom.js';
 import { registerBoardTab } from './c3-initiatives.js';
-import { icon, pill, lk, ib, pbtn, chip, st, note, lbl, sect, list, empty, nrow, statusChip, ownerChip, stepsMini, progChip, dateChip, daysBetween, plural, openMenu, sw, CATS, put } from './c3-ini-ui.js';
+import { icon, lk, ib, pbtn, pill, chip, st, note, list, empty, nrow, sect, statusChip, ownerChip, stepsMini, progChip, dateChip, daysBetween, plural, openMenu, CATS, put } from './c3-ini-ui.js';
 import { wfOf, catOf, tplName } from './c3-ini-work.js';
+import { rowMenu, lifeChips, archivedChips, dupChip, mergedFromChip, restoreBtn, rowIcon, ensureLifeCss } from './c3-ini-life.js';
 
 const PAGE = 25;
 const VIEWS = [['now', 'Now and next'], ['mine', 'Mine'], ['risk', 'At risk'], ['noowner', 'No owner'], ['all', 'All']];
-const STATUS = [['', 'Any'], ['on track,at risk,late', 'Not done'], ['on track', 'On track'], ['at risk,late', 'At risk or late'], ['at risk', 'At risk'], ['late', 'Late'], ['done', 'Done']];
+const STATUS_GROUPS = [['', [['', 'Any']]],
+  ['Active', [['on track,at risk,late', 'All active'], ['on track', 'On track'], ['at risk,late', 'At risk or late'], ['at risk', 'At risk'], ['late', 'Late']]],
+  ['Paused', [['on hold', 'On hold']]],
+  ['Closed', [['done,cancelled', 'Done or cancelled'], ['done', 'Done'], ['cancelled', 'Cancelled']]]];
+const STATUS = STATUS_GROUPS.flatMap((g) => g[1]);
 const HORIZON = [['', 'Any'], ['now,next', 'Now and next'], ['now', 'Now'], ['next', 'Next'], ['later', 'Later']];
 const SORTS = [['horizon', 'Horizon'], ['end', 'Ends'], ['title', 'Title'], ['stage', 'Stage'], ['progress', 'Progress'], ['status', 'Status'], ['owner', 'Owner'], ['id', 'Key']];
-const FKEYS = ['cat', 'stage', 'status', 'owner', 'horizon'];
+const FKEYS = ['status', 'stage', 'cat', 'owner', 'horizon'];
+const FNAME = { status: 'Status', stage: 'Stage', cat: 'Category', owner: 'Owner', horizon: 'Horizon' };
 const toneOf = (s) => (s === 'late' ? 'bad' : s === 'at risk' ? 'warn' : 'ok');
 const warnChip = (w) => st('warn', 'alert', w, { title: 'An order rule, shown as a warning. It never blocks.', 'data-ini-warning': w });
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
 registerBoardTab('initiatives', (host, ctx) => {
+  ensureLifeCss();
   const b = ctx.board;
   const f0 = ctx.filter || {};
   const sort0 = String(f0.sort || 'horizon');
   const Q = { q: String(f0.q || ''), view: VIEWS.some((v) => v[0] === f0.view) ? f0.view : 'now', cat: CATS.includes(f0.cat) ? f0.cat : '', stage: f0.stage || '', status: f0.status || '', owner: f0.owner || '', horizon: f0.horizon || '',
-    sort: SORTS.some((s) => s[0] === sort0.replace(/^-/, '')) ? sort0.replace(/^-/, '') : 'horizon', dir: sort0.startsWith('-') ? -1 : 1, offset: Math.max(0, Number(f0.offset) || 0) };
+    sort: SORTS.some((s) => s[0] === sort0.replace(/^-/, '')) ? sort0.replace(/^-/, '') : 'horizon', dir: sort0.startsWith('-') ? -1 : 1, offset: Math.max(0, Number(f0.offset) || 0), archived: f0.archived === '1' };
   const S = { data: null, flying: false, again: false, dead: false, seq: 0, err: '' };
 
-  const search = el('input', { type: 'text', 'data-ibb': 'q', 'aria-label': 'Search initiatives', placeholder: 'Search ' + b.name + ' initiatives', value: Q.q, autocomplete: 'off' });
+  const search = el('input', { type: 'text', 'data-ibb': 'q', 'aria-label': 'Search initiatives', value: Q.q, autocomplete: 'off' });
   let deb = null;
   search.addEventListener('input', () => { clearTimeout(deb); deb = setTimeout(() => { Q.q = search.value.trim(); Q.offset = 0; request(); }, 250); });
   search.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); clearTimeout(deb); Q.q = search.value.trim(); Q.offset = 0; request(); } });
-  const views = el('div', { class: 'chips2', role: 'group', 'aria-label': 'Saved views', 'data-ibb': 'views' });
-  const top = el('div', { class: 'calbar' }, el('div', { class: 'form ini-grow' }, search), views,
-    pbtn('primary', 'New initiative', 'plus', { 'data-ini': 'new-initiative', 'aria-haspopup': 'dialog', onclick: () => ctx.newInitiative() }));
-  const filters = el('div', { class: 'chips2', 'data-ibb': 'filters' });
-  const count = el('div', { class: 'dim ini-note', 'data-ibb': 'count', 'aria-live': 'polite' });
+  const top = el('div', { class: 'calbar il-bar', 'data-ibb': 'toolbar' });
   const err = el('div', { class: 'fold w', role: 'alert', 'data-ibb': 'error', hidden: '' });
   const body = el('div', { 'data-ibb': 'body' });
-  const pager = el('div', { class: 'chips2 ini-pager', 'data-ibb': 'pager' });
-  put(host, el('div', { class: 'calbody', 'data-ibb': 'initiatives' }, top, filters, count, err, body, pager));
+  const foot = el('div', { class: 'il-listfoot', 'data-ibb': 'foot' });
+  put(host, el('div', { class: 'calbody', 'data-ibb': 'initiatives' }, top, err, body, foot));
   host.dataset.ibbState = 'loading'; host.dataset.ibbSeq = '0';
 
-  const sel = (k, label, opts) => el('label', { class: 'chips2' }, lbl(label),
-    el('select', { 'data-ibb-filter': k, 'aria-label': label, onchange: (e) => { Q[k] = e.target.value; Q.offset = 0; request(); } }, ...opts.map(([v, l]) => el('option', { value: v, selected: v === Q[k] }, l))));
+  const on = () => FKEYS.filter((k) => Q[k]);
+  const labelOf = (k, v) => (k === 'status' ? (STATUS.find((x) => x[0] === v) || [null, v])[1] : k === 'horizon' ? (HORIZON.find((x) => x[0] === v) || [null, v])[1] : k === 'owner' && v === 'none' ? 'No owner' : v);
+  const set = (patch) => { Object.assign(Q, patch, { offset: 0 }); request(); };
+  function clearFilters() { for (const k of FKEYS) Q[k] = ''; Q.q = ''; search.value = ''; Q.offset = 0; request(); }
+
   function drawControls() {
-    put(views, ...VIEWS.map(([k, l]) => pill({ 'data-ibb-view': k, 'aria-pressed': String(Q.view === k), onclick: () => { Q.view = k; Q.offset = 0; request(); } }, l)));
+    search.placeholder = Q.archived ? 'Search the ' + b.name + ' archive' : 'Search ' + b.name + ' initiatives';
+    search.setAttribute('aria-label', Q.archived ? 'Search the archive' : 'Search initiatives');
+    const box = el('div', { class: 'form il-search' }, icon('search', 'sm'), search);
+    if (Q.archived) {
+      put(top, box, pbtn('outline', [el('span', { class: 'il-back' }, icon('next', 'sm')), 'Back to initiatives'], null, { 'data-ibb': 'back', onclick: () => set({ archived: false }) }));
+      return;
+    }
+    const n = on().length;
+    const view = (VIEWS.find((v) => v[0] === Q.view) || VIEWS[0])[1];
+    const sl = (SORTS.find((s) => s[0] === Q.sort) || SORTS[0])[1];
+    put(top, box,
+      pbtn('ghost', [view, el('span', { class: 'il-chev' }, icon('next', 'sm'))], null, { 'data-ibb': 'views', 'aria-haspopup': 'menu', 'aria-expanded': 'false', title: 'Saved views', onclick: (e) => viewsMenu(e.currentTarget) }),
+      ib(n ? 'Filters, ' + n + ' on' : 'Filters', [icon('filter', 'sm'), n ? el('span', { class: 'bdg' }, String(n)) : null], { class: 'il-ib', 'data-ibb': 'filters', 'aria-haspopup': 'dialog', 'aria-expanded': 'false', title: 'Filters', onclick: (e) => filterMenu(e.currentTarget) }),
+      ib('Sort: ' + sl + ', ' + (Q.dir > 0 ? 'ascending' : 'descending'), el('span', { class: Q.dir > 0 ? 'il-up' : 'il-down' }, icon('next', 'sm')), { 'data-ibb': 'sort', 'aria-haspopup': 'menu', 'aria-expanded': 'false', onclick: (e) => sortMenu(e.currentTarget) }),
+      pbtn('primary', 'New initiative', 'plus', { 'data-ini': 'new-initiative', 'aria-haspopup': 'dialog', onclick: () => ctx.newInitiative() }));
+  }
+  const tick = () => el('span', { class: 'il-tick' }, icon('check', 'sm'));
+  function viewsMenu(anchor) {
+    openMenu(anchor, { label: 'Saved views', items: [{ group: 'Views' }, ...VIEWS.map(([k, l]) => ({ kids: [tick(), l], checked: Q.view === k, attrs: { 'data-ibb-view': k }, onPick: () => set({ view: k }) }))] });
+  }
+  function sortMenu(anchor) {
+    openMenu(anchor, { label: 'Sort', items: [{ group: 'Sort by' }, ...SORTS.map(([k, l]) => ({ kids: [tick(), l], checked: Q.sort === k, attrs: { 'data-ibb-sort': k }, onPick: () => set({ sort: k }) })),
+      { group: 'Order' }, { kids: [el('span', { class: Q.dir > 0 ? 'il-up' : 'il-down' }, icon('next', 'sm')), Q.dir > 0 ? 'Ascending, press to flip' : 'Descending, press to flip'], attrs: { 'data-ibb': 'dir' }, onPick: () => set({ dir: -Q.dir }) }] });
+  }
+  function filterMenu(anchor) {
     const fa = (S.data && S.data.facets) || {};
     const keep = (k, keys) => (Q[k] && !keys.includes(Q[k]) ? [Q[k], ...keys] : keys);
     const order = (b.workflow || []).map((s) => s.name);
     const stages = keep('stage', Object.keys(fa.stage || {}).sort((x, y) => ((order.indexOf(x) + 1 || 99) - (order.indexOf(y) + 1 || 99)) || x.localeCompare(y)));
     const owners = keep('owner', Object.keys(fa.owner || {}).filter((o) => o !== 'none').sort((x, y) => (x === 'You' ? -1 : y === 'You' ? 1 : x.localeCompare(y))));
     const n = (k, v) => (fa[k] && fa[k][v] != null ? ' (' + fa[k][v] + ')' : '');
-    put(filters, 
-      sel('cat', 'Category', [['', 'Any'], ...CATS.map((c) => [c, c + n('cat', c)])]),
-      sel('stage', 'Stage', [['', 'Any'], ...stages.map((s) => [s, s + n('stage', s)])]),
-      sel('status', 'Status', STATUS),
-      sel('owner', 'Owner', [['', 'Anyone'], ['none', 'No owner' + n('owner', 'none')], ...owners.map((o) => [o, o + n('owner', o)])]),
-      sel('horizon', 'Horizon', HORIZON),
-      el('label', { class: 'chips2' }, lbl('Sort'), el('select', { 'data-ibb': 'sort', 'aria-label': 'Sort by', onchange: (e) => { Q.sort = e.target.value; Q.offset = 0; request(); } }, ...SORTS.map(([v, l]) => el('option', { value: v, selected: v === Q.sort }, l)))),
-      ib(Q.dir > 0 ? 'Ascending, press to flip' : 'Descending, press to flip', el('span', { class: Q.dir > 0 ? 'ini-up' : 'ini-down' }, icon('next', 'sm')), { 'data-ibb': 'dir', onclick: () => { Q.dir = -Q.dir; Q.offset = 0; request(); } }));
+    const opt = (k, [v, l]) => el('option', { value: v, selected: v === Q[k] }, l);
+    const sel = (k, label, kids) => el('label', { class: 'il-f' }, el('span', null, label), el('select', { 'data-ibb-filter': k, 'aria-label': label, onchange: (e) => { Q[k] = e.target.value; Q.offset = 0; request(); } }, ...kids));
+    const panel = el('div', { 'data-ibb': 'filter-panel' }, el('div', { class: 'ini-mlbl' }, 'Filter initiatives'),
+      sel('status', 'Status', STATUS_GROUPS.map(([g, opts]) => (g ? el('optgroup', { label: g }, ...opts.map((o) => opt('status', o))) : opts.map((o) => opt('status', o))))),
+      sel('stage', 'Stage', [['', 'Any'], ...stages.map((s) => [s, s + n('stage', s)])].map((o) => opt('stage', o))),
+      sel('cat', 'Category', [['', 'Any'], ...CATS.map((c) => [c, c + n('cat', c)])].map((o) => opt('cat', o))),
+      sel('owner', 'Owner', [['', 'Anyone'], ['none', 'No owner' + n('owner', 'none')], ...owners.map((o) => [o, o + n('owner', o)])].map((o) => opt('owner', o))),
+      sel('horizon', 'Horizon', HORIZON.map((o) => opt('horizon', o))),
+      el('div', { class: 'chips2 il-fend' }, lk({ 'data-ibb': 'clear-in-menu', onclick: () => { clearFilters(); anchor.focus(); } }, 'Clear filters')));
+    openMenu(anchor, { label: 'Filters', body: panel });
   }
-  const active = () => FKEYS.some((k) => Q[k]) || Q.q;
-  function clearFilters() { for (const k of FKEYS) Q[k] = ''; Q.q = ''; search.value = ''; Q.offset = 0; request(); }
-
-  function moveMenu(anchor, r) {
-    const wf = wfOf(r, b);
-    openMenu(anchor, { label: 'Move ' + r.id + ' to a stage', items: [{ group: 'Move ' + r.id + ' to' }, ...wf.map((s) => ({ kids: [sw(s.cat), s.name], current: s.name === r.stage, disabled: s.name === r.stage, attrs: { 'data-ini-moveto': s.name },
-      onPick: async () => { const m = await ctx.moveTo(r.id, s.name); if (m && m.ok) request(); } }))] });
+  function chipsOf() {
+    const ks = on();
+    if (!ks.length) return null;
+    return el('div', { class: 'chips2 il-chips', 'data-ibb': 'chips' },
+      ...ks.map((k) => lk({ 'data-ibb-unset': k, title: 'Remove this filter', onclick: () => set({ [k]: '' }) }, FNAME[k] + ': ' + labelOf(k, Q[k]) + ' ', icon('x', 'sm'))),
+      lk({ 'data-ibb': 'clear', onclick: clearFilters }, 'Clear'));
   }
+
+  const L = { ctx, done: (change) => settle(change) };
   function rowOf(r) {
+    if (r.archived) {
+      return nrow({ ic: rowIcon(r), title: r.title || r.id, onOpen: () => ctx.openInitiative(r.id), openLabel: 'Open ' + r.id + ' ' + (r.title || ''), titleAttrs: { 'data-ibb-open': r.id },
+        chips: archivedChips(r).flat(), right: [restoreBtn(L, r)], attrs: { 'data-ibb-row': r.id, 'data-il-archived': r.archived.into ? 'merged' : 'archived' } });
+    }
     const wf = wfOf(r, b);
-    const late = r.status !== 'done' && r.end && daysBetween(ctx.today, r.end) < 0;
-    return nrow({ ic: r.status === 'late' || r.status === 'at risk' ? 'alert' : r.status === 'done' ? 'check' : 'init', hot: r.status === 'late' || r.status === 'at risk', title: r.title || r.id,
+    const stopped = r.status === 'on hold' || r.status === 'cancelled';
+    const late = !stopped && r.status !== 'done' && r.end && daysBetween(ctx.today, r.end) < 0;
+    return nrow({ ic: rowIcon(r), hot: r.status === 'late' || r.status === 'at risk', title: r.title || r.id,
       onOpen: () => ctx.openInitiative(r.id), openLabel: 'Open ' + r.id + ' ' + (r.title || ''), titleAttrs: { 'data-ibb-open': r.id },
-      chips: [el('span', { class: 'chip2 mono' }, r.id), el('span', { class: 'tag', title: 'Workflow' }, tplName(r, b)), stepsMini(wf, r.stage, tplName(r, b)), statusChip(r.status), ownerChip(r.owner),
-        progChip(r.progress || 0, toneOf(r.status)), dateChip(r.start, r.end, late), r.anchor ? null : st('warn', 'alert', 'No anchor'), ...(r.warnings || []).map(warnChip)],
-      right: [ib('Move ' + r.id + ' to another stage', 'more', { 'data-ibb-move': r.id, 'aria-haspopup': 'menu', 'aria-expanded': 'false', disabled: !!b.self, onclick: (e) => moveMenu(e.currentTarget, r) }),
-        ib('Open ' + r.id, 'next', { 'data-ini-open': r.id, onclick: () => ctx.openInitiative(r.id) })],
-      attrs: { 'data-ibb-row': r.id, 'data-cat': r.cat || catOf(wf, r.stage) } });
+      chips: [el('span', { class: 'chip2 mono' }, r.id), el('span', { class: 'tag', title: 'Workflow' }, tplName(r, b)), stepsMini(wf, r.stage, tplName(r, b)), statusChip(r.status),
+        ...(stopped ? lifeChips(r) : [ownerChip(r.owner), progChip(r.progress || 0, toneOf(r.status)), dateChip(r.start, r.end, late), b.build ? chip(icon('bolt', 'sm'), plural((r.epics || []).length, 'epic')) : null, r.anchor ? null : st('warn', 'alert', 'No anchor'), ...(r.warnings || []).map(warnChip)]),
+        mergedFromChip(r), dupChip(L, r)],
+      right: [ib('Actions for ' + r.id, 'more', { 'data-ibb-move': r.id, 'data-ibb-menu': r.id, 'aria-haspopup': 'menu', 'aria-expanded': 'false', title: 'Move, pause, merge or archive',
+        onclick: (e) => rowMenu(e.currentTarget, L, r, b.self ? null : async (stage) => { const m = await ctx.moveTo(r.id, stage); if (m && m.ok) request(); }) }),
+      ib('Open ' + r.id, 'next', { 'data-ini-open': r.id, onclick: () => ctx.openInitiative(r.id) })],
+      attrs: { 'data-ibb-row': r.id, 'data-cat': r.cat || catOf(wf, r.stage), 'data-status': r.status } });
   }
-  function drawPager(d) {
+  function pagerOf(d) {
     const pages = Math.max(1, Math.ceil(d.total / PAGE)); const cur = Math.floor(d.offset / PAGE);
-    if (pages < 2) { pager.replaceChildren(); return; }
+    if (pages < 2) return null;
     const nums = []; for (let p = 0; p < pages; p++) if (p < 2 || p >= pages - 1 || Math.abs(p - cur) <= 1) nums.push(p); else if (nums[nums.length - 1] !== '…') nums.push('…');
     const to = (p) => { Q.offset = p * PAGE; request(true); };
-    put(pager, el('span', { class: 'dim mono ini-meta' }, (d.offset + 1) + '–' + Math.min(d.total, d.offset + d.rows.length) + ' of ' + d.total),
+    return el('div', { class: 'chips2 ini-pager', 'data-ibb': 'pager' }, el('span', { class: 'dim mono ini-meta' }, (d.offset + 1) + '–' + Math.min(d.total, d.offset + d.rows.length) + ' of ' + d.total),
       pill({ 'data-ibb': 'prev', disabled: cur === 0, onclick: () => to(cur - 1) }, 'Previous'),
       ...nums.map((p) => (p === '…' ? el('span', { class: 'dim' }, '…') : pill({ 'data-ibb-page': String(p + 1), 'aria-pressed': String(p === cur), 'aria-label': 'Page ' + (p + 1), onclick: () => to(p) }, String(p + 1)))),
       pill({ 'data-ibb': 'next', disabled: cur >= pages - 1, onclick: () => to(cur + 1) }, 'Next'));
@@ -100,11 +148,18 @@ registerBoardTab('initiatives', (host, ctx) => {
     drawControls();
     const d = S.data;
     if (!d) return;
-    const label = (VIEWS.find((v) => v[0] === Q.view) || [])[1];
-    put(count, plural(d.total, 'initiative') + ' · ' + label + (active() ? ' · ' : ''), active() ? lk({ 'data-ibb': 'clear', onclick: clearFilters }, 'Clear filters') : '', ' · each row shows its own workflow and stage');
-    put(body, sect({ ic: 'init', title: 'Initiatives', count: d.total },
-      d.rows.length ? list(d.rows.map(rowOf), { 'data-ibb': 'rows' }) : empty(active() || Q.view !== 'all' ? 'No initiatives match. Clear the filters or pick All.' : b.name + ' has no initiatives yet. Press New initiative, or accept an ask in Triage.', { 'data-ibb': 'empty' })));
-    drawPager(d);
+    if (Q.archived) {
+      put(body, sect({ ic: 'clip', title: 'Archive', count: d.total, right: el('span', { class: 'dim il-hint' }, 'Kept whole. Restore puts it back as it was.'), attrs: { 'data-ibb': 'archive' } },
+        d.rows.length ? list(d.rows.map(rowOf), { 'data-ibb': 'rows' }) : empty(Q.q ? 'Nothing in the archive matches.' : 'Nothing archived on this board.', { 'data-ibb': 'empty' })));
+      put(foot, pagerOf(d));
+    } else {
+      const filtered = on().length || Q.q;
+      put(body, sect({ ic: 'init', title: 'Initiatives', count: d.total, right: chipsOf() },
+        d.rows.length ? list(d.rows.map(rowOf), { 'data-ibb': 'rows' }) : empty(filtered || Q.view !== 'all' ? 'No initiatives match. Clear the filters or pick All.' : b.name + ' has no initiatives yet. Press New initiative, or accept an ask in Triage.', { 'data-ibb': 'empty' })));
+      put(foot, pagerOf(d), d.cancelledHidden || d.archived ? el('span', { class: 'chips2' },
+        d.cancelledHidden ? lk({ 'data-ibb': 'show-cancelled', title: 'Cancelled initiatives are hidden from every view', onclick: () => set({ view: 'all', status: 'cancelled' }) }, icon('x', 'sm'), d.cancelledHidden + ' cancelled hidden') : null,
+        d.archived ? lk({ 'data-ibb': 'show-archive', onclick: () => set({ archived: true }) }, icon('clip', 'sm'), d.archived + ' archived') : null) : null);
+    }
     host.dataset.ibbSeq = String(++S.seq);
   }
 
@@ -116,16 +171,28 @@ registerBoardTab('initiatives', (host, ctx) => {
     for (;;) {
       S.again = false;
       const q = { ...Q };
-      r = await ctx.api.get('/api/boards/backlog', { board: b.id, q: q.q, view: q.view, cat: q.cat, stage: q.stage, status: q.status, owner: q.owner, horizon: q.horizon, sort: (q.dir < 0 ? '-' : '') + q.sort, offset: q.offset, limit: PAGE });
-      if (S.dead) return;
+      r = await ctx.api.get('/api/boards/backlog', { board: b.id, q: q.q, view: q.view, cat: q.cat, stage: q.stage, status: q.status, owner: q.owner, horizon: q.horizon, sort: (q.dir < 0 ? '-' : '') + q.sort, offset: q.offset, limit: PAGE, archived: q.archived ? '1' : '' });
+      if (S.dead) return null;
       if (!S.again) break;
     }
     S.flying = false; host.removeAttribute('aria-busy');
-    if (!r || !r.ok || r.pending) { S.err = r && r.pending ? 'The repository is still being read. Try again in a moment.' : 'The initiatives could not be read: ' + ((r && r.error) || 'no answer') + '.'; host.dataset.ibbState = 'error'; draw(); return; }
-    S.err = ''; S.data = { total: r.total || 0, offset: r.offset || 0, limit: r.limit || PAGE, rows: r.rows || [], facets: r.facets || {} };
+    if (!r || !r.ok || r.pending) { S.err = r && r.pending ? 'The repository is still being read. Try again in a moment.' : 'The initiatives could not be read: ' + ((r && r.error) || 'no answer') + '.'; host.dataset.ibbState = 'error'; draw(); return null; }
+    S.err = ''; S.data = { total: r.total || 0, offset: r.offset || 0, limit: r.limit || PAGE, rows: r.rows || [], facets: r.facets || {}, cancelledHidden: r.cancelledHidden || 0, archived: r.archived || 0 };
     Q.offset = S.data.offset;
     draw(); host.dataset.ibbState = 'ready';
-    if (keepFocus) { const f = pager.querySelector('[aria-pressed="true"]'); if (f) f.focus(); }
+    if (keepFocus) { const f = foot.querySelector('[aria-pressed="true"]'); if (f) f.focus(); }
+    return S.data;
+  }
+  /* After a write: read again. A lifecycle line is derived in a child process, so the list may show the old status for a moment;
+   * read again until the row shows the new one, or it left the list (a paused initiative leaves Now and next), up to ten times. */
+  async function settle(change) {
+    for (let k = 0; k < 10 && !S.dead; k++) {
+      const d = await request();
+      if (!d || !change || change.kind !== 'status') return;
+      const row = d.rows.find((x) => x.id === change.id);
+      if (change.status ? (!row || row.status === change.status) : (!row || (row.status !== 'on hold' && row.status !== 'cancelled'))) return;
+      await sleep(800);
+    }
   }
 
   drawControls();

package/workspace/public/pm/c3-ib-items.js

@@ -76,7 +76,7 @@ function mountItems(tab) {
 
     /* ── Backlog ── */
     function addForm() {
-      const inis = R.initiatives.filter((i) => i.status !== 'done').sort((a, c) => ((c.featured ? 1 : 0) - (a.featured ? 1 : 0)) || a.id.localeCompare(c.id)).slice(0, 60);
+      const inis = R.initiatives.filter((i) => i.status !== 'done' && i.status !== 'cancelled').sort((a, c) => ((c.featured ? 1 : 0) - (a.featured ? 1 : 0)) || a.id.localeCompare(c.id)).slice(0, 60);
       const F = { ini: st.ini && inis.some((i) => i.id === st.ini) ? st.ini : (inis[0] || {}).id || '', busy: false };
       const input = el('input', { type: 'text', placeholder: 'Add a PMOS task', 'aria-label': 'Add a PMOS task', 'data-wk': 'add-title' });
       const msg = el('div', { class: 'fold w', role: 'alert', hidden: '', 'data-wk': 'add-error' });
@@ -163,7 +163,7 @@ function mountItems(tab) {
       let hidden = 0;
       if (!st.ini) {
         const pick = inis.filter((i) => withItems.has(i.id)).sort((a, c) => ((c.featured ? 1 : 0) - (a.featured ? 1 : 0)) || String(a.start || '9').localeCompare(String(c.start || '9')));
-        const rest = (st.src || st.q || st.kind) ? [] : inis.filter((i) => !withItems.has(i.id) && i.status !== 'done' && i.start && i.end && (i.horizon === 'now' || i.featured)).sort((a, c) => String(a.start).localeCompare(String(c.start)));
+        const rest = (st.src || st.q || st.kind) ? [] : inis.filter((i) => !withItems.has(i.id) && ['on track', 'at risk', 'late'].includes(i.status) && i.start && i.end && (i.horizon === 'now' || i.featured)).sort((a, c) => String(a.start).localeCompare(String(c.start)));
         const cap = st.tlAll ? 1e9 : TL_CAP; inis = [...pick, ...rest].slice(0, Math.max(cap, pick.length));
         hidden = pick.length + rest.length - inis.length;
       }

package/workspace/public/pm/c3-ini-life.css

@@ -0,0 +1,32 @@
+/* pm/c3-ini-life.css — the board Initiatives header in two rows and the lifecycle sheets (c3-initiative-lifecycle; mockup v2,
+ * 34-initiatives.css "lifecycle + quieter Initiatives header"). Linked once by c3-ini-life.js. Every rule is under an `il-` class. */
+.c3 .il-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.c3 .il-search{position:relative;flex:1 1 260px}
+.c3 .il-search > .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
+.c3 .il-search input[type="text"]{padding-left:30px}
+.c3 .il-chev{display:inline-flex;transform:rotate(90deg);margin-left:2px;color:var(--muted-foreground)}
+.c3 .il-back{display:inline-flex;transform:rotate(180deg)}
+.c3 .il-ib{position:relative}
+.c3 .il-ib .bdg{position:absolute;top:-6px;right:-6px}
+.c3 .il-up,.c3 .il-down{display:inline-flex}
+.c3 .il-up{transform:rotate(-90deg)}
+.c3 .il-down{transform:rotate(90deg)}
+.c3 .il-chips{justify-content:flex-end}
+.c3 .il-foot{justify-content:flex-end;margin-top:4px}
+.c3 .il-listfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
+.c3 .il-listfoot > :only-child{margin-left:auto}
+.c3 .il-hint{font-size:var(--fs-2)}
+.c3 .il-sheet{display:grid;gap:14px}
+.c3 .il-sheet textarea{width:100%;resize:vertical}
+.c3 .il-move{gap:8px;align-items:flex-start}
+.c3 .il-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.c3 .il-banner > span:first-of-type{flex:1 1 240px}
+.c3 .ini-mpanel .il-f{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px;padding:4px 8px;font-size:var(--fs-2);color:var(--muted-foreground)}
+.c3 .ini-mpanel .il-f select{width:100%}
+.c3 .ini-mpanel .il-fend{justify-content:flex-end;padding:6px 8px 2px}
+.c3 .ini-mi .il-hint{color:var(--muted-foreground)}
+.c3 .ini-mi[aria-checked="false"] .il-tick{visibility:hidden}
+/* The board's Initiatives list shows every chip of a row, as the mockup draws it (the quiet pages keep two elsewhere). */
+.c3 [data-ibb="rows"] .nrow .nb > .chips > :nth-child(n+3){display:inline-flex !important}
+.c3 [data-ibb="rows"] .nrow .nb > .chips > .qt-hide{display:none !important}
+.c3 .il-note{font-size:var(--fs-2);line-height:1.45}