create-pmos 0.146.0 → 0.148.0

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

@@ -63,7 +63,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]).filter((id) => !(r.ctx && r.ctx.overlay && mem.hide.includes(id)))), free: true, tidy: 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, routine: false, sel: null });
   if (r.sel) { st.sel = { type: 'event', id: r.sel }; r.sel = null; }   // a meeting chosen on the Briefing (openDay)
   if (r.pendingMode) { st.mode = r.pendingMode; r.pendingMode = null; }   // a note opened before the page drew (the Record chip)
   if (!st.mode) st.mode = 'cal';
@@ -146,7 +146,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-main' }, empty, empty ? null : highlights(ui, range), grid),
       el('div', { class: 'cal3-side' }, detail(ui), st.tidy ? tidyList(ui) : null, st.free ? freeList(ui, range) : null, lanes(ui, range))));
   return pageBar(chips(ui, range), body);
 }
@@ -186,7 +186,8 @@ function chips(ui, range) {
     }, 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('tidy', 'Tidy-up', tidyCount(M, ui.d), st.tidy, () => { st.tidy = !st.tidy; }, c3ic('spark', 'sm')));
+    chip('tidy', 'Tidy-up', tidyCount(M, ui.d), st.tidy, () => { st.tidy = !st.tidy; }, c3ic('spark', 'sm')),
+    WIDE.includes(M.view) ? chip('routine', 'Routine', routineCount(ui, range), st.routine, () => { st.routine = !st.routine; }, c3ic('report', 'sm')) : null);
 }
 /* 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
@@ -332,7 +333,123 @@ function freeBlock(ui, date, b, Y) {
   return n;
 }
 
-/* ── Month: a cell per day with the meeting count, up to three markers and +N, and the free count ───────────────── */
+/* ── significance (initiative calendar-highlights) ───────────────────────────────────────────────────────────────
+ * Month, Quarter and Year show what matters and fold the rest into a count. Routine: a report date that recurs more often
+ * than monthly (the server's `routine` flag, or a daily, weekly or bi-weekly cadence), a meeting that repeats in the range,
+ * a stand-up or a 1:1, and a meeting tied to nothing. A due item that is on track is counted, not named. Key at Day, Week and
+ * Month: milestones, releases, reports that go out, late or at-risk due items, and meetings tied to a promise or a decision.
+ * Quarter and Year are one step stricter: milestones, releases, reports that go out, and late items; meetings are counted.
+ * The Routine chip (Month, Quarter, Year) brings back every item as markers. */
+const WIDE = ['month', 'quarter', 'year'];
+const FREQUENT = /\b(daily|weekly|bi-?weekly|fortnightly|stand-?up)\b/i;
+const normT = (t) => String(t || '').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, ' ').trim();
+const isDue = (m) => m.kind === 'due' || m.kind === 'own';
+const routineMark = (m) => m.kind === 'report' && (m.routine === true || (m.routine !== false && (FREQUENT.test(String(m.cadence || '')) || FREQUENT.test(String(m.title || '')) || /\bdraft\b/i.test(String(m.title || '')))));
+const quietDue = (m) => isDue(m) && m.tone !== 'bad' && m.tone !== 'warn';
+const keyMark = (m) => !routineMark(m) && !quietDue(m);
+const landMark = (m) => m.kind === 'milestone' || m.kind === 'release' || (m.kind === 'report' && !routineMark(m)) || (isDue(m) && m.tone === 'bad');
+const shortDay = (h, date) => h.dayLabel(date).replace(/^\S+ /, '');
+
+/* the meetings of the range, each marked key or routine; a title seen more than once in the range is a recurring meeting */
+function meetingsKeyed(ui) {
+  const { M } = ui;
+  if (!M._keyed) {
+    const seen = new Map(); for (const m of M.meetings) { const k = normT(m.e.title); seen.set(k, (seen.get(k) || 0) + 1); }
+    const now = nowIso();
+    M._keyed = M.meetings.map((m) => {
+      const t = m.e.title || '';
+      const routine = m.e.routine === true || seen.get(normT(t)) > 1 || /stand-?up|\b1\s*[:/-]\s*1\b|one[- ]on[- ]one/i.test(t) || !evState(ui, m, now).tied;
+      return { ...m, key: m.e.key === true || !routine };
+    });
+  }
+  return M._keyed;
+}
+const meetingsIn = (ui, a, b) => (ui.st.on.has('meetings') ? meetingsKeyed(ui).filter((m) => m.date >= a && m.date <= b) : []);
+
+/* the number of folded items in the range, for the Routine chip */
+function routineCount(ui, range) {
+  const wide = ui.M.view !== 'month';
+  const marks = marksIn(ui.M, ui.st, range.start, range.end).filter((m) => (wide ? !landMark(m) : !keyMark(m))).length;
+  return marks + meetingsIn(ui, range.start, range.end).filter((m) => wide || !m.key).length;
+}
+
+/* a name inside a highlight: a link-styled button that selects the item, so its detail opens beside the grid */
+function nameBtn(ui, sel, label, attrs) {
+  return button({ label, variant: 'ghost', attrs: { class: 'cal3-sl', ...attrs }, onClick: () => ui.select(sel, null) });
+}
+const markName = (ui, m, label) => nameBtn(ui, { type: 'marker', id: m.id }, label || m.title, { 'data-cal3-mk': m.id, 'data-cal3-layer': m.layer, 'data-cal3-kind': m.kind, title: kindOf(m)[0] + ': ' + m.title + ', ' + ui.h.dayLabel(m.date) });
+const meetName = (ui, m) => nameBtn(ui, { type: 'event', id: m.e.id }, m.e.title || m.e.id, { 'data-cal3-hl-ev': m.e.id, title: (m.e.title || m.e.id) + ', ' + ui.h.dayLabel(m.date) });
+
+/* join nodes as "a, b and c", with "N more" for what is past max */
+function joinList(nodes, max) {
+  const a = nodes.slice(0, max); if (nodes.length > max) a.push(String(nodes.length - max) + ' more');
+  const out = [];
+  a.forEach((n, i) => { if (i) out.push(i === a.length - 1 ? ' and ' : ', '); out.push(n); });
+  return out;
+}
+
+/* the highlight of a span as a list of text and name nodes; [] when nothing in it is significant.
+ * mode 'cell' is the short form of a Month day; 'top' is the range summary and a Quarter or Year column. */
+function highlightOf(ui, a, b, mode) {
+  const { h, M } = ui; const cell = mode === 'cell'; const wide = M.view === 'quarter' || M.view === 'year';
+  const marks = marksIn(M, ui.st, a, b); const meets = wide ? [] : meetingsIn(ui, a, b).filter((m) => m.key);
+  const on = (date) => (cell ? '' : ' on ' + shortDay(h, date));
+  const rel = marks.filter((m) => m.kind === 'release'); const ms = marks.filter((m) => m.kind === 'milestone' && (!m.tone || m.tone === 'ok'));
+  const rep = marks.filter((m) => m.kind === 'report' && !routineMark(m));
+  const lateMs = marks.filter((m) => m.kind === 'milestone' && (m.tone === 'bad' || m.tone === 'warn'));
+  const riskRel = rel.filter((m) => m.tone === 'bad' || m.tone === 'warn');
+  const lateDue = marks.filter((m) => isDue(m) && m.tone === 'bad'); const riskDue = wide ? [] : marks.filter((m) => isDue(m) && m.tone === 'warn');
+  const out = []; const sent = (...k) => { if (out.length) out.push(' '); out.push(...k); };
+  const dated = (list, max) => joinList(list.map((m) => el('span', null, markName(ui, m), on(m.date))), max);
+  if (rel.length) sent(...(cell ? [...joinList(rel.map((m) => markName(ui, m)), 2), rel.length === 1 ? ' ships.' : ' ship.'] : [plural(rel.length, 'release') + ': ', ...dated(rel, 3), '.']));
+  if (ms.length) sent(ms.length === 1 ? 'Milestone: ' : plural(ms.length, 'milestone') + ': ', ...dated(ms, 3), '.');
+  if (meets.length) {
+    if (cell || M.view === 'day') sent(...joinList(meets.map((m) => el('span', null, meetName(ui, m), h.timeOf(m.e.at) !== null ? ' at ' + h.hhmm(h.timeOf(m.e.at)) : '')), cell ? 2 : 4), '.');
+    else {
+      const big = meets.slice().sort((x, y) => hoursOf(y, h) - hoursOf(x, h) || String(x.e.at).localeCompare(String(y.e.at))).slice(0, 2).sort((x, y) => String(x.e.at).localeCompare(String(y.e.at)));
+      sent(plural(meets.length, 'key meeting') + (meets.length > big.length ? ', the biggest ' : ': '), ...joinList(big.map((m) => el('span', null, meetName(ui, m), ' on ' + shortDay(h, m.date))), 2), '.');
+    }
+  }
+  if (rep.length) sent(...(cell || rep.length <= 2 ? [...joinList(rep.map((m) => markName(ui, m, m.title.replace(/ goes out$/, ''))), 2), rep.length === 1 ? ' goes out.' : ' go out.'] : [rep.length + ' reports go out.']));
+  const watch = [];
+  for (const m of lateMs) watch.push(el('span', null, markName(ui, m, m.title.replace(/\s*\(late\)$/, '')), m.tone === 'bad' ? ' is late' : ' is at risk', cell ? '' : ' (' + shortDay(h, m.date) + ')'));
+  for (const m of riskRel) watch.push(el('span', null, markName(ui, m), m.tone === 'bad' ? ' is late' : ' is at risk'));
+  if (lateDue.length) watch.push(cell || lateDue.length <= 2 ? el('span', null, ...joinList(lateDue.map((m) => markName(ui, m)), 2), lateDue.length === 1 ? ' is late' : ' are late') : plural(lateDue.length, 'due item') + ' are late');
+  if (riskDue.length) watch.push(cell || riskDue.length <= 2 ? el('span', null, ...joinList(riskDue.map((m) => markName(ui, m)), 2), ' due soon') : plural(riskDue.length, 'due item') + ' due soon');
+  if (watch.length) sent(el('b', { class: 'cal3-watch' }, 'Watch:'), ' ', ...joinList(watch, 4), '.');
+  return out;
+}
+
+/* the range summary above the grid, at every zoom */
+function highlights(ui, range) {
+  const { h, M } = ui;
+  const MF = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const mo = Number(range.start.slice(5, 7));
+  const label = M.view === 'day' ? h.dayLabel(range.start) : M.view === 'week' ? 'Week of ' + h.dayLabel(range.start) : M.view === 'month' ? MF[mo - 1] : M.view === 'quarter' ? 'Q' + (Math.floor((mo - 1) / 3) + 1) : range.start.slice(0, 4);
+  const body = highlightOf(ui, range.start, range.end, 'top');
+  return el('div', { class: 'cal3-sum', 'data-cal3': 'highlights' },
+    el('span', { class: 'cal3-sum-h' }, label + ' highlights'),
+    el('p', null, ...(body.length ? body : ['Nothing significant. Only routine items fall in this range.'])));
+}
+
+/* the quiet line of a span: what is counted and not named; pressing it opens the span */
+function quietLine(ui, a, b, view, opts) {
+  const wide = opts && opts.wide;
+  const marks = marksIn(ui.M, ui.st, a, b); const meets = meetingsIn(ui, a, b);
+  const due = marks.filter((m) => isDue(m) && (wide ? m.tone !== 'bad' : quietDue(m)));
+  const rt = marks.filter(routineMark).length + (wide ? 0 : meets.filter((m) => !m.key).length);
+  const nMeet = wide ? meets.length : 0;
+  const parts = [nMeet ? plural(nMeet, 'meeting') : null, due.length ? due.length + ' due' : null, rt ? rt + ' routine' : null].filter(Boolean);
+  if (!parts.length) return null;
+  const mo = Number(a.slice(5, 7));
+  const where = view === 'day' ? ui.h.dayLabel(a) : view === 'week' ? 'the week of ' + ui.h.dayLabel(a) : view === 'quarter' ? 'Q' + (Math.floor((mo - 1) / 3) + 1) + ' ' + a.slice(0, 4) : ui.h.MN[mo - 1] + ' ' + a.slice(0, 4);
+  const names = [...new Set([...due.map((m) => m.title), ...marks.filter(routineMark).map((m) => m.title)])];
+  const tip = parts.join(', ') + (names.length ? ': ' + names.slice(0, 8).join(', ') + (names.length > 8 ? ' and more' : '') : '') + '. Open ' + where;
+  return button({ label: parts.join(' · '), variant: 'ghost', size: 'sm', attrs: { class: 'cal3-more cal3-rt', 'data-cal3-quiet': a, title: tip, 'aria-label': tip },
+    onClick: () => ui.h.go(ui.host, ui.r, { view, date: a, anim: 'zi' }) });
+}
+
+/* ── Month: a cell per day. Its highlight in a sentence and a quiet line; with Routine on, the meeting count and every marker ── */
 
 function monthGrid(ui) {
   const { M, st, h, d } = ui;
@@ -342,38 +459,58 @@ 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;
-    g.appendChild(el('div', { class: 'cal3-mc' + (wd === 0 || wd === 6 ? ' we' : '') + (c.start === d.today ? ' today' : ''), 'data-cal3-date': c.start },
+    const hl = st.routine ? [] : highlightOf(ui, c.start, c.start, 'cell');
+    g.appendChild(el('div', { class: 'cal3-mc' + (wd === 0 || wd === 6 ? ' we' : '') + (c.start === d.today ? ' today' : '') + (hl.length ? ' key' : ''), '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, 'day')));
+      ...(st.routine
+        ? [n ? el('span', { class: 'cal3-cnt' }, plural(n, 'meeting')) : null, ...markRow(ui, c.start, c.start, 3, true, 'day')]
+        : [hl.length ? el('p', { class: 'cal3-hl', 'data-cal3-hl': c.start }, ...hl) : null, quietLine(ui, c.start, c.start, 'day')])));
   }
-  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, g);
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, g, foldNote(ui));
+}
+
+/* the line under a Month, Quarter or Year grid that says what is counted and not named */
+function foldNote(ui) {
+  if (ui.st.routine) return null;
+  return el('p', { class: 'dim cal3-fold', 'data-cal3': 'fold-note' }, (ui.M.view === 'month'
+    ? 'Report drafts, recurring meetings, stand-ups, 1:1s and due items on track are counted under each day, not listed.'
+    : 'Meetings, due items that are not late, and routine items are counted under each highlight, not listed. Open a month for its key meetings.')
+    + ' Turn on Routine to show everything.');
 }
 
-/* ── Quarter: a row per week; Year: a card per month. Counts, and the markers of the most important kinds ────────── */
+/* ── Quarter: a column per month; Year: a column per quarter. Each has its highlight and its quiet line ──────────── */
+
+const monthEnd = (start) => { const y = Number(start.slice(0, 4)); const m = Number(start.slice(5, 7)); const last = new Date(y, m, 0).getDate(); return start.slice(0, 8) + String(last).padStart(2, '0'); };
+const monthStart = (y, m) => y + '-' + String(m).padStart(2, '0') + '-01';
 
-function spanCounts(ui, c) {
-  const { M, st } = ui;
-  const n = st.on.has('meetings') ? M.meetingsOf(c).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')));
+function spanColumn(ui, a, b, head, now, extra, view) {
+  const hl = ui.st.routine ? null : highlightOf(ui, a, b, 'top');
+  return el('div', { class: 'cal3-ym cal3-col' + (now ? ' now' : ''), 'data-cal3-span': a }, head,
+    ui.st.routine ? el('div', { class: 'cal3-qmk' }, ...markRow(ui, a, b, 12, false, view))
+      : el('p', { class: 'cal3-hl' + (hl.length ? '' : ' dim'), 'data-cal3-hl': a }, ...(hl.length ? hl : ['Nothing significant.'])),
+    extra || null, ui.st.routine ? null : quietLine(ui, a, b, view, { wide: true }));
 }
 
 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, 'week'))));
-  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-quarter', 'data-cal3': 'quarter' }, ...rows));
+  const { h, d } = ui; const range = d.range || { start: d.today, end: d.today };
+  const y = Number(range.start.slice(0, 4)); const m0 = Number(range.start.slice(5, 7));
+  const cols = [0, 1, 2].map((i) => {
+    const a = monthStart(y, m0 + i); const b = monthEnd(a);
+    const head = button({ label: h.MN[m0 + i - 1] + ' ' + y, variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dbtn', 'data-cal3-month': a.slice(0, 7), title: 'Open ' + h.MN[m0 + i - 1] + ' ' + y }, onClick: () => h.go(ui.host, ui.r, { view: 'month', date: a, anim: 'zi' }) });
+    return spanColumn(ui, a, b, head, a <= d.today && d.today <= b, null, 'month');
+  });
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-cols cal3-cols-3', 'data-cal3': 'quarter' }, ...cols), foldNote(ui));
 }
 
 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, 'month'))));
-  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-year', 'data-cal3': 'year' }, ...cards));
+  const { h, d } = ui; const range = d.range || { start: d.today, end: d.today }; const y = Number(range.start.slice(0, 4));
+  const cols = [0, 1, 2, 3].map((q) => {
+    const a = monthStart(y, q * 3 + 1); const b = monthEnd(monthStart(y, q * 3 + 3));
+    const head = button({ label: 'Q' + (q + 1) + ' ' + y + ' · ' + h.MN[q * 3] + ' to ' + h.MN[q * 3 + 2], variant: 'ghost', size: 'sm', attrs: { class: 'cal3-dbtn', 'data-cal3-quarter': 'Q' + (q + 1), title: 'Open Q' + (q + 1) + ' ' + y }, onClick: () => h.go(ui.host, ui.r, { view: 'quarter', date: a, anim: 'zi' }) });
+    const months = el('div', { class: 'cal3-mlinks' }, ...[1, 2, 3].map((k) => { const s = monthStart(y, q * 3 + k); return button({ label: h.MN[q * 3 + k - 1], variant: 'ghost', size: 'sm', attrs: { class: 'cal3-more', 'data-cal3-month': s.slice(0, 7), title: 'Open ' + h.MN[q * 3 + k - 1] + ' ' + y }, onClick: () => h.go(ui.host, ui.r, { view: 'month', date: s, anim: 'zi' }) }); }));
+    return spanColumn(ui, a, b, head, a <= d.today && d.today <= b, months, 'quarter');
+  });
+  return el('section', { class: 'card cal3-grid', 'data-cv': 'grid' }, el('div', { class: 'cal3-cols cal3-cols-4', 'data-cal3': 'year' }, ...cols), foldNote(ui));
 }
 
 /* ── the detail column ────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -396,7 +533,7 @@ function openRef(ui, ref, extra) {
 
 /* 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);
+const peopleOf = (e) => [].concat(e.people || e.with || e.attendees || []).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"]'); } });
@@ -444,22 +581,78 @@ function meetingDetail(ui, hit) {
   };
   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', 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 && (!rec || rec.held === false)) body = [fold('moon', 'Nothing held for this meeting: no note, decisions or linked items yet.', { '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.')];
+  else body = upcomingBody(ui, rec, items);
+  const b = !past && rec && rec.brief ? rec.brief : null;
+  const iniId = typeof e.initiative === 'string' ? e.initiative : b && b.initiative ? b.initiative.id : null;
+  const iniTitle = iniId ? (b && b.initiative && b.initiative.id === iniId && b.initiative.title) || (((ui.d.gantt || []).find((g) => g.id === iniId) || {}).title) || iniId : null;
+  const iniStatus = b && b.initiative && b.initiative.id === iniId ? b.initiative.status : (((ui.d.gantt || []).find((g) => g.id === iniId) || {}).status || null);
+  const sources = b && b.sources && b.sources.length ? 'Put together from ' + listWords(b.sources) + '. Each line opens its source. ' : '';
   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),
+    el('div', { class: 'chips2', 'data-cal3': 'meeting-chips' }, homeChip('Calendar'), ...peopleOf(e).map((n) => el('span', { class: 'tag', 'data-cal3': 'person' }, n)),
+      iniId ? el('span', { class: 'tag', 'data-cal3': 'meeting-initiative' }, 'Initiative: ' + iniTitle) : null,
+      iniStatus && STATUS_TONE[iniStatus] ? el('span', { class: 'tag cal3-tone-' + STATUS_TONE[iniStatus] }, iniStatus) : null),
     noteLink(ui, e),
     ...body,
-    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.'),
+    el('p', { class: 'dim cal3-note', 'data-cal3': past ? 'past-note' : 'sources' }, past ? 'Only what PMOS holds a record for: items created or closed within 48 hours of the meeting. Each line opens its source.' : sources + 'PMOS proposes changes. It never edits your calendar.'),
   ];
 }
 
+/* the card before a meeting (initiative c3-meeting-card, the mockup the PM approved on 2026-10-12): what it is for, what
+ * matters today, what happened last time and what to bring. Every part comes from the server's `brief` (lib/calendar-layers.js
+ * briefOf) or the prep items; a part with no record is left out. When PMOS knows little, it says what is missing. */
+const STATUS_TONE = { 'at risk': 'warn', delayed: 'bad', overdue: 'bad' };
+const listWords = (a) => (a.length < 2 ? a.join('') : a.slice(0, -1).join(', ') + ' and ' + a[a.length - 1]);
+const ctxBox = (key, title, ...kids) => el('div', { class: 'cal3-ctx', 'data-cal3-ctx': key }, el('h4', null, ...[].concat(title)), ...kids);
+const ul = (rows) => el('ul', { class: 'cal3-cl', role: 'list' }, ...rows);
+const ci = (attrs, ...kids) => el('li', { class: 'cal3-ci', ...attrs }, ...kids);
+
+function upcomingBody(ui, rec, items) {
+  const { h } = ui;
+  const b = rec && rec.brief ? rec.brief : null;
+  const prep = items.filter((x) => x.kind === 'prepared' || x.kind === 'todo');
+  const out = [];
+  if (b && b.gist && b.gist.length) out.push(el('div', { class: 'cal3-ctx cal3-gist', 'data-cal3-ctx': 'gist' }, el('h4', null, c3ic('spark', 'sm'), 'In short'), el('p', { class: 'cal3-p' }, b.gist.join(' '))));
+  if (b && b.matters && b.matters.length) out.push(ctxBox('matters', 'What matters today', ul(b.matters.map((x) => ci({ 'data-cal3-matter': x.tag },
+    el('span', { class: 'tag cal3-tone-' + x.tone }, x.tag), el('span', { class: 'cal3-ct' }, x.text), x.meta ? el('span', { class: 'dim mono cal3-at' }, x.meta) : null,
+    refLink(ui, x.ref, { initiative: x.ref.initiative, title: x.text }))))));
+  if (b && b.last) {
+    const l = b.last;
+    const open = ui.r.ctx.overlay ? null : el('a', { href: '#', class: 'cal3-ref', 'data-cal3': 'open-last-note', title: 'Open the note: ' + (l.title || 'Untitled note'),
+      onClick: (ev) => { ev.preventDefault(); openNote(ui.r, l.id); ui.redraw(); } }, c3ic('notes', 'sm'), 'Open the last note');
+    out.push(ctxBox('last', 'Since the last one · ' + h.dayLabel(String(l.at).slice(0, 10)),
+      l.private ? el('p', { class: 'dim cal3-note' }, 'That note is private, so only its title shows: ' + (l.title || 'Untitled note') + '.')
+        : l.overview ? el('p', { class: 'cal3-p' }, l.overview) : el('p', { class: 'dim cal3-note' }, 'That note has no summary yet.'),
+      !l.private && ((l.decisions || []).length || (l.actions || []).length) ? ul([
+        ...(l.decisions || []).map((t) => ci({ 'data-cal3-item': 'last-decision' }, el('span', { class: 'tag' }, 'Decision'), el('span', { class: 'cal3-ct' }, t))),
+        ...(l.actions || []).map((a) => ci({ 'data-cal3-item': 'last-action' }, el('span', { class: 'tag cal3-tone-warn' }, 'From last time'), el('span', { class: 'cal3-ct' }, a.text),
+          a.owner || a.due ? el('span', { class: 'dim mono cal3-at' }, [a.owner, a.due && 'due ' + a.due].filter(Boolean).join(' · ')) : null))]) : null,
+      el('div', { class: 'chips2' }, open, b.earlier > 1 ? el('span', { class: 'dim', 'data-cal3': 'earlier' }, b.earlier + ' earlier notes of this meeting') : null)));
+  }
+  if (prep.length || (b && b.prep)) out.push(ctxBox('prepare', 'To prepare', ul([
+    ...(b && b.prep ? [ci({ 'data-cal3-item': 'ready' }, el('span', { class: 'tag' }, 'To be ready'), el('span', { class: 'cal3-ct' }, b.prep))] : []),
+    ...prep.filter((x) => !(b && b.prep && /^Prep notes from your agent/.test(x.text))).map((x) => ci({ 'data-cal3-item': x.kind },
+      el('span', { class: 'tag' + (x.done ? ' cal3-up' : '') }, 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,
+      x.ref && REF[x.ref.type] ? refLink(ui, x.ref, { title: x.text }) : null))])));
+  if (b && ((b.links || []).length || (b.refs || []).length)) out.push(el('div', { class: 'chips2', 'data-cal3': 'meeting-links' },
+    ...(b.links || []).map((l) => el('a', { class: 'chip2', href: l.url, target: '_blank', rel: 'noopener noreferrer' }, c3ic('out', 'sm'), l.label)),
+    ...(b.refs || []).map((r) => r.link ? el('a', { class: 'chip2', href: r.link, target: '_blank', rel: 'noopener noreferrer' }, c3ic('out', 'sm'), r.label, r.source ? el('span', { class: 'dim' }, ' ' + r.source) : null)
+      : el('span', { class: 'chip2' }, r.label, r.source ? el('span', { class: 'dim' }, ' ' + r.source) : null))));
+  const noIni = !(b && b.initiative); const noLast = !(b && b.last);
+  if (noIni || noLast) {
+    const missing = noIni && noLast ? 'No initiative is linked and there is no earlier note from this meeting.' : noIni ? 'No initiative is linked to this meeting.' : 'There is no earlier note from this meeting.';
+    out.push(ctxBox('knows', 'What PMOS knows', fold('info', missing + (out.length ? '' : ' Nothing is recorded to prepare.'), { 'data-cal3': 'knows' }),
+      ul([noIni ? ci({}, el('span', { class: 'tag' }, 'Link'), el('span', { class: 'cal3-ct' }, 'Link an initiative, and its blocked, late and due items show here.')) : null,
+        ci({}, el('span', { class: 'tag' }, 'Note'), el('span', { class: 'cal3-ct' }, 'Take a note in this meeting, and the next one opens with its summary and next steps.'))].filter(Boolean))));
+  }
+  return out;
+}
+
 /* 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;

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

@@ -39,12 +39,12 @@ const DATED = [
   ['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]);
+/* the weekly status to leadership is a report date every Friday: routine, so Month, Quarter and Year count it (calendar-highlights) */
+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, { cadence: 'weekly', routine: true }]);
 
 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 } : {}) }));
+    .map(([date, kind, layer, title, tone, ref, initiative, extra], i) => ({ id: 'dated-' + date + '-' + i, date, kind, layer, title, tone, ref, ...(initiative ? { initiative } : {}), ...(extra || {}) }));
 }
 
 /* the suggested uses of a free block, from the demo's work items; a block past the first of a day gets none */
@@ -103,7 +103,21 @@ const CONTEXT = {
   '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') },
-  ] },
+  ],
+  // the card before a meeting (initiative c3-meeting-card): what the server's briefOf puts together
+  brief: {
+    initiative: { id: 'checkout', title: 'Checkout v2', status: 'at risk' },
+    gist: ['For Checkout v2, which is at risk.', '1 item blocked, 1 item due today.'],
+    matters: [
+      { tone: 'bad', tag: 'Blocked', text: 'Sprint scope: waiting on the scope decision', meta: 'Dara · due 2026-10-08', ref: { type: 'plan-item', id: 'checkout-scope', initiative: 'checkout' } },
+      { tone: 'warn', tag: 'Due today', text: 'Confirm the 1 Oct numbers', meta: 'yours · due 2026-10-08', ref: item('item-demo001') },
+    ],
+    last: { id: 'note-demo-sp1', title: 'Sprint planning', at: '2026-10-01T14:00:00', private: false,
+      overview: 'The team split the checkout flows into 3 core and 2 later. Dara asked for a scope decision before this sprint.',
+      decisions: ['Payments stays in the first release.'], actions: [{ text: 'Send the 3 scope options', owner: 'You', due: 'Wed 7 Oct' }] },
+    earlier: 3, purpose: null, prep: null, links: [], refs: [],
+    sources: ['the calendar', '3 earlier notes of this meeting', 'the checkout plan', 'your items'],
+  } },
   'm5@2026-10-08': { phase: 'upcoming', held: false, items: [] },
 };
 

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

@@ -251,11 +251,11 @@ const MEET = [
   { id: 'm1', t: 'Standup', s: 9.5, e: 10, kind: 'ready', routine: true },
   { id: 'm2', t: 'Checkout sync', s: 10.5, e: 11.25, kind: 'prep ready' },
   { id: 'm3', t: 'Customer interview', s: 13, e: 14, kind: 'review prep' },
-  { id: 'm4', t: 'Sprint planning', s: 14, e: 15, kind: 'blocked on your decision', hot: true, decide_by: '14:00' },
+  { id: 'm4', t: 'Sprint planning', s: 14, e: 15, kind: 'blocked on your decision', hot: true, decide_by: '14:00', att: ['Dara', 'Priya', 'Sam'] },
   { id: 'm5', t: 'Leadership update', s: 16.5, e: 17, kind: 'ready' },
 ];
 const hh = (x) => pad(Math.floor(x)) + ':' + pad(Math.round((x % 1) * 60));
-const ev = (date, m) => ({ id: m.id + '@' + date, title: m.t, at: date + 'T' + hh(m.s) + ':00', end: date + 'T' + hh(m.e) + ':00', kind: m.kind, ...(m.routine ? { mock_routine: true } : {}), ...(m.hot ? { mock_hot: true, mock_decide_by: m.decide_by } : {}) });
+const ev = (date, m) => ({ id: m.id + '@' + date, title: m.t, at: date + 'T' + hh(m.s) + ':00', end: date + 'T' + hh(m.e) + ':00', kind: m.kind, ...(m.att ? { attendees: m.att } : {}), ...(m.routine ? { mock_routine: true } : {}), ...(m.hot ? { mock_hot: true, mock_decide_by: m.decide_by } : {}) });
 function eventsOn(date) {
   const dow = new Date(utcOf(date)).getUTCDay();
   if (date === TODAY) return MEET.map((m) => ev(date, m));

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

@@ -104,7 +104,8 @@ export function createDock(opts) {
       el('div', { class: 'chips2' }, el('b', { style: 'font-size:var(--fs-3)' }, s.name), el('span', { class: 'chips2 dim mono', style: 'font-size:var(--fs-1)' }, c3ic(PI[s.agent] || 'term', 'sm'), (PN[s.agent] || s.agent) + ' · ' + ((t && t.branch) || 'no branch'))),
       el('div', { class: 'dim mono', style: 'font-size:var(--fs-1)' }, facts),
       s.shown === 'needs' ? el('div', { class: 'fold a' }, c3ic('alert', 'sm'), 'needs you') : null,
-      el('a', { class: 'chip2 lk', href: '/', 'data-c3pg': 'dock-open-session', title: TIPS.terminalOpen, 'aria-label': 'Open the session ' + s.name + ' in the main app' }, ic('term', 'sm'), 'Open the session'),
+      el('a', { class: 'chip2 lk', href: '/', 'data-c3pg': 'dock-open-session', title: TIPS.terminalOpen, 'aria-label': 'Open the session ' + s.name,
+        onclick: (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button > 0) return; e.preventDefault(); import('./c3-session-term.js').then((m) => m.openSessionTerm({ id: s.id, name: s.name })); } }, ic('term', 'sm'), 'Open the session'),
       term,
       el('div', { class: 'form' },
         el('input', { type: 'text', readonly: true, 'data-off': '', placeholder: s.shown === 'needs' ? 'Your answer' : 'Message', 'aria-label': 'Message', title: MORE, 'data-c3pg': 'dock-msg' }),

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

@@ -11,7 +11,7 @@
  *              links and references, people. A note with no meeting says so and offers the main app's link pickers.
  *     During   the main app's live block while the note is recorded or paused (view-notes.js renderLive), else the transcript.
  *     After    the Notes card (decisions with why, next steps with owner, due and Make task, questions, conflicts, highlights,
- *              the folded transcript) from final_notes, else from what was caught live (dest-notes.js partsOf).
+ *              the screenshots of the shared screen, the folded transcript) from final_notes, else from what was caught live (dest-notes.js partsOf).
  *
  * Nothing is invented: a part the note does not hold is left out or says so. The mockup's Rejected column, Settle, told and
  * not told, Route actions and the drafts have no data or route yet, so they are not drawn.
@@ -30,6 +30,7 @@ import { groupNotes, partsOf, conflictsOf, whenShort } from './dest-notes.js';
 import * as dock from './note-dock.js';
 import * as V from './view-notes.js';
 import { makeTask } from './notes-task.js';
+import { screenStrip } from './notes-screen-view.js';
 
 const PHASES = [['before', 'clip', 'Before'], ['during', 'mic', 'During'], ['after', 'notes', 'After']];
 const startOf = (n) => (n.meeting && n.meeting.start) || n.recorded_from || n.created_at || n.updated_at;
@@ -91,13 +92,13 @@ async function read(s) {
   if (seq !== s.seq) return;
   if (l && l.ok) { s.rows = l.notes || []; s.err = null; } else { s.rows = s.rows || []; s.err = (l && l.error) || 'The notes could not be read.'; }
   if (!s.open && s.rows.length) { s.open = s.rows[0].id; return read(s); }
-  if (one && one.ok && one.note && one.note.id === s.open) s.note = one.note;
+  if (one && one.ok && one.note && one.note.id === s.open) { s.note = one.note; s.shots = (one.screen && one.screen.frames) || []; s.rec = one.recording || null; }
   draw(s);
 }
 
 function choose(s, id) {
   if (s.open === id) return;
-  s.open = id; s.note = null; s.phase = null;
+  s.open = id; s.note = null; s.phase = null; s.shots = []; s.rec = null;
   draw(s); read(s);
 }
 
@@ -164,14 +165,45 @@ function noteCol(s) {
       el('div', { class: 'stg', role: 'group', 'aria-label': 'Note stage', 'data-cv': 'phase' },
         PHASES.map(([k, ic, l]) => btn('sgb', { 'data-cal3-phase': k, 'aria-pressed': String(ph === k), title: l }, [c3ic(ic), el('span', null, l)], () => { s.phase = k; draw(s); })))),
     el('div', { class: 'chips2 dim cal3-sm' },
-      [dayOf(startOf(n)), len, iniName(n.initiative) || 'No initiative'].filter(Boolean).join(' · '),
-      ev ? btn('chip2 lk', { 'data-cal3-notes': 'show-meeting', title: 'Show the meeting in the calendar' }, [c3ic('cal', 'sm'), 'Show in the calendar'], () => showMeeting(s, ev))
-        : linked(n) ? null : el('span', { class: 'tag' }, 'no meeting'),
-      btn('ib sm', { title: 'Copy as Markdown (with the meeting context)', 'aria-label': 'Copy as Markdown', 'data-cal3-notes': 'copy' }, c3ic('clip'), () => copy(n))));
+      [dayOf(startOf(n)), len].filter(Boolean).join(' · '),
+      btn('ib sm', { title: 'Copy as Markdown (with the meeting context)', 'aria-label': 'Copy as Markdown', 'data-cal3-notes': 'copy' }, c3ic('clip'), () => copy(n))),
+    links(s, n, ev));
   const body = ph === 'before' ? before(s, n) : ph === 'during' ? during(s, n, mode) : after(s, n, mode);
   return el('div', { class: 'cal3-ncol', 'data-cal3-notes': 'note', 'data-cal3-note': n.id, 'data-cal3-stage': ph }, head, ...[].concat(body));
 }
 
+/* the note's meeting and initiative, each with its link: what it is linked to, then Link or Change (view-notes.js pickers) */
+function links(s, n, ev) {
+  const adhoc = n.meeting && n.meeting.kind === 'adhoc';
+  const when = ev ? [dayOf(ev.start), hm(ev.start) + (ev.end ? ' to ' + hm(ev.end) : '')].filter(Boolean).join(' ') : '';
+  return el('div', { class: 'cal3-nlinks cal3-sm', 'data-cal3-notes': 'links' },
+    el('span', { class: 'chips2' }, c3ic('cal', 'sm'),
+      ev ? el('span', { 'data-cal3-notes': 'meeting' }, el('b', null, ev.title), ' · ' + when)
+        : el('span', { class: 'dim', 'data-cal3-notes': 'meeting' }, adhoc ? 'A meeting that is not on the calendar' : 'No meeting'),
+      !ev && !adhoc ? el('span', { class: 'tag' }, 'no meeting') : null,
+      btn('chip2 lk', { 'data-cal3-notes': 'meeting-link', title: ev || adhoc ? 'Link the note to another meeting' : 'Link the note to a meeting on the calendar' }, ev || adhoc ? 'Change' : 'Link to a meeting', () => V.linkMeeting(vctx(s), n.id)),
+      ev ? btn('chip2 lk', { 'data-cal3-notes': 'show-meeting', title: 'Show the meeting in the calendar' }, [c3ic('next', 'sm'), 'Show in the calendar'], () => showMeeting(s, ev)) : null),
+    el('span', { class: 'chips2' }, c3ic('init', 'sm'),
+      n.initiative ? el('span', { 'data-cal3-notes': 'initiative' }, el('b', null, iniName(n.initiative))) : el('span', { class: 'dim', 'data-cal3-notes': 'initiative' }, 'No initiative'),
+      btn('chip2 lk', { 'data-cal3-notes': 'initiative-link', title: n.initiative ? 'Link the note to another initiative' : 'Link the note to an initiative' }, n.initiative ? 'Change' : 'Link to an initiative', () => V.linkInitiative(vctx(s), n.id))));
+}
+
+/* the replay of the note's kept audio: one <audio> per note, kept across redraws so playback goes on (as dest-notes.js does) */
+function replayOf(s, n) {
+  const rec = s.rec;
+  if (!rec || n.private) { s.audio = null; return null; }
+  const key = n.id + ':' + rec.bytes + ':' + (rec.cleaned ? 1 : 0);
+  if (s.audio && (s.audio.key === key || !s.audio.el.paused)) return s.audio.el;
+  const a = el('audio', { controls: true, preload: 'metadata', class: 'nt-audio cal3-audio', 'data-cal3-notes': 'audio', src: '/api/notes/recording?id=' + encodeURIComponent(n.id) + '&b=' + rec.bytes + (rec.cleaned ? '&c=1' : '') });
+  s.audio = { key, el: a };
+  return a;
+}
+function seek(s, ms) {
+  const a = s.audio && s.audio.el;
+  if (!a) return;
+  try { a.currentTime = Math.max(0, ms / 1000); a.play(); } catch { /* the audio is not ready */ }
+}
+
 const vctx = (s) => ({ state: {}, setState: () => { if (s.box.isConnected) { read(s); } } });
 const linkButtons = (s, n) => el('div', { class: 'chips2' },
   btn('chip2 lk', { 'data-cal3-notes': 'link-meeting' }, [c3ic('cal', 'sm'), 'Link to a meeting'], () => V.linkMeeting(vctx(s), n.id)),
@@ -206,7 +238,9 @@ function before(s, n) {
   if (names.length) rows.push(prepRow('user', 'People', el('span', { class: 'chips2 cal3-wrapl' }, names.map(avatar))));
   else if (c && c.attendees) rows.push(prepRow('user', 'People', c.attendees + ' attendees. Names are not kept while calendar names are off.'));
   const when = (ev.start ? dayOf(ev.start) + ' ' + hm(ev.start) : '') + (ev.end ? ' to ' + hm(ev.end) : '');
-  rows.push(prepRow('cal', 'Meeting', [ev.title, when, c && c.series ? 'series: ' + c.series : null, c && c.role ? 'your role: ' + c.role : null].filter(Boolean).join(' · ')));
+  rows.push(prepRow('cal', 'Meeting', [ev.title, when, c && c.where ? 'where: ' + c.where : null, c && c.organizer ? 'organizer: ' + c.organizer : null,
+    c && c.series ? 'series: ' + c.series : null, c && c.role ? 'your role: ' + c.role : null, c && c.external ? 'with people outside the company' : null,
+    c && c.attendees && names.length ? c.attendees + ' attendees' : null].filter(Boolean).join(' · ')));
   return el('section', { class: 'card', 'data-cv': 'stage-before' }, h3, ...rows,
     c ? null : el('p', { class: 'dim cal3-sm' }, 'The calendar gave no more about this meeting.'));
 }
@@ -252,6 +286,7 @@ function after(s, n, mode) {
   const kids = [
     el('div', { class: 'c3cv-head' }, el('h3', null, c3ic('notes'), 'Notes'), recordButton(s, n, mode)),
     el('div', { class: 'chips2' }, el('b', null, n.title || 'Untitled note'), el('span', { class: 'dim mono cal3-sm' }, [dayOf(startOf(n)), mins(lenOf(n))].filter(Boolean).join(' · ')), ...names.map(avatar)),
+    ...(() => { const rp = mode ? null : replayOf(s, n); return rp ? [el('div', { class: 'cal3-replay', 'data-cal3-notes': 'replay' }, el('h4', null, 'Replay'), rp, el('p', { class: 'dim cal3-sm' }, 'Kept on this machine.'))] : []; })(),
     ...cf.map((c) => el('div', { class: 'fold w', 'data-cal3-notes': 'conflict' }, c3ic('alert', 'sm'), '“' + c.text + '” differs from ', el('span', { class: 'mono' }, c.doc + (c.line ? ':' + c.line : '')))),
     p.overview ? editable(p.from === 'final', 'p', p.overview, 'Overview', (t) => saveFinal(s, n, 'overview', 0, t), { class: 'cal3-ov', 'data-cal3-notes': 'overview' })
       : el('p', { class: 'dim cal3-ov', 'data-cal3-notes': 'no-overview' }, mode ? 'The overview is written when you stop recording.' : 'No overview yet.'),
@@ -268,7 +303,10 @@ function after(s, n, mode) {
   const hl = n.highlights || [];
   if (hl.length) kids.push(el('div', { class: 'cal3-ctx', 'data-cal3-notes': 'highlights' }, el('h4', null, 'Highlights'),
     el('ul', { class: 'cal3-cl', role: 'list' }, hl.map((x) => el('li', { class: 'cal3-ci' }, el('span', { class: 'dim mono cal3-at' }, typeof x.t === 'number' ? V.fmtTime(x.t) : ''), el('span', { class: 'tag' }, x.label || 'Highlight'), el('span', { class: 'cal3-ct' }, x.text))))));
-  if (!p.overview && !p.decisions.length && !p.actions.length && !p.questions.length && !hl.length && !cf.length) kids.push(fold('moon', mode ? 'Decisions and next steps show here as they are caught, and in full after you stop.' : 'No decisions, next steps or questions are held for this note.', { 'data-cal3-notes': 'nothing' }));
+  if (!p.overview && !p.decisions.length && !p.actions.length && !p.questions.length && !hl.length && !cf.length && !(s.shots || []).length) kids.push(fold('moon', mode ? 'Decisions and next steps show here as they are caught, and in full after you stop.' : 'No decisions, next steps or questions are held for this note.', { 'data-cal3-notes': 'nothing' }));
+  // the screenshots of the shared screen, after Stop, as the main app's Notes shows them (notes-screen-view.js)
+  const shots = mode || n.private ? [] : s.shots || [];
+  if (shots.length) kids.push(el('div', { 'data-cal3-notes': 'screen' }, screenStrip({ id: n.id, frames: shots, seek: s.audio ? (ms) => seek(s, ms) : null, replay: s.audio ? s.audio.el : null })));
   const tr = transcriptOf(n);
   if (!mode && tr.length) kids.push(el('details', { 'data-cal3-notes': 'transcript-fold' }, el('summary', { class: 'dim cal3-sm' }, 'Transcript · ' + tr.length + (tr.length === 1 ? ' line' : ' lines')),
     el('div', { class: 'term cal3-term' }, tr.map((x) => V.fmtTime(x.t || 0) + '  ' + x.text).join('\n'))));

package/workspace/public/pm/c3-session-term.js

@@ -0,0 +1,44 @@
+/* pm/c3-session-term.js — a session's real terminal inside console3, in a sheet, so "Open the session" no longer leaves /c3.html.
+ *   openSessionTerm({ id, name })
+ * The terminal is tab-term.js's own (the one the main app draws): the same socket, attach, resize and input. Closing the sheet detaches the
+ * pane and leaves the session running, as closing a tab in the main app does. xterm and its addons are the main app's vendored globals,
+ * loaded here on the first open because /c3.html does not load them up front. */
+import { el } from './dom.js';
+import { openSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { pmGet } from './http.js';
+
+const VENDOR = ['/vendor/xterm.js', '/vendor/addon-fit.js', '/vendor/addon-web-links.js'];
+let vendor = null;
+
+function script(src) {
+  return new Promise((resolve) => {
+    if (document.querySelector('script[src="' + src + '"]')) { resolve(true); return; }
+    const s = document.createElement('script');
+    s.src = src; s.onload = () => resolve(true); s.onerror = () => resolve(false);
+    document.head.append(s);
+  });
+}
+function loadVendor() {
+  if (typeof window.Terminal === 'function') return Promise.resolve(true);
+  if (!vendor) {
+    if (!document.querySelector('link[href="/vendor/xterm.css"]')) document.head.append(el('link', { rel: 'stylesheet', href: '/vendor/xterm.css' }));
+    // the addons read window.Terminal when they run, so xterm goes first
+    vendor = script(VENDOR[0]).then((ok) => (ok ? Promise.all(VENDOR.slice(1).map(script)).then(() => true) : false));
+  }
+  return vendor;
+}
+
+export async function openSessionTerm({ id, name } = {}) {
+  if (!id) return null;
+  if (!name) { const r = await pmGet('/api/sessions').catch(() => null); const x = r && Array.isArray(r.sessions) ? r.sessions.find((y) => y.id === id) : null; name = x ? x.name : id; }
+  const [ok, term] = await Promise.all([loadVendor(), import('./tab-term.js').catch(() => null)]);
+  if (!ok || !term) { toast({ text: 'The terminal could not be loaded on this page.', tone: 'error' }); return null; }
+  const tab = { id: 'c3-session:' + id, kind: 'term', sessionId: id, spawn: false, sess: id };
+  const host = el('div', { class: 'c3t-term', 'data-c3-session-term': id });
+  // Esc and Tab belong to the shell while the terminal has focus (Esc interrupts an agent); the close button and a press outside still close
+  const sheet = openSheet({ title: name || id, icon: 'term', wide: true, body: host, onClose: () => term.disposeTerm(tab), passKeys: (e) => host.contains(e.target) });
+  term.mountTerm(host, tab);
+  requestAnimationFrame(() => { term.refitVisible(); term.focusTerm(tab); });
+  return sheet;
+}