create-pmos 0.134.0 → 0.136.0

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

@@ -0,0 +1,100 @@
+/* pm/c3-ambient.js — the ambient motion background of the console3 page (ported from the mockup's 90-ambient.js).
+ * It also pauses while the tab is hidden. */
+/* Ambient motion background: a few soft accent blobs drift slowly behind the page. It knows where content sits: it reads the
+   rects of cards, rows and headings, steers the blobs toward empty space, dims a blob that drifts under a card, and thins
+   the colour under text that sits straight on the page (title, tabs, deck pager). Subtle by design (peak alpha about 0.14 light, 0.2 dark). Reduced motion draws one still frame. */
+const Ambient = (() => {
+  let rootEl = null;
+  const ROOT = () => rootEl;
+  let texts = [], cv, cx, W = 0, H = 0, rects = [], blobs = [], cols = [], last = 0, t0 = performance.now(), raf = 0, still = false;
+  const SCALE = 0.5;                       // draw at half resolution; it is all blur anyway
+  const CONTENT = '.card,.fc,.sect,.cal3,.c3dock,.sheet';             // opaque surfaces: blobs steer around them
+  const TEXT = 'h1,.c3top .sub,.c3tabs,.lh,.stance,.dkd';                // text sitting straight on the page: colour thins under it
+  const rgb = (css) => { const c = document.createElement('canvas').getContext('2d'); c.fillStyle = 'rgb(0 0 0)'; c.fillStyle = css; c.fillRect(0, 0, 1, 1); const d = c.getImageData(0, 0, 1, 1).data; return [d[0], d[1], d[2]]; };
+  const dark = () => (ROOT().getAttribute('data-pm-theme') || '') === 'dark';
+  function readColours() {
+    const cs = getComputedStyle(ROOT());
+    cols = ['--acc', '--purple', '--acc'].map(v => rgb(cs.getPropertyValue(v).trim() || 'rgb(79 107 237)'));
+  }
+  function size() {
+    W = innerWidth; H = innerHeight;
+    cv.width = Math.ceil(W * SCALE); cv.height = Math.ceil(H * SCALE);
+    measure();
+  }
+  function measure() {
+    const grab = sel => [...document.querySelectorAll(sel)].map(el => el.getBoundingClientRect()).filter(r => r.width > 4 && r.height > 4 && r.bottom > 0 && r.top < H);
+    rects = grab(CONTENT); texts = grab(TEXT);
+  }
+  /* free space: score a coarse grid by distance from content; the emptiest cells become drift targets */
+  function freeTarget() {
+    let best = null, bs = -1;
+    for (let k = 0; k < 14; k++) {
+      const x = Math.random() * W, y = Math.random() * H;
+      let d = 1e9;
+      for (const r of rects) { const dx = Math.max(r.left - x, 0, x - r.right), dy = Math.max(r.top - y, 0, y - r.bottom); d = Math.min(d, Math.hypot(dx, dy)); }
+      if (d > bs) { bs = d; best = { x, y }; }
+    }
+    return best || { x: W * 0.15, y: H * 0.1 };
+  }
+  function covered(x, y) {
+    for (const r of rects) if (x > r.left && x < r.right && y > r.top && y < r.bottom) return true;
+    return false;
+  }
+  function init() {
+    blobs = [0, 1, 2].map(i => ({ x: W * (0.15 + i * 0.35), y: H * (0.1 + (i % 2) * 0.5), r: Math.max(W, H) * (0.32 - i * 0.05), tx: 0, ty: 0, a: 1, ph: i * 2.1, c: i }));
+    blobs.forEach(b => { const t = freeTarget(); b.tx = t.x; b.ty = t.y; });
+  }
+  function frame(now) {
+    raf = still ? 0 : requestAnimationFrame(frame);
+    if (!still && now - last < 33) return;            // ~30 fps is plenty for this
+    last = now;
+    const tt = still ? 0 : (now - t0) / 1000, peak = dark() ? 0.2 : 0.14;
+    cx.setTransform(SCALE, 0, 0, SCALE, 0, 0);
+    cx.clearRect(0, 0, W, H);
+    cx.globalCompositeOperation = 'source-over';
+    for (const b of blobs) {
+      // ease toward an empty-space target, with a slow wobble; pick a new target on arrival
+      if (!still) {   // a still frame (reduced motion) holds the blobs where they began, so a redraw after a layout change looks the same
+        b.x += (b.tx - b.x) * 0.004 + Math.sin(tt * 0.21 + b.ph) * 0.35;
+        b.y += (b.ty - b.y) * 0.004 + Math.cos(tt * 0.17 + b.ph) * 0.3;
+        if (Math.hypot(b.tx - b.x, b.ty - b.y) < 40) { const t = freeTarget(); b.tx = t.x; b.ty = t.y; }
+      }
+      // a blob whose centre sits under content dims; in open space it comes up to full (slowly)
+      const want = covered(b.x, b.y) ? 0.6 : 1;
+      b.a += (want - b.a) * 0.02;
+      const [r, g, bl] = cols[b.c] || [79, 107, 237], rad = b.r * (1 + 0.06 * Math.sin(tt * 0.3 + b.ph));
+      const gr = cx.createRadialGradient(b.x, b.y, 0, b.x, b.y, rad);
+      gr.addColorStop(0, `rgba(${r},${g},${bl},${(peak * b.a).toFixed(3)})`);
+      gr.addColorStop(0.55, `rgba(${r},${g},${bl},${(peak * b.a * 0.35).toFixed(3)})`);
+      gr.addColorStop(1, `rgba(${r},${g},${bl},0)`);
+      cx.fillStyle = gr; cx.fillRect(0, 0, W, H);
+    }
+    // content overlap: knock the colour back to a trace under content, with a soft edge so it never outlines boxes
+    cx.globalCompositeOperation = 'destination-out';
+    cx.filter = 'blur(18px)';
+    cx.fillStyle = 'rgba(0,0,0,0.5)';
+    for (const r of texts) cx.fillRect(r.left, r.top, r.width, r.height);
+    cx.filter = 'none';
+  }
+  function mount(root) {
+    if (cv && cv.isConnected) return;
+    rootEl = root;
+    cv = document.createElement('canvas'); cv.className = 'c3amb'; cv.setAttribute('aria-hidden', 'true');
+    ROOT().prepend(cv); cx = cv.getContext('2d');
+    if (!cx) { cv.remove(); return; }   // canvas is not available: the page stays plain white
+    still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+    readColours(); size(); init();
+    addEventListener('resize', size);
+    addEventListener('scroll', measure, { passive: true });
+    new MutationObserver(() => { clearTimeout(mount._m); mount._m = setTimeout(() => { measure(); readColours(); if (still) frame(performance.now()); }, 120); })
+      .observe(ROOT(), { childList: true, subtree: true, attributes: true, attributeFilter: ['data-pm-theme', 'class'] });
+    document.addEventListener('visibilitychange', () => { if (still) return; if (document.hidden) { cancelAnimationFrame(raf); raf = 0; } else if (!raf) raf = requestAnimationFrame(frame); });
+    if (still) frame(performance.now()); else raf = requestAnimationFrame(frame);
+  }
+  return { mount };
+})();
+
+/* Mount once, after the page root holds its content. Never throws: the background is decoration. */
+export function mountAmbient(root) {
+  try { if (root) Ambient.mount(root); } catch { /* no canvas: nothing to draw */ }
+}

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

@@ -69,7 +69,8 @@ export function itemRow(r, ctx = {}) {
     offline ? el('span', { class: 'tag', 'data-offline': '' }, 'Outside PMOS') : el('span', { class: 'tag' }, 'Yours'),
     r.person ? el('span', { class: 'chip2' }, c3ic('user', 'sm'), r.person) : null,
     r.priority ? el('span', { class: 'fl ' + String(r.priority).toLowerCase() }, r.priority) : null,
-    r.evidence ? el('span', { class: 'st ok', 'data-looks-done': '' }, c3ic('eye', 'sm'), 'Looks done') : null];
+    r.evidence ? el('span', { class: 'st ok', 'data-looks-done': '' }, c3ic('eye', 'sm'), 'Looks done') : null,
+    el('span', { class: 'chip2', title: 'Where this lives', 'data-home-chip': '' }, c3ic('repo', 'sm'), 'Work')];
   row = el('li', { class: 'nrow', 'data-row': '', 'data-id': key, 'data-needs-row': key, 'data-item-id': r.id, 'data-ref-row': r.id, 'data-kind': r.kind, 'data-a': 'expand' },
     el('span', { class: 'ki ' + tone + (r.kind === 'overdue' ? ' hot' : ''), title: r.kind }, c3ic(r.kind === 'overdue' ? 'alert' : offline ? 'user' : 'clock')),
     el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.headline), el('div', { class: 'chips' }, ...chips.filter(Boolean)), xp));
@@ -77,9 +78,18 @@ export function itemRow(r, ctx = {}) {
   return row;
 }
 
+/* The Needs you count for the Briefing tab's badge, read without the section: the decisions (the briefing's needs, or its engine cards that carry a move or are
+ * Critical) plus the own items of the brief page. The section's own count (recount) takes over once it is on the page. */
+export function needsCount(b, page) {
+  const decide = b && Array.isArray(b.needs) && b.needs.length ? b.needs.filter((n) => !BX.gone[n.key]).length : ((b && b.cards) || []).filter((c) => c && (c.move || c.tag === 'Critical')).length;
+  const own = page && page.ok !== false ? (page.needs || []).filter((r) => r.kind !== 'decision').length : 0;
+  return decide + own;
+}
+
 export function needsSection(S) {
   const count = el('span', { class: 'bdg g' }, '0');
-  const quick = el('span', { class: 'chips2 dim mono c3s2' });
+  const quick = el('span', { class: 'chips2 dim mono c3s2', 'data-needs-summary': '' });
+  const sumState = { dec: 0, own: 0, late: 0, quick: 0 };
   const own = el('ul', { class: 'list', role: 'list', 'data-needs-own': '' });
   const ownNote = el('div');
   const list = el('ul', { class: 'list', role: 'list' });
@@ -88,10 +98,21 @@ export function needsSection(S) {
   const box = el('section', { class: 'card sect', 'data-c3pg': 'needs', 'aria-label': 'Needs you' },
     el('div', { class: 'sh2' }, el('h2', null, c3ic('inbox', 'sm'), 'Needs you ', count)), alertHost, ownNote, own, list, extra);
   let sig = ''; let last = null; let ownSig = ''; let page = null;
-  const nothing = () => el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you.');
+  const nothing = () => el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing needs you right now.');
+  /* the header line: "3 decisions · 4 of yours · 2 overdue", then how many take under 2 minutes */
+  const summarise = () => {
+    const dec = list.querySelectorAll('.nrow[data-needs-row]').length + extra.querySelectorAll('.nrow[data-needs-row]').length;
+    const ownRows = [...own.querySelectorAll('.nrow[data-needs-row]')]; const late = ownRows.filter((r) => r.dataset.kind === 'overdue').length;
+    if (!quick.isConnected) box.querySelector('.sh2').append(quick);
+    quick.replaceChildren(document.createTextNode(dec + (dec === 1 ? ' decision' : ' decisions') + ' · ' + ownRows.length + ' of yours'));
+    if (late) quick.append(' · ', el('span', { class: 'tag bad' }, late + ' overdue'));
+    if (sumState.quick) quick.append(' · ', c3ic('bolt', 'sm'), sumState.quick + ' under 2 min');
+  };
   const recount = () => {
     const n = box.querySelectorAll('.nrow[data-needs-row]').length;
+    summarise();
     count.textContent = String(n);
+    if (S.setNeedsBdg) S.setNeedsBdg(n);
     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();
@@ -120,15 +141,14 @@ export function needsSection(S) {
     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.')))] : []));
     if (needs) {
-      if (!quick.isConnected) box.querySelector('.sh2').append(quick);
-      quick.textContent = ''; quick.append(c3ic('bolt', 'sm'), needs.filter((n) => n.quick).length + ' under 2 min');
+      sumState.quick = needs.filter((n) => n.quick).length;
       list.replaceChildren(...needs.slice(0, 5).map((n, i) => needRow(n, i, ctx)));
       extra.replaceChildren(...(inc ? [] : belowLine(needs.slice(5), (n, i) => needRow(n, i + 5, ctx), b.kept_out)));
       recount();
       return;
     }
     const cards = decide.map(cardView);
-    quick.remove();
+    sumState.quick = 0;
     list.replaceChildren(...cards.map((v, i) => {
       const T = TAG_STYLE[v.tag] || TAG_STYLE['Just in'];
       return needRow({ key: v.key || String(i), headline: v.headline, kind: v.tag, icon: T.icon, color: T.color, time: v.deadline && v.deadline.text ? v.deadline.text : null, src: v.tag, view: v }, i, ctx);

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

@@ -6,9 +6,10 @@
 import { el } from './dom.js';
 import { c3ic } from './pm-work-view.js';
 import { makeXp, attachExpand } from './c3-expand.js';
-import { caseFile } from './c3-brief.js';
+import { caseFile, hooks } from './c3-brief.js';
 import { readQuarter } from './c3-plan.js';
-import { row, signal, ensureComponentsCss } from './primitives.js';
+import { row, signal, button, ensureComponentsCss } from './primitives.js';
+import { ensureSprite } from './icons.js';
 
 /* tone: ok is neutral, warn is the warning token, bad the destructive one (R28-12) */
 const PST = { 'on time': ['ok', 'On time'], 'at risk': ['warn', 'At risk'], delayed: ['bad', 'Delayed'], overdue: ['bad', 'Overdue'], 'no plan': ['', 'No plan'] };
@@ -40,9 +41,14 @@ export function pulseCase(r) {
 export function pulse(S) {
   ensureComponentsCss();
   const body = el('div', null, el('p', { class: 'dim mono c3s2' }, 'Reading the initiatives.'));
-  const box = el('section', { class: 'card pulsecard', 'data-c3pg': 'pulse' },
+  const attn = el('span', { class: 'mono dim pulse-attn', 'data-pulse-attn': '' }, 'promised vs forecast');
+  ensureSprite();
+  const all = button({ label: 'All initiatives', variant: 'ghost', size: 'sm', icon: 'arrow-right', attrs: { 'data-go': 'initiatives' }, onClick: () => { if (hooks.go) hooks.go({ action: 'goinit' }); } });
+  const foot = el('div', { class: 'chips2 pulse-foot', 'data-pulse-foot': '' }, el('span', { class: 'dim c3s2' }, 'Tap a row to read why. Open it from there.'), all);
+  foot.hidden = true;
+  const box = el('section', { class: 'card pulsecard', 'data-c3pg': 'pulse', 'aria-label': 'Portfolio pulse' },
     el('div', { class: 'pulsehead' },
-      el('h3', null, c3ic('init', 'sm'), 'Portfolio pulse'), el('span', { class: 'mono dim c3s2' }, 'promised vs forecast')), body);
+      el('h3', null, c3ic('init', 'sm'), 'Portfolio pulse'), attn), body, foot);
   const note = (t, ic) => el('div', { class: 'fold' }, c3ic(ic || 'moon', 'sm'), t);
   const draw = (rows, err) => {
     if (err) { body.replaceChildren(el('p', { class: 'dim mono c3s2', role: 'status' }, 'The initiatives could not be read: ' + err)); return; }
@@ -51,6 +57,8 @@ export function pulse(S) {
     rows = rows.filter((g) => g.pulse || g.status !== 'no plan');
     if (!rows.length) { body.replaceChildren(note('No initiative has a promised date yet, so there is nothing to compare with the forecast.'), ...(noPlan ? [el('p', { class: 'dim mono c3s2' }, noPlan + ' initiatives have no plan date.')] : [])); return; }
     const pr = rows.map(pulseRow);
+    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); });
     const bar = el('div', { class: 'pbs', role: 'group', 'aria-label': 'Status of initiatives' },
       ...[...by.entries()].map(([k, v]) => { const seg = el('span', { class: 'pb-seg pb-' + (v.cls || 'mute'), title: v.n + ' ' + k.toLowerCase(), 'aria-label': v.n + ' ' + k.toLowerCase() }); seg.style.setProperty('--fr-grow', String(v.n)); return seg; }));

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

@@ -1,43 +1,78 @@
-/* pm/c3-brief-today.js — the Briefing's "Today": the agenda of today's meetings (PRD briefing-brief R2).
- * One row per meeting, in time order, from GET /api/brief-page: its time and length, the people, the initiative, what PMOS holds as PREPARED
- * (documents, notes) and what the PM must do BEFORE the meeting (own items that name it). A meeting with nothing held says "Nothing prepared
- * yet". A meeting that is over is dimmed; the one under way is marked Now, the next one Next.
+/* pm/c3-brief-today.js — the Briefing's "Today": the agenda of today's meetings (PRD briefing-brief R2, console3-briefing-parity R3).
+ * A lead line (the meeting under way or the next one, how many are left, how many are prepped, a small ring), then one row per meeting in time
+ * order, from GET /api/brief-page: its time and length, the people, the initiative, what PMOS holds as PREPARED (documents, notes: chips) and what
+ * the PM must do BEFORE the meeting (own items that name it: "Before you go: ..." chips). A meeting with nothing held says "nothing prepared".
+ * A meeting that is over says "over"; the one under way says "now", the next one "next". "Open calendar" opens the calendar popup.
  * Rows are REFERENCES (data-ref-row): they carry no control that changes a record. The record's actions are in Needs you and on its own page. */
 import { el } from './dom.js';
 import { c3ic } from './pm-work-view.js';
 import { onBriefPage } from './c3-brief-data.js';
+import { openCalendarPopup } from './c3-calpop.js';
+import { button, ensureComponentsCss } from './primitives.js';
+import { ensureSprite } from './icons.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 first = (n) => String(n || '').trim().split(/\s+/)[0];
+const length = (m) => { const x = Math.round(m || 0); return x >= 60 ? Math.floor(x / 60) + 'h' + (x % 60 ? ' ' + (x % 60) + 'm' : '') : x + ' min'; };
 
 export function meetingRow(m) {
-  const marks = { now: 'Now', next: 'Next' };
-  const prep = m.prepared && m.prepared.length
-    ? el('ul', { class: 'tl', role: 'list', 'aria-label': 'Prepared' }, ...m.prepared.map((x) => el('li', { 'data-prep': x.kind }, c3ic(x.kind === 'prep' ? 'spark' : 'doc', 'sm'), x.text)))
-    : el('p', { class: 'dim c3s2', 'data-prep': 'none' }, c3ic('moon', 'sm'), 'Nothing prepared yet');
-  const bef = m.before && m.before.length
-    ? el('ul', { class: 'tl', role: 'list', 'aria-label': 'Before the meeting' }, ...m.before.map((x) => el('li', { 'data-before': x.id }, c3ic('todo', 'sm'), x.title, x.due ? el('span', { class: 'mono dim' }, ' · due ' + x.due) : null)))
-    : el('p', { class: 'dim c3s2', 'data-before': 'none' }, 'Nothing to do before it.');
-  return el('li', { class: 'trow ' + m.state, 'data-ref-row': '', 'data-today-row': m.id, 'data-state': m.state },
-    el('div', { class: 'tm mono' }, hm(m.start), el('div', { class: 'dim c3s2' }, m.minutes ? m.minutes + ' min' : 'no end')),
-    el('div', { class: 'tb' },
-      el('div', { class: 'chips2' }, el('b', { class: 'tt' }, m.title), marks[m.state] ? el('span', { class: 'st ' + (m.state === 'now' ? 'ok' : ''), 'data-mark': m.state }, marks[m.state]) : null),
-      el('div', { class: 'chips2 dim c3s2' },
-        m.people && m.people.length ? el('span', { class: 'chip2', 'data-people': '' }, c3ic('user', 'sm'), m.people.join(', ')) : null,
-        m.initiative ? el('span', { class: 'chip2', 'data-init': '' }, c3ic('init', 'sm'), m.initiative) : null),
-      el('div', { class: 'tcols' }, el('div', null, el('div', { class: 'lab mono' }, 'Prepared'), prep), el('div', null, el('div', { class: 'lab mono' }, 'Before the meeting'), bef))));
+  const over = m.state === 'past'; const isNow = m.state === 'now'; const isNext = m.state === 'next';
+  const chips = [el('span', { class: 'chip2', 'data-when': '' }, c3ic('clock', 'sm'), hm(m.start) + (m.minutes ? ' · ' + length(m.minutes) : ''))];
+  if (over) chips.push(el('span', { class: 'tag', 'data-mark': 'over' }, 'over'));
+  else if (isNow) chips.push(el('span', { class: 'tag acc', 'data-mark': 'now' }, 'now'));
+  else if (isNext) chips.push(el('span', { class: 'tag acc', 'data-mark': 'next' }, 'next'));
+  if (m.people && m.people.length) chips.push(el('span', { class: 'dim', 'data-people': '' }, m.people.map(first).join(', ')));
+  if (m.initiative) chips.push(el('span', { class: 'chip2', 'data-init': '' }, c3ic('init', 'sm'), m.initiative));
+  const prepared = m.prepared || []; const before = m.before || [];
+  if (!over) {
+    prepared.forEach((x) => chips.push(el('span', { class: 'chip2', 'data-prep': x.kind }, c3ic(x.kind === 'prep' ? 'spark' : 'doc', 'sm'), x.text)));
+    if (!prepared.length && !before.length) chips.push(el('span', { class: 'tag', 'data-prep': 'none' }, 'nothing prepared'));
+    before.forEach((x) => chips.push(el('span', { class: 'chip2', 'data-before': x.id }, c3ic('todo', 'sm'), 'Before you go: ' + x.title, x.due ? el('span', { class: 'dim' }, ' · due ' + x.due) : null)));
+    if (!before.length && prepared.length) chips.push(el('span', { class: 'tag ok', 'data-prep-ready': '' }, 'prep ready'));
+  }
+  return el('li', { class: 'nrow' + (over ? ' over' : ''), 'data-ref-row': '', 'data-today-row': m.id, 'data-state': m.state },
+    el('span', { class: 'ki' + (isNow || isNext ? ' hot' : '') }, c3ic('cal')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, m.title), el('div', { class: 'chips' }, ...chips)),
+    el('span'));
+}
+
+/** The lead line over the list: counts only, from the rows. Pure enough to test: takes the rows of the day. */
+export function leadOf(t) {
+  const left = t.filter((m) => m.state !== 'past'); const cur = t.find((m) => m.state === 'now'); const nxt = cur || t.find((m) => m.state === 'next');
+  const prepped = left.filter((m) => !(m.before || []).length).length;
+  return { left: left.length, prepped, cur: !!cur, nxt: nxt || null, held: t.length - left.length };
+}
+
+function lead(t) {
+  const L = leadOf(t); const R = 17; const C = 2 * Math.PI * R;
+  if (!L.nxt) return el('div', { class: 'lh', 'data-today-lead': '' }, el('span', { class: 'ki' }, c3ic('cal')), el('div', { class: 'lh-main' }, el('b', null, 'No meetings left today'), el('div', { class: 'dim' }, L.held + ' held today.')), el('span'));
+  const NS = 'http://www.w3.org/2000/svg';
+  const mk = (tag, a) => { const n = document.createElementNS(NS, tag); for (const k of Object.keys(a)) n.setAttribute(k, a[k]); return n; };
+  const ring = mk('svg', { width: 44, height: 44, viewBox: '0 0 44 44', role: 'img', 'aria-label': L.prepped + ' of ' + L.left });
+  ring.append(mk('circle', { cx: 22, cy: 22, r: R, fill: 'none', stroke: 'var(--muted)', 'stroke-width': 6 }),
+    mk('circle', { cx: 22, cy: 22, r: R, fill: 'none', class: 'rg', stroke: 'var(--acc)', 'stroke-width': 6, 'stroke-linecap': 'round', 'stroke-dasharray': (C * L.prepped / Math.max(1, L.left)).toFixed(2) + ' ' + C.toFixed(2), transform: 'rotate(-90 22 22)' }));
+  const tx = mk('text', { x: 22, y: 26, 'text-anchor': 'middle', class: 't' }); tx.textContent = L.prepped + '/' + L.left; ring.append(tx);
+  return el('div', { class: 'lh', 'data-today-lead': '' }, el('span', { class: 'ki' }, c3ic('cal')),
+    el('div', { class: 'lh-main' }, el('b', null, L.nxt.title + (L.cur ? ' is on now' : ' at ' + hm(L.nxt.start) + ' is next')),
+      el('div', { class: 'dim' }, L.left + (L.left === 1 ? ' meeting' : ' meetings') + ' left today. ' + L.prepped + ' of ' + L.left + ' prepped.')), ring);
 }
 
 export function todaySection() {
+  ensureComponentsCss();
   const list = el('ul', { class: 'list', role: 'list' });
+  const leadHost = el('div');
   const count = el('span', { class: 'bdg g' }, '0');
+  ensureSprite();
+  const open = button({ label: 'Open calendar', variant: 'ghost', size: 'sm', icon: 'calendar', attrs: { 'data-pg-opencal': '' }, onClick: (e) => openCalendarPopup(e.currentTarget) });
   const box = el('section', { class: 'card sect', 'data-c3pg': 'today', 'aria-label': 'Today' },
-    el('div', { class: 'sh2' }, el('h2', null, c3ic('cal', 'sm'), 'Today ', count)), list);
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('cal', 'sm'), 'Today ', count), el('span', { class: 'chips2' }, open)), leadHost, list);
   list.replaceChildren(el('li', { class: 'fold', 'data-today-state': 'loading' }, c3ic('clock', 'sm'), 'Reading today\'s meetings.'));
   onBriefPage((j) => {
-    if (!j || j.ok === false) { count.textContent = '0'; list.replaceChildren(el('li', { class: 'fold', role: 'status', 'data-today-state': 'error' }, c3ic('alert', 'sm'), 'Today\'s meetings could not be read: ' + ((j && j.error) || 'unreadable'))); return; }
+    if (!j || j.ok === false) { count.textContent = '0'; leadHost.replaceChildren(); list.replaceChildren(el('li', { class: 'fold', role: 'status', 'data-today-state': 'error' }, c3ic('alert', 'sm'), 'Today\'s meetings could not be read: ' + ((j && j.error) || 'unreadable'))); return; }
     const t = j.today || [];
     count.textContent = String(t.length);
+    leadHost.replaceChildren(...(t.length ? [lead(t)] : []));
     list.replaceChildren(...(t.length ? t.map(meetingRow) : [el('li', { class: 'fold', 'data-today-state': 'empty' }, c3ic('moon', 'sm'), 'No meetings today in the calendar PMOS holds.')]));
   });
   return box;

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

@@ -131,7 +131,8 @@ export function needRow(n, i, ctx = {}) {
   const c0 = build();
   xp = makeXp(c0); xi = xp.firstChild;
 
-  const chips = [ag ? el('span', { class: 'chip2', style: 'gap:4px', title: 'Swipe right to let the agent act' }, c3ic('spark', 'sm'), 'agent move') : null,
+  const chips = [el('span', { class: 'tag acc', 'data-decision': '' }, 'decision'), n.hard ? el('span', { class: 'tag', 'data-hard': '' }, 'hard to undo') : null,
+    ag ? el('span', { class: 'chip2', title: 'Swipe right to let the agent act' }, c3ic('spark', 'sm'), 'agent move') : null,
     n.p ? el('span', { class: 'fl ' + n.p.toLowerCase() }, n.p) : null, n.time ? el('span', { class: 'chip2' }, c3ic('clock', 'sm'), n.time) : null,
     n.who ? avatar(n.who) : null, n.branch ? el('span', { class: 'chip2' }, c3ic('branch', 'sm'), n.branch) : null,
     n.old ? el('span', { class: 'st warn' }, c3ic('clock', 'sm'), 'old') : null, n.src ? el('span', { class: 'tag' }, n.src) : null,