create-pmos 0.134.0 → 0.135.0

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

@@ -5,19 +5,22 @@
  * 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).
+ * and due dates, Releases, Report dates, My due items, then Free time and Tidy-up), 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`.
+ * out of a past meeting and what moved after it; what is prepared and what to prepare for a coming one), `layers_note`, and
+ * `tidy`, `tidy_total`, `tidy_note` (initiative calendar-tidy-up: suggestions by fixed rules, each a proposal in words with
+ * references; the Tidy-up chip lists them and marks the meetings they name on the Day and Week timeline).
  * 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';
+import { button, ensureComponentsCss } from './primitives.js';
+import { toast } from './c3-toast.js';
 
 const LAYERS = [
   ['meetings', 'Meetings'],
@@ -34,7 +37,19 @@ 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)
+/* the tidy-up suggestions (lib/calendar-tidy.js): the severity groups in order, and each rule in words */
+const TIDY_GROUPS = [['bad', 'Needs a fix'], ['warn', 'At risk'], ['info', 'Worth a look']];
+const TIDY_RULE = { overlap: 'Overlap', 'no-buffer': 'No break', 'prep-risk': 'Prep at risk', 'dead-initiative': 'Stopped initiative',
+  'review-early': 'Review too early', 'likely-delay': 'Late initiative', 'heavy-day': 'Heavy day' };
+const TIDY_RANK = { bad: 0, warn: 1, info: 2 };
+const PPH_PAGE = 46;   // pixels per hour on the Day and Week timelines (the mockup's page grid)
+const PPH_OVERLAY = 36;   // the same grid in the overlay drawer
+const DAY_LOAD = 6;   // the scale of a day's load bar, in hours
+const HOME = { event: 'Calendar', milestone: 'Initiatives', due: 'Initiatives', release: 'Initiatives', report: 'Reports', own: 'Work' };   // where a record lives (the home chip)
+/* the overlay remembers the layers the PM hid, from one opening to the next (the mockup's mem.hide) */
+const mem = { hide: [] };
+/* the page's own Tidy-up choices: what was proposed and what was dismissed. They write nothing (D65) */
+const proposed = new Set(); const dismissed = new Set();
 
 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())}`; };
@@ -46,7 +61,7 @@ const setVar = (node, name, value) => { node.style.setProperty('--cal3-' + name,
 /* ── 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 });
+  const st = r.page || (r.page = { on: new Set(LAYERS.map((l) => l[0]).filter((id) => !(r.ctx && r.ctx.overlay && mem.hide.includes(id)))), free: true, tidy: 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;
 }
@@ -63,7 +78,11 @@ function model(d, h) {
   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 tidy = Array.isArray(d.tidy) ? d.tidy.filter((s) => s && s.id && !dismissed.has(s.id)) : null;
+  const tidyBy = new Map();   // event id -> the suggestions that name it, the most severe first
+  if (tidy) for (const s of tidy) for (const x of s.refs || []) if (x && x.type === 'event' && x.id) { if (!tidyBy.has(x.id)) tidyBy.set(x.id, []); tidyBy.get(x.id).push(s); }
+  for (const list of tidyBy.values()) list.sort((a, b) => (TIDY_RANK[a.severity] ?? 3) - (TIDY_RANK[b.severity] ?? 3));
+  return { view, cells, meetingsOf, meetings, layers, free, freeBy, ctx, findEvent, tidy, tidyBy };
 }
 
 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));
@@ -77,12 +96,11 @@ const freeIn = (M, a, b) => (M.free ? M.free.days.filter((x) => x.date >= a && x
 
 /** 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) {
+  ensureComponentsCss();   // the Tidy-up buttons are pmc-btn
   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);
+  const page = (...kids) => el('div', { class: 'cal3' + (r.ctx.overlay ? ' ov' : ''), 'data-cal3': 'page' }, r.ctx.deck || null, 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' }));
 
@@ -114,7 +132,7 @@ export function drawCalendarPage(host, r, h) {
   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))));
+      el('div', { class: 'cal3-side' }, detail(ui), st.tidy ? tidyList(ui) : null, st.free ? freeList(ui, range) : null, lanes(ui, range))));
   return page(chips(ui, range), body);
 }
 
@@ -132,10 +150,16 @@ function chips(ui, range) {
   });
   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 }))),
+    ...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);
+      if (ui.r.ctx.overlay) mem.hide = LAYERS.map((l) => l[0]).filter((x) => !st.on.has(x));   // the overlay remembers what was hidden
+    }, 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')));
+    chip('free', 'Free time', freeN, st.free, () => { st.free = !st.free; }, c3ic('clock', 'sm')),
+    chip('tidy', 'Tidy-up', tidyCount(M, ui.d), st.tidy, () => { st.tidy = !st.tidy; }, c3ic('spark', 'sm')));
 }
+/* the number of suggestions in the range: the server's total (the list may be capped), or null when it sent none */
+const tidyCount = (M, d) => (M.tidy ? Math.max(0, (typeof d.tidy_total === 'number' ? d.tidy_total : M.tidy.length) - (d.tidy.length - M.tidy.length)) : null);   // less the ones the PM dismissed
 
 /* ── a marker: glyph and short title, tone from the tokens; pressing it selects it (the detail has the reference) ─── */
 
@@ -153,15 +177,37 @@ function marker(ui, m, compact) {
 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) {
+function markRow(ui, a, b, max, compact, view) {
   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];
+  return [...all.slice(0, max).map((m) => marker(ui, m, compact)), all.length > max ? moreBtn(ui, all.length - max, a, b, view) : null];
+}
+/* the "+N" of a span is a button: it zooms into the week or the month that holds the rest */
+function moreBtn(ui, n, a, b, view) {
+  const label = view === 'week' ? 'Open the week of ' + ui.h.dayLabel(a) : view === 'day' ? 'Open ' + ui.h.dayLabel(a) : 'Open ' + ui.h.MN[Number(a.slice(5, 7)) - 1] + ' ' + a.slice(0, 4);
+  return button({ label: '+' + n, variant: 'ghost', size: 'sm', attrs: { class: 'cal3-more', 'data-cal3-more': a, title: plural(n, 'more dated item') + '. ' + label, 'aria-label': plural(n, 'more dated item') + '. ' + label },
+    onClick: () => ui.h.go(ui.host, ui.r, { view, date: a, anim: 'zi' }) });
 }
 
 /* ── Day and Week: the timeline with the all-day marker strip above it ───────────────────────────────────────────── */
 
+/* what a meeting is, for the grid: tied to a promise or a decision (an initiative, prep, or a record PMOS holds), or routine; blocked
+ * and prep left come from the event or its context when the server sends them (the mockup's blocked(), kind() and note) */
+function evState(ui, m, nowStr) {
+  const { M, h } = ui; const e = m.e;
+  const rec = M.ctx ? (M.ctx[e.id] || M.ctx[h.baseId(e)] || null) : null;
+  const items = rec && Array.isArray(rec.items) ? rec.items : [];
+  const todo = items.some((x) => x.kind === 'todo') || e.prep_todo === true;
+  const held = !!rec && rec.held !== false && items.length > 0;
+  const standup = /stand-?up/i.test(e.title || '');
+  const tied = !standup && !(e.routine || e.mock_routine) && !!(e.initiative || (Array.isArray(e.prep) ? e.prep.length : e.prep) || items.length);
+  const past = String(e.end || e.at) <= nowStr;
+  return { tied, blocked: e.blocked === true || e.mock_hot === true, todo, held, past, note: past ? (held ? ' · held' : '') : (todo ? ' · prep to do' : '') };
+}
+const hoursOf = (m, h) => Math.max(0, h.endH(m.e) - h.timeOf(m.e.at));
+
 function timeGrid(ui, days) {
   const { M, st, h, d } = ui;
+  const PPH = ui.r.ctx.overlay ? PPH_OVERLAY : PPH_PAGE;
   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) : []);
@@ -174,14 +220,27 @@ function timeGrid(ui, days) {
   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');
 
+  /* the hours of a day and its load: tied to a promise or a decision, routine, and the rest, on a 6 hour scale */
+  const load = (date) => {
+    const es = timedOn(date); let tot = 0; let tied = 0;
+    for (const m of es) { const x = hoursOf(m, h); tot += x; if (evState(ui, m, now).tied) tied += x; }
+    return { tot, tied };
+  };
+  const seg = (hrs, cls) => setVar(el('i', { class: cls }), 'w', Math.min(100, hrs / DAY_LOAD * 100) + '%');
   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)))));
+    ...days.map((date) => {
+      const L = load(date);
+      return el('div', { class: 'cal3-dh' + (date === today ? ' today' : ''), 'data-cal3-dh': date },
+        el('div', { class: 'dhl' },
+          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)),
+          el('span', { class: 'hrs', 'data-cal3-hrs': date }, L.tot ? +L.tot.toFixed(1) + ' h' : '')),
+        el('div', { class: 'lbar', 'aria-hidden': 'true' }, seg(L.tied, 'tied'), seg(L.tot - L.tied, 'rt'), el('i', { class: 'rest' })));
+    }));
 
   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)];
+      const kids = [...allDayOn(date).map((m) => meetingButton(ui, m, 'cal3-allday')), ...markRow(ui, date, date, days.length === 1 ? 12 : 4, days.length > 1, 'day')];
       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' : '')]));
     }));
 
@@ -195,7 +254,8 @@ function timeGrid(ui, days) {
     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]);
+      const S = evState(ui, m, now); const rt = !S.tied && !S.held && !S.todo;   // routine: a standup, or no initiative, no prep and no record
+      const b = meetingButton(ui, m, 'vb cal3-ev' + (S.past ? ' past' : '') + (rt || m.e.routine || m.e.mock_routine ? ' rt' : '') + (S.blocked ? ' hot' : ''), [el('b', null, m.e.title || m.e.id), f - s >= 0.5 ? el('small', null, h.hhmm(s) + ' to ' + h.hhmm(f) + S.note) : 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);
     });
@@ -203,7 +263,9 @@ function timeGrid(ui, days) {
     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));
+  const key = (cls, text, wrap) => el('span', { class: wrap || null }, el('i', { class: 'lgk ' + cls, 'aria-hidden': 'true' }), text);
+  const legend = el('div', { class: 'legend', 'data-cal3': 'legend' }, key('tied', 'tied to a promise or decision'), key('rt', 'routine'), key('fw', 'focus window', 'lgfw'), key('rel', 'release'), key('pro', 'promise'), key('rep', 'report'));
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-scroll' }, tg), legend);
 }
 
 /* overlapping meetings share the column side by side: [meeting, lane, lanes in its cluster] */
@@ -218,19 +280,24 @@ function lanes4(evs, h) {
 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');
+  // with the Tidy-up chip on, a meeting that a suggestion names carries the most severe one's tone and title
+  const tidy = ui.st.tidy ? (ui.M.tidyBy.get(m.e.id) || ui.M.tidyBy.get(ui.h.baseId(m.e)) || null) : null;
+  const sev = tidy ? tidy[0].severity : null;
+  const name = t + ', ' + ui.h.dayLabel(m.date) + (s !== null ? ' at ' + ui.h.hhmm(s) : ', all day') + (tidy ? '. Tidy-up: ' + tidy.map((x) => x.title).join('; ') : '');
   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 },
+    attrs: { class: cls + (sel ? ' sel' : '') + (tidy ? ' cal3-tidy-ev cal3-tidy-' + (TIDY_RANK[sev] !== undefined ? sev : 'info') : ''), 'data-id': m.e.id, 'data-cal3-ev': m.e.id,
+      ...(tidy ? { 'data-cal3-tidy': sev } : {}), '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 */
+/* a free block: a dashed focus window with its length; the suggested use is in its title and in the Free time list */
 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));
+  const text = b.suggestion && b.suggestion.text ? b.suggestion.text : NO_SUGGESTION;
+  const n = el('div', { class: 'vf cal3-free', 'data-cal3-free': date + ' ' + b.from, title: b.from + ' to ' + b.to + ': ' + text },
+    el('b', null, +((f - s)).toFixed(1) + ' h focus'));
   setVar(n, 'y', (Y(s) + 2) + 'px'); setVar(n, 'h', Math.max(18, Y(f) - Y(s) - 4) + 'px');
   return n;
 }
@@ -245,12 +312,10 @@ function monthGrid(ui) {
   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));
+      ...markRow(ui, c.start, c.start, 3, true, 'day')));
   }
   return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, g);
 }
@@ -260,18 +325,16 @@ function monthGrid(ui) {
 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);
+    el('span', { class: 'tag' }, plural(marksIn(M, st, c.start, c.end).length, 'dated item')));
 }
 
 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))));
+    spanCounts(ui, c), el('div', { class: 'cal3-qmk' }, ...markRow(ui, c.start, c.end, 4, false, 'week'))));
   return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-quarter', 'data-cal3': 'quarter' }, ...rows));
 }
 
@@ -279,7 +342,7 @@ 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))));
+    spanCounts(ui, c), el('div', { class: 'cal3-qmk' }, ...markRow(ui, c.start, c.end, 3, false, 'month'))));
   return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-year', 'data-cal3': 'year' }, ...cards));
 }
 
@@ -301,6 +364,10 @@ function openRef(ui, ref, extra) {
   if (ref.type === 'report') h.gotoTab('rep');
 }
 
+/* the home chip: where the record lives (the mockup's UI.homeChip) */
+const homeChip = (name) => el('span', { class: 'chip2', title: 'Where this lives', 'data-cal3': 'home' }, c3ic('repo', 'sm'), name || 'its home');
+const peopleOf = (e) => [].concat(e.people || e.with || []).map((p) => (p && typeof p === 'object' ? p.name || p.id : p)).filter(Boolean).map(String);
+
 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"]'); } });
 }
@@ -315,10 +382,10 @@ function detail(ui) {
       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) : '')),
+        el('div', { class: 'chips2' }, homeChip(HOME[m.kind]), 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.'),
+        el('p', { class: 'dim cal3-note' }, m.kind === 'own' ? 'A marker shows the date only. You act on the item where it lives.' : 'This date lives here. Change it where the plan is kept, not on the grid.'),
       ], { 'data-cal3-sel': m.id });
     }
   }
@@ -341,21 +408,24 @@ function meetingDetail(ui, hit) {
     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),
+        el('span', { class: 'tag' + (x.done ? ' cal3-up' : '') }, x.done && x.kind === 'todo' ? 'Done' : 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 (!rec || rec.held === false) body = [fold('moon', past ? 'Nothing held for this meeting: no note, decisions or linked items yet.' : 'Nothing to prepare for this meeting.', { '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 if (!items.some((x) => x.kind === 'prepared' || x.kind === 'todo')) body = [el('p', { class: 'dim cal3-note', 'data-cal3': 'nothing-to-prepare' }, 'Nothing to prepare for this meeting.')];
   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))),
+    el('div', { class: 'chips2', 'data-cal3': 'meeting-chips' }, homeChip('Calendar'), ...peopleOf(e).map((n) => el('span', { class: 'tag' }, n)),
+      e.initiative ? el('span', { class: 'tag' }, 'Initiative: ' + (((ui.d.gantt || []).find((g) => g.id === e.initiative) || {}).title || e.initiative)) : null),
     ...body,
-    rec && rec.held !== false ? el('p', { class: 'dim cal3-note' }, 'Only what PMOS holds a record for. Each line opens its source.') : null,
+    el('p', { class: 'dim cal3-note' }, past ? 'Only what PMOS holds a record for: items created or closed within 48 hours of the meeting. Each line opens its source.' : 'PMOS proposes changes. It never edits your calendar.'),
   ];
 }
 
@@ -365,15 +435,64 @@ function freeList(ui, range) {
   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;
+  const small = ui.M.view === 'day' || ui.M.view === 'week';
+  const cap = 8;
   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 },
+    !small ? fold('info', 'Free time shows in the Day and Week views.', { 'data-cal3': 'free-small' })
+      : 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);
+    small && all.length > cap ? el('p', { class: 'dim mono cal3-note' }, '+' + (all.length - cap) + ' more blocks in this range') : null);
+}
+
+/* the tidy-up suggestions of the range, grouped by severity: what is wrong, why, the proposed change and the references
+ * to the items involved. A suggestion is a proposal in words; the panel has no control that changes anything. */
+function tidyList(ui) {
+  const { M, d, h } = ui;
+  const head = el('h3', null, c3ic('spark'), 'Tidy-up');
+  const box = (...kids) => el('section', { class: 'card cal3-tidyl', 'data-cal3': 'tidy-list', 'aria-label': 'Tidy-up suggestions' }, head, ...kids);
+  const notes = d.tidy_note && typeof d.tidy_note === 'object' ? Object.keys(d.tidy_note).filter((k) => d.tidy_note[k]) : [];
+  const noteList = notes.length ? el('div', { class: 'cal3-ctx', 'data-cal3': 'tidy-notes' }, el('h4', null, 'Not checked'),
+    el('ul', { class: 'cal3-cl', role: 'list' }, ...notes.map((k) => el('li', { class: 'cal3-ci', 'data-cal3-tidy-note': k },
+      el('span', { class: 'tag' }, TIDY_RULE[k] || k), el('span', { class: 'cal3-ct dim' }, String(d.tidy_note[k])))))) : null;
+  if (!M.tidy) return box(fold('info', 'The server sent no tidy-up list.', { 'data-cal3': 'no-tidy' }), noteList);
+  const lead = el('p', { class: 'dim cal3-note' }, 'Each suggestion is a proposal. PMOS changes nothing in your calendar: you make the change where the meeting or the item lives.');
+  if (!M.tidy.length) return box(lead, el('p', { class: 'dim cal3-note', 'data-cal3': 'tidy-empty' }, 'Nothing to tidy in this range.'), noteList);
+  const total = tidyCount(M, d);
+  const refOf = (s, x) => {
+    if (x.type === 'event') {
+      const hit = M.findEvent(x.id);
+      if (!hit) return el('span', { class: 'dim cal3-noptr' }, 'meeting not drawn');
+      return el('a', { href: '#', class: 'cal3-ref', 'data-cal3-ref': 'event:' + x.id, title: 'Show the meeting: ' + (hit.e.title || x.id),
+        onClick: (ev) => { ev.preventDefault(); ui.select({ type: 'event', id: hit.e.id }, '[data-cal3-ev="' + cssId(hit.e.id) + '"]'); } }, c3ic('cal', 'sm'), hit.e.title || 'Show the meeting');
+    }
+    const ini = (s.refs || []).find((y) => y && y.type === 'initiative');
+    return refLink(ui, x, { title: s.title, initiative: ini ? ini.id : undefined });
+  };
+  const groups = TIDY_GROUPS.map(([sev, label]) => {
+    const rows = M.tidy.filter((s) => s.severity === sev);
+    if (!rows.length) return null;
+    return el('div', { class: 'cal3-ctx', 'data-cal3-tidy-group': sev }, el('h4', { class: 'cal3-tone-' + sev }, label + ' (' + rows.length + ')'),
+      el('ul', { class: 'cal3-cl', role: 'list' }, ...rows.map((s) => el('li', { class: 'cal3-ci cal3-tidy-i cal3-tidy-' + sev, 'data-cal3-tidy-item': s.id, 'data-cal3-rule': s.rule },
+        el('span', { class: 'tag cal3-tone-' + sev }, TIDY_RULE[s.rule] || s.rule),
+        el('span', { class: 'dim mono cal3-at' }, h.dayLabel(s.date)),
+        el('b', { class: 'cal3-tidy-t' }, s.title),
+        s.why ? el('p', { class: 'cal3-note cal3-tidy-why' }, s.why) : null,
+        s.suggestion ? el('p', { class: 'cal3-note cal3-tidy-fix', 'data-cal3': 'tidy-fix' }, el('b', null, 'Proposed: '), s.suggestion) : null,
+        el('span', { class: 'cal3-tidy-refs' }, ...(s.refs || []).filter((x) => x && x.type && x.id).map((x) => refOf(s, x))),
+        /* a proposal is a note on this page and nothing more: no control here changes the calendar or sends a word (D65) */
+        el('span', { class: 'iacts' },
+          proposed.has(s.id) ? el('span', { class: 'tag cal3-up', 'data-cal3-proposed': s.id }, 'Proposed')
+            : button({ label: 'Propose it', variant: 'outline', size: 'sm', attrs: { 'data-cal3-act': 'propose', 'data-cal3-key': s.id },
+              onClick: () => { proposed.add(s.id); toast('Proposal: ' + String(s.suggestion || s.title).replace(/\.$/, '') + '. Nothing changed in your calendar.'); ui.redraw('[data-cal3-proposed="' + cssId(s.id) + '"]'); } }),
+          button({ label: 'Dismiss', variant: 'ghost', size: 'sm', attrs: { 'data-cal3-act': 'dismiss', 'data-cal3-key': s.id },
+            onClick: () => { dismissed.add(s.id); toast('Dismissed'); ui.redraw('[data-cal3-chip="tidy"]'); } }))))));
+  });
+  return box(lead, ...groups.filter(Boolean),
+    total > M.tidy.length ? el('p', { class: 'dim mono cal3-note' }, 'Showing ' + M.tidy.length + ' of ' + total + ' suggestions, the most severe first.') : null, noteList);
 }
 
 /* each lane in words: its count in the range, or why it is empty */

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

@@ -1,7 +1,7 @@
 /* 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
+ *   openCalendarPopup(opener?)        opens the Calendar page's own grid (five zooms, chips, detail, Free time, lanes) in a drawer 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
  *
@@ -22,7 +22,7 @@ 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 zoom = ZOOMS.includes(store.get()) ? store.get() : 'week';   // the overlay opens on the Week (the mockup's mem.zoom)
 let cur = null;        // { wrap, host, opener, off, obs, stopPhone }
 let keyBound = false;
 
@@ -57,8 +57,8 @@ export function openCalendarPopup(opener) {
   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' },
+  const head = el('div', { class: 'sh2' }, el('span', { class: 'chips2' }, c3ic('cal'), el('b', null, 'Calendar')), el('span', { class: 'chips2' }, el('span', { class: 'dim calpop-esc' }, 'Esc to close'), closeBtn));
+  const dlg = el('div', { class: 'sheet bs dw 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);
@@ -73,7 +73,7 @@ export function openCalendarPopup(opener) {
   document.addEventListener('keydown', onKey, true);
   document.body.appendChild(wrap);
   cur = { wrap, host, opener: from, onKey, stopPhone, obs: null };
-  mountCalendarViews(host, { view: zoom, scope: undefined });
+  mountCalendarViews(host, { view: zoom, page: true, overlay: true });   // the same page grid as the Calendar tab, 36px an hour, no deck
   /* 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'] });