create-pmos 0.130.0 → 0.131.0

package/workspace/public/pm/c3-calendar.js

@@ -0,0 +1,392 @@
+/* pm/c3-calendar.js — the Calendar tab of /c3.html as a page about time (initiative calendar-time-page, PRD R1 to R8).
+ *
+ * calendar-views.js mounts it: mountCalendarViews(host, { page: true, ... }) makes draw() hand the instance to
+ * drawCalendarPage(host, r, helpers). That file keeps the data call (GET /api/calendar-views), the zoom bar, the Today
+ * chip and the swipe, pinch and key gestures; the helpers it passes are its own, so nothing is copied here.
+ *
+ * Top to bottom: the page line and the zoom bar (Day, Week, Month, Quarter, Year), the layer chips (Meetings, Milestones
+ * and due dates, Releases, Report dates, My due items, then Free time), the grid of the zoom with the layer markers on it,
+ * and the detail column (under the grid on a narrow screen, at the right from 1100px).
+ *
+ * What it reads from the answer, all optional and additive: `cells` (the meetings), `layers` (the dated items, each with
+ * kind, layer, tone and a reference to its home), `free` (free blocks with a suggested use or none), `context` (what came
+ * out of a past meeting and what moved after it; what is prepared and what to prepare for a coming one) and `layers_note`.
+ * A key that is missing reads as "the server sent none", in words. Nothing is invented.
+ *
+ * What it does: it selects (a meeting, a marker) and it navigates (a zoom, a day, a reference to the home of an item).
+ * It writes nothing. A marker carries no action: its detail has one reference link that opens the item where it lives. */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+import { button } from './primitives.js';
+
+const LAYERS = [
+  ['meetings', 'Meetings'],
+  ['milestones', 'Milestones and due dates'],
+  ['releases', 'Releases'],
+  ['reports', 'Report dates'],
+  ['mine', 'My due items'],
+];
+const KIND = {
+  milestone: ['Milestone', 'flag'], due: ['Due date', 'clock'], release: ['Release', 'bolt'], report: ['Report date', 'report'], own: ['My due item', 'todo'],
+};
+const RANK = { milestone: 0, release: 1, report: 2, due: 3, own: 4 };
+const TONE = { bad: 'Late or at risk of missing', warn: 'At risk', ok: 'On track' };
+const REF = { initiative: 'Open the initiative', 'plan-item': 'Open the initiative', item: 'Open in Work', release: 'Open the release', report: 'Open in Reports' };
+const CTXWORD = { decision: 'Decision', action: 'Action', moved: 'Moved', prepared: 'Prepared', todo: 'To prepare' };
+const NO_SUGGESTION = 'Free, nothing specific to suggest';
+const PPH = 38;   // pixels per hour on the Day and Week timelines (the mockup's vday)
+
+const pad = (n) => String(n).padStart(2, '0');
+const nowIso = () => { const d = new Date(); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`; };
+const plural = (n, one, many) => n + ' ' + (n === 1 ? one : (many || one + 's'));
+const kindOf = (m) => KIND[m.kind] || ['Dated item', 'cal'];
+const hmToH = (s) => { const m = /^(\d{1,2}):(\d{2})/.exec(String(s || '')); return m ? Number(m[1]) + Number(m[2]) / 60 : null; };
+const setVar = (node, name, value) => { node.style.setProperty('--cal3-' + name, String(value)); return node; };
+
+/* ── the page's own state on the instance: which layers are on, whether free time shows, what is selected ─────────── */
+
+function state(r) {
+  const st = r.page || (r.page = { on: new Set(LAYERS.map((l) => l[0])), free: false, sel: null });
+  if (r.sel) { st.sel = { type: 'event', id: r.sel }; r.sel = null; }   // a meeting chosen on the Briefing (openDay)
+  return st;
+}
+
+/* ── what the answer holds ────────────────────────────────────────────────────────────────────────────────────────── */
+
+function model(d, h) {
+  const view = d.view || (d.range && d.range.view) || 'week';
+  const cells = d.cells || [];
+  const meetingsOf = (c) => (c.events || []).filter((e) => e.kind !== 'milestone');   // a milestone event is the older marker; the layers carry dates now
+  const meetings = cells.flatMap((c) => meetingsOf(c).map((e) => ({ e, date: String(e.at || c.start).slice(0, 10) })));
+  const layers = Array.isArray(d.layers) ? d.layers : null;
+  const free = d.free && Array.isArray(d.free.days) ? d.free : null;
+  const freeBy = new Map(); if (free) for (const x of free.days) freeBy.set(x.date, x.blocks || []);
+  const ctx = d.context && typeof d.context === 'object' ? d.context : null;
+  const findEvent = (id) => meetings.find((m) => m.e.id === id) || meetings.find((m) => h.baseId(m.e) === id) || null;
+  return { view, cells, meetingsOf, meetings, layers, free, freeBy, ctx, findEvent };
+}
+
+const sortMarks = (a, b) => (a.tone === 'bad' ? 0 : 1) - (b.tone === 'bad' ? 0 : 1) || (RANK[a.kind] ?? 9) - (RANK[b.kind] ?? 9) || String(a.date).localeCompare(String(b.date));
+function marksIn(M, st, a, b) {
+  if (!M.layers) return [];
+  return M.layers.filter((m) => st.on.has(m.layer) && m.date >= a && m.date <= b).sort(sortMarks);
+}
+const freeIn = (M, a, b) => (M.free ? M.free.days.filter((x) => x.date >= a && x.date <= b).flatMap((x) => (x.blocks || []).map((bl) => ({ ...bl, date: x.date }))) : []);
+
+/* ── the page ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+/** Draw the Calendar tab of instance r into a new node. h is calendar-views.js's own helpers (see PAGE there). */
+export function drawCalendarPage(host, r, h) {
+  const st = state(r);
+  const phone = r.root.classList.contains('ph');
+  const head = el('div', { class: 'cal3-head', 'data-cal3': 'head' }, el('h2', null, 'Calendar'),
+    el('span', { class: 'dim' }, 'What happens by when: meetings, dates and free time on one grid.'));
+  const bar = h.bar(host, r, phone);
+  const page = (...kids) => el('div', { class: 'cal3', 'data-cal3': 'page' }, head, bar, ...kids);
+  if (r.error) return page(fold('alert', 'The calendar could not be read: ' + r.error, { 'data-cv': 'error', role: 'status' }));
+  if (!r.data) return page(fold('clock', 'Reading the repository', { 'data-cv': 'loading', role: 'status' }));
+
+  const d = r.data; const M = model(d, h);
+  const redraw = (focusSel) => { h.redraw(host, r); if (focusSel) { const n = r.root.querySelector(focusSel); if (n) n.focus(); } };
+  const select = (sel, focusSel) => {
+    st.sel = sel; redraw(focusSel);
+    const det = r.root.querySelector('[data-cal3="detail"]');
+    if (det && det.scrollIntoView && r.root.getBoundingClientRect().width < 1100) det.scrollIntoView({ block: 'nearest' });
+  };
+  const ui = { host, r, h, st, M, d, redraw, select };
+
+  const range = d.range || { start: d.today, end: d.today };
+  const nMeet = st.on.has('meetings') ? M.meetings.length : 0;
+  const nMarks = marksIn(M, st, range.start, range.end).length;
+  const empty = !nMeet && !nMarks ? fold('moon', M.meetings.length || (M.layers && M.layers.length)
+    ? 'Every layer with items in this range is turned off. Turn a layer on to see it.'
+    : d.events_source === 'none' && !M.layers ? 'No calendar is cached yet, and the server sent no dated items. Nothing is drawn.'
+      : 'Nothing is scheduled and nothing falls due in this range.', { 'data-cal3': 'empty' }) : null;
+
+  let grid;
+  if (M.view === 'day' || M.view === 'week') {
+    const days = []; for (let x = range.start; x <= range.end && days.length < 7; x = h.shift('day', x, 1)) days.push(x);
+    grid = timeGrid(ui, days);
+  } else if (M.view === 'month') grid = monthGrid(ui);
+  else if (M.view === 'quarter') grid = quarterRows(ui);
+  else grid = yearCards(ui);
+
+  const body = el('div', { class: 'calbody' + (r.anim && !r.loading ? ' ' + r.anim : '') },
+    el('div', { class: 'cal3-wrap' },
+      el('div', { class: 'cal3-main' }, empty, grid),
+      el('div', { class: 'cal3-side' }, detail(ui), st.free ? freeList(ui, range) : null, lanes(ui, range))));
+  return page(chips(ui, range), body);
+}
+
+function fold(icon, text, attrs) { return el('div', { class: 'fold', ...(attrs || {}) }, c3ic(icon, 'sm'), text); }
+
+/* ── the layer chips ──────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function chips(ui, range) {
+  const { st, M } = ui;
+  const count = (id) => (id === 'meetings' ? M.meetings.length : M.layers ? M.layers.filter((m) => m.layer === id && m.date >= range.start && m.date <= range.end).length : null);
+  const chip = (id, label, n, on, toggle, lead) => button({
+    label: [lead, label, n === null ? null : el('span', { class: 'cal3-n' }, String(n))], variant: 'ghost', size: 'sm',
+    attrs: { class: 'cal3-chip', 'aria-pressed': String(on), 'data-cal3-chip': id, title: (on ? 'Hide ' : 'Show ') + label },
+    onClick: () => { toggle(); ui.redraw('[data-cal3-chip="' + id + '"]'); },
+  });
+  const freeN = M.free ? (typeof M.free.count === 'number' ? M.free.count : freeIn(M, range.start, range.end).length) : null;
+  return el('div', { class: 'cal3-chips', role: 'group', 'aria-label': 'Layers', 'data-cal3': 'chips' },
+    ...LAYERS.map(([id, label]) => chip(id, label, count(id), st.on.has(id), () => { if (st.on.has(id)) st.on.delete(id); else st.on.add(id); }, el('i', { class: 'cal3-sw cal3-sw-' + id }))),
+    el('span', { class: 'cal3-sep', 'aria-hidden': 'true' }),
+    chip('free', 'Free time', freeN, st.free, () => { st.free = !st.free; }, c3ic('clock', 'sm')));
+}
+
+/* ── a marker: glyph and short title, tone from the tokens; pressing it selects it (the detail has the reference) ─── */
+
+function marker(ui, m, compact) {
+  const [word, icon] = kindOf(m);
+  const sel = ui.st.sel && ui.st.sel.type === 'marker' && ui.st.sel.id === m.id;
+  const name = word + ': ' + m.title + ', ' + ui.h.dayLabel(m.date) + (m.tone && TONE[m.tone] ? '. ' + TONE[m.tone] : '');
+  return button({
+    label: [c3ic(icon, 'sm'), el('span', { class: 'cal3-mk-t' }, m.title)], variant: 'ghost', size: 'sm',
+    attrs: { class: 'cal3-mk cal3-k-' + (KIND[m.kind] ? m.kind : 'other') + (m.tone ? ' cal3-tone-' + m.tone : '') + (compact ? ' compact' : '') + (sel ? ' sel' : ''),
+      'data-cal3-mk': m.id, 'data-cal3-layer': m.layer, 'data-cal3-kind': m.kind, 'aria-pressed': String(!!sel), 'aria-label': name, title: name },
+    onClick: () => ui.select({ type: 'marker', id: m.id }, '[data-cal3-mk="' + cssId(m.id) + '"]'),
+  });
+}
+const cssId = (s) => String(s).replace(/["\\]/g, '\\$&');
+
+/* the markers of a span, the most important first, at most `max`, and a "+N" for the rest */
+function markRow(ui, a, b, max, compact) {
+  const all = marksIn(ui.M, ui.st, a, b);
+  return [...all.slice(0, max).map((m) => marker(ui, m, compact)), all.length > max ? el('span', { class: 'cal3-more', title: plural(all.length - max, 'more dated item') }, '+' + (all.length - max)) : null];
+}
+
+/* ── Day and Week: the timeline with the all-day marker strip above it ───────────────────────────────────────────── */
+
+function timeGrid(ui, days) {
+  const { M, st, h, d } = ui;
+  const now = nowIso(); const today = d.today;
+  const timedOn = (date) => (st.on.has('meetings') ? M.meetings.filter((m) => m.date === date && h.timeOf(m.e.at) !== null) : []);
+  const allDayOn = (date) => (st.on.has('meetings') ? M.meetings.filter((m) => m.date === date && h.timeOf(m.e.at) === null) : []);
+  const all = days.flatMap(timedOn);
+  const fr = M.free || {};
+  const t0 = Math.min(Math.floor(hmToH(fr.day_start) ?? 8), 8, ...all.map((m) => Math.floor(h.timeOf(m.e.at))));
+  const t1 = Math.max(Math.ceil(hmToH(fr.day_end) ?? 18), 18, ...all.map((m) => Math.ceil(h.endH(m.e))));
+  const Y = (t) => Math.round((Math.max(t0, Math.min(t1, t)) - t0) * PPH);
+
+  const tg = el('div', { class: 'cal3-tg' + (days.length === 1 ? ' one' : ''), 'data-cal3': days.length === 1 ? 'day' : 'week' });
+  setVar(tg, 'n', days.length); setVar(tg, 'hgt', (t1 - t0) * PPH + 'px'); setVar(tg, 'pph', PPH + 'px');
+
+  const headRow = el('div', { class: 'cal3-row cal3-dhead' }, el('div', { class: 'cal3-gut' }),
+    ...days.map((date) => el('div', { class: 'cal3-dh' + (date === today ? ' today' : '') },
+      days.length > 1 ? button({ label: h.dayLabel(date), variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dbtn', 'data-cal3-day': date, title: 'Open ' + h.dayLabel(date) }, onClick: () => h.go(ui.host, ui.r, { view: 'day', date, anim: 'zi' }) })
+        : el('b', null, h.dayLabel(date)))));
+
+  const strip = el('div', { class: 'cal3-row cal3-strip', 'data-cal3': 'strip' }, el('div', { class: 'cal3-gut' }, 'dates'),
+    ...days.map((date) => {
+      const kids = [...allDayOn(date).map((m) => meetingButton(ui, m, 'cal3-allday')), ...markRow(ui, date, date, days.length === 1 ? 12 : 4, days.length > 1)];
+      return el('div', { class: 'cal3-sc', 'data-cal3-strip': date }, ...(kids.filter(Boolean).length ? kids : [el('span', { class: 'cal3-none' }, days.length === 1 ? 'No dated item on this day' : '')]));
+    }));
+
+  const hours = el('div', { class: 'cal3-hours', 'aria-hidden': 'true' });
+  for (let t = t0; t < t1; t++) hours.appendChild(setVar(el('span', null, pad(t) + ':00'), 'y', Y(t) + 'px'));
+
+  const cols = days.map((date) => {
+    const wd = h.dowOf(date);
+    const col = el('div', { class: 'vday cal3-col' + (date === today ? ' today' : '') + (wd === 0 || wd === 6 ? ' we' : ''), 'data-cal3-col': date });
+    if (st.free) for (const b of (M.freeBy.get(date) || [])) col.appendChild(freeBlock(ui, date, b, Y));
+    const evs = timedOn(date).sort((a, b) => h.timeOf(a.e.at) - h.timeOf(b.e.at));
+    lanes4(evs, h).forEach(([m, lane, n]) => {
+      const s = h.timeOf(m.e.at); const f = h.endH(m.e);
+      const b = meetingButton(ui, m, 'vb cal3-ev' + (String(m.e.end || m.e.at) <= now ? ' past' : '') + (m.e.routine || m.e.mock_routine ? ' rt' : ''), [el('b', null, m.e.title || m.e.id), f - s >= 1 ? el('small', null, h.hhmm(s) + ' to ' + h.hhmm(f)) : null]);
+      setVar(b, 'y', (Y(s) + 1) + 'px'); setVar(b, 'h', Math.max(16, Y(f) - Y(s) - 3) + 'px'); setVar(b, 'l', lane); setVar(b, 'lc', n);
+      col.appendChild(b);
+    });
+    if (date === today && now.slice(0, 10) === today) { const t = hmToH(now.slice(11)); if (t > t0 && t < t1) col.appendChild(setVar(el('div', { class: 'vnow cal3-now', 'aria-hidden': 'true' }), 'y', Y(t) + 'px')); }
+    return col;
+  });
+  tg.append(headRow, strip, el('div', { class: 'cal3-row cal3-body' }, hours, ...cols));
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-scroll' }, tg));
+}
+
+/* overlapping meetings share the column side by side: [meeting, lane, lanes in its cluster] */
+function lanes4(evs, h) {
+  const out = []; let cluster = []; let cEnd = -1;
+  const flush = () => { const ends = []; const at = cluster.map((m) => { let l = ends.findIndex((x) => x <= h.timeOf(m.e.at)); if (l < 0) { l = ends.length; ends.push(h.endH(m.e)); } else ends[l] = h.endH(m.e); return [m, l]; }); at.forEach(([m, l]) => out.push([m, l, ends.length])); cluster = []; };
+  for (const m of evs) { if (cluster.length && h.timeOf(m.e.at) >= cEnd) flush(); cluster.push(m); cEnd = Math.max(cEnd, h.endH(m.e)); }
+  if (cluster.length) flush();
+  return out;
+}
+
+function meetingButton(ui, m, cls, label) {
+  const sel = ui.st.sel && ui.st.sel.type === 'event' && (ui.st.sel.id === m.e.id || ui.st.sel.id === ui.h.baseId(m.e));
+  const t = m.e.title || m.e.id; const s = ui.h.timeOf(m.e.at);
+  const name = t + ', ' + ui.h.dayLabel(m.date) + (s !== null ? ' at ' + ui.h.hhmm(s) : ', all day');
+  return button({
+    label: label || t, variant: 'ghost', size: 'sm',
+    attrs: { class: cls + (sel ? ' sel' : ''), 'data-id': m.e.id, 'data-cal3-ev': m.e.id, 'aria-pressed': String(!!sel), 'aria-label': name, title: name },
+    onClick: () => ui.select({ type: 'event', id: m.e.id }, '[data-cal3-ev="' + cssId(m.e.id) + '"]'),
+  });
+}
+
+/* a free block: the existing hatched window (.vf) with its suggested use, as text only */
+function freeBlock(ui, date, b, Y) {
+  const s = hmToH(b.from); const f = hmToH(b.to);
+  const n = el('div', { class: 'vf cal3-free', 'data-cal3-free': date + ' ' + b.from },
+    el('b', null, b.from + ' to ' + b.to + ' free'), el('span', null, b.suggestion && b.suggestion.text ? b.suggestion.text : NO_SUGGESTION));
+  setVar(n, 'y', (Y(s) + 2) + 'px'); setVar(n, 'h', Math.max(18, Y(f) - Y(s) - 4) + 'px');
+  return n;
+}
+
+/* ── Month: a cell per day with the meeting count, up to three markers and +N, and the free count ───────────────── */
+
+function monthGrid(ui) {
+  const { M, st, h, d } = ui;
+  const days = M.cells.filter((c) => c.start === c.end);
+  const g = el('div', { class: 'cal3-month', 'data-cal3': 'month' }, ...['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((n) => el('div', { class: 'cal3-wd' }, n)));
+  const off = days.length ? (h.dowOf(days[0].start) + 6) % 7 : 0;
+  for (let i = 0; i < off; i++) g.appendChild(el('div', { class: 'cal3-mc out', 'aria-hidden': 'true' }));
+  for (const c of days) {
+    const wd = h.dowOf(c.start); const n = st.on.has('meetings') ? M.meetingsOf(c).length : 0;
+    const fr = st.free ? (M.freeBy.get(c.start) || []).length : 0;
+    g.appendChild(el('div', { class: 'cal3-mc' + (wd === 0 || wd === 6 ? ' we' : '') + (c.start === d.today ? ' today' : ''), 'data-cal3-date': c.start },
+      button({ label: String(Number(c.start.slice(8))), variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dn', 'data-cal3-day': c.start, 'aria-label': 'Open ' + h.dayLabel(c.start) + (n ? ', ' + plural(n, 'meeting') : ''), title: 'Open ' + h.dayLabel(c.start) }, onClick: () => h.go(ui.host, ui.r, { view: 'day', date: c.start, anim: 'zi' }) }),
+      n ? el('span', { class: 'cal3-cnt' }, plural(n, 'meeting')) : null,
+      ...markRow(ui, c.start, c.start, 3, true),
+      fr ? el('span', { class: 'cal3-fcnt', 'data-cal3-fcnt': c.start }, fr + ' free') : null));
+  }
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, g);
+}
+
+/* ── Quarter: a row per week; Year: a card per month. Counts, and the markers of the most important kinds ────────── */
+
+function spanCounts(ui, c) {
+  const { M, st } = ui;
+  const n = st.on.has('meetings') ? M.meetingsOf(c).length : 0;
+  const fr = st.free ? freeIn(M, c.start, c.end).length : 0;
+  return el('div', { class: 'cal3-counts' },
+    st.on.has('meetings') ? el('span', { class: 'tag' }, plural(n, 'meeting')) : null,
+    el('span', { class: 'tag' }, plural(marksIn(M, st, c.start, c.end).length, 'dated item')),
+    st.free ? el('span', { class: 'tag cal3-ftag' }, fr + ' free') : null);
+}
+
+function quarterRows(ui) {
+  const { M, h, d } = ui;
+  const rows = M.cells.map((c) => el('div', { class: 'cal3-qrow' + (c.start <= d.today && d.today <= c.end ? ' now' : ''), 'data-cal3-week': c.start },
+    button({ label: 'Week of ' + h.dayLabel(c.start), variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dbtn', title: 'Open the week of ' + h.dayLabel(c.start) }, onClick: () => h.go(ui.host, ui.r, { view: 'week', date: c.start, anim: 'zi' }) }),
+    spanCounts(ui, c), el('div', { class: 'cal3-qmk' }, ...markRow(ui, c.start, c.end, 4, false))));
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-quarter', 'data-cal3': 'quarter' }, ...rows));
+}
+
+function yearCards(ui) {
+  const { M, h, d } = ui;
+  const cards = M.cells.map((c) => el('div', { class: 'cal3-ym' + (c.start <= d.today && d.today <= c.end ? ' now' : ''), 'data-cal3-month': c.start.slice(0, 7) },
+    button({ label: h.MN[Number(c.start.slice(5, 7)) - 1] + ' ' + c.start.slice(0, 4), variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dbtn', title: 'Open the month' }, onClick: () => h.go(ui.host, ui.r, { view: 'month', date: c.start, anim: 'zi' }) }),
+    spanCounts(ui, c), el('div', { class: 'cal3-qmk' }, ...markRow(ui, c.start, c.end, 3, false))));
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-year', 'data-cal3': 'year' }, ...cards));
+}
+
+/* ── the detail column ────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function refLink(ui, ref, extra) {
+  if (!ref || !ref.type || !ref.id) return el('span', { class: 'dim cal3-noptr' }, 'no pointer');
+  if (!REF[ref.type]) return el('span', { class: 'dim mono cal3-noptr' }, ref.type + ' ' + ref.id);
+  return el('a', { href: '#', class: 'cal3-ref', 'data-cal3-ref': ref.type + ':' + ref.id, title: REF[ref.type] + ': ' + ref.id,
+    onClick: (ev) => { ev.preventDefault(); openRef(ui, ref, extra || {}); } }, c3ic('out', 'sm'), REF[ref.type]);
+}
+
+/* open the home of a reference: an initiative on Initiatives, a work item on Work, a report on Reports */
+function openRef(ui, ref, extra) {
+  const { h, host, r } = ui;
+  if (ref.type === 'initiative') { if (!h.goInitiative(ref.id)) h.openInit(host, r, ref.id, extra.title); return; }
+  if (ref.type === 'plan-item' || ref.type === 'release') { const ini = extra.initiative || ref.initiative; if (!(ini && h.goInitiative(ini))) h.gotoTab('init'); return; }
+  if (ref.type === 'item') { h.gotoTab('work'); return; }
+  if (ref.type === 'report') h.gotoTab('rep');
+}
+
+function closeBtn(ui) {
+  return button({ label: 'Close', variant: 'ghost', size: 'sm', attrs: { class: 'cal3-close', 'data-cal3': 'close' }, onClick: () => { ui.st.sel = null; ui.redraw('[data-cal3-chip="meetings"]'); } });
+}
+
+function detail(ui) {
+  const { st, M, h } = ui;
+  const box = (kids, attrs) => el('section', { class: 'card cal3-detail', 'data-cal3': 'detail', 'aria-label': 'Detail', ...(attrs || {}) }, ...kids);
+  if (st.sel && st.sel.type === 'marker' && M.layers) {
+    const m = M.layers.find((x) => x.id === st.sel.id);
+    if (m) {
+      const [word, icon] = kindOf(m);
+      return box([
+        el('div', { class: 'cal3-dt' }, el('h3', null, c3ic(icon), word), closeBtn(ui)),
+        el('b', { class: 'cal3-title' }, m.title),
+        el('div', { class: 'chips2' }, el('span', { class: 'tag' }, word), el('span', { class: 'tag' }, h.dayLabel(m.date) + (m.end && m.end !== m.date ? ' to ' + h.dayLabel(m.end) : '')),
+          m.tone && TONE[m.tone] ? el('span', { class: 'tag cal3-tone-' + m.tone }, TONE[m.tone]) : null, m.initiative ? el('span', { class: 'tag' }, 'Initiative: ' + (((ui.d.gantt || []).find((g) => g.id === m.initiative) || {}).title || m.initiative)) : null),
+        el('div', { class: 'cal3-open', 'data-cal3': 'open' }, refLink(ui, m.ref, { initiative: m.initiative, title: m.title })),
+        el('p', { class: 'dim cal3-note' }, 'A marker shows the date only. You act on the item where it lives.'),
+      ], { 'data-cal3-sel': m.id });
+    }
+  }
+  if (st.sel && st.sel.type === 'event') {
+    const hit = M.findEvent(st.sel.id);
+    if (hit) return box(meetingDetail(ui, hit), { 'data-cal3-sel': hit.e.id });
+  }
+  return box([el('div', { class: 'cal3-dt' }, el('h3', null, c3ic('info'), 'Detail')),
+    el('p', { class: 'dim cal3-note' }, 'Select a meeting to see what came out of it or what to prepare. Select a dated marker to see its date and open its home.')]);
+}
+
+function meetingDetail(ui, hit) {
+  const { M, h } = ui; const e = hit.e;
+  const s = h.timeOf(e.at); const f = s === null ? null : h.endH(e);
+  const rec = M.ctx ? (M.ctx[e.id] || M.ctx[h.baseId(e)] || null) : null;
+  const phase = rec && rec.phase ? rec.phase : String(e.end || e.at) <= nowIso() ? 'past' : 'upcoming';
+  const past = phase === 'past';
+  const items = rec && Array.isArray(rec.items) ? rec.items : [];
+  const list = (kinds, title, key, none) => {
+    const rows = items.filter((x) => kinds.includes(x.kind));
+    return el('div', { class: 'cal3-ctx', 'data-cal3-ctx': key }, el('h4', null, title),
+      rows.length ? el('ul', { class: 'cal3-cl', role: 'list' }, ...rows.map((x) => el('li', { class: 'cal3-ci', 'data-cal3-item': x.kind },
+        el('span', { class: 'tag' }, CTXWORD[x.kind] || x.kind), el('span', { class: 'cal3-ct' }, x.text),
+        x.at ? el('span', { class: 'dim mono cal3-at' }, h.dayLabel(x.at) + (h.timeOf(x.at) !== null ? ' ' + h.hhmm(h.timeOf(x.at)) : '')) : null,
+        refLink(ui, x.ref, { title: x.text })))) : el('p', { class: 'dim cal3-note' }, none));
+  };
+  let body;
+  if (!M.ctx) body = [fold('info', 'The calendar sent no meeting context, so PMOS shows nothing for this meeting.', { 'data-cal3': 'no-context' })];
+  else if (!rec || rec.held === false) body = [fold('moon', 'PMOS holds nothing for this meeting: no note, no decision and no linked item.', { 'data-cal3': 'nothing-held' })];
+  else if (past) body = [list(['decision', 'action'], 'What came out of it', 'out', 'No decision or action is recorded.'), list(['moved'], 'What moved after it', 'moved', 'Nothing moved within 48 hours that refers to it.')];
+  else body = [list(['prepared'], 'Prepared', 'prepared', 'Nothing is prepared yet.'), list(['todo'], 'To prepare', 'todo', 'Nothing is left to prepare.')];
+  return [
+    el('div', { class: 'cal3-dt' }, el('h3', null, c3ic('cal'), 'Meeting'), el('span', { class: 'tag' + (past ? '' : ' cal3-up') }, past ? 'past' : 'upcoming'), closeBtn(ui)),
+    el('b', { class: 'cal3-title' }, e.title || e.id),
+    el('div', { class: 'dim mono cal3-when' }, h.dayLabel(hit.date) + (s === null ? ', all day' : ' · ' + h.hhmm(s) + ' to ' + h.hhmm(f))),
+    ...body,
+    rec && rec.held !== false ? el('p', { class: 'dim cal3-note' }, 'Only what PMOS holds a record for. Each line opens its source.') : null,
+  ];
+}
+
+/* the free blocks of the range in words, with the suggested use or none; nothing is written */
+function freeList(ui, range) {
+  const { M, h } = ui;
+  const head = el('h3', null, c3ic('clock'), 'Free time');
+  if (!M.free) return el('section', { class: 'card cal3-freel', 'data-cal3': 'free-list' }, head, fold('info', 'The calendar sent no free time for this range.', { 'data-cal3': 'no-free' }));
+  const all = freeIn(M, range.start, range.end);
+  const cap = 12;
+  return el('section', { class: 'card cal3-freel', 'data-cal3': 'free-list' }, head,
+    el('p', { class: 'dim cal3-note' }, 'Blocks of ' + (M.free.min_minutes || 90) + ' minutes or more between ' + (M.free.day_start || '09:00') + ' and ' + (M.free.day_end || '18:00') + '. A suggestion is a proposal: PMOS writes nothing.'),
+    all.length ? el('ul', { class: 'cal3-cl', role: 'list' }, ...all.slice(0, cap).map((b) => el('li', { class: 'cal3-ci', 'data-cal3-fb': b.date + ' ' + b.from },
+      el('span', { class: 'dim mono cal3-at' }, h.dayLabel(b.date) + ' ' + b.from + ' to ' + b.to),
+      el('span', { class: 'cal3-ct' }, b.suggestion && b.suggestion.text ? b.suggestion.text : NO_SUGGESTION),
+      b.suggestion && b.suggestion.ref ? refLink(ui, b.suggestion.ref, { title: b.suggestion.text }) : null)))
+      : el('p', { class: 'dim cal3-note' }, 'No free block of ' + (M.free.min_minutes || 90) + ' minutes or more in this range.'),
+    all.length > cap ? el('p', { class: 'dim mono cal3-note' }, '+' + (all.length - cap) + ' more blocks in this range') : null);
+}
+
+/* each lane in words: its count in the range, or why it is empty */
+function lanes(ui, range) {
+  const { M, st, d } = ui;
+  const notes = d.layers_note && typeof d.layers_note === 'object' ? d.layers_note : {};
+  const rows = LAYERS.map(([id, label]) => {
+    const n = id === 'meetings' ? M.meetings.length : M.layers ? M.layers.filter((m) => m.layer === id && m.date >= range.start && m.date <= range.end).length : null;
+    const why = n ? plural(n, id === 'meetings' ? 'meeting' : 'item') + (st.on.has(id) ? '' : ', hidden')
+      : id === 'meetings' ? (d.events_source === 'none' ? 'No calendar is cached yet.' : 'No meeting in this range.')
+        : n === null ? 'The calendar sent no dated items, so this layer is empty.' : notes[id] || 'Nothing in this range.';
+    return el('li', { class: 'cal3-lane', 'data-cal3-lane': id }, el('i', { class: 'cal3-sw cal3-sw-' + id }), el('span', null, label), el('span', { class: 'dim cal3-why' }, why));
+  });
+  const extra = Object.keys(notes).filter((k) => !LAYERS.some((l) => l[0] === k)).map((k) => el('li', { class: 'cal3-lane dim' }, el('span', null, k), el('span', { class: 'cal3-why' }, String(notes[k]))));
+  return el('section', { class: 'card cal3-lanes', 'data-cal3': 'lanes' }, el('h3', null, c3ic('filter'), 'In this range'), el('ul', { class: 'cal3-cl', role: 'list' }, ...rows, ...extra));
+}

package/workspace/public/pm/c3-demo-cal4.js

@@ -0,0 +1,114 @@
+/* pm/c3-demo-cal4.js — DEMO fixtures for the Calendar page (initiative calendar-time-page) on /c3.html?demo=1.
+ * c3-demo.js passes every GET /api/calendar-views answer through withCalendarPage(), which adds the three keys the page reads:
+ *   layers   the dated items of the range (milestones and due dates, releases, report dates, my due items), each with its kind,
+ *            its layer, its tone and the reference to its home
+ *   free     the free blocks of 90 minutes or more between 09:00 and 18:00 on the working days from today, each with a
+ *            suggested use or none
+ *   context  for some meetings: what came out of a past one and what moved after it, or what is prepared and what to prepare
+ *            for a coming one. Every claim carries a pointer. One past meeting has nothing held, to show the honest state.
+ * The content reuses the demo's initiatives (checkout, sso, search, returns), its people and its meetings and work items
+ * (c3-demo-data.js). Real mode never loads this file. Nothing here reaches the server. */
+import * as D from './c3-demo-data.js';
+
+const DAY = 86400000;
+const addDays = (iso, n) => new Date(Date.parse(iso + 'T00:00:00Z') + n * DAY).toISOString().slice(0, 10);
+const dow = (iso) => new Date(Date.parse(iso + 'T00:00:00Z')).getUTCDay();
+const pad = (n) => String(n).padStart(2, '0');
+const hm = (min) => pad(Math.floor(min / 60)) + ':' + pad(min % 60);
+const minOf = (at) => { const m = /T(\d{2}):(\d{2})/.exec(String(at || '')); return m ? Number(m[1]) * 60 + Number(m[2]) : null; };
+
+const init = (id) => ({ type: 'initiative', id });
+const item = (id) => ({ type: 'item', id });
+
+/* the dated items: [date, kind, layer, title, tone, ref, initiative] */
+const DATED = [
+  ['2026-10-09', 'due', 'milestones', 'Copy freeze (Lee)', null, { type: 'plan-item', id: 'checkout-copy' }, 'checkout'],
+  ['2026-10-12', 'milestone', 'milestones', 'SSO freeze', 'warn', init('sso'), 'sso'],
+  ['2026-10-13', 'milestone', 'milestones', 'Interview 5: park or continue Returns', null, init('returns'), 'returns'],
+  ['2026-10-24', 'milestone', 'milestones', 'Ship Checkout v2 (promised)', 'bad', init('checkout'), 'checkout'],
+  ['2026-11-06', 'milestone', 'milestones', 'Search relevance beta', 'warn', init('search'), 'search'],
+  ['2026-12-14', 'due', 'milestones', 'Board update review', null, { type: 'plan-item', id: 'board-update' }, 'checkout'],
+  ['2026-10-14', 'release', 'releases', 'SSO general release', 'warn', { type: 'release', id: 'rel-sso-1' }, 'sso'],
+  ['2026-10-31', 'release', 'releases', 'Checkout v2 on the full scope', 'bad', { type: 'release', id: 'rel-checkout-2' }, 'checkout'],
+  ['2026-11-20', 'release', 'releases', 'Search relevance 1.0', null, { type: 'release', id: 'rel-search-1' }, 'search'],
+  ['2026-12-20', 'report', 'reports', 'Quarterly board update', null, { type: 'report', id: 'board-quarterly' }, null],
+  ['2026-10-06', 'own', 'mine', 'Payments sandbox keys', 'bad', item('item-demo018'), 'checkout'],
+  ['2026-10-08', 'own', 'mine', 'Reply to Marta: SSO 14 Oct, SCIM in Nov', 'warn', item('item-demo011'), 'sso'],
+  ['2026-10-12', 'own', 'mine', 'Confirm the SSO date to Marta', null, item('item-demo016'), 'sso'],
+  ['2026-10-13', 'own', 'mine', 'Share returns insights with sales', null, item('item-demo017'), 'returns'],
+  ['2026-11-16', 'own', 'mine', 'Write the Q1 discovery plan', null, item('item-demo020'), null],
+];
+/* the weekly status to leadership is a report date every Friday */
+for (let d = '2026-09-04'; d <= '2026-12-25'; d = addDays(d, 7)) DATED.push([d, 'report', 'reports', 'Weekly status to leadership', null, { type: 'report', id: 'leadership-weekly' }, null]);
+
+function layersIn(start, end) {
+  return DATED.filter((x) => x[0] >= start && x[0] <= end).sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0))
+    .map(([date, kind, layer, title, tone, ref, initiative], i) => ({ id: 'dated-' + date + '-' + i, date, kind, layer, title, tone, ref, ...(initiative ? { initiative } : {}) }));
+}
+
+/* the suggested uses of a free block, from the demo's work items; a block past the first of a day gets none */
+const SUGGEST = [
+  { text: 'Prep for Sprint planning at 14:00: settle the scope cut first', ref: item('item-demo010') },
+  { text: 'Draft the weekly status for leadership, due Friday', ref: item('item-demo012') },
+  { text: 'Confirm the SSO date to Marta before the freeze', ref: item('item-demo016') },
+  { text: 'Write the Q1 discovery plan, due 16 Nov', ref: item('item-demo020') },
+];
+const MIN = 90; const START = 9 * 60; const END = 18 * 60;
+
+function meetingsOn(date) {
+  const day = D.calendarViews('/api/calendar-views?view=day&date=' + date);
+  return ((day.cells[0] && day.cells[0].events) || []).filter((e) => e.kind !== 'milestone')
+    .map((e) => [minOf(e.at), minOf(e.end)]).filter((x) => x[0] !== null && x[1] !== null).sort((a, b) => a[0] - b[0]);
+}
+
+function freeIn(start, end) {
+  const days = []; let n = 0; let k = 0;
+  for (let d = start < D.TODAY ? D.TODAY : start; d <= end; d = addDays(d, 1)) {
+    if (dow(d) === 0 || dow(d) === 6) continue;
+    const blocks = []; let cur = START;
+    for (const [s, e] of [...meetingsOn(d), [END, END]]) {
+      const a = Math.max(cur, START); const b = Math.min(s, END);
+      if (b - a >= MIN) blocks.push({ from: hm(a), to: hm(b), minutes: b - a, suggestion: blocks.length ? null : SUGGEST[k++ % SUGGEST.length] });
+      cur = Math.max(cur, e);
+    }
+    n += blocks.length;
+    if (blocks.length) days.push({ date: d, blocks });
+  }
+  return { min_minutes: MIN, day_start: hm(START), day_end: hm(END), days, count: n };
+}
+
+/* what PMOS holds about some meetings. The keys are the demo's event ids (base id @ date). */
+const CONTEXT = {
+  'm2@2026-10-07': { phase: 'past', held: true, items: [
+    { kind: 'decision', text: 'Cut Checkout v2 to three core flows if the sandbox keys slip past Friday', ref: init('checkout'), at: '2026-10-07T11:15:00' },
+    { kind: 'action', text: 'Dara confirms the payments sandbox keys', ref: item('item-demo018'), at: '2026-10-07T11:15:00' },
+    { kind: 'action', text: 'Lee sends the annual-plan label', ref: item('item-demo019'), at: '2026-10-07T11:15:00' },
+    { kind: 'moved', text: 'Payments sandbox keys moved to Waiting for Dara', ref: item('item-demo018'), at: '2026-10-07T14:10:00' },
+    { kind: 'moved', text: 'The Checkout v2 forecast moved from 24 Oct to 31 Oct', ref: init('checkout'), at: '2026-10-07T16:40:00' },
+  ] },
+  'm3@2026-10-06': { phase: 'past', held: false, items: [] },
+  'm1@2026-10-08': { phase: 'upcoming', held: true, items: [
+    { kind: 'prepared', text: 'Async summary of the 3 open tickets', ref: init('search') },
+  ] },
+  'm2@2026-10-08': { phase: 'upcoming', held: true, items: [
+    { kind: 'prepared', text: 'Agenda: scope cut, blockers, next steps', ref: init('checkout') },
+    { kind: 'prepared', text: 'Pre-read: the Checkout v2 PRD with 2 open comments', ref: { type: 'plan-item', id: 'checkout-prd' } },
+    { kind: 'todo', text: 'Confirm the 1 Oct numbers before the 10:30 update', ref: item('item-demo001') },
+  ] },
+  'm3@2026-10-08': { phase: 'upcoming', held: true, items: [
+    { kind: 'prepared', text: 'Interview guide, draft 2', ref: init('returns') },
+    { kind: 'todo', text: 'Review the 13:00 interview guide', ref: item('item-demo004') },
+  ] },
+  'm4@2026-10-08': { phase: 'upcoming', held: true, items: [
+    { kind: 'prepared', text: 'Three scope options with their dates', ref: init('checkout') },
+    { kind: 'todo', text: 'Cut Checkout v2 to 3 core flows to hold 24 Oct?', ref: item('item-demo010') },
+  ] },
+  'm5@2026-10-08': { phase: 'upcoming', held: false, items: [] },
+};
+
+/** The answer of GET /api/calendar-views with the Calendar page's keys added. */
+export function withCalendarPage(out) {
+  if (!out || !out.range) return out;
+  const { start, end } = out.range;
+  return { ...out, layers: layersIn(start, end), free: freeIn(start, end), context: CONTEXT };
+}