create-pmos 0.133.0 → 0.135.0

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

@@ -2,9 +2,11 @@
  * Flow reference: the restructure mockup's 33-reports.js (dashboards with scope buttons, edit mode, library, share sheet). Not a pixel spec.
  *
  *   mountReports(host, ctx) -> { dispose() }
- *     ctx = { ws, pmGet?, drafts?(hostEl), goInit?(id, title) }
+ *     ctx = { ws, pmGet?, deck?(hostEl), more?(hostEl), drafts?(hostEl), goInit?(id, title) }
  *       ws       the workspace id; every read names it
  *       pmGet    the shell's GET helper (default: http.js pmGet)
+ *       deck     mounts the page's headline deck into hostEl, above the tab bar (the shell mounts its Plan deck for the Reports scope).
+ *       more     mounts what the Briefing used to carry below Needs you (Handled, What I could stop, Data you can lean on) into hostEl, on the Drafts tab.
  *       drafts   mounts the old Reports content (the four families, the claims check, the outbox) into hostEl. Called once, the
  *                first time the Drafts tab opens. Without it the Drafts tab says the drafts are not available on this page.
  *       goInit   opens an initiative from a row inside a report (a bet, a commitment). Default: the Initiative dashboard of it.
@@ -17,22 +19,27 @@
  *               Edit: up and down arrows, Remove (with Undo), Add from the report library, Reset to default. Every change POSTs
  *               /api/report-dashboards/layout { key, reports } (reports: null resets). A failed POST is toasted; the page keeps the change.
  *               Share: a sheet (c3-sheet.js) with the report frame (Headline, Sections, Needs your call, Sources) for Leadership or Team.
- *               "Save as draft" queues ONE draft through POST /api/outbox/draft. Nothing is sent. The schedule control is off and says why.
+ *               "Make a draft now" queues ONE draft through POST /api/outbox/draft. Nothing is sent. Schedule: Not scheduled, weekly or monthly,
+ *               for the sheet's audience, saved by POST /api/report-dashboards/schedule { key, plan, audience, ws }. A run makes a ready draft
+ *               and a notice on the bell (lib/report-schedules.js); nothing is sent.
  *   Library     one row per report (data-home): the title, the question, the source and where it is used. The row opens the card in place.
- *   Drafts      ctx.drafts(host).
- * DATA: GET /api/report-dashboards?ws= -> { library, layouts, defaults, boards, initiatives }. In demo mode c3-demo-rep3.js answers both reads
- * and the layout POST. Nothing here invents a number: a report with no rows in the scope draws its builder's own empty card. */
+ *   Drafts      the dashboard drafts the Share sheet made (GET /api/outbox, subject "<dashboard> for <audience>"; Preview, Discard with Undo through
+ *               POST /api/outbox/discard; "Made by schedule" or "Made by you"), Scheduled (each schedule and its next draft), ctx.more(host), then "Reports to send": ctx.drafts(host), the old
+ *               report families, their claims check and the outbox queue.
+ * DATA: GET /api/report-dashboards?ws= -> { library, layouts, defaults, boards, initiatives, schedules }. In demo mode c3-demo-rep3.js answers both reads
+ * and the layout and schedule POSTs. Nothing here invents a number: a report with no rows in the scope draws its builder's own empty card. */
 import { el } from './dom.js';
-import { button } from './primitives.js';
+import { button, ensureComponentsCss } from './primitives.js';
 import { pmGet as httpGet, pmPost } from './http.js';
 import { ensureC3Css, c3ic, c3Phone } from './pm-work-view.js';
 import { PANEL_BUILDERS, todayStr } from './c3-cal-strategy.js';
 import { makeXp, attachExpand } from './c3-expand.js';
 import { openSheet } from './c3-sheet.js';
 import { toast } from './c3-toast.js';
+import '/lib/report-frame.js';   // sets self.ReportFrame (lib/report-frame.js, shared with the scheduled run)
 
 const SCOPES = [['portfolio', 'Portfolio'], ['board', 'Board'], ['initiative', 'Initiative']];
-const TABS = [['dash', 'Dashboards', 'report'], ['lib', 'Library', 'doc'], ['drafts', 'Drafts', 'out']];
+const TABS = [['dash', 'Dashboards', 'report'], ['lib', 'Library', 'doc'], ['drafts', 'Drafts', 'mail']];
 const ICON = { north: 'target', outcomes: 'target', signals: 'alert', delivery: 'clock', maturity: 'flag', bets: 'flag', synergy: 'init' };
 const TTL = 60000;
 
@@ -64,13 +71,12 @@ function readData(get, ws, scope, id) {
 }
 const cachedData = (scope, id) => { const c = cache.get(dataKey(scope, id)); return c && Date.now() - c.at < TTL ? c.model : null; };
 
-/* The model the builders read, from the data answer, the way c3-strategy-panels.js build() makes it. */
-function modelOf(raw) {
-  const M = { ...raw, outcomes: raw.outcomes || [], signals: raw.signals || [] };
-  if (!M.signalsAll) M.signalsAll = M.signals.map((s) => ({ ...s }));
-  return M;
-}
-const builderOf = (rep) => (rep && (rep.builder || rep.id)) || '';
+/* The model, the report text and the frame are lib/report-frame.js, the one file the scheduled run also reads (served as /lib/report-frame.js). */
+const RF = self.ReportFrame;
+const { modelOf, builderOf, plural } = RF;
+export const readingOf = RF.readingOf;
+export const frameOf = RF.frameOf;
+export const draftBody = RF.draftBody;
 function drawReport(rep, raw, bctx) {
   const M = modelOf(raw); const live = !M.demo;
   const c = { ...bctx, today: bctx.today || M.today || todayStr(Date.now()), data: { range: M.range || null, gantt: [] } };
@@ -91,120 +97,59 @@ function drawReport(rep, raw, bctx) {
 const failCard = (rep, why) => el('section', { class: 'card', 'data-rp3-fail': rep ? rep.id : '' }, el('h3', null, c3ic(ICON[builderOf(rep)] || 'report'), rep ? rep.title : 'Report'),
   el('div', { class: 'fold' }, c3ic('alert', 'sm'), el('span', null, 'This report could not be drawn: ' + why + '.')));
 
-/* ── the text of a report, for the share frame: one sentence, the numbers behind it, and what needs a call ─────────────── */
-const fmt = (v) => (v == null ? '' : Number.isInteger(v) ? String(v) : String(Math.round(v * 100) / 100));
-const plural = (n, one, many) => n + ' ' + (n === 1 ? one : many);
-const ST_TXT = { done: 'done', ok: 'on time', risk: 'at risk', late: 'delayed', over: 'overdue', park: 'parked', prop: 'proposed', none: 'no status' };
-const SEV_TXT = { pivot: 'at the pivot line', drift: 'drifting', watch: 'on watch', up: 'upside' };
-export function readingOf(rep, raw) {
-  const M = modelOf(raw || {}); const b = builderOf(rep);
-  const out = { line: '', nums: [], needs: [] };
-  if (b === 'north') {
-    const N = M.north; const P = N && N.points;
-    if (!P || P.length < 2) { out.line = 'No north-star metric is recorded.'; return out; }
-    const p = P.find((x) => x.at === N.now) || P[P.length - 1]; const u = N.unit || '';
-    if (p.actual == null || !p.plan) { out.line = (N.label || 'The north star') + ' has no reading yet.'; return out; }
-    const v = Math.round((p.actual / p.plan - 1) * 100);
-    out.line = (N.label || 'The north star') + (v === 0 ? ' is on plan.' : ' is ' + Math.abs(v) + '% ' + (v < 0 ? 'behind' : 'ahead of') + ' plan.');
-    out.nums.push('Now ' + fmt(p.actual) + u + ', plan ' + fmt(p.plan) + u + '.');
-    return out;
-  }
-  if (b === 'outcomes') {
-    const L = M.outcomes;
-    if (!L.length) { out.line = 'No key result is scored.'; return out; }
-    const on = L.filter((k) => k.status === 'ok').length;
-    out.line = on + ' of ' + L.length + ' outcomes ' + (on === 1 ? 'is' : 'are') + ' on course.';
-    for (const k of L) {
-      const u = k.unit || '';
-      out.nums.push(k.status === 'unscored' ? k.name + ': not scored.' : k.name + ': now ' + fmt(k.now) + u + ', should be ' + fmt(k.expected) + u + ', target ' + fmt(k.target) + u + '.');
-      if (k.status === 'off') out.needs.push(k.name + ' is off course.');
-    }
-    return out;
-  }
-  if (b === 'signals') {
-    const L = M.signals;
-    if (!L.length) { out.line = 'No signal is open.'; return out; }
-    const by = {}; for (const s of L) by[s.sev] = (by[s.sev] || 0) + 1;
-    out.line = plural(L.length, 'signal is', 'signals are') + ' open: ' + Object.keys(by).map((k) => by[k] + ' ' + (SEV_TXT[k] || k)).join(', ') + '.';
-    for (const s of L) { out.nums.push(s.t + '. ' + (s.ev || '')); if (s.sev === 'pivot' || s.sev === 'drift') out.needs.push(s.t + '.'); }
-    return out;
-  }
-  if (b === 'delivery') {
-    const R = (M.delivery && M.delivery.rows) || [];
-    if (!R.length) { out.line = 'No commitment has a promised date this quarter.'; return out; }
-    const n = (f) => R.filter(f).length;
-    out.line = n((r) => r.st === 'ok' || r.st === 'done') + ' of ' + R.length + ' commitments are on time or done, ' + n((r) => r.st === 'risk') + ' at risk, ' + n((r) => r.st === 'late' || r.st === 'over') + ' delayed or overdue.';
-    for (const r of R) { out.nums.push(r.n + ': ' + (ST_TXT[r.st] || r.st) + '.'); if (r.st === 'late' || r.st === 'over') out.needs.push(r.n + ' is ' + ST_TXT[r.st] + '.'); }
-    return out;
-  }
-  if (b === 'maturity') {
-    const T = M.maturity;
-    if (!T || !T.pillars || !T.pillars.length) { out.line = 'No pillar maturity is recorded.'; return out; }
-    out.line = T.pillars.filter((p) => p.proj >= p.tgt).length + ' of ' + T.pillars.length + ' pillars are on course for ' + T.target_label + '.';
-    for (const p of T.pillars) out.nums.push(p.n + ': stage ' + p.now + ', target ' + p.tgt + ', projected ' + p.proj + '.');
-    return out;
-  }
-  if (b === 'bets') {
-    const T = M.timeline;
-    if (!T || !T.rows || !T.rows.length) { out.line = 'No bet is recorded.'; return out; }
-    const cp = (T.checkpoints || [])[0];
-    out.line = plural(T.rows.length, 'bet is', 'bets are') + ' on the plan. ' + (cp ? 'The next checkpoint is ' + cp.label + '.' : 'No checkpoint is recorded.');
-    for (const r of T.rows) out.nums.push(r.title + ': ' + (ST_TXT[r.st] || 'no status') + '.');
-    return out;
-  }
-  if (b === 'synergy') {
-    const S = M.synergy;
-    if (!S || !S.rows || !S.rows.length) { out.line = 'No bet is recorded.'; return out; }
-    if (!S.columns || !S.columns.length) { out.line = 'No key result exists to measure the bets against.'; return out; }
-    const active = S.rows.filter((r) => !r.parked);
-    const gaps = S.columns.filter((_, j) => !active.some((r) => r.weights[j] > 0));
-    out.line = plural(active.length, 'active bet covers', 'active bets cover') + ' ' + (S.columns.length - gaps.length) + ' of ' + S.columns.length + ' ' + (S.unit || 'key results') + '.';
-    for (const r of S.rows) out.nums.push(r.title + (r.parked ? ': parked.' : ': active.'));
-    for (const g of gaps) out.needs.push('No active bet covers ' + g.n + '.');
-    return out;
-  }
-  out.line = 'This report has no text form.';
-  return out;
-}
-
-/* The report frame of a dashboard, as data (the sheet and the draft body are both drawn from it). */
-export function frameOf({ title, reports, raw, audience, today }) {
-  const lead = audience !== 'Team';
-  const sections = reports.map((r) => { const t = readingOf(r, raw); return { id: r.id, title: r.title, line: t.line, nums: lead ? [] : t.nums, needs: t.needs }; });
-  const needs = [...new Set(sections.flatMap((s) => s.needs))];
-  const headline = !sections.length ? 'This dashboard has no reports yet.'
-    : needs.length ? needs[0] + (needs.length > 1 ? ' ' + plural(needs.length - 1, 'more thing needs', 'more things need') + ' your call.' : '') : sections[0].line;
-  const sources = [...new Set(reports.map((r) => r.source).filter(Boolean))];
-  return { title, audience: lead ? 'Leadership' : 'Team', today, headline, sections, needs, sources };
-}
-export function draftBody(F) {
-  const L = [F.title + ' for ' + F.audience + ', ' + F.today, 'Headline: ' + F.headline, '', 'Sections'];
-  for (const s of F.sections) { L.push(s.title, '- ' + s.line + ' [reported]'); for (const n of s.nums) L.push('- ' + n + ' [reported]'); }
-  L.push('', 'Needs your call');
-  if (F.needs.length) for (const n of F.needs) L.push('- ' + n + ' [reported]'); else L.push('Nothing needs your call in this scope.');
-  L.push('', 'Sources: ' + (F.sources.length ? F.sources.join('; ') : 'none') + '. Read on ' + F.today + '.');
-  return L.join('\n');
-}
 
 /* ── the page ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
 /* every control comes from primitives.js button(); the children are the console3 icon and text, which keep the suites' hooks */
 const mk = (variant, attrs, kids) => { const { onclick, disabled, class: cls, ...rest } = attrs || {}; const b = button({ label: '', variant, size: 'sm', onClick: onclick, disabled, attrs: { ...rest, class: cls } }); b.replaceChildren(...kids.filter((k) => k != null)); return b; };
 const btn = (attrs, ...kids) => mk('outline', { ...attrs, class: 'rp3-btn' }, kids);
-const iconBtn = (label, icon, attrs, cls) => mk('ghost', { title: label, 'aria-label': label, ...attrs, class: 'rp3-btn rp3-ib' + (cls ? ' ' + cls : '') }, [c3ic(icon, 'sm')]);
 const pill = (attrs, ...kids) => mk('ghost', attrs, kids);
+const btnV = (variant, attrs, ...kids) => mk(variant, { ...attrs, class: 'rp3-btn' }, kids);
+/* The mockup's UI.sect: a section card with a head row (icon, title, count) and, on the right, controls. `attrs` go on the section. */
+const sect = (title, icon, count, body, right, attrs) => el('section', { ...(attrs || {}), class: 'card sect' + (attrs && attrs.class ? ' ' + attrs.class : '') },
+  el('div', { class: 'sh2' }, el('h2', null, icon ? c3ic(icon, 'sm') : null, title, count != null ? el('span', { class: 'bdg g' }, String(count)) : null), right || null), ...[].concat(body));
+/* A builder card draws its own head (icon, title, question line). The tile's head row names the report, so only the question line stays. */
+function trimHead(card) {
+  const h = card && card.querySelector && card.querySelector(':scope > h3');
+  if (!h) return card;
+  const line = h.querySelector('.dim');
+  if (line) h.replaceChildren(line); else h.remove();
+  return card;
+}
+const DAY = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const dateOf = (iso) => { const d = new Date(iso); return isNaN(d) ? '' : DAY[d.getUTCDay()] + ' ' + d.getUTCDate() + ' ' + MON[d.getUTCMonth()]; };
+/* A dashboard draft is an outbox entry the Share sheet made: its subject is "<dashboard> for <audience>". */
+const DRAFT_RE = /^(.*) for (Leadership|Team)$/;
+/* A schedule per dashboard (lib/report-schedules.js PLANS): it makes a ready draft and a notice on the bell. Nothing is sent. */
+const SCHEDULES = [['none', 'Not scheduled'], ['weekly', 'Weekly, Mondays 08:00'], ['monthly', 'Monthly, 1st at 08:00']];
+const SCHED_TXT = Object.fromEntries(SCHEDULES);
+/* The next slot, host-local, as lib/schedule-logic.js nextSlot reads PLANS: Mondays 08:00, or the 1st at 08:00. */
+export function nextDraftOf(plan, now = new Date()) {
+  const d = new Date(now); d.setHours(8, 0, 0, 0);
+  if (plan === 'weekly') { for (let i = 0; i < 8; i++) { if (d.getDay() === 1 && d > now) return d; d.setDate(d.getDate() + 1); } return null; }
+  if (plan === 'monthly') { d.setDate(1); if (d <= now) d.setMonth(d.getMonth() + 1); return d; }
+  return null;
+}
+const localDate = (d) => (d ? DAY[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()] + ', 08:00' : '');
+
+/* The live page, so the shell can open one of its tabs (a bell notice opens Drafts). A request before the page mounts waits for it. */
+let livePage = null; let wantView = null;
+export function showReportsView(view) { if (livePage) livePage.showTab(view); else wantView = view; }
 
 export function mountReports(host, ctx) {
-  ensureC3Css(); ensureReportsCss();
+  ensureC3Css(); ensureComponentsCss(); ensureReportsCss();
   const C = ctx || {};
   const get = C.pmGet || httpGet;
-  const S = { tab: 'dash', scope: 'portfolio', pick: { board: '', initiative: '' }, meta: null, metaErr: null, layouts: {}, edit: false, drafts: false, alive: true, libOpen: new Set() };
-  const root = el('div', { class: 'rp3', 'data-rp3': '' });
+  const S = { schedules: {}, tab: 'dash', scope: 'portfolio', pick: { board: '', initiative: '' }, meta: null, metaErr: null, layouts: {}, edit: false, drafts: false, alive: true, libOpen: new Set(), outbox: null, outboxErr: null };
+  const root = el('div', { class: 'rp3 calwrap', 'data-rp3': '' });
   const stopPhone = host.closest && host.closest('.c3') ? () => {} : c3Phone(root);
   if (!(host.closest && host.closest('.c3'))) root.classList.add('c3');
   const tabBar = el('div', { class: 'seg rp3-tabs', role: 'tablist', 'aria-label': 'Reports' });
+  const scopeHost = el('div', { class: 'chips2 rp3-scope', role: 'group', 'aria-label': 'Scope' });
   const panes = { dash: el('div', { class: 'rp3-pane', role: 'tabpanel', 'data-rp3-pane': 'dash' }), lib: el('div', { class: 'rp3-pane', role: 'tabpanel', 'data-rp3-pane': 'lib', hidden: true }), drafts: el('div', { class: 'rp3-pane', role: 'tabpanel', 'data-rp3-pane': 'drafts', hidden: true }) };
-  root.append(el('p', { class: 'rp3-intro' }, 'Dashboards made of reports. Each report answers one question from the repository\'s records.'), tabBar, panes.dash, panes.lib, panes.drafts);
+  const deckHost = el('div', { 'data-rp3-deck': '' });
+  root.append(deckHost, el('div', { class: 'calbar' }, tabBar, scopeHost), panes.dash, panes.lib, panes.drafts);
   host.replaceChildren(root);
+  if (typeof C.deck === 'function') C.deck(deckHost); else deckHost.hidden = true;
 
   const lib = () => (S.meta && S.meta.library) || [];
   const repOf = (id) => lib().find((r) => r.id === id) || null;
@@ -218,6 +163,8 @@ export function mountReports(host, ctx) {
   const defaultOf = (scope) => known(S.meta && S.meta.defaults && S.meta.defaults[scope]);
   const hasOwn = (scope, id) => Object.prototype.hasOwnProperty.call(S.layouts, keyOf(scope, id));
   const layoutOf = (scope, id) => (hasOwn(scope, id) ? known(S.layouts[keyOf(scope, id)]) : defaultOf(scope));
+  const schedOf = (scope, id) => S.schedules[keyOf(scope, id)] || null;
+  const titleOfKey = (key) => { if (key.indexOf(':') < 0) return 'Portfolio'; const i = key.indexOf(':'); const sc = key.slice(0, i); return (sc === 'board' ? 'Board: ' : 'Initiative: ') + nameOf(sc, key.slice(i + 1)); };
   const goInit = (id, title) => {
     if (C.goInit) { C.goInit(id, title); return; }
     if (!listOf('initiative').some((x) => x.id === id)) { toast('No dashboard is kept for ' + (title || id) + '.'); return; }
@@ -226,60 +173,63 @@ export function mountReports(host, ctx) {
 
   /* tabs */
   function drawTabs() {
-    tabBar.replaceChildren(...TABS.map(([id, label, icon]) => pill({ type: 'button', role: 'tab', 'aria-selected': String(S.tab === id), tabindex: S.tab === id ? '0' : '-1', 'data-rp3-tab': id, onclick: () => showTab(id) }, c3ic(icon, 'sm'), label,
-      id === 'lib' && S.meta ? el('span', { class: 'tag' }, String(lib().length)) : null)));
+    tabBar.replaceChildren(...TABS.map(([id, label, icon]) => pill({ type: 'button', role: 'tab', 'aria-selected': String(S.tab === id), 'aria-pressed': String(S.tab === id), tabindex: S.tab === id ? '0' : '-1', 'data-rp3-tab': id, onclick: () => showTab(id) }, c3ic(icon, 'sm'), label,
+      id === 'lib' && S.meta ? el('span', { class: 'bdg g' }, String(lib().length)) : id === 'drafts' && S.outbox && dashDrafts().length ? el('span', { class: 'bdg g', 'data-rp3-draftcount': '' }, String(dashDrafts().length)) : null)));
+    scopeHost.hidden = S.tab !== 'dash';
   }
   function showTab(id) {
     S.tab = id; drawTabs();
     for (const k of Object.keys(panes)) panes[k].hidden = k !== id;
     if (id === 'lib') drawLib();
-    if (id === 'drafts' && !S.drafts) {
-      S.drafts = true;
-      if (typeof C.drafts === 'function') { const h = el('div', { class: 'rp3-drafts', 'data-rp3-drafts': '' }); panes.drafts.replaceChildren(h); C.drafts(h); }
-      else panes.drafts.replaceChildren(el('div', { class: 'fold' }, c3ic('info', 'sm'), 'The report drafts are not available on this page.'));
-    }
+    if (id === 'drafts') { drawDrafts(); loadOutbox(); }
   }
 
   /* ── Dashboards ── */
-  function scopeBar() {
-    const seg = el('div', { class: 'seg rp3-scope', role: 'group', 'aria-label': 'Scope' }, SCOPES.map(([id, label]) => pill({ 'aria-pressed': String(S.scope === id), 'data-rp3-scope': id,
-      onclick: () => { if (S.scope === id) return; S.scope = id; S.edit = false; drawDash(); } }, label)));
-    const out = [seg];
-    if (S.scope !== 'portfolio') {
-      const L = listOf(S.scope);
-      const lab = S.scope === 'board' ? 'Board' : 'Initiative';
-      const sel = el('select', { class: 'rp3-select', 'aria-label': 'Choose the ' + lab.toLowerCase(), 'data-rp3-pick': S.scope, disabled: !L.length,
-        onchange: (e) => { S.pick[S.scope] = e.target.value; S.edit = false; drawDash(); } },
-      L.length ? L.map((x) => el('option', { value: x.id, selected: x.id === S.pick[S.scope] }, S.scope === 'initiative' && x.board ? (x.title || x.id) + ' (' + nameOf('board', x.board) + ')' : (x.title || x.id))) : el('option', { value: '' }, 'None recorded'));
-      out.push(el('label', { class: 'rp3-pick' }, el('span', { class: 'dim' }, lab), sel));
-    }
-    return el('div', { class: 'rp3-bar' }, out);
+  /* The scope pills sit on the tab row (the mockup's calbar); the pill names the picked board or initiative. */
+  function drawScope() {
+    scopeHost.replaceChildren(...SCOPES.map(([id, label]) => {
+      const picked = id !== 'portfolio' && S.pick[id] ? ' (' + nameOf(id, S.pick[id]) + ')' : '';
+      return pill({ type: 'button', class: 'pill', 'aria-pressed': String(S.scope === id), 'data-rp3-scope': id,
+        onclick: () => { if (S.scope === id) return; S.scope = id; S.edit = false; drawDash(); } }, label + picked);
+    }));
+  }
+  /* The chooser of the board or the initiative stays a real select (the mockup has one fixed name): it sits in the dashboard head. */
+  function chooser() {
+    const L = listOf(S.scope);
+    const lab = S.scope === 'board' ? 'Board' : 'Initiative';
+    const sel = el('select', { class: 'rp3-select', 'aria-label': 'Choose the ' + lab.toLowerCase(), 'data-rp3-pick': S.scope, disabled: !L.length,
+      onchange: (e) => { S.pick[S.scope] = e.target.value; S.edit = false; drawDash(); } },
+    L.length ? L.map((x) => el('option', { value: x.id, selected: x.id === S.pick[S.scope] }, S.scope === 'initiative' && x.board ? (x.title || x.id) + ' (' + nameOf('board', x.board) + ')' : (x.title || x.id))) : el('option', { value: '' }, 'None recorded'));
+    return el('label', { class: 'rp3-pick' }, el('span', { class: 'dim' }, lab), sel);
   }
 
   function widget(rep, i, n, model) {
     const body = !model ? el('p', { class: 'dim mono rp3-status', role: 'status', 'data-rp3-loading': rep.id }, 'Reading the repository')
       : !model.ok ? el('p', { class: 'dim mono rp3-status', role: 'status', 'data-rp3-error': rep.id }, 'This report could not be read: ' + model.error)
         : drawReport(rep, model, { goInit });
-    const w = el('article', { class: 'rp3-w', 'data-ref-row': rep.id, 'data-rp3-w': rep.id });
-    if (S.edit) {
-      w.append(el('div', { class: 'rp3-wh' }, el('b', { class: 'rp3-wt' }, rep.title), el('span', { class: 'rp3-acts' },
-        iconBtn('Move ' + rep.title + ' up', 'prev', { 'data-rp3-up': rep.id, disabled: i === 0, onclick: () => move(rep.id, -1) }, 'rp3-rot'),
-        iconBtn('Move ' + rep.title + ' down', 'next', { 'data-rp3-down': rep.id, disabled: i === n - 1, onclick: () => move(rep.id, 1) }, 'rp3-rot'),
-        btn({ 'data-rp3-rm': rep.id, 'aria-label': 'Remove ' + rep.title, onclick: () => remove(rep.id) }, c3ic('x', 'sm'), 'Remove'))));
-    }
-    w.append(body);
+    /* the mockup's tile: a section card, head row with the title and one ghost arrow (or the edit arrows), the report, then its source */
     const about = el('div', { class: 'rp3-about', 'data-rp3-about': rep.id }, c3ic('next', 'sm chev'), el('span', null, 'About this report'));
     const xp = makeXp(el('div', { class: 'rp3-case' },
       el('p', null, el('b', null, rep.title + '. '), rep.question || ''),
       el('p', { class: 'dim' }, 'Source: ' + (rep.source || 'not named') + '. Used on: ' + usedOn(rep.id) + '.'),
       btn({ 'data-rp3-golib': rep.id, onclick: () => openInLibrary(rep.id) }, c3ic('doc', 'sm'), 'Open in the library')));
     attachExpand(about, xp, { key: 'rp3w-' + rep.id });
-    w.append(about, xp);
+    const ib = (label, icon, attrs) => mk('ghost', { title: label, 'aria-label': label, class: 'ib sm', ...attrs }, [c3ic(icon, 'sm')]);
+    const right = S.edit
+      ? el('span', { class: 'chips2' },
+        ib('Move ' + rep.title + ' up', 'prev', { class: 'ib sm rp3-rot', 'data-rp3-up': rep.id, disabled: i === 0, onclick: () => move(rep.id, -1) }),
+        ib('Move ' + rep.title + ' down', 'next', { class: 'ib sm rp3-rot', 'data-rp3-down': rep.id, disabled: i === n - 1, onclick: () => move(rep.id, 1) }),
+        ib('Remove ' + rep.title + ' from this dashboard', 'x', { 'data-rp3-rm': rep.id, onclick: () => remove(rep.id) }))
+      : el('span', { class: 'chips2' }, ib('Open ' + rep.title, 'next', { 'data-rp3-open': rep.id, title: 'Open the report', onclick: () => about.click() }));
+    const w = sect(rep.title, null, null, [trimHead(body), el('div', { class: 'chips' }, el('span', { class: 'chip2', title: 'Where this report reads from' }, rep.source || 'no source named')), about, xp], right,
+      { 'data-ref-row': rep.id, 'data-rp3-w': rep.id });
+    w.classList.add('rp3-w');
     return w;
   }
 
   function drawDash() {
     if (!S.alive) return;
+    drawScope();
     const P = panes.dash;
     if (S.metaErr) { P.replaceChildren(el('div', { class: 'fold', role: 'status', 'data-rp3-error': 'meta' }, c3ic('alert', 'sm'), 'The dashboards could not be read: ' + S.metaErr)); return; }
     if (!S.meta) { P.replaceChildren(el('p', { class: 'dim mono rp3-status', role: 'status', 'data-rp3-loading': 'meta' }, 'Reading the repository')); return; }
@@ -289,34 +239,39 @@ export function mountReports(host, ctx) {
     const ids = noScope ? [] : layoutOf(S.scope, id);
     const own = !noScope && hasOwn(S.scope, id);
     root.classList.toggle('editing', S.edit);
-    const head = el('div', { class: 'rp3-head' },
-      el('div', { class: 'rp3-ttl' }, el('h2', { 'data-rp3-title': '' }, noScope ? (S.scope === 'board' ? 'Board' : 'Initiative') : dashTitle()),
-        el('span', { class: 'dim', 'data-rp3-count': String(ids.length) }, noScope ? '' : plural(ids.length, 'report', 'reports') + (own ? ', your layout' : ', the default layout'))),
-      noScope ? null : el('span', { class: 'rp3-acts' },
-        btn({ 'data-rp3-share': '', onclick: () => share(ids) }, c3ic('out', 'sm'), 'Share'),
-        S.edit ? btn({ 'data-rp3-reset': '', disabled: !own, title: own ? 'Return this scope to its default layout' : 'This scope shows its default layout', onclick: () => resetLayout() }, c3ic('undo', 'sm'), 'Reset to default') : null,
-        btn({ 'data-rp3-edit': '', 'aria-pressed': String(S.edit), onclick: () => { S.edit = !S.edit; drawDash(); } }, c3ic('edit', 'sm'), S.edit ? 'Done editing' : 'Edit dashboard')));
-    const kids = [scopeBar(), head];
+    drawScope();   // again: the pick above may have changed the pill's name
+    /* the mockup's .lh: report icon, bold title, one dim line (scope, count, schedule), then Share and Edit dashboard */
+    const head = el('div', { class: 'lh rp3-head' }, el('span', { class: 'ki' }, c3ic('report')),
+      el('div', { class: 'rp3-min0' }, el('b', { 'data-rp3-title': '' }, noScope ? (S.scope === 'board' ? 'Board' : 'Initiative') : dashTitle()),
+        el('div', { class: 'dim' }, noScope ? '' : [el('span', { 'data-rp3-count': String(ids.length) }, plural(ids.length, 'report', 'reports') + (own ? ', your layout' : ', the default layout')),
+          el('span', { 'data-rp3-schedline': '' }, ' · ' + (schedOf(S.scope, id) ? 'Scheduled: ' + SCHED_TXT[schedOf(S.scope, id).plan] + ', draft only' : 'Not scheduled'))]),
+        S.scope !== 'portfolio' ? chooser() : null),
+      noScope ? null : el('span', { class: 'chips2' },
+        btnV('outline', { 'data-rp3-share': '', onclick: () => share(ids) }, c3ic('out', 'sm'), 'Share'),
+        S.edit ? btnV('ghost', { 'data-rp3-reset': '', disabled: !own, title: own ? 'Return this scope to its default layout' : 'This scope shows its default layout', onclick: () => resetLayout() }, c3ic('undo', 'sm'), 'Reset to default') : null,
+        btnV(S.edit ? 'primary' : 'outline', { 'data-rp3-edit': '', 'aria-pressed': String(S.edit), onclick: () => { S.edit = !S.edit; drawDash(); } }, c3ic(S.edit ? 'check' : 'edit', 'sm'), S.edit ? 'Done editing' : 'Edit dashboard')));
+    const kids = [head];
     if (noScope) {
       kids.push(el('div', { class: 'fold', 'data-rp3-empty': S.scope }, c3ic('moon', 'sm'), S.scope === 'board'
         ? 'No board is recorded. A board is the domain of an initiative\'s anchor. It appears here when an initiative names one.'
         : 'No initiative is recorded. An initiative appears here when the repository holds its record.'));
-      P.replaceChildren(...kids); return;
+      P.replaceChildren(el('div', { class: 'calbody brief' }, ...kids)); return;
     }
-    if (S.edit) kids.push(el('p', { class: 'dim rp3-note' }, 'Use the arrows to move a report. Remove takes it off this dashboard only: it stays in the library. Your layout is kept for this scope in the runtime state, not in the repository.'));
+    if (S.edit) kids.push(el('div', { class: 'fold a rp3-note' }, c3ic('edit', 'sm'), 'Editing: reorder with the arrows, remove what this scope does not need, add from the library below. Reports are never deleted from the library.'));
     const model = cachedData(S.scope, id);
-    const grid = el('div', { class: 'rp3-grid', 'data-rp3-grid': keyOf(S.scope, id) });
+    const grid = el('div', { class: 'tiles rp3-grid' + (S.edit ? ' editing' : ''), 'data-rp3-grid': keyOf(S.scope, id) });
     const reps = ids.map(repOf);
     reps.forEach((r, i) => grid.append(widget(r, i, reps.length, model)));
     kids.push(reps.length ? grid : el('div', { class: 'fold', 'data-rp3-empty': 'layout' }, c3ic('moon', 'sm'), 'This dashboard has no reports. Press Edit dashboard and add one from the library.'));
     if (S.edit) {
       const free = lib().filter((r) => !ids.includes(r.id) && fits(r, S.scope));
-      kids.push(el('section', { class: 'sec rp3-add', 'data-rp3-addlist': '' }, el('div', { class: 'sh' }, el('h3', null, 'Add from the report library'), el('span', { class: 'r' }, free.length + ' available')),
-        free.length ? el('ul', { class: 'list' }, free.map((r) => el('li', { class: 'rp3-addrow', 'data-rp3-free': r.id }, el('div', { class: 'nb' }, el('b', null, r.title), el('div', { class: 'dim' }, r.question || '')),
-          btn({ 'data-rp3-add': r.id, 'aria-label': 'Add ' + r.title, onclick: () => add(r.id) }, c3ic('plus', 'sm'), 'Add'))))
-          : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Every report that fits this scope is on the dashboard.')));
+      kids.push(sect('Add from the report library', 'report', free.length, free.length
+        ? el('ul', { class: 'list', role: 'list' }, free.map((r) => el('li', { class: 'nrow', 'data-rp3-free': r.id }, el('span', { class: 'ki' }, c3ic('report')),
+          el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.title), el('div', { class: 'dim rp3-sub' }, r.question || '')),
+          el('div', { class: 'acts' }, btnV('outline', { 'data-rp3-add': r.id, 'aria-label': 'Add ' + r.title, onclick: () => add(r.id) }, c3ic('plus', 'sm'), 'Add')))))
+        : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Every report that fits this scope is on the dashboard.'), null, { 'data-rp3-addlist': '' }));
     }
-    P.replaceChildren(...kids);
+    P.replaceChildren(el('div', { class: 'calbody brief' }, ...kids));
     if (!model && reps.length) {
       const want = keyOf(S.scope, id);
       readData(get, C.ws, S.scope, id).then((m) => {
@@ -359,20 +314,23 @@ export function mountReports(host, ctx) {
   /* ── Share: the report frame for an audience, one draft in the outbox, a schedule that is not available ── */
   function share(ids) {
     const scope = S.scope; const id = curId(); const title = dashTitle(); const reps = ids.map(repOf).filter(Boolean);
-    const st = { aud: 'Leadership', saved: {}, busy: false, msg: '' };
+    const cur = schedOf(scope, id);
+    const st = { aud: cur ? cur.audience : 'Leadership', saved: {}, busy: false, msg: '', sched: cur ? cur.plan : 'none', saving: false };
     const body = el('div', { class: 'rp3-share', 'data-rp3-sheet': '' });
     const paint = (raw) => {
       const today = (raw && raw.today) || todayStr(Date.now());
       const F = frameOf({ title, reports: reps, raw: raw && raw.ok ? raw : {}, audience: st.aud, today });
-      const sec = (name, ...kids) => el('section', { 'data-rp3-frame': name }, el('h4', null, name), ...kids);
+      /* the frame in the mockup's cards: a .lh head, then Headline, Sections, Needs your call and Sources as section cards */
+      const sec = (name, icon, count, ...kids) => sect(name, icon, count, kids, null, { 'data-rp3-frame': name });
       const frame = el('div', { class: 'rp3-frame', 'data-rp3-aud': st.aud },
-        el('div', { class: 'chips2' }, el('span', { class: 'tag' }, 'Draft'), el('b', null, title), el('span', { class: 'dim' }, 'For ' + st.aud + ', ' + today)),
-        sec('Headline', el('p', { class: 'rp3-hl' }, F.headline)),
-        sec('Sections', ...(F.sections.length ? F.sections.flatMap((s) => [el('h5', null, s.title), el('p', null, s.line), s.nums.length ? el('ul', { class: 'rp3-nums', 'data-rp3-nums': s.id }, s.nums.map((t) => el('li', null, t))) : null]) : [el('p', { class: 'dim' }, 'Nothing to show.')])),
-        sec('Needs your call', ...(F.needs.length ? F.needs.map((t) => el('p', null, t)) : [el('p', { class: 'dim' }, 'Nothing needs your call in this scope.')])),
-        sec('Sources', el('p', { class: 'dim' }, (F.sources.length ? F.sources.join('; ') + '. ' : '') + 'Read from the repository on ' + today + '.')));
+        el('div', { class: 'lh' }, el('span', { class: 'ki' }, c3ic('mail')), el('div', { class: 'rp3-min0' }, el('b', null, title), el('div', { class: 'dim' }, 'For ' + st.aud + ' · ' + today)), el('span', { class: 'chip2' }, 'Draft')),
+        sec('Headline', null, null, el('div', { class: 'hero' }, el('b', { class: 'rp3-hl' }, F.headline))),
+        sec('Sections', null, F.sections.length, ...(F.sections.length ? [el('ul', { class: 'chgl' }, F.sections.map((s) => el('li', null, c3ic('report', 'sm'),
+          el('span', null, el('b', null, s.title), el('br'), s.line, s.nums.length ? el('ul', { class: 'rp3-nums', 'data-rp3-nums': s.id }, s.nums.map((t) => el('li', null, t))) : null), el('span', null))))] : [el('div', { class: 'fold' }, 'Nothing to show.')])),
+        sec('Needs your call', null, F.needs.length, ...(F.needs.length ? [el('ul', { class: 'chgl' }, F.needs.map((t) => el('li', { class: 'warn' }, c3ic('flag', 'sm'), el('span', null, t), el('span', null))))] : [el('div', { class: 'fold' }, 'Nothing needs your call in this scope.')])),
+        sec('Sources', null, null, el('div', { class: 'chips' }, F.sources.map((x) => el('span', { class: 'chip2' }, x))), el('div', { class: 'dim rp3-sub' }, 'Read from the repository on ' + today + '.')));
       const saved = st.saved[st.aud];
-      const saveBtn = btn({ class: 'rp3-btn rp3-pri', 'data-rp3-draft': '', disabled: st.busy || !!saved || !raw || !raw.ok,
+      const saveBtn = btnV('outline', { 'data-rp3-draft': '', disabled: st.busy || !!saved || !raw || !raw.ok,
         onclick: async () => {
           st.busy = true; paint(raw);
           const r = await pmPost('/api/outbox/draft', { channel: 'customer-note', recipient: st.aud, subject: title + ' for ' + st.aud, body: draftBody(F) });
@@ -382,18 +340,33 @@ export function mountReports(host, ctx) {
             st.msg = r.entry && r.entry.state === 'blocked' ? 'Saved in the outbox, but the claims check blocks it: ' + ((r.entry.claims && r.entry.claims.refused || []).join(' ') || 'a claim has no label') + '. Nothing was sent.'
               : 'Saved as one draft in the outbox. Nothing was sent: no channel is connected.';
           } else st.msg = 'The draft was not saved: ' + ((r && (r.error || r.reason)) || 'no answer') + '. Nothing was sent.';
-          toast(st.msg); paint(raw);
-        } }, c3ic('doc', 'sm'), saved ? 'Saved as draft' : st.busy ? 'Saving' : 'Save as draft');
-      body.replaceChildren(
-        el('div', { class: 'sec' }, el('div', { class: 'dim' }, 'Audience'),
-          el('div', { class: 'seg', role: 'group', 'aria-label': 'Audience' }, ['Leadership', 'Team'].map((a) => pill({ 'aria-pressed': String(st.aud === a), 'data-rp3-audbtn': a, onclick: () => { st.aud = a; st.msg = ''; paint(raw); } }, a))),
-          el('p', { class: 'dim' }, st.aud === 'Leadership' ? 'Short: one sentence per report, and what needs your call.' : 'Fuller: adds the numbers behind each sentence.')),
+          toast(st.msg); paint(raw); loadOutbox();
+        } }, c3ic('mail', 'sm'), saved ? 'Saved as draft' : st.busy ? 'Saving' : 'Make a draft now');
+      /* Schedule: one per dashboard. A run makes a ready draft in the outbox and a notice on the bell; nothing is sent (lib/report-schedules.js). */
+      const next = nextDraftOf(st.sched);
+      const saveSched = async () => {
+        st.saving = true; paint(raw);
+        const r = await pmPost('/api/report-dashboards/schedule', { key: keyOf(scope, id), plan: st.sched, audience: st.aud, ws: C.ws || null });
+        st.saving = false;
+        if (r && r.ok) {
+          S.schedules = r.schedules || {};
+          st.msg = st.sched === 'none' ? 'Schedule removed' : 'Scheduled: ' + SCHED_TXT[st.sched] + '. You get a draft and a notification.';
+          toast(st.msg); drawDash(); if (S.tab === 'drafts') drawDrafts();
+        } else { st.msg = 'The schedule was not saved: ' + ((r && (r.error || r.reason)) || 'no answer') + '.'; toast({ text: st.msg, tone: 'error', timeout: 6000 }); }
+        paint(raw);
+      };
+      const schedule = sect('Schedule', 'cal', null, [
+        el('div', { class: 'seg', role: 'group', 'aria-label': 'Send', 'data-rp3-sched': '' }, SCHEDULES.map(([k, label]) => pill({ type: 'button', 'aria-pressed': String(k === st.sched), 'data-sched': k, onclick: () => { st.sched = k; st.msg = ''; paint(raw); } }, label))),
+        next ? el('div', { class: 'dim rp3-sub', 'data-rp3-next': '' }, 'Next draft: ' + localDate(next)) : null,
+        el('div', { class: 'fold w rp3-why', id: 'rp3-sched-why' }, c3ic('alert', 'sm'), 'No sender channel is connected yet. A scheduled send makes a ready draft and notifies you. Nothing is sent to ' + (st.aud === 'Leadership' ? 'leadership' : 'the team') + ' until you connect a channel.'),
+        el('div', { class: 'chips2' }, btnV('primary', { 'data-rp3-sched-save': '', disabled: st.saving, onclick: saveSched }, st.saving ? 'Saving' : 'Save schedule'), saveBtn),
+        el('p', { class: 'dim rp3-sub rp3-flat', role: 'status', 'data-rp3-share-msg': '' }, st.msg || 'Make a draft now puts one draft in the outbox. Nothing is sent from this page.')],
+      null, { 'data-rp3-schedule': '', class: 'rp3-stack' });
+      body.replaceChildren(el('div', { class: 'calbody brief' },
+        el('div', { class: 'calbar' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Audience' }, ['Leadership', 'Team'].map((a) => pill({ type: 'button', 'aria-pressed': String(st.aud === a), 'data-rp3-audbtn': a, onclick: () => { st.aud = a; st.msg = ''; paint(raw); } }, a))),
+          el('span', { class: 'dim rp3-sub' }, st.aud === 'Leadership' ? 'Short: one sentence per report, and what needs your call.' : 'Fuller: adds the numbers behind each sentence.')),
         raw ? (raw.ok ? frame : el('div', { class: 'fold', role: 'status' }, c3ic('alert', 'sm'), 'The reports could not be read: ' + raw.error)) : el('p', { class: 'dim mono', role: 'status' }, 'Reading the repository'),
-        el('div', { class: 'rp3-acts rp3-wrap' }, saveBtn),
-        el('p', { class: 'dim', role: 'status', 'data-rp3-share-msg': '' }, st.msg || 'Save as draft puts one draft in the outbox. Nothing is sent from this page.'),
-        el('section', { class: 'sec', 'data-rp3-schedule': '' }, el('div', { class: 'sh' }, el('h3', null, 'Schedule')),
-          el('label', { class: 'rp3-pick' }, el('span', { class: 'dim' }, 'Send'), el('select', { class: 'rp3-select', disabled: true, 'aria-describedby': 'rp3-sched-why', 'data-rp3-sched': '' }, el('option', null, 'Not scheduled'))),
-          el('p', { class: 'rp3-why', id: 'rp3-sched-why' }, 'Scheduled sending is not available yet, because nothing is sent outward from this page. Nothing is stored or run for a schedule.')));
+        schedule));
     };
     const cached = cachedData(scope, id);
     openSheet({ title: 'Share: ' + title, icon: 'out', wide: true, body });
@@ -402,8 +375,12 @@ export function mountReports(host, ctx) {
   }
 
   /* ── Library: the home of every report ── */
-  function usedOn(rid) {
+  function usedOn(rid, short) {
     if (!S.meta) return 'nowhere yet';
+    if (short) {   // the mockup's chip: the scopes it is on, by short name
+      const sc = ['portfolio', 'board', 'initiative'].filter((s) => (s !== 'portfolio' ? (defaultOf(s).includes(rid) || Object.keys(S.layouts).some((k) => k.startsWith(s + ':') && known(S.layouts[k]).includes(rid))) : layoutOf(s, '').includes(rid)));
+      return sc.length ? sc.map((s) => s[0].toUpperCase() + s.slice(1)).join(', ') : 'no dashboard';
+    }
     const on = [];
     if (layoutOf('portfolio', '').includes(rid)) on.push('Portfolio');
     for (const [scope, label] of [['board', 'Board'], ['initiative', 'Initiative']]) {
@@ -422,7 +399,7 @@ export function mountReports(host, ctx) {
       const row = el('li', { class: 'nrow rp3-librow', 'data-home': r.id },
         el('span', { class: 'ki hot' }, c3ic(ICON[builderOf(r)] || 'report')),
         el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.title), el('div', { class: 'dim' }, r.question || ''),
-          el('div', { class: 'chips' }, el('span', { class: 'tag' }, r.source || 'no source named'), el('span', { class: 'dim', 'data-rp3-used': r.id }, 'Used on: ' + usedOn(r.id))), xp));
+          el('div', { class: 'chips' }, el('span', { class: 'chip2' }, r.source || 'no source named'), el('span', { class: 'chip2', 'data-rp3-used': r.id }, 'On: ' + usedOn(r.id, true))), xp));
       const fill = () => {
         const m = cachedData('portfolio', '');
         if (m) { card.replaceChildren(m.ok ? drawReport(r, m, { goInit }) : el('p', { class: 'dim mono' }, 'This report could not be read: ' + m.error)); return; }
@@ -433,8 +410,8 @@ export function mountReports(host, ctx) {
       if (S.libOpen.has(r.id)) api.open();
       return row;
     });
-    P.replaceChildren(el('p', { class: 'dim rp3-note' }, 'Every report the workspace can draw lives here. A dashboard points at these. Removing a report from a dashboard keeps it here. Open a row to see the report across the portfolio.'),
-      el('ul', { class: 'list', 'data-rp3-lib': '' }, rows));
+    P.replaceChildren(el('div', { class: 'calbody brief' }, el('div', { class: 'fold rp3-note' }, c3ic('report', 'sm'), 'Every report PMOS can draw lives here. Dashboards point at these; changing a report changes it everywhere it is used. Open a row to see the report across the portfolio.'),
+      sect('Reports', 'report', rows.length, el('ul', { class: 'list', role: 'list', 'data-rp3-lib': '' }, rows))));
   }
   function openInLibrary(rid) {
     S.libOpen.add(rid); showTab('lib');
@@ -442,13 +419,74 @@ export function mountReports(host, ctx) {
     if (row) { try { row.focus({ preventScroll: true }); row.scrollIntoView({ block: 'nearest' }); } catch { /* not focusable */ } }
   }
 
+  /* ── Drafts: the dashboard drafts, what is scheduled (nothing), what the Briefing used to carry, and the old report families ── */
+  const dashDrafts = () => ((S.outbox || []).filter((e) => e.channel === 'customer-note' && DRAFT_RE.test(e.subject || '')));
+  function loadOutbox() {
+    return Promise.resolve(get('/api/outbox')).then((r) => {
+      if (!S.alive) return;
+      if (r && r.ok) { S.outbox = r.entries || []; S.outboxErr = null; } else S.outboxErr = (r && (r.error || r.reason)) || 'not available';
+      drawTabs(); if (S.tab === 'drafts') drawDrafts();
+    }, (e) => { S.outboxErr = String((e && e.message) || e); if (S.tab === 'drafts') drawDrafts(); });
+  }
+  const draftRows = () => dashDrafts().map((x) => {
+    const m = DRAFT_RE.exec(x.subject);
+    return el('li', { class: 'nrow', 'data-draft-row': x.id }, el('span', { class: 'ki' }, c3ic('mail')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, m[1]),
+        el('div', { class: 'chips' }, el('span', { class: 'chip2' }, 'Draft'), el('span', { class: 'chip2' }, c3ic('user', 'sm'), 'For ' + m[2]),
+          x.created_at ? el('span', { class: 'chip2' }, c3ic('cal', 'sm'), dateOf(x.created_at)) : null, el('span', { class: 'tag', 'data-rp3-madeby': x.made_by === 'schedule' ? 'schedule' : 'you' }, x.made_by === 'schedule' ? 'Made by schedule' : 'Made by you'), el('span', { class: 'tag' }, x.state === 'blocked' ? 'Blocked by the claims check' : 'Not sent'))),
+      el('div', { class: 'acts' }, btnV('outline', { 'data-draft': 'preview', 'data-id': x.id, onclick: () => previewDraft(x, m) }, c3ic('eye', 'sm'), 'Preview'),
+        btnV('ghost', { 'data-draft': 'discard', 'data-id': x.id, onclick: () => discardDraft(x) }, c3ic('x', 'sm'), 'Discard')));
+  });
+  function previewDraft(x, m) {
+    openSheet({ title: 'Draft: ' + m[1], icon: 'mail', wide: true, body: el('div', { class: 'calbody brief' },
+      el('div', { class: 'lh' }, el('span', { class: 'ki' }, c3ic('mail')), el('div', { class: 'rp3-min0' }, el('b', null, m[1]), el('div', { class: 'dim' }, 'For ' + m[2] + (x.created_at ? ' · ' + dateOf(x.created_at) : ''))), el('span', { class: 'chip2' }, 'Draft')),
+      sect('Text', 'doc', null, el('pre', { class: 'rp3-draft-text', 'data-rp3-draft-text': '' }, x.body || ''))) });
+  }
+  async function discardDraft(x) {
+    const r = await pmPost('/api/outbox/discard', { id: x.id });
+    if (!r || !r.ok) { toast({ text: 'The draft was not discarded: ' + ((r && (r.error || r.reason)) || 'no answer'), tone: 'error', timeout: 6000 }); return; }
+    S.outbox = (S.outbox || []).filter((e) => e.id !== x.id); drawTabs(); drawDrafts();
+    toast({ text: 'Draft discarded', actionLabel: 'Undo', timeout: 6000, onAction: async () => { await pmPost('/api/outbox/discard', { id: x.id, undo: true }); loadOutbox(); } });
+  }
+  function scheduledList() {
+    const L = Object.values(S.schedules || {});
+    if (!L.length) return el('div', { class: 'fold' }, c3ic('clock', 'sm'), 'No dashboard is scheduled. Share a dashboard to set one.');
+    return el('ul', { class: 'list', role: 'list' }, L.map((x) => el('li', { class: 'nrow', 'data-rp3-sched-row': x.key }, el('span', { class: 'ki' }, c3ic('cal')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, titleOfKey(x.key)),
+        el('div', { class: 'chips' }, el('span', { class: 'chip2' }, SCHED_TXT[x.plan] || x.plan), el('span', { class: 'chip2' }, c3ic('user', 'sm'), 'For ' + x.audience),
+          el('span', { class: 'chip2' }, 'Next draft ' + localDate(x.next_run ? new Date(x.next_run) : nextDraftOf(x.plan))),
+          x.last_status === 'failed' ? el('span', { class: 'tag', 'data-rp3-sched-failed': '' }, 'The last run made no draft: ' + (x.last_error || 'no reason recorded')) : null)),
+      el('span', null))));
+  }
+  function drawDrafts() {
+    const P = panes.drafts;
+    if (!S.draftsHost) {
+      S.draftsHost = { list: el('div', { 'data-rp3-draftlist': '', class: 'rp3-stack4' }), more: el('div', { 'data-rp3-more': '', class: 'rp3-stack4' }), send: el('div', { class: 'rp3-drafts', 'data-rp3-drafts': '' }) };
+      let sendBody;
+      if (typeof C.drafts === 'function') { sendBody = S.draftsHost.send; C.drafts(sendBody); } else sendBody = el('div', { class: 'fold' }, c3ic('info', 'sm'), 'The report drafts are not available on this page.');
+      if (typeof C.more === 'function') C.more(S.draftsHost.more); else S.draftsHost.more.hidden = true;
+      S.draftsHost.sendSect = sect('Reports to send', 'out', null, [el('div', { class: 'dim rp3-sub' }, 'The earlier report families, each with its claims check. Nothing is sent without your press.'), sendBody]);
+      P.replaceChildren(el('div', { class: 'calbody brief' }, S.draftsHost.list, S.draftsHost.more, S.draftsHost.sendSect));
+    }
+    const rows = draftRows();
+    S.draftsHost.list.replaceChildren(
+      el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'Nothing here is sent. No sender channel is connected yet, so a schedule only makes a ready draft and notifies you.'),
+      sect('Drafts', 'mail', S.outbox ? rows.length : null, S.outboxErr ? el('div', { class: 'fold', role: 'status' }, c3ic('alert', 'sm'), 'The drafts could not be read: ' + S.outboxErr)
+        : !S.outbox ? el('p', { class: 'dim mono rp3-status', role: 'status' }, 'Reading the repository')
+          : rows.length ? el('ul', { class: 'list', role: 'list', 'data-rp3-drafts-list': '' }, rows) : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'No drafts. Share a dashboard to make one.')),
+      sect('Scheduled', 'cal', null, scheduledList(), null, { 'data-rp3-scheduled': '' }));
+  }
+
   /* boot */
-  drawTabs(); drawDash();
+  drawTabs(); drawDash(); loadOutbox();
   Promise.resolve(get('/api/report-dashboards' + (C.ws ? '?ws=' + encodeURIComponent(C.ws) : ''))).then((r) => {
     if (!S.alive) return;
-    if (r && r.ok) { S.meta = r; S.layouts = { ...(r.layouts || {}) }; } else S.metaErr = (r && (r.error || r.reason)) || 'not available';
-    drawTabs(); drawDash(); if (S.tab === 'lib') drawLib();
+    if (r && r.ok) { S.meta = r; S.layouts = { ...(r.layouts || {}) }; S.schedules = { ...(r.schedules || {}) }; } else S.metaErr = (r && (r.error || r.reason)) || 'not available';
+    drawTabs(); drawDash(); if (S.tab === 'lib') drawLib(); if (S.tab === 'drafts') drawDrafts();
   }, (e) => { S.metaErr = String((e && e.message) || e); drawDash(); });
 
-  return { dispose() { S.alive = false; stopPhone(); root.remove(); }, root };
+  const api = { dispose() { S.alive = false; if (livePage === api) livePage = null; stopPhone(); root.remove(); }, root, showTab: (v) => { if (panes[v]) showTab(v); } };
+  livePage = api;
+  if (wantView) { const v = wantView; wantView = null; api.showTab(v); }
+  return api;
 }