create-pmos 0.129.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-calpop.js

@@ -0,0 +1,103 @@
+/* pm/c3-calpop.js — the calendar as a popup over any page of the console (briefing-brief PRD R7, R9).
+ *
+ *   mountCalPopupTrigger(toolsHost)   adds the calendar button to the top bar's tools, and binds the key C (once)
+ *   openCalendarPopup(opener?)        opens the full calendar (five zooms, no ribbon) in a dialog over the page
+ *   closeCalendarPopup(back?)         closes it; `back` (default true) returns the focus to where it was
+ *   lastZoom()                        the zoom last used, "day" until the PM changes it
+ *
+ * The popup mounts calendar-views.js mountCalendarViews on a host of its own, so it never shares state with the Calendar tab
+ * (mountCalendarViews keys its state on the host element). Closing calls disposeCalendarViews on that host, which removes
+ * the view's own key handler. The dialog is data-shell="calpop", not "sheet", so the view's + and - keys keep working inside it;
+ * the Calendar tab's instance steps aside while the popup is open (calendar-views.js onKey).
+ * Not open on load. Escape, a press on the scrim and the close button close it. Tab stays inside. On a phone it is full screen.
+ * The zoom is kept in module state; localStorage only inside try/catch, as a convenience.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic, c3ib, c3Phone } from './pm-work-view.js';
+import { mountCalendarViews, disposeCalendarViews } from './calendar-views.js';
+
+const ZOOMS = ['day', 'week', 'month', 'quarter', 'year'];
+const KEY = 'pmos.c3.calpop.zoom';
+const store = {
+  get() { try { return localStorage.getItem(KEY); } catch { return null; } },
+  set(v) { try { localStorage.setItem(KEY, v); } catch { /* no storage */ } },
+};
+let zoom = ZOOMS.includes(store.get()) ? store.get() : 'day';
+let cur = null;        // { wrap, host, opener, off, obs, stopPhone }
+let keyBound = false;
+
+export const lastZoom = () => zoom;
+export const isCalendarPopupOpen = () => !!cur;
+
+/** The zoom the view is on now: its pressed Day/Week/... button. */
+function readZoom(host) {
+  const b = host.querySelector('[data-cv-view][aria-pressed="true"],[data-cv-view][aria-selected="true"],[data-cv-view][aria-current="true"]');
+  const v = b && b.getAttribute('data-cv-view');
+  return ZOOMS.includes(v) ? v : null;
+}
+
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+export function closeCalendarPopup(back = true) {
+  if (!cur) return;
+  const c = cur; cur = null;
+  const z = readZoom(c.host); if (z) { zoom = z; store.set(z); }
+  document.removeEventListener('keydown', c.onKey, true);
+  if (c.obs) c.obs.disconnect();
+  if (c.stopPhone) c.stopPhone();
+  try { disposeCalendarViews(c.host); } catch { /* already gone */ }
+  c.wrap.remove();
+  if (back && c.opener && c.opener.isConnected && c.opener.focus) { try { c.opener.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
+}
+
+export function openCalendarPopup(opener) {
+  if (cur) return;
+  ensureC3Css();
+  const from = opener || (document.activeElement && document.activeElement !== document.body ? document.activeElement : document.querySelector('[data-c3pg="calendar"]'));
+  const close = () => closeCalendarPopup(true);
+  const host = el('div', { class: 'calpop-host', 'data-c3pg': 'calpop-host' });
+  const closeBtn = c3ib('Close', 'x', { title: 'Close (Esc)', 'data-c3pg': 'calpop-close', onclick: close }, 'sm');
+  const head = el('div', { class: 'sh2' }, el('span', { class: 'chips2' }, c3ic('cal'), el('b', null, 'Calendar')), el('span', { class: 'chips2' }, closeBtn));
+  const dlg = el('div', { class: 'sheet bs calpop', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Calendar', tabindex: '-1', 'data-c3pg': 'calpop' },
+    el('div', { class: 'grab' }), head, el('div', { class: 'sb' }, host));
+  const wrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'calpop' }, el('div', { class: 'scrim', onclick: close }), dlg);
+  const stopPhone = c3Phone(wrap);
+  const onKey = (e) => {
+    if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); close(); return; }
+    if (e.key !== 'Tab') return;
+    const items = [...dlg.querySelectorAll(FOCUSABLE)].filter((n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement);
+    if (!items.length) { e.preventDefault(); dlg.focus(); return; }
+    const at = items.indexOf(document.activeElement);
+    if (at < 0 || (e.shiftKey && at === 0) || (!e.shiftKey && at === items.length - 1)) { e.preventDefault(); items[e.shiftKey ? items.length - 1 : 0].focus(); }
+  };
+  document.addEventListener('keydown', onKey, true);
+  document.body.appendChild(wrap);
+  cur = { wrap, host, opener: from, onKey, stopPhone, obs: null };
+  mountCalendarViews(host, { view: zoom, scope: undefined });
+  /* remember the zoom as it changes, so a reload of the page also keeps it */
+  cur.obs = new MutationObserver(() => { const z = readZoom(host); if (z) { zoom = z; store.set(z); } });
+  cur.obs.observe(host, { subtree: true, childList: true, attributes: true, attributeFilter: ['aria-pressed'] });
+  dlg.focus({ preventScroll: true });
+}
+
+const typing = (n) => !!(n && n.matches && n.matches('input,textarea,select,[contenteditable],[contenteditable="true"]'));
+const otherSheet = () => !!document.querySelector('[data-shell="sheet"],[data-shell="preview"],[data-shell="palette"]');
+
+function onC(e) {
+  if (e.key !== 'c' && e.key !== 'C') return;
+  if (e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented || e.repeat) return;
+  if (cur) return;                                     // open already: Escape closes it
+  if (typing(document.activeElement) || typing(e.target) || otherSheet()) return;
+  e.preventDefault();
+  openCalendarPopup();
+}
+
+/** The calendar button, last before the search button; and the key C. Call once, with the top bar's tools element. */
+export function mountCalPopupTrigger(toolsHost) {
+  if (!keyBound) { keyBound = true; document.addEventListener('keydown', onC, true); }
+  if (!toolsHost || toolsHost.querySelector('[data-c3pg="calendar"]')) return null;
+  const btn = c3ib('Calendar (C)', 'cal', { 'aria-haspopup': 'dialog', 'data-c3pg': 'calendar', onclick: (e) => openCalendarPopup(e.currentTarget) });
+  const search = toolsHost.querySelector('[data-c3pg="search"]');
+  if (search) toolsHost.insertBefore(btn, search); else toolsHost.append(btn);
+  return btn;
+}

package/workspace/public/pm/c3-demo-brief-page.js

@@ -0,0 +1,54 @@
+/* pm/c3-demo-brief-page.js — DEMO ONLY (/c3.html?demo=1): the Briefing's Today agenda and the own-item rows of Needs you, in the real shape of
+ * GET /api/brief-page (lib/routes-brief-page.js), for the demo day (Thu 8 Oct 2026, 08:12), with the demo's own people and initiatives.
+ * Today is the five meetings of the demo calendar (c3-demo-data.js MEET). Needs you gets two items that are overdue, one due today, and two outside-PMOS items
+ * (one with evidence: a meeting with Dara is booked today). Decisions are the demo briefing's own needs (c3-demo-data.js NEEDS), not repeated here.
+ * Writes: the pm-items routes the rows call (done, notyet, remove, reopen, undo) are answered in memory, and every one is kept in window.__c3demoWrites
+ * ({ path, body }) so a test can see what the page asked to write. Real mode never loads this file. */
+const iso = (h, m) => new Date(2026, 9, 8, h, m).toISOString();
+const TODAY = [
+  { id: 'm1', title: 'Standup', start: iso(9, 30), end: iso(10, 0), people: ['Dara', 'Lee', 'Sam'], initiative: 'Checkout v2', prepared: [], before: [] },
+  { id: 'm2', title: 'Checkout sync', start: iso(10, 30), end: iso(11, 15), people: ['Priya', 'Dara'], initiative: 'Checkout v2',
+    prepared: [{ kind: 'prep', text: 'Prep note: sandbox keys are 2 days late; Jira says 24 Oct, the PRD says 31 Oct.' }, { kind: 'last-note', text: 'Last notes: Checkout sync (2026-10-05)' }],
+    before: [{ id: 'i2', title: 'Confirm the 1 Oct numbers before the 10:30 update', due: '2026-10-08' }] },
+  { id: 'm3', title: 'Customer interview', start: iso(13, 0), end: iso(14, 0), people: ['Marta'], initiative: 'Returns experience',
+    prepared: [{ kind: 'prep', text: 'Interview guide draft is in Review.' }], before: [{ id: 'i6', title: 'Review the 13:00 interview guide', due: '2026-10-08' }] },
+  { id: 'm4', title: 'Sprint planning', start: iso(14, 0), end: iso(15, 0), people: ['Dara', 'Priya', 'Sam'], initiative: 'Checkout v2', prepared: [],
+    before: [{ id: 'i1', title: 'Cut Checkout v2 to 3 core flows to hold 24 Oct?', due: '2026-10-08' }] },
+  { id: 'm5', title: 'Leadership update', start: iso(16, 30), end: iso(17, 0), people: ['Priya', 'Marta'], initiative: null,
+    prepared: [{ kind: 'last-note', text: 'Last notes: Leadership update (2026-10-01)' }], before: [] },
+];
+const NEEDS = [
+  { key: 'item:bp-od1', kind: 'overdue', id: 'bp-od1', headline: 'Send Priya the revised Checkout v2 date', due: '2026-10-06', days_late: 2, priority: 'P1', person: 'Priya', offline: false, evidence: null },
+  { key: 'item:bp-od2', kind: 'overdue', id: 'bp-od2', headline: 'Ask Lee to book the design vendor call', due: '2026-10-07', days_late: 1, priority: 'P2', person: 'Lee', offline: true, evidence: null },
+  { key: 'item:bp-dt1', kind: 'due-today', id: 'bp-dt1', headline: 'Send Lee the pricing-page feedback', due: '2026-10-08', days_late: 0, priority: 'P2', person: null, offline: false, evidence: null },
+  { key: 'item:bp-of1', kind: 'offline', id: 'bp-of1', headline: 'Talk to Dara about the flow 4 estimate', due: null, days_late: 0, priority: 'P2', person: 'Dara', offline: true,
+    evidence: { text: 'a meeting with Dara is booked Thu 14:00', event_id: 'm4' } },
+];
+
+let gone = {};
+export function installBriefPage() {
+  if (window.__c3demoBriefPage) return; window.__c3demoBriefPage = true;
+  window.__c3demoWrites = [];
+  const prev = window.fetch.bind(window);
+  const json = (b) => new Response(JSON.stringify(b), { status: 200, headers: { 'content-type': 'application/json' } });
+  window.fetch = (input, init) => {
+    try {
+      const raw = typeof input === 'string' ? input : input instanceof URL ? input.href : input && input.url;
+      const u = new URL(raw, location.origin);
+      const method = String((init && init.method) || (input && input.method) || 'GET').toUpperCase();
+      if (u.origin === location.origin) {
+        if (method === 'GET' && u.pathname === '/api/brief-page') return Promise.resolve(json({ ok: true, date: '2026-10-08', today: TODAY.map((m) => ({ ...m, minutes: (Date.parse(m.end) - Date.parse(m.start)) / 60000, state: Date.parse(m.end) <= Date.now() ? 'past' : 'later' })).map((m, i, a) => ({ ...m, state: m.state === 'past' ? 'past' : (a.findIndex((x) => x.state !== 'past' && Date.parse(x.start) > Date.now()) === i ? 'next' : 'later') })), needs: NEEDS.filter((n) => !gone[n.id]) }));
+        const m = /^\/api\/pm-items\/(done|notyet|remove|reopen|undo)$/.exec(u.pathname);
+        if (method !== 'GET' && m) {
+          let b = {}; try { b = init && init.body ? JSON.parse(init.body) : {}; } catch { b = {}; }
+          if (NEEDS.some((n) => n.id === b.id)) {
+            window.__c3demoWrites.push({ path: u.pathname, body: b });
+            if (m[1] === 'reopen' || m[1] === 'undo') delete gone[b.id]; else gone[b.id] = m[1];
+            return Promise.resolve(json({ ok: true }));
+          }
+        }
+      }
+    } catch { /* an unreadable request goes on as it is */ }
+    return prev(input, init);
+  };
+}