create-pmos 0.240.0 → 0.242.0

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

@@ -0,0 +1,455 @@
+/* pm/c3-report-structure.js — the STRUCTURE STEP of the report studio and the saved STRUCTURE in the report setup sheet (initiative report-structure;
+ * PRD planning/prd/report-structure-prd.md; API contract planning/prd/report-structure-contract.md; mockup 43-reportstructure.js).
+ *
+ *   openStructure({ ws, id, name, view, onClose })   the wide sheet: the conversation on the left (answer chips, the PMOS lines that name each version),
+ *                                                    the live report plan on the right (the version strip S1..Sn and three views: Plan, Other
+ *                                                    structures, Try it with real data); Use this structure saves the version on screen
+ *   structureSection({ ws, id, name })               the saved structure as a section of the report setup sheet (c3-design-studio.js openBrief):
+ *                                                    what it answers, sources, charts, outline, Refine the structure, Try it with real data
+ * Entry points: "Shape it with PMOS" on an Ask PMOS answer and "Shape the report" on a set-up row (c3-report-setup.js), the step bar of the Design studio
+ * (c3-design-studio.js) and ?structure=<id> on the address (c3-shell.js).
+ * A turn starts ONE report-structure job (POST /api/report-structure/turn); the page shows it running and reads GET /api/report-structure until the
+ * version lands. The page can be left: the job goes on. Sources are read only. Nothing here sends anything outside the workspace. */
+import { el } from './dom.js';
+import { icon, pbtn, btn, chip, sect, put, lk, kv } from './c3-ini-ui.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { pmGet, pmPost } from './http.js';
+import { goTo } from './c3-report-store.js';
+import { ensureDeckCss } from './c3-report-deck.js';
+
+const q = (o) => Object.entries(o).filter(([, v]) => v != null && v !== '').map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+const post = (p, body) => Promise.resolve(pmPost('/api/' + p, body)).catch((e) => ({ ok: false, error: String((e && e.message) || e) }));
+const get = (p) => Promise.resolve(pmGet(p)).catch(() => null);
+/** The routes of the API contract (report-structure-contract.md section 2). */
+export const RSX = {
+  structure: (ws, id) => get('/api/report-structure?' + q({ ws, id })),
+  version: (ws, id, n) => get('/api/report-structure/version?' + q({ ws, id, n })),
+  dry: (ws, id, run) => get('/api/report-structure/dry?' + q({ ws, id, run })),
+  charts: (ws) => get('/api/charts?' + q({ ws })),
+  turn: (b) => post('report-structure/turn', b),
+  accept: (b) => post('report-structure/accept', b),
+  revert: (b) => post('report-structure/revert', b),
+  source: (b) => post('report-structure/source', b),
+  remove: (b) => post('report-structure/remove', b),
+  check: (b) => post('report-structure/check', b),
+  runDry: (b) => post('report-structure/dry', b),
+};
+const failed = (r, what) => toast({ text: what + ': ' + ((r && (r.error || r.reason)) || 'the workspace did not answer') + '.', tone: 'error', timeout: 6000 });
+
+/** Link c3-report-structure.css once. */
+export function ensureStructureCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-report-structure]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-report-structure.css', import.meta.url).href; l.setAttribute('data-c3-report-structure', '');
+  document.head.appendChild(l);
+}
+
+const hhmm = (iso) => { const m = /T(\d{2}):(\d{2})/.exec(String(iso || '')); return m ? m[1] + ':' + m[2] : ''; };
+const short = (t, n = 60) => { const s = String(t || '').replace(/\s+/g, ' ').trim(); return s.length > n ? s.slice(0, n - 1) + '…' : s; };
+const slug = (t) => String(t || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 32) || 'source';
+const KIND_IC = { 'pmos-level': 'init', dashboard: 'report', chart: 'report', document: 'doc', 'past-report': 'cal', connector: 'report', link: 'sheet', upload: 'drop', person: 'user', chrome: 'out', computer: 'term' };
+const STATE_TAG = { reached: ['ok', 'Reached'], 'not-connected': ['', 'Not connected'], later: ['', 'First cycle: nothing to read'], 'needs-you': ['bad', 'Needs you'], off: ['', 'Not connected'] };
+const STEP_TAG = { works: ['check', 'ok', 'Works'], 'needs-you': ['alert', 'bad', 'Needs you'], waiting: ['clock', '', 'Waiting'] };
+
+/* the options of Add a source: [kind, icon, label, what it does, form fields]; a field is [key, label, placeholder, required] */
+const PMOS_OPTS = [
+  ['pmos-level', 'init', 'A portfolio, board or initiative', 'Sets what the report covers: its initiatives, releases, key results and risks', [['name', 'Which one?', 'Its name, for example the MySPH board', true]]],
+  ['dashboard', 'report', 'A dashboard', 'Brings in its charts, so a number is defined once', [['name', 'Which dashboard?', 'Its name, for example MySPH health', true]]],
+  ['chart', 'report', 'A chart', 'One chart from Reports, Charts', [['name', 'Which chart?', 'Its name, for example Release frequency', true]]],
+  ['document', 'doc', 'A document', 'Context for the notes, like the strategy or the decision log. Not numbers', [['name', 'Which document?', 'Its name, for example MySPH strategy 2026', true]]],
+  ['past-report', 'cal', 'A past report', 'Last cycle\'s numbers, and what it said that needs a follow-up', []],
+];
+const OUT_OPTS = [
+  ['connector', 'report', 'A connector you have', 'For example Google Analytics through Supermetrics, Google Drive or Jira. Read only, through your own Claude connectors', [['name', 'Which service?', 'For example Google Analytics 4: MySPH news site', true], ['via', 'Through which connector?', 'For example Supermetrics', false], ['ref', 'Which account, property or board?', 'Optional', false]]],
+  ['link', 'sheet', 'A link', 'A Google Sheet or a Confluence page. PMOS reads it through your connectors', [['name', 'What is it?', 'For example Subscription revenue 2026', true], ['ref', 'Link', 'https://…', true]]],
+  ['upload', 'drop', 'A file you upload each cycle', 'CSV or .xlsx. PMOS asks for it in Work when the draft is due', [['name', 'What is the file?', 'For example Partner payouts', true]]],
+  ['person', 'user', 'A person who gives a number each cycle', 'It shows in their Work, for example: Lina Kusuma gives the NPS score by the 3rd', [['name', 'Who?', 'Their name', true], ['use', 'Which number?', 'For example the NPS score', false]]],
+  ['chrome', 'out', 'A page you open in Chrome', 'For a site with no connector, like Looker Studio or an admin page. Claude in Chrome reads it on your Mac, signed in as you', [['name', 'Which page?', 'For example Looker Studio: Paid acquisition', true], ['ref', 'Link', 'https://…', true]]],
+  ['computer', 'term', 'An app on your Mac', 'Computer use, when no connector and no web page has the numbers', [['name', 'Which app and screen?', 'For example Finance Desk, Monthly revenue', true]]],
+];
+
+/* one studio session per report setup: what the PM is looking at waits here between openings */
+const LOCAL = {};
+const local = (id) => LOCAL[id] || (LOCAL[id] = { view: 'plan', ver: null, open: null, panel: false, form: null, text: '', check: null });
+
+/* ── the studio ── */
+export function openStructure({ ws, id, name, view, onClose } = {}) {
+  ensureDeckCss(); ensureStructureCss();
+  const K = local(id); if (view) K.view = view;
+  const S = { D: null, setup: null, cache: {}, dry: null, charts: null, err: '', timer: null, closed: false, busy: false, shown: '' };
+  const body = el('div', { class: 'brief rs rd-dk rd-dks-wrap rs-st', 'data-st-studio': id });
+  const ui = openSheet({ title: 'Report studio', icon: 'spark', wide: true, dw: true, cls: 'rd-wide', body, onClose: () => { S.closed = true; clearTimeout(S.timer); if (onClose) onClose(); } });
+
+  const ver = (n) => ((S.D && S.D.versions) || []).find((v) => v.n === n);
+  const cur = () => (S.D ? S.D.current : null);
+  const planOf = (n) => (n == null ? null : n === cur() ? S.D.plan : (S.cache[n] || null));
+  const planShown = () => planOf(K.ver);
+  const vlabel = (v) => (v ? (v.turn ? short(v.turn, 48) : v.n === 1 ? 'From your description' : 'Your turn') : '');
+  const running = () => !!(S.D && S.D.running);
+  const dryRunning = () => running() && /dry/.test(JSON.stringify(S.D.job || ''));
+  const checksRunning = () => Object.values((S.D && S.D.checks) || {}).some((c) => c && c.running);
+  const scrollLog = () => requestAnimationFrame(() => { const l = body.querySelector('.rd-dks-log'); if (l) l.scrollTop = l.scrollHeight; });
+
+  /* follow: show the current version when it changed (a job landed). A read that changed nothing paints nothing: the poll reads the structure
+   * every 1.5 seconds while a job runs, and a repaint would rebuild the conversation and the box the PM types in. */
+  async function load(follow) {
+    const r = await RSX.structure(ws, id);
+    if (!r || r.ok === false) { S.err = (r && (r.error || r.reason)) || 'The structure could not be read.'; S.D = null; paint(true); return; }
+    S.err = '';
+    const prev = S.D ? S.D.current : null;
+    S.D = r.structure; S.setup = r.setup || { id, name };
+    if (K.ver == null || (S.D.current != null && !ver(K.ver)) || (follow && S.D.current !== prev && S.D.current != null)) K.ver = S.D.current;
+    if (running() || checksRunning()) poll(); else clearTimeout(S.timer);
+    await Promise.all([need(K.ver), need(K.ver > 1 ? K.ver - 1 : null), readDry(), readCharts()]);
+    paint(false);
+  }
+  async function need(n) {
+    if (n == null || !S.D || n === cur() || S.cache[n]) return;
+    const r = await RSX.version(ws, id, n);
+    if (r && r.ok && r.plan) S.cache[n] = r.plan;
+  }
+  async function readDry() {
+    const d = S.D && S.D.dry;
+    if (!d || !d.run) { S.dry = null; return; }
+    if (S.dry && S.dry.run === d.run) return;
+    const r = await RSX.dry(ws, id, d.run);
+    S.dry = r && r.ok && r.dry ? { run: d.run, ...r.dry } : null;
+  }
+  async function readCharts() {
+    const p = planShown();
+    if (S.charts || !p || !(p.charts || []).some((c) => c.chart)) return;
+    const r = await RSX.charts(ws);
+    if (r && r.ok) S.charts = r.charts || [];
+  }
+  function poll() {
+    clearTimeout(S.timer);
+    S.timer = setTimeout(async () => { if (S.closed) return; const was = cur(); await load(true); if (S.D && !running() && cur() !== was) scrollLog(); }, 1500);
+  }
+
+  /* ── the conversation ── */
+  function msg(l) {
+    const you = l.who === 'pm';
+    const v = l.n != null ? ver(l.n) : null;
+    const qs = (l.questions || []).map((x) => el('div', { class: 'rs-st-q', 'data-st-question': '' }, el('b', null, x.q),
+      el('div', { class: 'chips' }, (x.chips || []).map((c) => lk({ 'data-st-act': 'chip', 'data-v': c, onclick: () => pick(c) }, c)))));
+    const opts = (l.options || []).length ? lk({ 'data-st-act': 'options', onclick: () => { K.view = 'options'; if (l.n != null) K.ver = l.n; need(K.ver).then(() => paint(true)); } }, icon('cols', 'sm'), 'See the three structures side by side') : null;
+    return el('li', { class: 'rd-dks-msg ' + (you ? 'you' : 'pmos'), 'data-st-log': you ? 'you' : 'pmos' },
+      el('span', { class: 'ds-av ' + (you ? 'h' : 'a') }, you ? icon('user', 'sm') : icon('spark', 'sm')),
+      el('div', { class: 'bub' }, el('div', { class: 'who' }, you ? 'You' : 'PMOS'), l.text ? el('p', null, l.text) : null, qs, opts,
+        v ? lk({ class: 'rd-dks-ver', 'data-st-act': 'ver', 'data-v': String(v.n), 'aria-pressed': String(K.ver === v.n && K.view !== 'options'), onclick: () => look(v.n) }, icon('todo', 'sm'), 'S' + v.n + ': ' + vlabel(v)) : null));
+  }
+  function runningMsg() {
+    const n = (S.D.versions.length ? Math.max(...S.D.versions.map((v) => v.n)) : 0) + 1;
+    return el('li', { class: 'rd-dks-msg pmos', 'data-st-running': '' }, el('span', { class: 'ds-av a' }, icon('spark', 'sm')),
+      el('div', { class: 'bub' }, el('div', { class: 'who' }, 'PMOS'), el('p', null, dryRunning() ? 'Running the plan on the last complete period. This takes a minute or two. You can close the studio; the result shows here when the job ends.'
+        : 'Working on S' + n + '. This takes a minute or two. You can close the studio; the version lands here when the job ends.')));
+  }
+  function errorMsg() {
+    const lastAt = ((S.D.log || [])[(S.D.log || []).length - 1] || {}).at || '';
+    const e = (S.D.errors || []).filter((x) => String(x.at || '') >= lastAt).pop();
+    if (!e || running()) return null;
+    return el('li', { class: 'rd-dks-msg pmos err', 'data-st-error': '' }, el('span', { class: 'ds-av w' }, icon('alert', 'sm')), el('div', { class: 'bub' }, el('div', { class: 'who' }, 'PMOS'), el('p', null, 'That did not work: ' + e.text + ' Nothing changed. Try the turn again.')));
+  }
+  function pick(c) { K.text = (K.text.trim() ? K.text.trim() + ' ' : '') + c + '.'; paint(true); const i = body.querySelector('[data-st-in]'); if (i) { i.focus(); i.setSelectionRange(i.value.length, i.value.length); } }
+  function panel() {
+    if (!K.panel) return null;
+    const opt = ([kind, ic, label, desc, fields]) => btn({ class: 'rd-dks-opt', 'data-st-act': 'opt', 'data-v': kind, 'aria-expanded': String(K.form === kind), onclick: () => { if (!fields.length) { addSource(kind, label, {}, desc); return; } K.form = K.form === kind ? null : kind; paint(true); } },
+      icon(ic, 'sm'), el('span', null, label, el('br'), el('span', { class: 'dim rs-st-small' }, desc)));
+    const form = (o) => {
+      const [kind, , label, desc, fields] = o; const inputs = fields.map(([k, lab, ph, req]) => el('label', { class: 'rs-st-field' }, el('span', { class: 'dim' }, lab + (req ? '' : ' (optional)')),
+        el('input', { type: 'text', 'data-st-field': k, placeholder: ph, autocomplete: 'off', onKeyDown: (e) => { if (e.key === 'Enter') submit(); } })));
+      const submit = () => {
+        const v = {}; let bad = null;
+        for (const [k, , , req] of fields) { const i = form_.querySelector('[data-st-field="' + k + '"]'); v[k] = i ? i.value.trim() : ''; if (req && !v[k] && !bad) bad = i; }
+        if (bad) { bad.focus(); return; }
+        if ((kind === 'link' || kind === 'chrome') && !/^https?:\/\//i.test(v.ref)) { toast({ text: 'A link starts with https://', tone: 'error' }); return; }
+        if (['pmos-level', 'dashboard', 'chart', 'document'].includes(kind)) v.ref = v.name;
+        addSource(kind, label, v, desc);
+      };
+      const form_ = el('div', { class: 'rs-st-form', 'data-st-form': kind }, ...inputs, el('div', { class: 'ds-acts' }, pbtn('primary', 'Add', 'plus', { 'data-st-act': 'add', onclick: submit }), pbtn('ghost', 'Cancel', 'x', { onclick: () => { K.form = null; paint(true); } })));
+      return form_;
+    };
+    const group = (opts) => opts.flatMap((o) => [opt(o), K.form === o[0] ? form(o) : null]);
+    return el('div', { class: 'rd-dks-panel', 'data-st-panel': '' }, el('h3', { class: 'ds-h' }, 'From PMOS'), ...group(PMOS_OPTS),
+      el('h3', { class: 'ds-h' }, 'Outside PMOS'), ...group(OUT_OPTS),
+      el('div', { class: 'dim rs-st-small' }, 'PMOS only reads. It never writes to a source, and a connector you have not allowed stays closed.'));
+  }
+  function chat() {
+    const D = S.D; const p = planOf(cur());
+    const reached = ((p && p.sources) || []).filter((s) => s.state === 'reached');
+    const first = !D.log.length;
+    const ta = el('textarea', { 'data-st-in': '', 'aria-label': 'Tell PMOS what to change', placeholder: first ? 'Say what the report is for, who reads it and what they decide with it.' : 'Talk it through, for example: split new users by campaign, or what would leadership miss here?',
+      onInput: (e) => { K.text = e.target.value; }, onKeyDown: (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); send(); } } });
+    ta.value = K.text;
+    return el('div', { class: 'rd-dks-chat' }, el('div', { class: 'rd-dks-desc' }, el('span', { class: 'dim mono' }, 'WHAT IT ANSWERS, WHERE THE NUMBERS COME FROM, HOW'),
+      reached.length ? el('div', { class: 'chips' }, reached.map((s) => chip(icon(KIND_IC[s.kind] || 'doc', 'sm'), s.name))) : null),
+    el('ul', { class: 'rd-dks-log', 'data-st-chat': '' }, (D.log || []).map(msg), D.running ? runningMsg() : null, errorMsg(),
+      first && !D.running ? el('li', { class: 'fold' }, icon('info', 'sm'), ' Start with what the report is for and who reads it. PMOS asks what it needs, then proposes a structure.') : null),
+    panel(),
+    el('div', { class: 'rd-dks-in' }, ta,
+      el('div', { class: 'ds-acts rd-between' }, btn({ class: 'ds-btn', 'data-st-act': 'panel', 'aria-expanded': String(K.panel), onclick: () => { K.panel = !K.panel; if (!K.panel) K.form = null; paint(true); } }, icon('plus', 'sm'), 'Add a source'),
+        btn({ class: 'ds-btn ag', 'data-st-act': 'send', disabled: !!D.running || S.busy, onclick: () => send() }, icon('spark', 'sm'), first ? 'Make the first version' : 'Make the next version')),
+      el('div', { class: 'dim rs-st-small' }, 'Ask anything: which chart fits, what a number means, what is missing. A turn that changes the plan makes a new version.')));
+  }
+  async function send(textIn) {
+    const i = body.querySelector('[data-st-in]');
+    const text = String(textIn != null ? textIn : (i ? i.value : K.text) || '').trim();
+    if (!text) { if (i) i.focus(); return false; }
+    if (running()) { toast('A version is being made. Wait for it to land.'); return false; }
+    S.busy = true; paint(true);
+    const r = await RSX.turn({ ws, id, text });
+    S.busy = false;
+    if (!r || !r.ok) { paint(true); if (r && (r.status === 409 || /running|already/i.test(String(r.error || '')))) toast('A version is being made. Wait for it to land.'); else failed(r, 'PMOS did not start'); return false; }
+    K.text = ''; K.view = 'plan';
+    await load(true); scrollLog();
+    return true;
+  }
+  async function addSource(kind, label, v, desc) {
+    const p = planOf(cur()); const base = slug(v.name || label); const have = new Set(((p && p.sources) || []).map((s) => s.id));
+    let sid = base; for (let k = 2; have.has(sid); k++) sid = base + '-' + k;
+    const source = { id: sid, kind, name: String(v.name || label).slice(0, 200), use: String(v.use || desc).slice(0, 600) };
+    if (v.via) source.via = v.via; if (v.ref) source.ref = v.ref;
+    S.busy = true;
+    const r = await RSX.source({ ws, id, source });
+    S.busy = false;
+    if (!r || !r.ok) { failed(r, 'The source was not added'); paint(true); return; }
+    K.panel = false; K.form = null; K.view = 'plan';
+    if (kind === 'chrome' || kind === 'computer') K.check = sid;
+    S.charts = null; await load(true); scrollLog();
+    toast(kind === 'chrome' || kind === 'computer' ? 'Added. PMOS is checking it step by step.' : 'Added as a source. It is in the next version.');
+  }
+
+  /* ── the result ── */
+  function look(n) { K.ver = n; K.view = 'plan'; K.open = null; need(n).then(() => need(n > 1 ? n - 1 : null)).then(() => paint(true)); }
+  async function revert(n) {
+    const r = await RSX.revert({ ws, id, n }); if (!r || !r.ok) { failed(r, 'It did not go back'); return; }
+    await load(true); toast('Back to S' + n + '. The next turn builds on it. The later versions stay in the strip.');
+  }
+  async function accept() {
+    const n = K.ver != null ? K.ver : cur(); if (n == null) { toast('Make a version first.'); return; }
+    S.busy = true; paint(true);
+    const r = await RSX.accept({ ws, id, n }); S.busy = false;
+    if (!r || !r.ok) { paint(true); failed(r, 'The structure was not saved'); return; }
+    const made = (r.charts || []).length;
+    await load(true);
+    toast('Saved S' + n + ' as the structure of this report.' + (made ? ' ' + made + (made === 1 ? ' new chart is' : ' new charts are') + ' in Reports, Charts.' : '') + ' Next: Design how it looks. Nothing is sent.');
+    const m = await import('./c3-design-studio.js');
+    m.openBrief({ ws, id, name: (S.setup && S.setup.name) || name });
+  }
+  async function drop(kind, ref, what) {
+    const r = await RSX.remove({ ws, id, kind, ref }); if (!r || !r.ok) { failed(r, 'It was not removed'); return; }
+    K.open = null; S.charts = null; await load(true); scrollLog(); toast('Removed ' + what + '. That makes the next version; the old one stays in the strip.');
+  }
+  function discuss(c) {
+    K.text = 'About ' + c.name + ': '; paint(true);
+    const i = body.querySelector('[data-st-in]'); if (i) { i.focus(); i.setSelectionRange(i.value.length, i.value.length); }
+  }
+  async function check(sid) {
+    K.check = sid; const r = await RSX.check({ ws, id, source: sid});
+    if (!r || !r.ok) { failed(r, 'The check did not start'); paint(true); return; }
+    await load(true);
+  }
+  async function dryRun() {
+    const r = await RSX.runDry({ ws, id, n: K.ver }); if (!r || !r.ok) { failed(r, 'The test did not start'); return; }
+    S.dry = null; await load(true);
+  }
+  async function testPull(s) {
+    const r = await RSX.turn({ ws, id, text: 'Test pull from ' + s.name + ': read it now for the last complete period and tell me which charts that use it returned a number.' });
+    if (!r || !r.ok) { if (r && r.status === 409) toast('A version is being made. Wait for it to land.'); else failed(r, 'The test pull did not start'); return; }
+    toast('PMOS is reading ' + s.name + '. The answer shows in the conversation.'); await load(true); scrollLog();
+  }
+  function openIt(s) {
+    closeSheet();
+    if (s.kind === 'dashboard') goTo({ tab: 'rep', view: 'dash' }); else if (s.kind === 'chart') goTo({ tab: 'rep', view: 'charts' }); else if (s.kind === 'past-report') goTo({ tab: 'rep', view: 'reports' }); else goTo({ tab: 'init' });
+  }
+
+  function purposeSect(p) {
+    const u = p.purpose || {};
+    return sect({ ic: 'target', title: 'What it answers', attrs: { 'data-st-purpose': '' } }, kv([['Readers', u.readers || ''], ['Decision', u.decision || ''], ['Scope', u.scope || ''], ['Every', u.cadence || '']]),
+      (u.questions || []).length ? el('ul', { class: 'chgl' }, u.questions.map((t) => el('li', null, icon('target', 'sm'), el('span', null, t), el('span')))) : null);
+  }
+  function srcRow(s, p) {
+    const uses = (p.charts || []).filter((c) => c.source === s.id).length; const pm = s.group === 'pmos';
+    const [tone, word] = STATE_TAG[s.state] || ['', s.state];
+    const eye = s.kind === 'chrome' || s.kind === 'computer';
+    const act = pm ? pbtn('ghost', 'Open', 'out', { 'data-st-act': 'openpm', 'data-v': s.id, onclick: () => openIt(s) })
+      : eye ? pbtn('ghost', 'Check it works', 'shield', { 'data-st-act': 'chkopen', 'data-v': s.id, onclick: () => check(s.id) })
+        : s.state === 'reached' ? pbtn('ghost', 'Test pull', 'play', { 'data-st-act': 'test', 'data-v': s.id, onclick: () => testPull(s) })
+          : pbtn('ghost', 'How to connect', 'info', { 'data-st-act': 'connect', 'data-v': s.id, onclick: () => toast('Connect ' + s.name + ' in your Claude connectors (Settings, Connectors), then come back and press Test pull. PMOS reads it read only.') });
+    const li = el('li', { class: 'nrow', 'data-st-src': s.id }, el('span', { class: 'ki' }, icon(KIND_IC[s.kind] || 'doc')),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, s.name),
+        el('div', { class: 'chips' }, el('span', { class: 'tag' + (tone ? ' ' + tone : ''), 'data-st-state': s.state }, word), s.via ? chip(icon(s.state === 'reached' ? 'lock' : 'info', 'sm'), s.via) : null,
+          uses ? chip(icon('report', 'sm'), uses + (uses === 1 ? ' chart' : ' charts')) : null, eye ? chip(icon('clock', 'sm'), 'Re-checked 1 hour before each draft') : null),
+        s.use ? el('div', { class: 'dim rs-st-small' }, s.use) : null),
+      el('div', { class: 'acts' }, act, pbtn('ghost', 'Remove', 'trash', { 'data-st-act': 'dropsrc', 'data-v': s.id, onclick: () => drop('source', s.id, s.name) })));
+    return li;
+  }
+  function srcSect(p) {
+    const all = p.sources || []; const grp = (g) => all.filter((s) => s.group === g);
+    const list = (xs) => (xs.length ? el('ul', { class: 'list' }, xs.map((s) => srcRow(s, p))) : el('div', { class: 'fold' }, icon('info', 'sm'), ' Nothing here yet.'));
+    return sect({ ic: 'drop', title: 'Sources', count: all.length, attrs: { 'data-st-sources': '' } }, el('h3', { class: 'ds-h', 'data-st-group': 'pmos' }, 'From PMOS'), list(grp('pmos')),
+      el('h3', { class: 'ds-h', 'data-st-group': 'outside' }, 'Outside PMOS'), list(grp('outside')),
+      el('div', { class: 'ds-acts' }, pbtn('outline', 'Add a source', 'plus', { 'data-st-act': 'panel', onclick: () => { K.panel = true; paint(true); const pn = body.querySelector('[data-st-panel]'); if (pn) pn.scrollIntoView({ block: 'nearest' }); } })));
+  }
+  function usersOf(c) {
+    const m = (S.charts || []).find((x) => x.id === c.chart); const us = (m && m.users) || [];
+    return c.chart ? (us.length ? 'Charts, also used in ' + us.map((u) => (u.kind === 'dashboard' ? 'dashboard ' : 'report ') + u.name).join(', ') + ', and this report' : 'Charts, and this report') : 'This report. Saved in Charts when you use this structure';
+  }
+  function chartDetail(c, p) {
+    const dv = S.dry && S.dry.n === K.ver ? (S.dry.values || []).find((v) => v.chart === c.id) : null;
+    const tp = dv ? [el('b', null, dv.value), ' ', el('span', { class: 'dim' }, dv.was || ''), ' ', dv.delta ? el('span', { class: 'chip2 mono' }, dv.delta) : null, ' ', dv.flag ? el('span', { class: 'tag warn' }, 'Flagged') : null]
+      : ['Not tried on this version. Press Try it with real data.'];
+    const f = (lab, ...c2) => el('div', null, el('span', { class: 'dim mono' }, lab), ...c2);
+    return el('tr', { class: 'rs-st-det', 'data-st-detail': c.id }, el('td', { colspan: '5' }, el('div', { class: 'rs-st-detb' },
+      f('QUESTION IT ANSWERS', el('p', { 'data-st-q': '' }, c.question || '')), f('USED IN', el('p', { 'data-st-used': '' }, usersOf(c))),
+      f('EXACTLY WHAT PMOS READS', el('p', { class: 'mono rs-st-code', 'data-st-query': '' }, c.query || '')), f('WHY PMOS PROPOSED IT', el('p', { 'data-st-why': '' }, c.why || '')),
+      f('TEST PULL', el('p', { 'data-st-testpull': '' }, ...tp)),
+      el('div', { class: 'ds-acts' }, pbtn('outline', 'Discuss this chart', 'mail', { 'data-st-act': 'discuss', 'data-v': c.id, onclick: () => discuss(c) }),
+        c.chart ? pbtn('ghost', 'Open in Charts', 'out', { 'data-st-act': 'opencharts', onclick: () => { closeSheet(); goTo({ tab: 'rep', view: 'charts' }); } }) : null,
+        pbtn('ghost', 'Remove it', 'trash', { 'data-st-act': 'drop', 'data-v': c.id, onclick: () => drop('chart', c.id, c.name) })))));
+  }
+  function chartsSect(p) {
+    const cs = p.charts || []; const nm = (id) => { const s = (p.sources || []).find((x) => x.id === id); return s ? s.name.split(':')[0] : ''; };
+    const rows = cs.flatMap((c) => [el('tr', { class: 'rs-st-row' + (K.open === c.id ? ' on' : ''), 'data-st-chart': c.id },
+      el('td', null, btn({ class: 'tt', 'data-st-act': 'chart', 'data-v': c.id, 'aria-expanded': String(K.open === c.id), onclick: () => { K.open = K.open === c.id ? null : c.id; paint(true); } }, c.name),
+        el('div', null, c.chart ? el('span', { class: 'tag', 'data-st-tag': 'from' }, 'From Charts') : el('span', { class: 'tag acc', 'data-st-tag': 'new' }, 'New chart'))),
+      el('td', null, c.from || '', el('div', { class: 'dim rs-st-tiny' }, nm(c.source))), el('td', null, c.how || ''), el('td', null, c.compare || ''), el('td', null, c.flag || '')),
+    K.open === c.id ? chartDetail(c, p) : null]);
+    const nNew = cs.filter((c) => !c.chart).length;
+    return sect({ ic: 'report', title: 'Charts', count: cs.length, attrs: { 'data-st-metrics': '' }, right: el('span', { class: 'dim mono rs-st-tiny' }, nNew + ' new, ' + (cs.length - nNew) + ' from Charts') },
+      cs.length ? el('div', { class: 'rs-st-tw' }, el('table', { class: 'tbl rs-st-tbl' }, el('thead', null, el('tr', null, ['Chart', 'From', 'How it is worked out', 'Compared with', 'Flag when'].map((h) => el('th', null, h)))), el('tbody', null, rows)))
+        : el('div', { class: 'fold' }, icon('info', 'sm'), ' No chart yet. Tell PMOS what the report must answer.'),
+      el('div', { class: 'dim rs-st-small' }, 'Each number is a chart: one question, its data and its logic. "Use this structure" saves the new ones in Reports, Charts, where any report or dashboard can use them. A chart from Charts is defined there once; changing it changes it everywhere it is used. Open one to see exactly what PMOS reads.'));
+  }
+  function outlineSect(p) {
+    const os = p.outline || []; const prev = K.ver > 1 ? planOf(K.ver - 1) : null; const prevIds = prev ? new Set((prev.outline || []).map((o) => o.id)) : null;
+    const nm = (id) => { const c = (p.charts || []).find((x) => x.id === id); return c ? c.name : id; };
+    return sect({ ic: 'todo', title: 'Outline', count: os.length, attrs: { 'data-st-outline': '' } }, el('ol', { class: 'rs-st-ol' }, os.map((o, i) => el('li', { 'data-st-section': o.id },
+      el('span', { class: 'rs-st-n mono' }, String(i + 1)), el('div', null, el('b', null, o.title), o.fixed ? [' ', el('span', { class: 'tag' }, 'In every report')] : null, prevIds && !prevIds.has(o.id) ? [' ', el('span', { class: 'tag acc' }, 'New in S' + K.ver)] : null,
+        o.notes ? el('div', { class: 'dim rs-st-small' }, o.notes) : null,
+        el('div', { class: 'chips' }, (o.charts || []).map((cid) => chip(icon('report', 'sm'), nm(cid))), o.fixed ? null : chip(icon('spark', 'sm'), 'PMOS notes'), o.show ? chip(icon('img', 'sm'), o.show) : null))))),
+    el('div', { class: 'dim rs-st-small' }, 'Each section places charts and the notes PMOS writes about them. Headline, Needs your call and Sources stay in every report; everything between them is yours. How each part looks is the Design step.'));
+  }
+  function checkSect(sid, p) {
+    const s = ((p && p.sources) || []).find((x) => x.id === sid); const c = (S.D.checks || {})[sid];
+    const kind = (c && c.kind) || (s && s.kind) || 'chrome'; const chrome = kind === 'chrome'; const nm = s ? s.name : sid;
+    const steps = (c && c.steps) || []; const bad = steps.filter((x) => x.state === 'needs-you').length;
+    const rows = steps.map((x) => { const [ic, , word] = STEP_TAG[x.state] || STEP_TAG.waiting; const tone = (STEP_TAG[x.state] || STEP_TAG.waiting)[1];
+      return el('li', { 'data-st-step': x.id, 'data-st-step-state': x.state }, icon(ic, 'sm'), el('span', null, el('b', null, x.label), el('br'), el('span', { class: 'dim rs-st-small' }, x.reason || '')), el('span', { class: 'tag' + (tone ? ' ' + tone : '') }, word)); });
+    const right = !c ? el('span', { class: 'tag' }, 'Not checked') : c.running ? el('span', { class: 'tag', 'data-st-check-state': 'running' }, 'Checking') : c.ok ? el('span', { class: 'tag ok', 'data-st-check-state': 'ok' }, 'All steps work') : el('span', { class: 'tag bad', 'data-st-check-state': 'fail' }, bad + (bad === 1 ? ' step needs you' : ' steps need you'));
+    return sect({ ic: 'shield', title: 'Check: ' + nm, right, attrs: { 'data-st-check': sid } },
+      rows.length ? el('ul', { class: 'chgl rs-st-chk' }, rows) : el('div', { class: 'fold', role: 'status' }, icon('clock', 'sm'), c && c.running ? ' Starting the check.' : ' Not checked yet. Press Check again to go through each step.'),
+      el('h3', { class: 'ds-h' }, 'What the session may do'),
+      el('ul', { class: 'chgl' }, el('li', null, icon('lock', 'sm'), el('span', null, chrome ? 'Only the browser tools: open the page, read it, scroll, set the date range. It cannot submit a form or change a setting, and it closes the tab when it is done.'
+        : 'Open the app, read the screen, and nothing else. It takes over the mouse while it reads, so PMOS runs it only when you have been away for 15 minutes, or asks you first. It is used only when your own Claude Code settings allow computer use.'), el('span'))),
+      el('h3', { class: 'ds-h' }, 'When a cycle runs'),
+      el('ul', { class: 'chgl' }, el('li', null, icon('clock', 'sm'), el('span', null, 'PMOS runs this check again 1 hour before the draft.'), el('span')),
+        el('li', null, icon('alert', 'sm'), el('span', null, 'If your Mac is asleep, ' + (chrome ? 'Chrome is closed or the sign-in has expired' : 'the app is closed or macOS blocks it') + ', Work shows what to do. The draft waits up to 4 hours, then goes ahead without this source and says so under Sources. It never guesses a number.'), el('span'))),
+      el('div', { class: 'ds-acts' }, pbtn(c && c.ok ? 'outline' : 'primary', 'Check again', 'undo', { 'data-st-act': 'chkagain', 'data-v': sid, disabled: !!(c && c.running), onclick: () => check(sid) })));
+  }
+  function planView() {
+    const p = planShown(); const v = ver(K.ver);
+    if (!p) return [el('div', { class: 'fold', role: 'status' }, icon('clock', 'sm'), ' ' + (running() ? 'PMOS is making the first version.' : S.D.versions.length ? 'Reading S' + K.ver + '.' : 'No version yet. Tell PMOS what the report is for on the left, then press Make the first version.'), ' ')];
+    const ids = [...new Set([K.check, ...Object.entries(S.D.checks || {}).filter(([, c]) => c && c.running).map(([k]) => k)].filter(Boolean))].filter((sid) => (p.sources || []).some((s) => s.id === sid));
+    return [el('div', { class: 'dim rs-st-small', 'data-st-vcap': String(K.ver) }, el('b', { class: 'rs-st-fg' }, 'S' + K.ver), ' · ' + vlabel(v) + (v && v.at ? ' · made ' + hhmm(v.at) : '') + '.' + (K.ver !== cur() ? ' You are looking at an older version.' : '')),
+      purposeSect(p), ...ids.map((sid) => checkSect(sid, p)), srcSect(p), chartsSect(p), outlineSect(p)];
+  }
+  function optionsView() {
+    let os = (planShown() || {}).options || [];
+    if (!os.length) { const l = [...(S.D.log || [])].reverse().find((x) => (x.options || []).length); os = l ? l.options : []; }
+    os = [...os].sort((a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0));
+    if (!os.length) return [el('div', { class: 'fold', 'data-st-nooptions': '' }, icon('info', 'sm'), ' PMOS has not proposed other structures yet. Ask for another angle in the chat.')];
+    return [el('div', { class: 'rs-st-opts', 'data-st-options': '' }, os.map((o) => el('section', { class: 'card sect rs-st-opt', 'data-st-option': o.name },
+      el('div', { class: 'sh2' }, el('h2', null, icon('todo', 'sm'), o.name), o.recommended ? el('span', { class: 'tag acc' }, 'Recommended') : null),
+      el('ol', { class: 'rs-st-mini' }, (o.sections || []).map((s) => el('li', null, s))),
+      el('div', null, el('span', { class: 'dim mono' }, 'GOOD FOR'), el('p', null, o.good || '')), el('div', null, el('span', { class: 'dim mono' }, 'MISSES'), el('p', null, o.misses || '')),
+      el('div', { class: 'ds-acts' }, pbtn(o.recommended ? 'primary' : 'outline', 'Use this instead', 'next', { 'data-st-act': 'choose', 'data-v': o.name, onclick: () => { K.text = 'Use the "' + o.name + '" structure instead.'; K.view = 'plan'; paint(true); const i = body.querySelector('[data-st-in]'); if (i) i.focus(); } }))))),
+    el('div', { class: 'dim rs-st-small' }, 'PMOS shaped these from your answers: readers, the decision, and what must be in it. Ask for another angle in the chat.')];
+  }
+  function dryView() {
+    const p = planShown() || {}; const d = S.dry; const isNow = d && d.n === K.ver;
+    const run = pbtn(d ? 'outline' : 'primary', d ? 'Run it again' : 'Try it on the last complete period', 'play', { 'data-st-act': 'dryrun', disabled: running() || !planShown(), onclick: () => dryRun() });
+    if (dryRunning()) return [el('div', { class: 'fold a', role: 'status', 'data-st-dryrunning': '' }, icon('clock', 'sm'), ' PMOS is running the plan on the last complete period. Nothing is saved.')];
+    if (!d) return [el('div', { class: 'fold', 'data-st-nodry': '' }, icon('info', 'sm'), ' Run the plan on the last complete period before any design: the headline PMOS would write, each chart\'s value, the flags, and what it could not get. It reads only and saves nothing in the report.'), el('div', { class: 'ds-acts' }, run)];
+    if (S.D.dry && S.D.dry.ok === false) return [el('div', { class: 'fold w', role: 'alert', 'data-st-dryfail': '' }, icon('alert', 'sm'), ' The test did not finish. Nothing was saved. Try it again.'), el('div', { class: 'ds-acts' }, run)];
+    const nm = (cid) => { const c = (p.charts || []).find((x) => x.id === cid); return c ? c.name : cid; };
+    const vs = d.values || []; const flags = vs.filter((x) => x.flag); const miss = d.missing || [];
+    const line = (x) => el('li', null, icon(x.flag ? 'flag' : 'check', 'sm'), el('span', null, el('b', null, nm(x.chart)), ': ' + (x.value || ''), ' ', el('span', { class: 'dim' }, x.was || ''), ' ', x.delta ? el('span', { class: 'chip2 mono' }, x.delta) : null), el('span', null, x.flag ? el('span', { class: 'tag warn' }, 'Flagged') : null));
+    const srcNm = (sid) => { const s = (p.sources || []).find((x) => x.id === sid); return s ? s.name : sid; };
+    return [el('div', { class: 'fold', 'data-st-dry': '' }, icon('info', 'sm'), ' The plan run on ' + (d.period || 'the last complete period') + ', before any design' + (isNow ? '' : ', for S' + d.n + ' (you are looking at S' + K.ver + ')') + '. Plain content only: this is what the draft would say. Read ' + hhmm(S.D.dry.at) + '; nothing was saved or sent.'),
+      sect({ ic: 'doc', title: 'Headline, as PMOS would write it', attrs: { 'data-st-dry-headline': '' } }, el('p', { class: 'rs-st-p' }, d.headline || '')),
+      sect({ ic: 'scale', title: 'Numbers', count: vs.length, attrs: { 'data-st-dry-values': '' } }, el('ul', { class: 'chgl' }, vs.map(line))),
+      sect({ ic: 'flag', title: 'Flags this period', count: flags.length, attrs: { 'data-st-dry-flags': '' } }, flags.length ? el('ul', { class: 'chgl' }, flags.map((x) => el('li', null, icon('flag', 'sm'), el('span', null, nm(x.chart) + ': ' + (x.note || 'flagged by its rule') + '.'), el('span', null, el('span', { class: 'tag warn' }, 'Flagged'))))) : el('div', { class: 'fold' }, icon('check', 'sm'), ' Nothing is flagged.')),
+      sect({ ic: 'alert', title: 'Could not get', count: miss.length, attrs: { 'data-st-dry-missing': '' } }, miss.length ? el('ul', { class: 'chgl' }, miss.map((x) => el('li', null, icon('alert', 'sm'), el('span', null, srcNm(x.source) + ': ' + (x.reason || '')), el('span')))) : el('div', { class: 'fold' }, icon('check', 'sm'), ' Every chart returned a number.')),
+      (d.options || []).length ? sect({ ic: 'spark', title: 'Options PMOS would propose', count: d.options.length, attrs: { 'data-st-dry-options': '' } }, el('ul', { class: 'chgl' }, d.options.map((t) => el('li', null, icon('spark', 'sm'), el('span', null, t), el('span')))), el('div', { class: 'dim rs-st-small' }, 'You pick or rewrite these before you issue. PMOS never decides them.')) : null,
+      el('div', { class: 'ds-acts' }, run)];
+  }
+  function outHTML() {
+    const D = S.D;
+    const strip = el('div', { class: 'rd-dks-vers' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Versions', 'data-st-versions': '' }, D.versions.map((v) => btn({ 'data-st-v': String(v.n), 'aria-pressed': String(K.view === 'plan' && K.ver === v.n), title: vlabel(v), onclick: () => look(v.n) }, 'S' + v.n, D.saved === v.n ? icon('check', 'sm') : null))),
+      el('div', { class: 'seg', role: 'group', 'aria-label': 'View' }, [['plan', 'todo', 'Plan'], ['options', 'cols', 'Other structures'], ['dry', 'play', 'Try it with real data']].map(([k, ic, l]) => btn({ 'data-st-view': k, 'aria-pressed': String(K.view === k), onclick: () => { K.view = k; paint(true); } }, icon(ic, 'sm'), l))),
+      K.ver != null && K.ver !== D.current ? pbtn('outline', 'Go back to S' + K.ver, 'undo', { 'data-st-act': 'revert', onclick: () => revert(K.ver) }) : null);
+    return [strip, ...(K.view === 'options' ? optionsView() : K.view === 'dry' ? dryView() : planView())];
+  }
+
+  /* ── painting ── */
+  function paint(force) {
+    if (S.closed) return;
+    if (!S.D) { put(body, S.err ? el('div', { class: 'fold w', role: 'alert', 'data-st-err': '' }, icon('alert', 'sm'), ' ' + S.err) : el('div', { class: 'fold', role: 'status' }, icon('clock', 'sm'), ' Reading the structure.')); return; }
+    const sig = JSON.stringify([S.D, S.setup, S.dry, S.charts, K.view, K.ver, K.open, K.panel, K.form, K.check, S.busy, Object.keys(S.cache), Object.keys(S.cache).map((k) => S.cache[k] && 1)]);
+    if (!force && sig === S.shown) return;
+    S.shown = sig;
+    const D = S.D; const nm = (S.setup && S.setup.name) || name || 'Report';
+    const sb = body.closest('.sb'); const y = sb ? sb.scrollTop : 0; const log = body.querySelector('.rd-dks-log'); const ly = log ? log.scrollTop : null;
+    const focused = document.activeElement && body.contains(document.activeElement) && document.activeElement.matches('[data-st-in],[data-st-field]') ? (document.activeElement.hasAttribute('data-st-in') ? '[data-st-in]' : '[data-st-field="' + document.activeElement.getAttribute('data-st-field') + '"]') : null;
+    const fvals = {}; body.querySelectorAll('[data-st-field]').forEach((i) => { fvals[i.getAttribute('data-st-field')] = i.value; });
+    put(body,
+      el('div', { class: 'rs-st-bar' }, el('div', { class: 'chips2 rd-wrap' },
+        el('div', { class: 'seg', role: 'group', 'aria-label': 'Studio step', 'data-st-steps': '' }, btn({ 'data-st-step-btn': 'structure', 'aria-pressed': 'true' }, icon('todo', 'sm'), '1 Structure'),
+          btn({ 'data-st-step-btn': 'design', 'aria-pressed': 'false', onclick: () => toDesign() }, icon('img', 'sm'), '2 Design')),
+        el('b', null, nm), D.saved != null ? el('span', { class: 'chip2 ds-good', 'data-st-saved': String(D.saved) }, icon('check', 'sm'), 'Saved structure: S' + D.saved) : el('span', { class: 'chip2', 'data-st-saved': '' }, 'Not saved yet')),
+      el('div', { class: 'chips2' }, pbtn('primary', 'Use this structure', 'check', { 'data-st-act': 'save', disabled: !D.versions.length || S.busy, onclick: () => accept() }))),
+      el('div', { class: 'fold' }, icon('info', 'sm'), ' Decide what the report answers, where each number comes from and how it is worked out. PMOS proposes, you refine by talking it through, then Design makes it look right. Sources are read only. Nothing is sent.'),
+      el('div', { class: 'rd-dks' }, chat(), el('div', { class: 'rd-dks-out', 'data-st-preview': '' }, ...outHTML())));
+    if (sb) sb.scrollTop = y; const l2 = body.querySelector('.rd-dks-log'); if (l2) l2.scrollTop = ly == null ? l2.scrollHeight : ly;
+    for (const [k, v] of Object.entries(fvals)) { const i = body.querySelector('[data-st-field="' + k + '"]'); if (i) i.value = v; }
+    if (focused) { const n = body.querySelector(focused); if (n) n.focus(); }
+  }
+  async function toDesign() {
+    const m = await import('./c3-design-studio.js');
+    m.openStudio({ ws, id, name: (S.setup && S.setup.name) || name });
+  }
+  paint(true); load(false).then(scrollLog);
+  return { close: () => ui.close(), reload: () => load(true) };
+}
+
+/* ── the saved structure: a section of the report setup sheet ── */
+export async function structureSection({ ws, id, name } = {}) {
+  ensureStructureCss();
+  const r = await RSX.structure(ws, id);
+  const open = (view) => () => openStructure({ ws, id, name, view });
+  const none = (why) => sect({ ic: 'todo', title: 'Structure', attrs: { 'data-st-brief': '' } }, el('div', { class: 'fold', 'data-st-nosaved': '' }, icon('info', 'sm'), ' ' + why),
+    el('div', { class: 'ds-acts' }, pbtn('primary', 'Shape the report', 'todo', { 'data-st-act': 'open', onclick: open() })));
+  if (!r || r.ok === false || !r.structure) return none('The structure could not be read.');
+  const D = r.structure;
+  if (D.saved == null) return none('No saved structure yet. Decide what the report answers, where each number comes from and how it is worked out, then press Use this structure. Until then PMOS drafts it with the standard frame.');
+  let p = D.saved === D.current ? D.plan : null;
+  if (!p) { const v = await RSX.version(ws, id, D.saved); p = v && v.ok ? v.plan : null; }
+  if (!p) return none('The saved version S' + D.saved + ' could not be read.');
+  const u = p.purpose || {}; const nNew = (p.charts || []).filter((c) => !c.chart).length; const fromCharts = (p.charts || []).length - nNew;
+  const eye = (p.sources || []).filter((s) => s.kind === 'chrome' || s.kind === 'computer');
+  return el('div', { class: 'rs-st-saved', 'data-st-saved-wrap': '' },
+    sect({ ic: 'todo', title: 'Structure', right: el('span', { class: 'tag acc', 'data-st-saved-tag': '' }, 'Structure S' + D.saved), attrs: { 'data-st-brief': '' } },
+      el('div', { class: 'dim rs-st-small' }, 'Written by PMOS from your studio conversation, version S' + D.saved + '. Each cycle PMOS reads the sources with this logic, works out the numbers and writes the notes. If a source cannot be read, the draft says so under Sources and never guesses the number.'
+        + (D.current !== D.saved ? ' A newer version, S' + D.current + ', is not saved.' : '')),
+      el('h3', { class: 'ds-h' }, 'What it answers'), el('blockquote', { class: 'rd-dks-q', 'data-st-answers': '' }, [u.readers, u.decision, u.scope].filter(Boolean).join('. ') + '.'),
+      el('h3', { class: 'ds-h' }, 'Sources'), el('div', { class: 'chips' }, (p.sources || []).map((s) => chip(icon(KIND_IC[s.kind] || 'doc', 'sm'), s.name))),
+      el('h3', { class: 'ds-h' }, 'Charts'), el('div', { class: 'chips' }, (p.charts || []).map((c) => chip(icon('report', 'sm'), c.name + (c.chart ? '' : ' · new')))),
+      el('div', { class: 'dim rs-st-tiny' }, nNew + (nNew === 1 ? ' new chart' : ' new charts') + ' saved in Reports, Charts. ' + fromCharts + (fromCharts === 1 ? ' comes' : ' come') + ' from Charts.'),
+      el('h3', { class: 'ds-h' }, 'Outline'), el('ol', { class: 'rs-st-mini' }, (p.outline || []).map((o) => el('li', null, o.title))),
+      el('div', { class: 'ds-acts' }, pbtn('primary', 'Refine the structure', 'spark', { 'data-st-act': 'open', onclick: open() }), pbtn('outline', 'Try it with real data', 'play', { 'data-st-act': 'opendry', onclick: open('dry') }))),
+    sect({ ic: 'info', title: 'When the structure changes' }, el('ul', { class: 'chgl' }, el('li', null, icon('clock', 'sm'), el('span', null, 'A change applies from the next cycle. Issued cycles keep the structure they were drafted with.'), el('span')),
+      eye.length ? el('li', null, icon('out', 'sm'), el('span', null, eye.map((s) => s.name).join(', ') + (eye.length === 1 ? ' is' : ' are') + ' read on your Mac. PMOS checks it 1 hour before each draft; if the check fails, Work asks you to open Chrome or sign in, and the draft waits up to 4 hours.'), el('span')) : null,
+      el('li', null, icon('alert', 'sm'), el('span', null, 'When a source stops answering, or an event is renamed, the draft names the chart it could not get and PMOS asks you in the studio.'), el('span')))));
+}

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

@@ -64,3 +64,5 @@
 /* the rule line under the tabs: how Reports is organised (Live, Sent, Building blocks) */
 .rp3 .rp3-rule { margin: 0 0 var(--sp-3); align-items: center; }
 .rp3 .rp3-rulelbl { font-size: var(--fs-1); }
+.rp3-libcard .dim.mono{font-size:var(--fs-1)}
+.rp3-dp{margin:2px 0 10px;font-size:var(--fs-3);line-height:1.5;overflow-wrap:anywhere}

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

@@ -117,7 +117,7 @@ export function mountReports(host, ctx) {
   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, alive: true, libOpen: new Set(), setup: null };
+  const S = { tab: 'dash', scope: 'portfolio', pick: { board: '', initiative: '' }, meta: null, metaErr: null, layouts: {}, edit: false, alive: true, libOpen: new Set(), setup: null, data: [] };
   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');
@@ -151,7 +151,7 @@ export function mountReports(host, ctx) {
   };
 
   /* tabs */
-  const badgeOf = (id) => (id === 'dash' ? SCOPES.length : id === 'charts' ? (S.meta ? lib().length : null) : (RS.loaded ? draftsWaiting(RS.docs) : null));
+  const badgeOf = (id) => (id === 'dash' ? SCOPES.length : id === 'charts' ? (S.meta ? lib().length + S.data.length : null) : (RS.loaded ? draftsWaiting(RS.docs) : null));
   function drawTabs() {
     tabBar.replaceChildren(...TABS.map(([id, label, icon]) => { const n = badgeOf(id); return 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,
       n ? el('span', { class: 'bdg g', 'data-rp3-badge': id, title: id === 'reports' ? 'Drafts waiting for you' : '' }, String(n)) : null); }));
@@ -334,8 +334,22 @@ export function mountReports(host, ctx) {
       if (S.libOpen.has(r.id)) api.open();
       return row;
     });
+    /* data charts: the ones a report's Structure step saved (GET /api/charts), beside the built-ins above, with their source and where they are used */
+    const usedBy = (c) => (c.users || []).map((u) => (u.kind === 'dashboard' ? 'Dashboard ' : 'Report ') + u.name).join(', ') || 'none yet';
+    const dataRows = S.data.map((c) => {
+      const src = c.source || {}; const srcName = [src.name, src.via ? 'through ' + src.via : ''].filter(Boolean).join(' ') || 'no source named';
+      const def = (lab, v) => v ? el('div', null, el('span', { class: 'dim mono' }, lab), el('p', { class: 'rp3-dp' }, v)) : null;
+      const card = el('div', { class: 'rp3-libcard', 'data-rp3-libcard': c.id }, def('EXACTLY WHAT PMOS READS', c.query), def('HOW IT IS WORKED OUT', c.how), def('COMPARED WITH', c.compare), def('FLAGGED WHEN', c.flag), def('WHY IT IS HERE', c.why));
+      const xp = makeXp(card);
+      const row = el('li', { class: 'nrow rp3-librow', 'data-home': c.id, 'data-rp3-data-chart': c.id },
+        el('span', { class: 'ki hot' }, c3ic('report')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, c.name), el('div', { class: 'dim' }, c.question || ''),
+          el('div', { class: 'chips' }, el('span', { class: 'tag acc' }, 'Data chart'), el('span', { class: 'chip2', 'data-rp3-source': c.id }, c3ic('drop', 'sm'), srcName), el('span', { class: 'chip2', 'data-rp3-used': c.id }, c3ic('report', 'sm'), 'Used in: ' + usedBy(c))), xp));
+      attachExpand(row, xp, { key: 'rp3d-' + c.id });
+      return row;
+    });
     P.replaceChildren(el('div', { class: 'calbody brief' }, el('div', { class: 'fold rp3-note' }, c3ic('cols', 'sm'), 'Each chart lives here once. Dashboards and reports point at it.'),
-      sect('Charts', 'cols', rows.length, el('ul', { class: 'list', role: 'list', 'data-rp3-lib': '' }, rows))));
+      sect('Charts', 'cols', rows.length + dataRows.length, el('ul', { class: 'list', role: 'list', 'data-rp3-lib': '' }, rows, dataRows))));
   }
   function openInLibrary(rid) {
     S.libOpen.add(rid); showTab('charts');
@@ -350,6 +364,11 @@ export function mountReports(host, ctx) {
     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 === 'charts') drawLib();
   }, (e) => { S.metaErr = String((e && e.message) || e); drawDash(); });
+  /* the data charts a report's Structure step saved; a workspace without them (or an older server) shows the built-ins alone */
+  Promise.resolve(get('/api/charts' + (C.ws ? '?ws=' + encodeURIComponent(C.ws) : ''))).then((r) => {
+    if (!S.alive || !r || !r.ok) return;
+    S.data = r.charts || []; drawTabs(); if (S.tab === 'charts') drawLib();
+  }, () => {});
 
   const api = { dispose() { S.alive = false; offReports(); if (livePage === api) livePage = null; stopPhone(); root.remove(); }, root, showTab: (v) => { v = TAB_OF[v] || v; if (panes[v]) showTab(v); } };
   livePage = api;

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

@@ -611,6 +611,8 @@ async function boot() {
   if (q.get('focus') || q.get('fdate')) import('./c3-focus.js').then((m) => m.openFocus({ event: { id: q.get('focus') || '', ...(q.get('fat') ? { at: q.get('fat'), title: q.get('ftitle') || '' } : {}) }, date: q.get('fdate') || '', pop: q.get('pop') === '1', meet: q.get('meet') || '', mtitle: q.get('mtitle') || '' })).catch(() => { /* the focus page is not available */ });   // a reload keeps the Meeting focus page open; ?pop=1 is its compact form for the Chrome extension (focus=now asks which meeting the Meet call is)
   /* ?studio=<report id> opens that report's design studio over the Reports tab (the PMOS Chrome extension's Open the studio). */
   if (q.get('studio') && /^[a-z][a-z0-9-]{0,39}$/.test(q.get('studio'))) { if (!start) start = 'rep'; import('./c3-design-studio.js').then((m) => m.openStudio({ ws: S.ws, id: q.get('studio'), name: '' })).catch(() => { /* the studio is not available */ }); }
+  /* ?structure=<report id> opens that report's Structure step (the studio's step 1) over the Reports tab. */
+  if (q.get('structure') && /^[a-z][a-z0-9-]{0,39}$/.test(q.get('structure'))) { if (!start) start = 'rep'; import('./c3-report-structure.js').then((m) => m.openStructure({ ws: S.ws, id: q.get('structure'), name: '' })).catch(() => { /* the structure step is not available */ }); }
   if (!S.userNav) showTab(start || 'brief', false);   // a press during the read above (the gear, a tab) wins over the start page
   new ResizeObserver(moveInd).observe(S.tabNav);
   briefCount(); S.dock.start(); S.dockStarted = true;

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

@@ -224,6 +224,7 @@ async function loadOpen(inst) {
   inst.note = r && r.ok ? r.note : null;
   inst.rec = r && r.ok ? r.recording || null : null;
   inst.shots = r && r.ok && r.screen ? r.screen.frames || [] : [];
+  inst.aside = r && r.ok && r.screen ? r.screen.aside || 0 : 0;
   drawRight(inst);
 }
 /** The replay of the note's kept audio: one <audio> per note, kept across redraws so playback goes on. Null when no audio is kept. */
@@ -282,7 +283,7 @@ function drawRight(inst, force) {
   const n = inst.note;
   const live = dock.recordState();
   const held = !!n && live.mode !== 'idle' && live.id === n.id;
-  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], (inst.shots || []).length, live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
+  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], (inst.shots || []).length, inst.aside || 0, live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
   // a held note draws again on every render: the clock, the lines and the paused minutes move. Nothing else draws without a change.
   if (!force && !held && sig === inst.rightSig) return;
   // a field being typed in is not redrawn under the cursor, except in the live block, whose fields are kept across redraws
@@ -417,7 +418,8 @@ function noteParts(inst, n, live) {
     el('p', { class: 'nt-hint' }, 'Kept on this machine. Press a time in the discussion to play from there.')));
   // the screenshots of the shared screen, on the same clock as the replay and the transcript (notes-screen-capture)
   const shots = held || n.private ? [] : inst.shots || [];
-  if (shots.length) out.push(screenStrip({ id: n.id, frames: shots, seek: replay ? (ms) => seekReplay(inst, ms) : null, replay }));
+  const asideN = held || n.private ? 0 : inst.aside || 0;
+  if (shots.length || asideN) out.push(screenStrip({ id: n.id, frames: shots, aside: asideN, seek: replay ? (ms) => seekReplay(inst, ms) : null, replay }));
 
   const cf = conflictsOf(n);
   if (cf.length) {