create-pmos 0.126.0 → 0.128.0

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

@@ -0,0 +1,62 @@
+/* pm/c3-reports.css — the Reports dashboards of the console3 page (c3-reports.js links it once, as ensureC3Css links console3.css).
+ * Tokens only. Corners: 6px on a control, 8px on a container, else 0 (R27 as amended 2026-10-07). The console3 primitives (.card, .seg,
+ * .fold, .nrow, .xp) come from console3.css; this file adds the page's own layout under .rp3. */
+.rp3{display:grid;gap:var(--sp-4);min-width:0;align-content:start}
+.rp3-intro{margin:0;color:var(--muted-foreground);font-size:var(--fs-3)}
+.rp3-pane{display:grid;gap:var(--sp-4);min-width:0;align-content:start}
+.rp3-pane[hidden]{display:none}
+.rp3 .rp3-tabs{justify-self:start;flex-wrap:wrap;max-width:100%}
+.rp3 .rp3-tabs button[aria-selected="true"]{background:var(--background);color:var(--foreground);box-shadow:0 0 0 1px var(--border)}
+.rp3 .rp3-tabs .tag{margin-left:2px}
+.rp3-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-width:0}
+.rp3 .rp3-scope{flex-wrap:wrap;max-width:100%}
+.rp3-pick{display:inline-flex;gap:8px;align-items:center;min-width:0;max-width:100%;font-size:var(--fs-2)}
+.rp3-select{min-width:0;max-width:100%;min-height:32px;border:1px solid var(--border);border-radius:6px;background:var(--background);color:var(--foreground);font:var(--fs-2) var(--mono);padding:4px 8px}
+.rp3-select:disabled{opacity:.6;cursor:not-allowed}
+.rp3-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;min-width:0}
+.rp3-ttl{display:grid;gap:2px;min-width:0}
+.rp3-ttl h2{margin:0;font:600 var(--fs-5)/1.3 var(--sans);overflow-wrap:anywhere}
+.rp3-ttl .dim{font:var(--fs-2) var(--mono)}
+.rp3-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+.rp3-btn{display:inline-flex;gap:6px;align-items:center;min-height:32px;padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--background);color:var(--foreground);font:500 var(--fs-2) var(--mono);cursor:pointer}
+.rp3-btn[aria-pressed="true"],.rp3-btn.rp3-pri{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.rp3-btn:disabled{opacity:.5;cursor:not-allowed}
+.rp3-btn:focus-visible,.rp3-select:focus-visible,.rp3-about:focus-visible,.rp3-librow:focus-visible{outline:2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));outline-offset:2px}
+.rp3-ib{padding:4px 6px}
+.rp3-rot .ic{transform:rotate(90deg)}
+@media (hover:hover){
+.rp3-btn:not(:disabled):hover{border-color:var(--ring)}
+.rp3-about:hover{color:var(--foreground)}
+}
+@media (pointer:coarse){
+.rp3-btn,.rp3-select{min-height:44px}
+.rp3-about{min-height:44px}
+.rp3-librow{min-height:48px}
+}
+.rp3-note{margin:0;font-size:var(--fs-3)}
+.rp3-status{margin:0;font-size:var(--fs-2)}
+.rp3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:var(--sp-4);align-items:start;min-width:0}
+.rp3-w{display:grid;gap:6px;min-width:0;align-content:start}
+.rp3-w>.card{min-width:0}
+.rp3-w svg{max-width:100%}
+.rp3.editing .rp3-w{outline:1px dashed var(--ring);outline-offset:6px;border-radius:8px}
+.rp3-wh{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;min-width:0}
+.rp3-wt{font:600 var(--fs-3) var(--sans);overflow-wrap:anywhere}
+.rp3-about{display:flex;gap:6px;align-items:center;color:var(--muted-foreground);font:var(--fs-2) var(--mono);cursor:pointer;padding:4px 2px;border-radius:6px}
+.rp3-case{display:grid;gap:6px;padding:8px 2px 4px;font-size:var(--fs-3)}
+.rp3-case p{margin:0}
+.rp3-add .sh h3{margin:0;font:600 var(--fs-3) var(--sans)}
+.rp3-addrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--border)}
+.rp3-librow .tt{font-size:var(--fs-4)}
+.rp3-libcard{padding-top:10px;min-width:0}
+.rp3-share{display:grid;gap:var(--sp-4);min-width:0}
+.rp3-frame{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:14px;display:grid;gap:12px;min-width:0}
+.rp3-frame h4{margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--border);font:500 var(--fs-1) var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted-foreground)}
+.rp3-frame h5{margin:8px 0 2px;font:600 var(--fs-3) var(--sans)}
+.rp3-frame p{margin:0;overflow-wrap:anywhere}
+.rp3-hl{font:600 var(--fs-4)/1.35 var(--sans)}
+.rp3-nums{margin:4px 0 0;padding-left:18px;color:var(--muted-foreground);font-size:var(--fs-2)}
+.rp3-why{margin:0;border-left:3px solid var(--warning);background:var(--muted);padding:8px 10px;font-size:var(--fs-2)}
+.rp3-wrap{flex-wrap:wrap}
+.ph .rp3-grid,.rp3.ph .rp3-grid{grid-template-columns:minmax(0,1fr)}
+.ph .rp3-addrow,.rp3.ph .rp3-addrow{grid-template-columns:minmax(0,1fr)}

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

@@ -0,0 +1,454 @@
+/* pm/c3-reports.js — the console3 Reports page: dashboards made of reports (initiative console3-reports, PRD R1 to R7).
+ * 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) }
+ *       ws       the workspace id; every read names it
+ *       pmGet    the shell's GET helper (default: http.js pmGet)
+ *       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.
+ *
+ * Three tabs: Dashboards | Library | Drafts.
+ *   Dashboards  scope buttons Portfolio | Board | Initiative, a chooser for the board or the initiative, then one widget per report of the
+ *               layout (or the scope's default). A widget is the Calendar's own builder (c3-cal-strategy.js PANEL_BUILDERS), drawn from
+ *               GET /api/report-dashboards/data?scope=&id=&ws= (kept a minute per scope). A widget is a reference (data-ref-row); its
+ *               "About this report" line opens the report's case in place and links to its home in the library.
+ *               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.
+ *   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. */
+import { el } from './dom.js';
+import { button } 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';
+
+const SCOPES = [['portfolio', 'Portfolio'], ['board', 'Board'], ['initiative', 'Initiative']];
+const TABS = [['dash', 'Dashboards', 'report'], ['lib', 'Library', 'doc'], ['drafts', 'Drafts', 'out']];
+const ICON = { north: 'target', outcomes: 'target', signals: 'alert', delivery: 'clock', maturity: 'flag', bets: 'flag', synergy: 'init' };
+const TTL = 60000;
+
+export function ensureReportsCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-reports]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet';
+  l.href = new URL('./c3-reports.css', import.meta.url).href;
+  l.setAttribute('data-c3-reports', '');
+  document.head.appendChild(l);
+}
+
+/* ── the data of one scope: one read per scope and id, kept a minute (as strategyPanel keeps /api/c3-strategy) ───────────── */
+const cache = new Map(); const inflight = new Map();
+const dataKey = (scope, id) => scope + '|' + (id || '');
+function readData(get, ws, scope, id) {
+  const k = dataKey(scope, id); const c = cache.get(k);
+  if (c && Date.now() - c.at < TTL) return Promise.resolve(c.model);
+  if (!inflight.has(k)) {
+    const url = '/api/report-dashboards/data?scope=' + encodeURIComponent(scope) + (id ? '&id=' + encodeURIComponent(id) : '') + (ws ? '&ws=' + encodeURIComponent(ws) : '');
+    inflight.set(k, Promise.resolve(get(url)).then((r) => {
+      inflight.delete(k);
+      const model = r && r.ok ? r : { ok: false, error: (r && (r.error || r.reason)) || 'not available' };
+      if (model.ok) cache.set(k, { at: Date.now(), model });
+      return model;
+    }, (e) => { inflight.delete(k); return { ok: false, error: String((e && e.message) || e) }; }));
+  }
+  return inflight.get(k);
+}
+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)) || '';
+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: [] } };
+  const b = builderOf(rep);
+  try {
+    switch (b) {
+      case 'north': return PANEL_BUILDERS.north(M, 'year', c.today, false);
+      case 'outcomes': return PANEL_BUILDERS.outcomes(M);
+      case 'signals': return PANEL_BUILDERS.signals(M, 6, c, live);
+      case 'synergy': return PANEL_BUILDERS.synergy(M);
+      case 'maturity': return PANEL_BUILDERS.maturity(M);
+      case 'bets': return PANEL_BUILDERS.bets(M, c);
+      case 'delivery': return PANEL_BUILDERS.delivery ? PANEL_BUILDERS.delivery(M, c, live) : failCard(rep, 'its builder is not registered in c3-cal-strategy.js');
+      default: return failCard(rep, 'no builder draws a report with the id ' + b);
+    }
+  } catch (e) { return failCard(rep, String((e && e.message) || e)); }
+}
+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);
+
+export function mountReports(host, ctx) {
+  ensureC3Css(); 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 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 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);
+  host.replaceChildren(root);
+
+  const lib = () => (S.meta && S.meta.library) || [];
+  const repOf = (id) => lib().find((r) => r.id === id) || null;
+  const keyOf = (scope, id) => (scope == 'portfolio' ? 'portfolio' : scope + ':' + id);
+  const listOf = (scope) => (scope === 'board' ? (S.meta && S.meta.boards) || [] : scope === 'initiative' ? (S.meta && S.meta.initiatives) || [] : []);
+  const curId = () => (S.scope == 'portfolio' ? '' : S.pick[S.scope]);
+  const nameOf = (scope, id) => { const x = listOf(scope).find((b) => b.id === id); return x ? x.title || x.id : id; };
+  const dashTitle = () => (S.scope == 'portfolio' ? 'Portfolio' : (S.scope === 'board' ? 'Board: ' : 'Initiative: ') + nameOf(S.scope, curId()));
+  const fits = (r, scope) => !r.scopes || r.scopes.includes(scope);
+  const known = (ids) => (ids || []).filter((id) => repOf(id));
+  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 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; }
+    S.scope = 'initiative'; S.pick.initiative = id; S.edit = false; drawDash();
+  };
+
+  /* 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)));
+  }
+  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.'));
+    }
+  }
+
+  /* ── 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);
+  }
+
+  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);
+    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);
+    return w;
+  }
+
+  function drawDash() {
+    if (!S.alive) return;
+    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; }
+    if (S.scope !== 'portfolio' && !listOf(S.scope).some((x) => x.id === S.pick[S.scope])) S.pick[S.scope] = (listOf(S.scope)[0] || {}).id || '';
+    const id = curId();
+    const noScope = S.scope !== 'portfolio' && !id;
+    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];
+    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;
+    }
+    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.'));
+    const model = cachedData(S.scope, id);
+    const grid = el('div', { class: 'rp3-grid', '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.')));
+    }
+    P.replaceChildren(...kids);
+    if (!model && reps.length) {
+      const want = keyOf(S.scope, id);
+      readData(get, C.ws, S.scope, id).then((m) => {
+        if (!S.alive || keyOf(S.scope, curId()) !== want) return;
+        if (m.ok) drawDash();
+        else grid.querySelectorAll('[data-rp3-loading]').forEach((n) => n.replaceWith(el('p', { class: 'dim mono rp3-status', role: 'status', 'data-rp3-error': n.getAttribute('data-rp3-loading') }, 'This report could not be read: ' + m.error)));
+      });
+    }
+  }
+
+  /* ── layout changes: the page keeps the change, then POSTs it; a failed POST is said, not undone ── */
+  async function save(scope, id, reports) {
+    const key = keyOf(scope, id);
+    if (reports === null) delete S.layouts[key]; else S.layouts[key] = reports.slice();
+    drawDash(); if (S.tab === 'lib') drawLib();
+    const r = await pmPost('/api/report-dashboards/layout', { key, reports });
+    if (!r || !r.ok) toast({ text: 'The layout was not saved: ' + ((r && (r.error || r.reason)) || 'no answer') + '. This page keeps it until you reload.', tone: 'error', timeout: 6000 });
+    return r;
+  }
+  function move(rid, d) {
+    const id = curId(); const ids = layoutOf(S.scope, id); const i = ids.indexOf(rid); const j = i + d;
+    if (i < 0 || j < 0 || j >= ids.length) return;
+    [ids[i], ids[j]] = [ids[j], ids[i]];
+    save(S.scope, id, ids).then(() => { const b = panes.dash.querySelector(d < 0 ? '[data-rp3-up="' + rid + '"]' : '[data-rp3-down="' + rid + '"]'); if (b && !b.disabled) b.focus(); });
+  }
+  function remove(rid) {
+    const scope = S.scope; const id = curId(); const ids = layoutOf(scope, id); const i = ids.indexOf(rid); if (i < 0) return;
+    const rep = repOf(rid); ids.splice(i, 1);
+    save(scope, id, ids);
+    toast({ text: 'Removed ' + (rep ? rep.title : rid) + ' from this dashboard. It stays in the library.', actionLabel: 'Undo', timeout: 6000,
+      onAction: () => { const now = layoutOf(scope, id); if (!now.includes(rid)) { now.splice(Math.min(i, now.length), 0, rid); save(scope, id, now); } } });
+  }
+  function add(rid) {
+    const id = curId(); const ids = layoutOf(S.scope, id); if (ids.includes(rid)) return;
+    ids.push(rid); const rep = repOf(rid);
+    save(S.scope, id, ids); toast('Added ' + (rep ? rep.title : rid) + ' to this dashboard.');
+  }
+  function resetLayout() { save(S.scope, curId(), null); toast('This dashboard is back to its default layout.'); }
+
+  /* ── 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 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);
+      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 + '.')));
+      const saved = st.saved[st.aud];
+      const saveBtn = btn({ class: 'rp3-btn rp3-pri', '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) });
+          st.busy = false;
+          if (r && r.ok) {
+            st.saved[st.aud] = true;
+            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.')),
+        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.')));
+    };
+    const cached = cachedData(scope, id);
+    openSheet({ title: 'Share: ' + title, icon: 'out', wide: true, body });
+    paint(cached);
+    if (!cached) readData(get, C.ws, scope, id).then((m) => { if (body.isConnected) paint(m); });
+  }
+
+  /* ── Library: the home of every report ── */
+  function usedOn(rid) {
+    if (!S.meta) return 'nowhere yet';
+    const on = [];
+    if (layoutOf('portfolio', '').includes(rid)) on.push('Portfolio');
+    for (const [scope, label] of [['board', 'Board'], ['initiative', 'Initiative']]) {
+      if (defaultOf(scope).includes(rid)) on.push(label + ' dashboards by default');
+      for (const k of Object.keys(S.layouts)) if (k.startsWith(scope + ':')) { const id = k.slice(scope.length + 1); if (known(S.layouts[k]).includes(rid)) on.push(label + ': ' + nameOf(scope, id)); }
+    }
+    return on.length ? on.join(', ') : 'no dashboard';
+  }
+  function drawLib() {
+    const P = panes.lib;
+    if (S.metaErr) { P.replaceChildren(el('div', { class: 'fold', role: 'status' }, c3ic('alert', 'sm'), 'The library could not be read: ' + S.metaErr)); return; }
+    if (!S.meta) { P.replaceChildren(el('p', { class: 'dim mono rp3-status', role: 'status' }, 'Reading the repository')); return; }
+    const rows = lib().map((r) => {
+      const card = el('div', { class: 'rp3-libcard', 'data-rp3-libcard': r.id });
+      const xp = makeXp(card);
+      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));
+      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; }
+        card.replaceChildren(el('p', { class: 'dim mono rp3-status', role: 'status' }, 'Reading the repository'));
+        readData(get, C.ws, 'portfolio', '').then(() => { if (card.isConnected) fill(); });
+      };
+      const api = attachExpand(row, xp, { key: 'rp3l-' + r.id, onToggle: (open) => { if (open) { S.libOpen.add(r.id); fill(); } else S.libOpen.delete(r.id); } });
+      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));
+  }
+  function openInLibrary(rid) {
+    S.libOpen.add(rid); showTab('lib');
+    const row = panes.lib.querySelector('[data-home="' + rid + '"]');
+    if (row) { try { row.focus({ preventScroll: true }); row.scrollIntoView({ block: 'nearest' }); } catch { /* not focusable */ } }
+  }
+
+  /* boot */
+  drawTabs(); drawDash();
+  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();
+  }, (e) => { S.metaErr = String((e && e.message) || e); drawDash(); });
+
+  return { dispose() { S.alive = false; stopPhone(); root.remove(); }, root };
+}

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

@@ -21,6 +21,7 @@ import { mountLifecycle } from './lifecycle-lens.js';
 import { mountForecast } from './timeline-forecast-view.js';
 import { mountReleases } from './releases-view.js';
 import { mountReportFamilies } from './report-families-view.js';
+import { mountReports } from './c3-reports.js';
 import { mountOutbox } from './outbox-panel.js';
 import { createDock } from './c3-dock.js';
 import { belowLine, reviewSection, handledRow, trustCard, footLine, needRow, rowApi, BX, toast, setNeedsTitle, caseFile, hooks as briefHooks } from './c3-brief.js';
@@ -597,7 +598,8 @@ function showInit(id) {
     }
   }
 }
-function repTab(pane) {
+function repTab(pane) { mountReports(pane, { ws: S.ws, pmGet, drafts: draftsTab }); }   // dashboards and the library; the old Reports content is the Drafts tab
+function draftsTab(pane) {
   const fam = el('div', { 'data-c3pg': 'families-host' }); const out = el('div', { class: 'brief', 'data-c3pg': 'outbox-host', style: 'margin-top:var(--sp-4)' });
   pane.append(fam, out);
   pmGet('/api/report-families/facts?ws=' + encodeURIComponent(S.ws)).then((j) => {