create-pmos 0.239.0 → 0.241.0

package/workspace/public/pm/briefing-deck.js

@@ -364,6 +364,7 @@ function draw(S) {
   if (bare && (!d || !d.ok || d.scope !== S.ctx.scope || !(d.cards || []).length)) { S.root.replaceChildren(); S.root.hidden = true; S.flip = null; return; }
   if (bare) S.root.hidden = false;
   const kids = bare ? [] : [stance(S)];
+  if (!bare && S.ctx && S.ctx.afterStance) kids.push(S.ctx.afterStance);   // a node the page keeps under the greeting (console3: The brief)
   if (!d) kids.push(el('p', { class: 'dim mono', style: small, role: 'status' }, 'Reading the repository'));
   else if (!d.ok) kids.push(el('p', { class: 'dim mono', style: small, role: 'status', 'data-bf': 'error' }, 'The briefing could not be read: ' + d.error));
   else {

package/workspace/public/pm/c3-brief-mentions.js

@@ -0,0 +1,136 @@
+/* pm/c3-brief-mentions.js — the Briefing's "Mentions" (initiative c3-brief-summary-mentions).
+ *
+ * Everything today's brief marks as a mention of the PM (Slack, Jira, Confluence, mail), from GET /api/brief-page `mentions`
+ * (routes-brief-page.js mentionsOf). Quiet by default: one line that names who waits on a reply. "Show all" opens the list, with a tab for
+ * each source that has a mention. A row: the person, the quoted text, the source and place, the time, "needs your reply" or "for your
+ * information", the initiative. Its actions:
+ *   Open in <source>   the mention's own https link, in a new tab (no link, no button)
+ *   Add to Work        POST /api/pm-items/add { line: "Reply to <who> (<source>) by today" }   (a reply) or "Read <who>'s note (<source>)"
+ *   Mark read          POST /api/mentions/read { id, read: true }; Undo sends read: false
+ * A mention that is a worth-asking item (in_needs) is not listed: Needs you shows it (its row is need_key), and that row carries a "mentioned you" tag
+ * (tagNeeds, called after every Needs you redraw). Nothing here replies, reacts or posts in Slack, Jira, Confluence or mail. */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+import { pmPost } from './http.js';
+import { toast } from './c3-toast.js';
+import { onBriefPage, loadBriefPage } from './c3-brief-data.js';
+import { button, tabs, SEL, ensureComponentsCss } from './primitives.js';
+import { ensureSprite } from './icons.js';
+import { srcName, waitingMentions } from './c3-brief-summary.js';
+
+const p2 = (n) => String(n).padStart(2, '0');
+const first = (s) => String(s || '').trim().split(/\s+/)[0];
+const ICON = { slack: 'reply', jira: 'org', confluence: 'doc', mail: 'mail' };
+const ORDER = ['slack', 'jira', 'confluence', 'mail'];
+const post = (p, b) => pmPost(p, b).catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
+
+/** When, said the way the Briefing says times: "09:15" today, "yesterday 17:05" before. */
+function whenOf(iso, now = new Date()) {
+  if (!iso) return null;
+  const d = new Date(iso); const hm = p2(d.getHours()) + ':' + p2(d.getMinutes());
+  const day = (x) => x.getFullYear() * 400 + x.getMonth() * 32 + x.getDate();
+  if (day(d) === day(now)) return hm;
+  const y = new Date(now); y.setDate(y.getDate() - 1);
+  return day(d) === day(y) ? 'yesterday ' + hm : d.getDate() + '/' + (d.getMonth() + 1) + ' ' + hm;
+}
+
+/** The closed line: who waits on a reply, then how many are for information. Pure. */
+export function waitingLine(shown) {
+  const w = waitingMentions(shown); const rest = shown.length - w.length;
+  if (!w.length) return shown.length + (shown.length === 1 ? ' mention, for your information.' : ' mentions, all for your information.');
+  const names = w.map((m) => (m.who ? first(m.who) : 'Someone') + ' in ' + srcName(m.source));
+  const said = names.length < 2 ? names[0] : names.slice(0, -1).join(', ') + ' and ' + names[names.length - 1];
+  return said + (w.length === 1 ? ' is' : ' are') + ' waiting on your reply.' + (rest ? ' ' + rest + (rest === 1 ? ' more is' : ' more are') + ' for your information.' : '');
+}
+
+export function mentionsSection(S) {
+  ensureComponentsCss(); ensureSprite();
+  const st = { open: false, tab: 'all', local: new Map(), list: null };
+  const count = el('span', { class: 'bdg g' }, '0');
+  const right = el('span', { class: 'chips2' });
+  const body = el('div', { 'data-mentions-body': '' });
+  const box = el('section', { class: 'card sect', 'data-c3pg': 'mentions', 'aria-label': 'Mentions' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('reply', 'sm'), 'Mentions ', count), right), body);
+  box.hidden = true;
+
+  const all = () => (st.list || []).map((m) => (st.local.has(m.id) ? { ...m, read: st.local.get(m.id) } : m));
+  const shown = () => all().filter((m) => !m.in_needs && !m.read);
+
+  const markRead = (m, read) => post('/api/mentions/read', { id: m.id, read }).then((r) => {
+    if (!r || r.ok === false) { toast('That did not go through' + (r && r.error ? ': ' + r.error : '.')); return false; }
+    st.local.set(m.id, read); draw(); if (S.briefRedraw) S.briefRedraw(); return true;
+  });
+  const addToWork = (m) => {
+    const who = m.who ? first(m.who) : 'the sender';
+    const line = m.reply ? 'Reply to ' + who + ' (' + srcName(m.source) + ') by today' : 'Read ' + who + '\'s note (' + srcName(m.source) + ')';
+    return post('/api/pm-items/add', { line }).then((r) => {
+      if (!r || r.ok === false) { toast('That did not go through' + (r && r.error ? ': ' + r.error : '.')); return; }
+      toast('Added to Work: ' + line.replace(/ by today$/, ''));
+      if (S.workChanged) S.workChanged();
+    });
+  };
+
+  const rowOf = (m) => {
+    const when = whenOf(m.at);
+    const chips = [m.reply ? el('span', { class: 'tag warn', 'data-mention-reply': '' }, 'needs your reply') : el('span', { class: 'tag', 'data-mention-fyi': '' }, 'for your information'),
+      el('span', { class: 'chip2', 'data-mention-where': '' }, srcName(m.source) + (m.where ? ' · ' + m.where : '')),
+      when ? el('span', { class: 'chip2' }, c3ic('clock', 'sm'), when) : null,
+      m.initiative ? el('span', { class: 'chip2' }, c3ic('init', 'sm'), m.initiative) : null];
+    const acts = el('div', { class: 'mn-acts' },
+      m.link ? el('a', { class: 'chip2 mn-open', href: m.link, target: '_blank', rel: 'noopener noreferrer', 'data-mention-open': m.id }, c3ic('out', 'sm'), 'Open in ' + srcName(m.source)) : null,
+      button({ label: 'Add to Work', variant: 'ghost', size: 'sm', icon: 'plus', attrs: { 'data-mention-work': m.id }, onClick: () => addToWork(m) }),
+      button({ label: 'Mark read', variant: 'ghost', size: 'sm', icon: 'check', attrs: { 'data-mention-read': m.id },
+        onClick: () => markRead(m, true).then((done) => { if (done) toast('Marked read', () => markRead(m, false)); }) }));
+    return el('li', { class: 'nrow mn-row', 'data-mention': m.id, 'data-source': m.source },
+      el('span', { class: 'ki' + (m.reply ? ' hot' : '') }, c3ic(ICON[m.source] || 'reply')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, m.who || srcName(m.source)), el('div', { class: 'mn-q' }, '"' + m.text + '"'),
+        el('div', { class: 'chips' }, ...chips.filter(Boolean)), acts),
+      el('span'));
+  };
+
+  const toggle = button({ label: 'Show all', variant: 'ghost', size: 'sm', attrs: { 'data-mentions-toggle': '', 'aria-expanded': 'false' }, onClick: () => { st.open = !st.open; draw(); } });
+  function draw() {
+    if (!st.list) { box.hidden = st.list === undefined; body.replaceChildren(el('p', { class: 'dim c3s2', 'data-mentions-state': 'none' }, 'PMOS has no brief for today, so no mentions were read.')); count.textContent = '0'; right.replaceChildren(); return; }
+    box.hidden = false;
+    const list = shown(); const wait = waitingMentions(list);
+    count.textContent = String(list.length);
+    toggle.querySelector(SEL.btnLabel).textContent = st.open ? 'Hide' : 'Show all';
+    toggle.setAttribute('aria-expanded', String(st.open));
+    right.replaceChildren(...(wait.length ? [el('span', { class: 'tag warn', 'data-mentions-wait': String(wait.length) }, wait.length + (wait.length === 1 ? ' needs a reply' : ' need a reply'))] : []), ...(list.length ? [toggle] : []));
+    if (!list.length) { body.replaceChildren(el('p', { class: 'dim c3s2', 'data-mentions-state': 'empty' }, 'No one has mentioned you today.')); return; }
+    if (!st.open) { body.replaceChildren(el('p', { class: 'mn-line', 'data-mentions-line': '' }, waitingLine(list))); return; }
+    const srcs = ORDER.filter((k) => list.some((m) => m.source === k)).concat([...new Set(list.map((m) => m.source))].filter((k) => !ORDER.includes(k)));
+    if (st.tab !== 'all' && !srcs.includes(st.tab)) st.tab = 'all';
+    const bar = tabs({ ariaLabel: 'Mentions by source', value: st.tab, attrs: { class: 'mn-tabs', 'data-mentions-tabs': '' },
+      items: ['all', ...srcs].map((k) => ({ id: k, label: k === 'all' ? 'All' : srcName(k), count: k === 'all' ? list.length : list.filter((m) => m.source === k).length })),
+      onChange: (k) => {   // the list draws again; keep the focus on the chosen tab
+        const had = bar.contains(document.activeElement); st.tab = k; draw();
+        const now = had && body.querySelector('[data-mentions-tabs] [data-tab="' + k + '"]'); if (now) now.focus();
+      } });
+    const rows = list.filter((m) => st.tab === 'all' || m.source === st.tab).sort((a, b) => (b.reply - a.reply) || ((b.at ? Date.parse(b.at) : 0) - (a.at ? Date.parse(a.at) : 0)));
+    body.replaceChildren(bar, el('ul', { class: 'list', role: 'list', 'data-mentions-list': '' }, ...rows.map(rowOf)));
+  }
+
+  /* Needs you shows a worth-asking mention as its need_key row: tag it, first among its chips so the quiet layout keeps it */
+  S.tagNeeds = (host) => {
+    const by = new Map(all().filter((m) => m.in_needs && m.need_key).map((m) => [m.need_key, m]));
+    if (!by.size) return;
+    (host || document).querySelectorAll('[data-needs-row]').forEach((row) => {
+      const m = by.get(row.dataset.needsRow); const chips = row.querySelector('.nb > .chips');
+      if (!m || !chips || chips.querySelector('[data-mentioned-you]')) return;
+      chips.prepend(el('span', { class: 'tag', 'data-mentioned-you': '', title: (m.who ? m.who + ' mentioned you' : 'You were mentioned') + ' in ' + srcName(m.source) }, 'mentioned you'));
+    });
+  };
+
+  st.list = undefined;
+  onBriefPage((j) => {
+    st.list = j && j.ok !== false ? (Array.isArray(j.mentions) ? j.mentions : null) : null;
+    st.local.clear();
+    draw();
+    if (S.tagNeeds) S.tagNeeds(S.needsBox);
+    if (S.briefRedraw) S.briefRedraw();
+  });
+  S.mentionsNow = () => (st.list === undefined ? null : st.list ? all() : null);
+  S.reloadMentions = () => loadBriefPage();
+  return box;
+}

package/workspace/public/pm/c3-brief-needs.js

@@ -133,6 +133,23 @@ export function needsSection(S) {
     const f = list.querySelector('.fold');
     if (!n && !f) list.replaceChildren(nothing());
     else if (n && f && list.children.length === 1 && f.textContent.startsWith('Nothing needs')) f.remove();
+    if (S.tagNeeds) S.tagNeeds(box);          // Mentions (c3-brief-mentions.js): the "mentioned you" tag on a worth-asking row
+    if (S.briefRedraw) S.briefRedraw();      // The brief (c3-brief-summary.js) says what this section holds
+  };
+  /* What The brief reads of this section: the rows on the page now, with what each row's data says. null until both reads came back. */
+  const meta = new Map();
+  S.needsSnapshot = () => {
+    if (!last || !page || page.ok === false) return null;
+    const rowsIn = (host) => [...host.querySelectorAll('.nrow[data-needs-row]')];
+    const decisions = [...rowsIn(list), ...rowsIn(extra)].map((r) => {
+      const k = r.dataset.needsRow; const m = meta.get(k) || {}; const tt = r.querySelector('.tt');
+      return { key: k, headline: tt ? tt.textContent : '', time: m.time || null, decide: !!m.decide, overdue: !!m.overdue, days_late: m.days_late || 0 };
+    });
+    const own0 = rowsIn(own).map((r) => {
+      const k = r.dataset.needsRow; const d = (page.needs || []).find((x) => x.key === k) || {}; const tt = r.querySelector('.tt');
+      return { key: k, headline: tt ? tt.textContent : (d.headline || ''), kind: r.dataset.kind || d.kind, days_late: d.days_late || 0 };
+    });
+    return { decisions, own: own0, agentN: agent.children.length };
   };
   const ctx = { changed: recount };
 
@@ -157,6 +174,12 @@ export function needsSection(S) {
     const g = JSON.stringify([key, inc, !!(b && b.kept_out), S.pinNeed || '']);
     if (g === sig) return; sig = g;
     alertHost.replaceChildren(...(inc ? [el('div', { class: 'incident', role: 'status', 'data-c3pg': 'incident' }, c3ic('alert', 'lg'), el('div', null, el('b', null, 'Card payments failing since 07:40'), el('div', { class: 'dim c3s3' }, '12% of checkouts. Sam on call. Only deadlines shown.')))] : []));
+    meta.clear();
+    /* a decision only the PM can make: an engine card, or an assigned item marked Decide; an assigned item past its date is overdue */
+    (needs || decide.map((c, i) => fromCard({ key: c.key || String(i), card: c }, i))).forEach((n) => {
+      const late = /^(\d+) days? overdue$/.exec(String(n.dueText || ''));
+      meta.set(n.key, { time: n.time || null, decide: !!n.view || /^decide$/i.test(String(n.kind || '')), overdue: n.kind === 'Overdue', days_late: late ? Number(late[1]) : 0 });
+    });
     if (needs) {
       sumState.quick = needs.filter((n) => n.quick).length;
       list.replaceChildren(...needs.slice(0, 5).map((n, i) => needRow(n, i, ctx)));

package/workspace/public/pm/c3-brief-pulse.js

@@ -84,6 +84,7 @@ export function pulse(S) {
     rows = rows.filter(shown);
     if (!rows.length) { body.replaceChildren(note('No initiative has a promised date or a Jira epic read yet, so there is nothing to show.'), ...(noPlan ? [el('p', { class: 'dim mono c3s2' }, noPlan + ' initiatives have no plan date.')] : [])); return; }
     const pr = rows.map(pulseRow);
+    S.pulseRows = pr; if (S.briefRedraw) S.briefRedraw();   // The brief (c3-brief-summary.js) names the rows off track or at risk
     const need = pr.filter((r) => r.cls === 'bad' || r.cls === 'warn').length;
     attn.textContent = need + ' need attention'; foot.hidden = false;
     const by = new Map(); pr.forEach((r) => { const k = r.word.replace(/ \+.*/, ''); const o = by.get(k) || { n: 0, cls: r.cls }; o.n += 1; by.set(k, o); });

package/workspace/public/pm/c3-brief-summary.js

@@ -0,0 +1,139 @@
+/* pm/c3-brief-summary.js — "The brief": one paragraph under the greeting that says the day at a glance (initiative c3-brief-summary-mentions).
+ *
+ *   composeBrief(input)   → { parts, sources }   PURE. parts is a list of { t } text and { t, go: { kind, key } } links, in reading order:
+ *                           1. "The day turns on one call": the first decision only the PM can make; without one, "First up": the top row
+ *                              ("Still open from today" in Reflect)
+ *                           2. how many things need the PM, how many are overdue, and the oldest
+ *                           3. who waits on a reply to a mention
+ *                           4. how many meetings are left and which one still has a to-do before it ("You held N meetings today." in Reflect)
+ *                           5. which initiatives are off track or at risk
+ *                           A sentence whose read has not come back (null input) is left out. Nothing is invented: every number and title
+ *                           comes from a row the Briefing shows below.
+ *   summarySection(S)     → the card. It composes again when a read comes back, when Needs you changes (S.needsChanged) and when the part of
+ *                           the day changes (S.briefLens). A link goes to its row on the page through S.briefGo({ kind, key }).
+ *
+ * input: { lens, decisions: [{ key, headline, time, decide, overdue, days_late }] | null   (the rows above the PM's own in Needs you; decide: a
+ *          decision only the PM can make, overdue: an assigned item past its date),
+ *           own: [{ key, headline, kind, days_late }] | null, agentN,
+ *          mentions: [mention] | null, agenda: [meeting] | null, pulse: [{ id, title, cls, word }] | null }
+ * No model call and no write. */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+
+const p2 = (n) => String(n).padStart(2, '0');
+const hm = (iso) => { const d = new Date(iso); return p2(d.getHours()) + ':' + p2(d.getMinutes()); };
+const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's');
+const first = (s) => String(s || '').trim().split(/\s+/)[0];
+const SRC = { slack: 'Slack', jira: 'Jira', confluence: 'Confluence', mail: 'Mail', figma: 'Figma', github: 'GitHub', drive: 'Drive', calendar: 'Calendar', wispr: 'Wispr Flow', website: 'Website', derived: 'PMOS' };
+export const srcName = (s) => SRC[s] || String(s || 'a source');
+/** a list said as a person says it: "a", "a and b", "a, b and c" */
+const andList = (xs) => (xs.length < 2 ? xs.join('') : xs.slice(0, -1).join(', ') + ' and ' + xs[xs.length - 1]);
+
+/** The mentions that wait on the PM's reply: not read, not already a Needs you row. */
+export const waitingMentions = (ms) => (ms || []).filter((m) => m && m.reply && !m.read && !m.in_needs);
+
+export function composeBrief(input) {
+  const x = input || {};
+  const reflect = x.lens === 'Reflect';
+  const out = []; const sources = [];
+  const t = (s) => out.push({ t: s });
+  const link = (s, kind, key) => out.push({ t: s, go: { kind, key } });
+
+  // 1 and 2: Needs you
+  if (x.decisions && x.own) {
+    sources.push('Needs you');
+    const dec = x.decisions.find((d) => d.decide);
+    const d0 = dec || x.own[0] || x.decisions[0];   // a decision only the PM can make, else the top row of Needs you
+    if (d0) {
+      t(reflect ? 'Still open from today: ' : dec ? 'The day turns on one call: ' : 'First up: '); link(d0.headline, 'need', d0.key);
+      t((d0.time ? (/overdue/.test(d0.time) ? ', ' + d0.time : ', due ' + d0.time) : d0.days_late > 0 ? ', ' + plural(d0.days_late, 'day') + ' late' : '') + '. ');
+    }
+    const agentN = Number(x.agentN) || 0;
+    const total = x.decisions.length + x.own.length + agentN;
+    const late = [...x.own.filter((r) => r.kind === 'overdue'), ...x.decisions.filter((d) => d.overdue)];
+    if (!total) t('Nothing needs you right now. ');
+    else {
+      const parts = [plural(x.decisions.length, 'decision'), x.own.length + ' of your own'];
+      if (agentN) parts.push(agentN + ' from the agent');
+      t(plural(total, 'thing') + (total === 1 ? ' needs' : ' need') + ' you (' + parts.join(', ') + ')');
+      if (late.length) {
+        const o = late.slice().sort((a, b) => (b.days_late || 0) - (a.days_late || 0))[0];
+        t(', and ' + late.length + (late.length === 1 ? ' is' : ' are') + ' overdue, the oldest ');
+        link(o.headline, 'need', o.key);
+        t(o.days_late > 0 ? ' (' + plural(o.days_late, 'day') + ' late)' : '');
+      }
+      t('. ');
+    }
+  }
+  // 3: mentions that wait on a reply
+  if (x.mentions) {
+    sources.push('Mentions');
+    const w = waitingMentions(x.mentions);
+    if (w.length) {
+      const who = w.map((m) => (m.who ? first(m.who) + ' in ' : 'someone in ') + srcName(m.source));
+      if (w.length === 1) t(who[0].charAt(0).toUpperCase() + who[0].slice(1) + ' is waiting on your reply to a mention. ');
+      else t(w.length + ' people are waiting on your reply to a mention (' + andList(who) + '). ');
+    }
+  }
+  // 4: the meetings
+  if (x.agenda) {
+    sources.push('Calendar');
+    const all = x.agenda; const left = all.filter((m) => m.state !== 'past');
+    if (reflect) t(all.length ? 'You held ' + plural(all.length - left.length, 'meeting') + ' today' + (left.length ? ', and ' + left.length + ' ' + (left.length === 1 ? 'is' : 'are') + ' still ahead' : '') + '. ' : 'You had no meetings today. ');
+    else if (!all.length) t('No meetings today. ');
+    else if (!left.length) t('No meetings are left today. ');
+    else {
+      const todo = left.filter((m) => (m.before || []).length);
+      t(plural(left.length, 'meeting') + (left.length === 1 ? ' is' : ' are') + ' left today');
+      if (!todo.length) t(', and nothing is left to do before ' + (left.length === 1 ? 'it' : 'them') + '. ');
+      else {
+        t(todo.length === left.length && left.length > 1 ? '; every one has a to-do before it, starting with ' : '; ');
+        link(todo[0].title, 'meet', todo[0].id);
+        t(' at ' + hm(todo[0].start) + (todo.length === left.length && left.length > 1 ? '. ' : ' still has a to-do before it. '));
+      }
+    }
+  }
+  // 5: the initiatives
+  if (x.pulse && x.pulse.length) {
+    sources.push('Initiatives');
+    const bad = x.pulse.filter((r) => r.cls === 'bad'); const warn = x.pulse.filter((r) => r.cls === 'warn'); const ok = x.pulse.filter((r) => r.cls === 'ok').length;
+    const flagged = [...bad, ...warn];
+    if (!flagged.length) t(ok ? (ok === 1 ? 'The one initiative with a plan is on track.' : 'All ' + ok + ' initiatives with a plan are on track.') : '');
+    else {
+      t('Across the portfolio, ');
+      flagged.slice(0, 3).forEach((r, i) => {
+        if (i) t(i === Math.min(flagged.length, 3) - 1 ? ' and ' : ', ');
+        link(r.title, 'init', r.id);
+        t(' is ' + String(r.word || (r.cls === 'bad' ? 'off track' : 'at risk')).toLowerCase());
+      });
+      if (flagged.length > 3) t(', and ' + (flagged.length - 3) + ' more need attention');
+      t(ok ? '; ' + ok + (ok === 1 ? ' is' : ' are') + ' on track.' : '.');
+    }
+  }
+  // tidy: one space between sentences, none at the end
+  const parts = out.filter((p) => p.t);
+  if (parts.length) parts[parts.length - 1] = { ...parts[parts.length - 1], t: parts[parts.length - 1].t.replace(/\s+$/, '') };
+  return { parts, sources };
+}
+
+export function summarySection(S) {
+  const when = el('span', { class: 'mono dim brief-when', 'data-brief-when': '' });
+  const body = el('p', { class: 'brief-sum', 'data-brief-sum': '' }, 'Reading the day.');
+  const box = el('section', { class: 'card sect sum-card', 'data-c3pg': 'summary', 'aria-label': 'The brief' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), 'The brief'), when), body);
+  let queued = false;
+  const draw = () => {
+    queued = false;
+    const input = S.briefInput ? S.briefInput() : {};
+    const { parts, sources } = composeBrief(input);
+    if (!parts.length) { body.replaceChildren(sources.length ? 'Nothing to say yet: no decision, item, meeting or initiative needs you.' : 'Reading the day.'); when.textContent = ''; return; }
+    body.replaceChildren(...parts.map((p) => (p.go
+      ? el('a', { class: 'brief-lk', href: '#', 'data-brief-go': p.go.kind + ':' + p.go.key, onclick: (e) => { e.preventDefault(); if (S.briefGo) S.briefGo(p.go); } }, p.t)
+      : document.createTextNode(p.t))));
+    const d = new Date();
+    when.textContent = 'As of ' + p2(d.getHours()) + ':' + p2(d.getMinutes()) + ' · ' + sources.join(', ');
+  };
+  S.briefRedraw = () => { if (queued) return; queued = true; Promise.resolve().then(draw); };
+  S.briefRedraw();
+  return box;
+}

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

@@ -2,8 +2,10 @@
  * 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. */
+ * Mentions (initiative c3-brief-summary-mentions): five mentions of the demo morning; Sam's Slack message is also the Needs you row i15, so it is not
+ * listed and that row carries the "mentioned you" tag.
+ * Writes: the pm-items routes the rows call (done, notyet, remove, reopen, undo, add) and POST /api/mentions/read 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: [] },
@@ -25,7 +27,14 @@ const NEEDS = [
     evidence: { text: 'a meeting with Dara is booked Thu 14:00', event_id: 'm4' } },
 ];
 
-let gone = {};
+const MENTIONS = [
+  { id: 'd3m000000001', source: 'slack', who: 'Priya Nair', where: '#checkout-v2', text: 'Can you confirm the revised date before the 10:30 update? Leadership will ask.', at: iso(7, 58), reply: true, link: 'https://localhost/demo/slack/checkout-v2', initiative: 'Checkout v2', in_needs: false, read: false },
+  { id: 'd3m000000002', source: 'jira', who: 'Dara Okafor', where: 'CHK-214 Flow 4 estimate', text: 'Which of the four flows do we cut if we hold 24 Oct? I need this before sprint planning.', at: iso(8, 4), reply: true, initiative: 'Checkout v2', in_needs: false, read: false },
+  { id: 'd3m000000003', source: 'confluence', who: 'Marta Silva', where: 'Returns interview guide', text: 'I moved the support questions to the end, no change to the scope.', at: iso(7, 20), reply: false, initiative: 'Returns experience', in_needs: false, read: false },
+  { id: 'd3m000000004', source: 'mail', who: 'Lee Park', where: 'Pricing page feedback', text: 'Copying you so the copy notes are in one thread.', at: new Date(2026, 9, 7, 17, 5).toISOString(), reply: false, in_needs: false, read: false },
+  { id: 'd3m000000005', source: 'slack', who: 'Sam', where: '#search', text: 'Ok to ship the logging change today?', at: iso(7, 45), reply: true, in_needs: true, need_key: 'i15', read: false },
+];
+let gone = {}; const readMarks = {};
 export function installBriefPage() {
   if (window.__c3demoBriefPage) return; window.__c3demoBriefPage = true;
   window.__c3demoWrites = [];
@@ -37,7 +46,14 @@ export function installBriefPage() {
       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', me: 'Wawan', 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]) }));
+        if (method === 'GET' && u.pathname === '/api/brief-page') return Promise.resolve(json({ ok: true, date: '2026-10-08', me: 'Wawan', 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]), mentions: MENTIONS.map((x) => ({ ...x, read: !!readMarks[x.id] })) }));
+        if (method !== 'GET' && (u.pathname === '/api/mentions/read' || u.pathname === '/api/pm-items/add')) {
+          let b = {}; try { b = init && init.body ? JSON.parse(init.body) : {}; } catch { b = {}; }
+          window.__c3demoWrites.push({ path: u.pathname, body: b });
+          if (u.pathname === '/api/pm-items/add') return prev(input, init);   // recorded, then answered by the demo's own Work store
+          readMarks[b.id] = b.read === true;
+          return Promise.resolve(json({ ok: true }));
+        }
         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 = {}; }

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

@@ -407,6 +407,10 @@ function press(k, b) {
 /** The routes. Returns a Response, or undefined for a route this file does not answer. */
 export function rdRoute(method, u, body) {
   const p = u.pathname; const qp = u.searchParams;
+  /* the Structure step (initiative report-structure): demo mode holds no structure and no data chart, and saves nothing */
+  if (p === '/api/report-structure' && method === 'GET') { const id = qp.get('id'); const s = ctx.setups().find((x) => x.id === id); return s ? json({ ok: true, setup: { id, name: s.name, cadence: s.schedule && s.schedule.cadence }, structure: { running: false, job: null, current: null, saved: null, versions: [], log: [], plan: null, dry: null, checks: {}, errors: [] } }) : json({ ok: false, error: 'no such report' }, 404); }
+  if (p === '/api/charts' && method === 'GET') return json({ ok: true, charts: [] });
+  if (p.startsWith('/api/report-structure') && method === 'POST') return json({ ok: false, error: 'Demo data: nothing is saved' });
   if (!p.startsWith('/api/report-design') && !p.startsWith('/api/report-notes')) return undefined;
   if (method === 'GET') {
     if (p === '/api/report-design') { const id = qp.get('id'); if (!ctx.setups().some((x) => x.id === id)) return json({ ok: false, error: 'no such report' }, 404); return json(designView(id)); }

package/workspace/public/pm/c3-design-studio.js

@@ -16,6 +16,7 @@ import { toast } from './c3-toast.js';
 import { RS, scheduleLabel } from './c3-report-store.js';
 import { formatOf } from './c3-doc-formats.js';
 import { RD, failed, splitRender, slideCard, frame, wireFrame, diffOutlines, ensureDeckCss, slotWord } from './c3-report-deck.js';
+import { openStructure, structureSection } from './c3-report-structure.js';
 
 const MAX = 20 * 1024 * 1024;
 const KIND_OF = (name) => { const e = String(name || '').toLowerCase().split('.').pop(); return e === 'pdf' ? 'pdf' : e === 'pptx' ? 'pptx' : e === 'docx' ? 'docx' : /^(png|jpe?g)$/.test(e) ? 'image' : ''; };
@@ -304,7 +305,9 @@ export function openStudio({ ws, id, name, view, onClose } = {}) {
     const sb = body.closest('.sb'); const y = sb ? sb.scrollTop : 0; const log = body.querySelector('.rd-dks-log'); const ly = log ? log.scrollTop : null;
     const focus = document.activeElement && body.contains(document.activeElement) && document.activeElement.matches('[data-rd-in],[data-rd-link]') ? document.activeElement.getAttribute('data-rd-in') != null ? '[data-rd-in]' : '[data-rd-link]' : null;
     S.dks = S.dks || el('div', { class: 'rd-dks' }); S.out = S.out || el('div', { class: 'rd-dks-out', 'data-rd-preview': '' });
-    keep(body, el('div', { class: 'rd-dk-bar' }, el('div', { class: 'chips2 rd-wrap' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Report type' },
+    keep(body, el('div', { class: 'rd-dk-bar' }, el('div', { class: 'chips2 rd-wrap' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Studio step', 'data-rd-steps': '' },
+      btn({ 'data-rd-step': 'structure', 'aria-pressed': 'false', onclick: () => openStructure({ ws, id, name: nm }) }, icon('todo', 'sm'), '1 Structure'), btn({ 'data-rd-step': 'design', 'aria-pressed': 'true' }, icon('img', 'sm'), '2 Design')),
+    el('div', { class: 'seg', role: 'group', 'aria-label': 'Report type' },
       btn({ 'data-rd-fmt': 'deck', 'aria-pressed': String(K.fmt === 'deck'), onclick: () => setFmt('deck') }, icon('img', 'sm'), 'Deck'), btn({ 'data-rd-fmt': 'doc', 'aria-pressed': String(K.fmt === 'doc'), onclick: () => setFmt('doc') }, icon('doc', 'sm'), 'Document')),
     el('b', null, nm), D.saved ? el('span', { class: 'chip2 ds-good', 'data-rd-saved': String(D.saved.version) }, icon('check', 'sm'), 'Saved design: D' + D.saved.version) : el('span', { class: 'chip2', 'data-rd-saved': '' }, 'Not saved yet')),
     el('div', { class: 'chips2' }, pbtn('primary', 'This is it', 'check', { 'data-rd-act': 'accept', disabled: !D.versions.length, onclick: () => accept() }),
@@ -332,8 +335,9 @@ export function openBrief({ ws, id, name } = {}) {
     const nm = setup.name || name || id; const out = formatOf(setup.output);
     const lh = el('div', { class: 'lh' }, el('span', { class: 'ki' }, icon('report')), el('div', { class: 'rs-min0' }, el('b', null, nm),
       el('div', { class: 'dim' }, (setup.label || scheduleLabel(setup.schedule)) + '. Output: ' + (setup.output === 'google-slides' ? 'a slide deck in PMOS. A Google Slides copy is optional.' : out.l + '.'))));
+    const SS = await structureSection({ ws, id, name: nm });   // the saved structure (step 1), above the design
     if (!D.saved) {
-      put(body, lh, sect({ ic: 'spark', title: 'Design', attrs: { 'data-rd-design': '' } }, el('div', { class: 'fold', 'data-rd-nosaved': '' }, icon('info', 'sm'), ' No saved design yet. Describe the report and refine it in the Design studio, then press This is it.'),
+      put(body, lh, SS, sect({ ic: 'spark', title: 'Design', attrs: { 'data-rd-design': '' } }, el('div', { class: 'fold', 'data-rd-nosaved': '' }, icon('info', 'sm'), ' No saved design yet. Describe the report and refine it in the Design studio, then press This is it.'),
         el('div', { class: 'ds-acts' }, pbtn('primary', 'Design how it looks', 'spark', { 'data-rd-act': 'studio', onclick: () => openStudio({ ws, id, name: nm }) }))));
       return;
     }
@@ -345,7 +349,7 @@ export function openBrief({ ws, id, name } = {}) {
     const rules = D.rules || {};
     const cycHost = el('ul', { class: 'chgl', 'data-rd-briefcycles': '' });
     const docs = (RS.docs || []).filter((d) => d.setup === id).sort((a, b) => String(b.slot).localeCompare(String(a.slot)));
-    put(body, lh,
+    put(body, lh, SS,
       sect({ ic: 'spark', title: 'Design', right: el('span', { class: 'tag acc' }, 'Design D' + n), attrs: { 'data-rd-design': '' } },
         el('div', { class: 'dim rd-small' }, 'Written by PMOS from your studio session. It is not a template: PMOS reads it each cycle and drafts to match it. Saved ' + dayAt(D.saved.at) + ', version D' + n + '.'),
         el('h3', { class: 'ds-h' }, 'Your description'), el('blockquote', { class: 'rd-dks-q', 'data-rd-desc': '' }, D.description || 'No description.'),

package/workspace/public/pm/c3-report-setup.js

@@ -16,6 +16,7 @@ import { toast } from './c3-toast.js';
 import { FORMATS, OUTPUTS, formatOf, ensureReportCss } from './c3-doc-formats.js';
 import { createDeck } from './c3-report-deck.js';
 import { openStudio, openBrief } from './c3-design-studio.js';
+import { openStructure } from './c3-report-structure.js';
 import { RS, onReports, loadReports, askPmos, changeIt, cancelAsk, setupFrom, draftNow, dismissLater, pauseResume, fromDashboard, goTo, evidenceKind, normProposal, scheduleLabel, nextDraftDate, dayText, docsOf, outChip, copyChip, srcChip } from './c3-report-store.js';
 
 const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -118,6 +119,7 @@ function askCard(a, redo) {
   return sect({ ic: 'spark', title: 'PMOS answer', attrs, right: confTag('') }, el('div', { class: 'rs-stack' }, head,
     lbl('WHAT PMOS FOUND'), ...foundList(P), lbl('PROPOSED REPORT'), proposed(key, P, redo), lbl('LEARNED FROM'), ...[].concat(learnedBlock(P)), lbl('FIXES IT WILL APPLY'), fixesList(P), ...(cb ? [].concat(cb) : []),
     el('div', { class: 'chips2' }, pbtn('primary', 'Set up', 'check', { 'data-rs-act': 'setup', onclick: () => setupFrom({ ask: a.id, proposal: P }) }),
+      pbtn('outline', 'Shape it with PMOS', 'todo', { 'data-rs-act': 'shape', title: 'Set the report up, then decide with PMOS what it answers, where each number comes from and how it is worked out', onclick: async () => { const r = await setupFrom({ ask: a.id, proposal: P }); if (r && r.ok && r.setup) openStructure({ ws: RS.ws, id: r.setup.id, name: r.setup.name }); } }),
       pbtn('outline', 'Change', 'edit', { 'data-rs-act': 'change', onclick: () => { RS.chg[key] = { ...st, open: true }; redo(); } }),
       pbtn('ghost', 'Cancel', 'x', { 'data-rs-act': 'cancel-ask', onclick: async () => { const r = await cancelAsk(a.id); if (r && r.ok) toast('Cancelled. Nothing was set up.'); } })),
     help('PMOS reads your past copies to learn the sections. It drafts only; you issue.')));
@@ -232,6 +234,7 @@ export function mountReportSetup(host, ctx) {
         open ? cycRows(s) : null),
       el('div', { class: 'acts' }, cy.length || paused || s.source !== 'work' ? pbtn('outline', 'Open', 'out', { 'data-rs-act': 'open-reg', onclick: () => openSetup(s) })
         : pbtn('outline', 'Draft it now', 'spark', { 'data-rs-act': 'draft-now', onclick: () => openSetup(s) }),
+        s.source === 'work' ? pbtn('ghost', 'Shape the report', 'todo', { 'data-rs-act': 'shape', onclick: () => openStructure({ ws: RS.ws, id: s.id, name: s.name }) }) : null,
         s.source === 'work' ? pbtn('ghost', 'Design how it looks', 'spark', { 'data-rs-act': 'design', onclick: () => openStudio({ ws: RS.ws, id: s.id, name: s.name }) }) : null,
         pbtn('ghost', 'All cycles (' + n + ')', 'fold', { 'data-rs-act': 'cyc', 'aria-expanded': String(open), onclick: () => { if (RS.cyc.has(s.id)) RS.cyc.delete(s.id); else RS.cyc.add(s.id); drawSetups(); } }),
         pbtn('ghost', paused ? 'Resume' : 'Pause', paused ? 'play' : 'pause', { 'data-rs-act': 'pause', onclick: () => pauseResume(s, !paused) })));

package/workspace/public/pm/c3-report-structure.css

@@ -0,0 +1,40 @@
+/* pm/c3-report-structure.css — the Structure step of the report studio (c3-report-structure.js; mockup 43-reportstructure.css).
+   The conversation reuses the Design studio's .rd-dks-* rules (c3-report-deck.css). Tokens only; font sizes are the --fs-* scale. */
+.c3 .rs-st { display: grid; gap: var(--sp-3); min-width: 0; }
+.c3 .rs-st-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
+.c3 .rs-st-bar .seg button { display: inline-flex; gap: 4px; align-items: center; }
+.c3 .rs-st .rd-dks-out > .card.sect { margin: 0; }
+.c3 .rs-st-q { display: grid; gap: 4px; }
+.c3 .rs-st-q b { font-size: var(--fs-2); font-weight: 500; }
+.c3 .rs-st-small { font-size: var(--fs-2); }
+.c3 .rs-st-tiny { font-size: var(--fs-1); }
+.c3 .rs-st-fg { color: var(--foreground); }
+.c3 .rs-st-field { display: grid; gap: 2px; font-size: var(--fs-2); }
+.c3 .rs-st-field input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font: var(--fs-3)/1.4 var(--sans); }
+.c3 .rs-st-form { display: grid; gap: 8px; padding: 8px 10px; margin: 0 0 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .rs-st-tw { overflow-x: auto; }
+.c3 .rs-st-tbl { min-width: 640px; font-size: var(--fs-2); }
+.c3 .rs-st-tbl td { vertical-align: top; }
+.c3 .rs-st-row.on td { background: var(--muted); }
+.c3 .rs-st-tbl .tt { text-align: left; }
+.c3 .rs-st-det > td { border-top: 0; padding-top: 0; }
+.c3 .rs-st-detb { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .rs-st-detb p, .c3 .rs-st-opt p, .c3 .rs-st-p { margin: 2px 0 0; font-size: var(--fs-3); line-height: 1.5; }
+.c3 .rs-st-detb .dim.mono, .c3 .rs-st-opt .dim.mono { font-size: var(--fs-1); }
+.c3 .rs-st-code { font-size: var(--fs-2); overflow-wrap: anywhere; }
+.c3 .rs-st-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+.c3 .rs-st-ol > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
+.c3 .rs-st-ol .chips { margin-top: 4px; }
+.c3 .rs-st-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-1); color: var(--muted-foreground); }
+.c3 .rs-st-mini { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: var(--fs-2); }
+.c3 .rs-st-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); }
+.c3 .rs-st-opt { display: grid; gap: 10px; align-content: start; margin: 0; }
+.c3 .rs-st-chk > li { grid-template-columns: 16px minmax(0, 1fr) auto; }
+.c3 .rs-st-saved { display: grid; gap: var(--sp-3); }
+.c3 .rs-st .rd-dks-panel { display: flex; flex-direction: column; max-height: 42vh; overflow: auto; }
+.c3 .rs-st .rd-dks-panel > * { flex: none; }
+@media (max-width: 760px) {
+  .c3 .rs-st .rd-dks { grid-template-columns: minmax(0, 1fr); }
+  .c3 .rs-st .rd-dks-chat { position: static; max-height: none; }
+  .c3 .rs-st .rd-dks-log { max-height: 420px; }
+}