create-pmos 0.252.0 → 0.253.0

package/workspace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.252.0",
+  "version": "0.253.0",
   "private": true,
   "description": "PMOS Terminal Workspace — local companion hosting real PTYs beside the library and gates (D62)",
   "license": "MIT",

package/workspace/public/pm/premium-board.js

@@ -0,0 +1,180 @@
+/* pm/premium-board.js — the premium Board page (initiative briefing-premium-board, slice 5). Reads GET /api/board-premium and draws the model
+ * lib/board-premium.js builds from the routes the production Initiatives page reads: the Initiatives card (List, By stage, Timeline), the Sprint and
+ * Coming up cards, Core documents, the dock and the standard dialog. The one press is Draft it on a core document, through POST /api/core-docs/draft.
+ * Nothing here moves an initiative or issues a document. */
+import { pmPost } from './http.js';
+import { $, $$, esc, openDlg, closeDlg, toast, loadThread, onScroll, wireRail, logHtml, turnA, ptx, pillOf, CHECK, store, crumbHtml, wireCrumb } from './premium-shell.js';
+
+const MODE_KEY = 'pmos.premium.openAs';
+let M = null;                    // the model
+let view = 'list';
+let shown = 25;                  // rows of the list on screen
+let readTimer = null;
+wireRail('init');
+const ICO = (p) => `<svg class="i" viewBox="0 0 24 24">${p}</svg>`;
+const DOCI = '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h4"/>';
+const STATE_ICO = { Live: '<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>', 'Up to date': '<path d="M5 12.5l4.5 4.5L19 7.5"/>', Draft: '<path d="M4 20l4-1 11-11-3-3L5 16z"/>', 'Not started': '<circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16.5v.5"/>', Stale: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>', Due: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>' };
+
+/* ── header ───────────────────────────────────────────────────────────────────────────────────────────── */
+let crumbed = false;
+function drawHead() {
+  if (!crumbed) {
+    crumbed = true;
+    const boards = M.board.switcher || [];
+    $('#crumbHost').innerHTML = crumbHtml({ board: M.board.name || 'Board', boards, ask: 'Ask about this board' });
+    wireCrumb({ boards, board: M.board.id, goBoard: (ws, id) => location.assign('/premium-board.html?ws=' + encodeURIComponent(ws) + '&board=' + encodeURIComponent(id)), ask: () => openRow(rowOf('board:this-board')) });
+  }
+  $('#snap').textContent = M.header.text;
+  $('#snap').title = 'Every figure on this page comes from a record of the board. A date, owner or progress shows only when one was set.';
+  $('#brief').textContent = '';
+}
+
+/* ── initiatives ───────────────────────────────────────────────────────────────────────────────────────────── */
+const sub = (r) => `${esc(r.sub)}${r.statusLabel ? ` · <span class="${r.late ? 'bad' : 'warn'}">${esc(r.statusLabel)}</span>` : ''}`;
+function listRow(r, i) {
+  return `<button class="ini2 ibi${r.first ? ' first' : ''}" data-key="${esc(r.key)}"><span class="it"><b>${esc(r.title)}${r.first ? '<em class="tgf">Do this first</em>' : ''}</b><small>${sub(r)}</small></span><span class="wst"><span class="sg2" aria-hidden="true">${r.seg.map((c) => `<i class="${c}"></i>`).join('')}</span><em>${esc(r.stage || 'No stage')}${r.stageNote ? ' · ' + esc(r.stageNote) : ''}</em></span><span class="pg">${r.progress == null ? '' : `<i><b style="width:${r.progress}%"></b></i>`}</span><span class="rl${r.over ? ' over' : ''}">${esc(r.finish)}</span></button>`;
+}
+function drawList() {
+  const L = M.initiatives.list.rows;
+  if (!L.length) return '<p class="empty3 plain">No initiatives are on this board\'s now view.</p>';
+  return `<div class="inih"><span>Initiative</span><span>Where it is</span><span>Progress</span><span>Planned finish</span></div>` + L.slice(0, shown).map(listRow).join('')
+    + (L.length > shown ? `<p class="note" style="margin-top:10px">${L.length - shown} more are loaded. <button class="fold alt" id="more" type="button">Show ${Math.min(25, L.length - shown)} more</button></p>` : '');
+}
+function drawStages() {
+  const S = M.initiatives.stages;
+  if (!S.length) return '<p class="empty3 plain">This board has no workflow stages on record.</p>';
+  return `<div class="istg">${S.map((s) => `<div class="isc"><p class="label">${esc(s.stage)} <em>${s.count}</em></p>${s.rows.map((r) => `<button class="icd ibi" data-key="${esc(r.key)}"><b>${esc(r.title)}</b><small>${sub(r)}</small>${r.progress == null ? '' : `<span class="pg"><i><b style="width:${r.progress}%"></b></i></span>`}<small>${esc(r.finish)}</small></button>`).join('') || '<p class="mut">None</p>'}${s.more ? `<p class="mut">${s.more} more</p>` : ''}</div>`).join('')}</div>`;
+}
+function drawTime() {
+  const T = M.initiatives.timeline;
+  if (T.empty) return `<p class="empty3 plain">${esc(T.why)}</p>`;
+  return `<div class="tll"><div class="tlh" aria-hidden="true"><span>Initiative</span><span>${esc(T.from)} to ${esc(T.to)}</span><span></span></div><div class="tlgrid" aria-hidden="true"><span></span><div class="tlplot"><u class="td" style="left:${T.todayPct}%"></u></div><span></span></div>`
+    + T.bars.map((b, k) => `<button class="tlr${b.bad ? ' bd' : ''}${b.over ? ' ov' : ''}" data-key="${esc(b.key)}" style="--k:${k}"><span class="tlt"><b>${esc(b.title)}</b><small>${esc(b.sub)}</small></span><span class="tlbar" role="img" aria-label="${esc(b.title)}: ${esc(b.start)} to ${esc(b.end)}"><span class="tlb" style="--l:${b.l}%;--w:${b.w}%"><i class="fl" style="--e:${b.elapsed}%"></i></span></span><span class="tld"><span>${esc(b.start)}</span><span>${esc(b.end)}</span></span><span class="tln"><b>${b.n}</b><small>${esc(b.word)}</small></span></button>`).join('')
+    + `</div>${T.none ? `<p class="tlnone">${T.none} ${T.none === 1 ? 'initiative has' : 'initiatives have'} no dates on record and ${T.none === 1 ? 'is' : 'are'} not drawn.</p>` : ''}<p class="note" style="margin-top:10px">Each bar runs from a start date to an end date someone set. The filled part is the time elapsed. The line is today.</p>`;
+}
+function drawInit() {
+  const I = M.initiatives;
+  $('#iniCap').innerHTML = I.cap ? `<b>${I.cap.on} of ${I.cap.open}</b> open on track · ${I.risk} at risk · ${I.late} late${I.hold ? ' · ' + I.hold + ' on hold' : ''}` : 'no open initiatives';
+  const bar = $('#iniBar'); bar.hidden = !I.cap; if (I.cap) { bar.setAttribute('aria-valuemax', I.cap.open); bar.setAttribute('aria-valuenow', I.cap.on); $('b', bar).style.width = (I.cap.open ? I.cap.on / I.cap.open * 100 : 0) + '%'; }
+  $('#ibBody').innerHTML = view === 'list' ? drawList() : view === 'stages' ? drawStages() : drawTime();
+  $('#iniNote').textContent = I.note;
+  $$('#ibTabs button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.v === view)); pillOf($('#ibTabs'));
+}
+$('#ibTabs').addEventListener('click', (e) => { const b = e.target.closest('[data-v]'); if (!b) return; view = b.dataset.v; drawInit(); });
+$('#ibBody').addEventListener('click', (e) => {
+  if (e.target.closest('#more')) { shown += 25; drawInit(); return; }
+  const b = e.target.closest('[data-key]'); if (b) openIni(rowOf(b.dataset.key));
+});
+/* A click opens the initiative page, as the mockup's Page setting does; the Popup setting opens the dialog. The choice is kept in this browser. */
+let openMode = store.get(MODE_KEY) === 'popup' ? 'popup' : 'page';
+function drawMode() { $$('#modeSeg button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.m === openMode)); pillOf($('#modeSeg')); }
+$('#modeSeg').addEventListener('click', (e) => { const b = e.target.closest('[data-m]'); if (!b) return; openMode = b.dataset.m; store.set(MODE_KEY, openMode); drawMode(); toast('Initiatives now open as a ' + openMode + '.'); });
+function openIni(r) {
+  if (!r) return;
+  if (openMode === 'popup' || !r.id) { openRow(r); return; }
+  location.assign('/premium-initiative.html?id=' + encodeURIComponent(r.id) + (M.board.ws ? '&ws=' + encodeURIComponent(M.board.ws) + '&board=' + encodeURIComponent(M.board.id) : ''));
+}
+const rowOf = (key) => (M && M.rows || []).find((r) => r.key === key) || null;
+
+/* ── sprint, release, documents ─────────────────────────────────────────────────────────────────────────── */
+function drawSide() {
+  const S = M.sprint;
+  $('#sprCap').textContent = S.cap || '';
+  $('#sprBody').innerHTML = S.name
+    ? `<div class="spr"><div class="sph"><b>${esc(S.name)}</b><span class="mut">${esc([S.state, S.start && S.end ? S.start + ' to ' + S.end : ''].filter(Boolean).join(' · '))}</span></div>${S.goal ? `<p class="goal2"><b>Goal</b> ${esc(S.goal)}</p>` : ''}${S.summary ? `<p class="sum3">${esc(S.summary)}</p>` : ''}<div class="cnt"><span><b>${S.counts.done}</b> done</span><span><b>${S.counts.doing}</b> doing</span><span><b>${S.counts.todo}</b> to do</span></div></div>`
+    : `<p class="mut">${esc(S.why)}</p>`;
+  const R = M.release;
+  $('#relCap').textContent = R.cap || '';
+  $('#relBody').innerHTML = R.at ? `<div class="irow st"><time>${esc(R.at)}</time><span class="itx"><b>${esc(R.type ? R.type + ' release' : 'Release')}</b><small>${esc(R.cap)}</small></span></div>` : `<p class="empty3 plain">${esc(R.why)}</p>`;
+}
+function docRow(d) {
+  const act = !d.act ? '' : d.act.kind === 'draft' ? `<button class="dmcta alt" data-draft="${esc(d.key)}"${d.running ? ' disabled' : ''}>${d.running ? '<span class="spin"></span>' : ICO('<path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/>')}${esc(d.act.label)}</button>` : `<button class="dmcta alt" data-tab="${esc(d.act.tab)}">${esc(d.act.label)}</button>`;
+  return `<div class="dmr" role="listitem"><span class="dmo"><span class="dmi c-Board">${ICO(DOCI)}</span><span class="dmn"><b>${esc(d.title)}</b><small>${esc(d.what)}</small><span class="dmm"><span class="s ${esc(d.st || 'live')}">${ICO(STATE_ICO[d.state] || STATE_ICO['Not started'])}${esc(d.state)}</span>${d.cadence ? `<span>${ICO('<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>')}${esc(d.cadence)}</span>` : ''}${d.by ? `<span>${ICO('<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>')}${esc(d.by)}</span>` : ''}</span></span></span><span class="dmq">${act}</span></div>`;
+}
+let docFilter = 'all', docQuery = '';
+const draftable = () => (M.docs.rows || []).filter((d) => d.st === 'missing' && d.act && d.act.kind === 'draft' && !d.running);
+const docMatch = (d) => (docFilter === 'all' || (docFilter === 'none' ? d.st === 'missing' : docFilter === 'draft' ? d.st === 'draft' : d.st === 'ok')) && (!docQuery.trim() || (d.title + ' ' + d.what).toLowerCase().includes(docQuery.trim().toLowerCase()));
+function drawDocList() {
+  const D = M.docs, L = D.rows.filter(docMatch);
+  $('#docBody').innerHTML = L.length ? L.map(docRow).join('') : `<div class="dmem"><p>No document matches${docQuery.trim() ? ' “' + esc(docQuery.trim()) + '”' : ''}.</p></div>`;
+  $$('#dmF button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.dmf === docFilter)); if ($('#dmF')) pillOf($('#dmF'));
+}
+function drawDocs() {
+  const D = M.docs, c = D.counts;
+  $('#docCap').textContent = D.rows.length ? String(c.all) : '';
+  if (!D.rows.length) { $('#docTop').innerHTML = ''; $('#docBody').innerHTML = `<p class="empty3 plain">${D.missing ? 'The core documents could not be read, so none is shown.' : 'No core documents are on record for this board.'}</p>`; $('#docNote').textContent = ''; return; }
+  const dot = { ok: 'ok', draft: 'warn', missing: 'mut' };
+  const hadQ = $('#dmQ') && document.activeElement === $('#dmQ');
+  $('#docTop').innerHTML = `<p class="dsum"><span><b>${c.draft}</b> ${c.draft === 1 ? 'draft' : 'drafts'} to review</span><span><b>${c.none}</b> not started</span><span><b>${c.ok}</b> up to date</span>${draftable().length > 1 ? `<button class="dlink" data-draftall="1">${ICO('<path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/>')}Draft the ${draftable().length} not started</button>` : ''}</p>
+ <div class="dprog" role="img" aria-label="${c.ok} of ${c.all} up to date">${D.rows.map((d) => `<i class="${dot[d.st] || (d.st === 'live' ? 'ok' : 'mut')}"></i>`).join('')}</div>
+ <div class="dtool"><div class="seg" id="dmF" role="group" aria-label="Filter documents"><i class="pill"></i>${[['all', 'All', c.all], ['none', 'Not started', c.none], ['draft', 'Draft', c.draft], ['ok', 'Up to date', c.ok]].map(([k, l, n]) => `<button data-dmf="${k}" aria-pressed="${docFilter === k}">${l}<em>${n}</em></button>`).join('')}</div>
+  <label class="dmsr">${ICO('<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4-4"/>')}<input id="dmQ" type="search" placeholder="Find a document" aria-label="Find a document" value="${esc(docQuery)}"></label></div>`;
+  drawDocList();
+  if (hadQ) { const q = $('#dmQ'); q.focus(); q.setSelectionRange(q.value.length, q.value.length); }
+  $('#docNote').textContent = 'Draft it starts a read-only agent run that writes a draft for you to read. Nothing is sent. Issuing, dropping and adding a document are not built on this page.';
+}
+$('#docTop').addEventListener('click', async (e) => {
+  const f = e.target.closest('[data-dmf]'); if (f) { docFilter = f.dataset.dmf; drawDocList(); return; }
+  const all = e.target.closest('[data-draftall]'); if (!all || all.disabled) return;
+  all.disabled = true; let n = 0;
+  for (const d of draftable()) { const res = await pmPost('/api/core-docs/draft', { ws: M.board.ws, scope: M.docs.scope, key: d.key }); if (res && res.ok === true) n++; else { toast((res && res.error) || 'A draft could not be started.'); break; } }
+  if (n) toast('The agent is drafting ' + n + ' ' + (n === 1 ? 'document' : 'documents') + '. They run in the background and send nothing.');
+  await load();
+});
+$('#docTop').addEventListener('input', (e) => { if (e.target.id === 'dmQ') { docQuery = e.target.value; drawDocList(); } });
+const GOTAB = { rep: '/c3.html?tab=rep', init: '/c3.html?tab=init' };
+$('#docBody').addEventListener('click', async (e) => {
+  const t = e.target.closest('[data-tab]'); if (t) { location.assign(GOTAB[t.dataset.tab] || '/c3.html'); return; }
+  const b = e.target.closest('[data-draft]'); if (!b || b.disabled) return;
+  const key = b.dataset.draft, d = M.docs.rows.find((x) => x.key === key);
+  b.disabled = true;
+  const res = await pmPost('/api/core-docs/draft', { ws: M.board.ws, scope: M.docs.scope, key });
+  if (!res || res.ok !== true) { b.disabled = false; toast((res && res.error) || 'The draft could not be started.'); return; }
+  toast('The agent is drafting “' + (d ? d.title : key) + '”. It runs in the background and sends nothing.');
+  await load();
+});
+
+/* ── dock ───────────────────────────────────────────────────────────────────────────────────────────────── */
+function drawDock() { $('#dN').textContent = M.dock.needs; $('#dLab').textContent = M.dock.label; $('#dNext').innerHTML = M.dock.next ? `<i></i>First <b>${esc(M.dock.next)}</b>` : 'Nothing is late or at risk'; }
+
+/* ── the dialog: the initiative's record, no press, the read-only agent beside it ──────────────────────────── */
+function cardHtml(r) { return `<div class="acard" id="card"><p class="ct">What this page can do</p><p class="nodef" id="holdWhy">${esc(r.dialog.hold)}</p></div>`; }
+function paneHtml(r) {
+  const p = r.dialog.pane;
+  return `<article class="paper doc">${p.file ? `<p class="dpath">${esc(p.file)}</p>` : ''}${p.rows.length ? `<div class="kv2">${p.rows.map(([a, b]) => `<span>${esc(a)}</span><span>${esc(b)}</span>`).join('')}</div>` : ''}<p class="xn">${esc(p.note || 'The initiative as the board holds it.')}</p></article>`;
+}
+function openRow(r) {
+  if (!r) return;
+  const d = r.dialog;
+  openDlg({ eye: d.eye + ' · real data', title: r.title, sub: r.sub + (r.statusLabel ? ' · ' + r.statusLabel : ''), say: d.say, stream: turnA(logHtml(d)) + turnA(ptx(d.say)) + cardHtml(r), noteKey: r.key, pane: paneHtml(r), label: d.pane.label });
+  loadThread(r.key);
+  setTimeout(() => { const b = $('#dBody'); b.scrollTop = b.scrollHeight; }, 120);
+}
+$('#dBody').addEventListener('click', (e) => { const lt = e.target.closest('#logT'); if (lt) { const c = $('#alog').classList.toggle('col'); lt.setAttribute('aria-expanded', !c); } });
+
+/* ── load: the routes derive the initiatives in the background, so the first answers are "reading" ───────────── */
+function draw() { drawMode(); drawHead(); drawInit(); drawSide(); drawDocs(); drawDock(); onScroll(); }
+async function load() {
+  const p = new URLSearchParams(location.search), q = [p.get('ws') ? 'ws=' + encodeURIComponent(p.get('ws')) : '', p.get('board') ? 'board=' + encodeURIComponent(p.get('board')) : ''].filter(Boolean).join('&');
+  let r = null, status = 0;
+  try { const res = await fetch('/api/board-premium' + (q ? '?' + q : ''), { credentials: 'same-origin' }); status = res.status; r = await res.json(); } catch { r = null; }
+  clearInterval(readTimer);
+  if (r && r.state === 'reading') {
+    const t0 = Date.now(), tick = () => { $('#snap').textContent = 'Reading the board · ' + Math.round((Date.now() - t0) / 1000) + ' s so far'; };
+    tick(); readTimer = setInterval(tick, 1000);
+    if (!M) { $('#ibBody').innerHTML = '<p class="empty3 plain">The board derives each initiative from its records. This page shows nothing until it has read, rather than guess.</p>'; $('#docBody').innerHTML = ''; }
+    setTimeout(load, 3000);
+    return;
+  }
+  if (!r || !r.ok) {
+    $('#snap').textContent = 'The board could not be read';
+    $('#brief').textContent = 'The board could not be read, so this page shows nothing rather than guess.' + (r && r.error ? ' The reason: ' + r.error : status ? ' (the server answered ' + status + ')' : ' The server did not answer.');
+    setTimeout(load, 15000);
+    return;
+  }
+  $('#brief').textContent = '';
+  M = r.model; draw();
+  if (M.docs.rows.some((d) => d.running)) setTimeout(load, 5000);   // a core-document run is going: ask again until it ends
+}
+$('#brief').textContent = 'Reading the board.';
+load();

package/workspace/public/pm/premium-initiative.js

@@ -0,0 +1,336 @@
+/* pm/premium-initiative.js — the premium initiative page (initiative briefing-premium-initiative, slice 6). Reads GET /api/initiative-premium?id= and draws the
+ * model lib/initiative-premium.js builds from the routes the production Initiatives sheet reads: the overview and checks, the Tasks card (PRD requirements and
+ * the board's tracker items) and the Core documents card. A document row with a file opens the read-only document sheet (Read, Edit log, Health) in the
+ * standard dialog beside the read-only agent. The one press is Draft it, through POST /api/core-docs/draft. Nothing here edits a document, issues one,
+ * moves an initiative or adds a task. */
+import { pmPost } from './http.js';
+import { $, $$, esc, openDlg, closeDlg, setMode, toast, loadThread, onScroll, wireRail, logHtml, turnA, ptx, pillOf, kv, H2, CHECK, crumbHtml, wireCrumb, AI } from './premium-shell.js';
+
+let M = null;                    // the model
+let taskView = 'list';
+const DAY = 86400000;
+let docFilter = 'all', docQuery = '';
+let readTimer = null;
+wireRail('init');
+const ICO = (p) => `<svg class="i" viewBox="0 0 24 24">${p}</svg>`;
+const DOCI = '<path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h4"/>';
+const SPARK = '<path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z"/>';
+const STATE_ICO = { Live: '<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>', 'Up to date': '<path d="M5 12.5l4.5 4.5L19 7.5"/>', Draft: '<path d="M4 20l4-1 11-11-3-3L5 16z"/>', 'Not started': '<circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16.5v.5"/>', Stale: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>', Due: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>' };
+const TKI = { jira: '<rect x="4" y="5" width="16" height="14" rx="3"/><path d="m8.5 12 2.5 2.5 4.5-5"/>', task: '<path d="M6 4v16M6 5h11l-2.5 4L17 13H6"/>', req: '<path d="M6 3h9l4 4v14H6z"/><path d="M9 12h6M9 16h4"/>' };
+const TONE = { Done: 'ok', 'In progress': 'wip', 'In review': 'wip', 'To do': 'mut' };
+
+const params = new URLSearchParams(location.search);
+const ID = params.get('id') || '';
+const query = () => ['id=' + encodeURIComponent(ID), params.get('ws') ? 'ws=' + encodeURIComponent(params.get('ws')) : '', params.get('board') ? 'board=' + encodeURIComponent(params.get('board')) : ''].filter(Boolean).join('&');
+const when = (iso) => { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); if (!m) return ''; return +m[3] + ' ' + ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][+m[2] - 1]; };
+
+/* ── overview, header, checks ────────────────────────────────────────────────────────────────────────────── */
+function headHtml() {
+  const h = M.head;
+  const strip = h.strip.names.length ? `<div class="wst iws"><span class="sg2" aria-hidden="true">${h.strip.seg.map((c) => `<i class="${c}"></i>`).join('')}</span><em>${h.strip.names.map((n, j) => (j === h.strip.cur ? `<b>${esc(n)}</b>` : esc(n))).join(' › ')}</em></div>` : '';
+  return `<div class="ihead">${h.statusLabel ? `<span class="chp ${h.tone}"><i></i>${esc(h.statusLabel)}</span>` : ''}<span class="ihm">${esc(h.meta.join(' · '))}${h.stageNote ? ` · stage ${esc(h.stageNote)}` : ''}</span></div>${strip}`;
+}
+function overviewHtml() {
+  const o = M.overview;
+  let todo;
+  if (o.missing) todo = `<p class="empty3 plain">${esc(o.why)}</p>`;
+  else if (o.none) todo = `<div class="todo"><span class="tdw">Nothing is waiting</span><p>${esc(o.why)}</p></div>`;
+  else todo = `<div class="todo ${o.tone || ''}"><span class="tdw">${esc(o.who)}</span><b>${esc(o.h)}</b>${o.p ? `<p>${esc(o.p)}</p>` : ''}${o.more ? `<small>${esc(o.more)}</small>` : ''}${o.skip ? `<small class="tdk">If you wait: ${esc(o.skip)}</small>` : ''}</div>`;
+  const help = M.help.length ? `<div class="agr2"><span class="label">PMOS can help</span><div>${M.help.map((h, n) => `<button class="agc" data-help="${n}">${AI}${esc(h.label)}</button>`).join('')}</div><small>You press, PMOS proposes, you decide. Nothing changes until you accept.</small></div>` : '';
+  const notes = M.health.concat(M.warnings).map((t) => `<p class="note" style="margin:10px 0 0">${esc(t)}</p>`).join('');
+  return `<section class="card rise" style="--d:3" id="cIniOv" aria-labelledby="hOv"><div class="ch"><span class="ic">${ICO('<path d="M4 6h16M4 12h16M4 18h10"/>')}</span><h2 id="hOv">Overview</h2><small>from the repository</small></div>${M.desc ? `<p class="lede" style="margin:0 0 14px">${esc(M.desc)}</p>` : ''}${todo}${help}${notes}</section>`;
+}
+function checksHtml() {
+  if (!M.checks.length) return '';
+  const all = M.allSteps.length ? `<details class="src"><summary>All ${M.allSteps.length} workflow steps</summary><div class="ckl">${M.allSteps.map((c) => `<div class="ckr"><i></i><b>${esc(c.label)}</b><span>${esc(c.stateLabel)}</span><small>${esc(c.note)}</small></div>`).join('')}</div></details>` : '';
+  return `<section class="card rise" style="--d:4" id="cIniChk" aria-labelledby="hChk"><div class="ch"><span class="ic">${ICO('<path d="M5 12l5 5L20 7"/>')}</span><h2 id="hChk">Checks</h2><small>from the workflow engine</small></div><div class="ckl">${M.checks.map((c) => `<div class="ckr ${esc(c.state)}${c.cur ? ' cur' : ''}"><i></i><b>${esc(c.label)}</b><span>${esc(c.stateLabel)}</span>${c.owed ? `<small>${esc(c.owed)}</small>` : ''}</div>`).join('')}</div>${all}</section>`;
+}
+$('#iMain').addEventListener('click', (e) => {
+  const h = e.target.closest('[data-help]'); if (!h) return;
+  const a = M.help[+h.dataset.help]; if (!a) return;
+  if (a.kind === 'draft') { const d = M.docs.rows.find((x) => x.key === a.key); if (d && !h.disabled) { h.disabled = true; draftKey(a.key); } return; }
+  openAsk(a.q);
+});
+
+/* ── tasks ──────────────────────────────────────────────────────────────────────────────────────────────── */
+const taskState = (t) => (t.state ? t.state : 'No result');
+const taskKind = (t) => (t.src === 'PRD requirement' ? 'req' : t.src.startsWith('Jira') ? 'jira' : 'task');
+const dayOf = (iso) => { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; };
+const today = () => { const d = new Date(M.asOf || Date.now()); return new Date(d.getFullYear(), d.getMonth(), d.getDate()); };
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const over = (t) => t.end && t.state && t.state !== 'Done' && dayOf(t.end) < today();
+const dateText = (t) => (t.state === 'Done' ? '' : t.end ? (over(t) ? 'Overdue · ' : 'Due ') + when(t.end) : t.state ? 'No date' : '');
+function taskRow(t) {
+  return `<button class="tkq${over(t) ? ' ov' : ''}" data-task="${esc(t.key)}" aria-haspopup="dialog"><span class="tki ${taskKind(t)}">${ICO(TKI[taskKind(t)])}</span><span class="tkn"><b>${esc(t.title)}</b><small>${esc([t.ref, t.src, t.owner].filter(Boolean).join(' · '))}</small></span><span class="tkw">${esc(dateText(t))}</span><small class="tkp ${TONE[t.state] || 'mut'}">${esc(taskState(t))}</small></button>`;
+}
+function tasksTimeline() {
+  const T = M.tasks.rows, D = T.filter((t) => t.start && t.end).sort((a, b) => dayOf(a.start) - dayOf(b.start)), U = T.filter((t) => !(t.start && t.end));
+  const und = U.length ? `<div class="tkund"><span class="label">No dates set <em>${U.length}</em></span><div>${U.map((t) => `<button class="tkch" data-task="${esc(t.key)}"><b>${esc(t.title)}</b><small class="tkp ${TONE[t.state] || 'mut'}">${esc(taskState(t))}</small></button>`).join('')}</div></div>` : '';
+  if (!D.length) return `<p class="empty3" style="color:var(--ink-2);margin:6px 0 10px">${U.length ? 'No task has a start and a due date, so there is nothing to draw.' : 'No tasks yet.'} The repository records no dates for PRD requirements.</p>${und}`;
+  const T0 = +today(), lo = Math.min(...D.map((t) => +dayOf(t.start)), T0 - 5 * DAY), hi = Math.max(...D.map((t) => +dayOf(t.end)), T0 + 14 * DAY);
+  const a = new Date(lo), from = new Date(a.getFullYear(), a.getMonth(), 1), z = new Date(hi), to = new Date(z.getFullYear(), z.getMonth() + 1, 0), span = to - from, X = (d) => ((d - from) / span * 100);
+  const ticks = []; for (let d = new Date(from); d <= to; d = new Date(d.getFullYear(), d.getMonth() + 1, 1)) ticks.push(d);
+  const tx = X(T0);
+  const head = `<div class="tlh k" aria-hidden="true"><span></span><div class="tlax">${ticks.map((d) => `<i style="left:${X(d).toFixed(2)}%">${MON[d.getMonth()]}${d.getMonth() === 0 ? ' ' + d.getFullYear() : ''}</i>`).join('')}<b style="left:${tx.toFixed(2)}%">Today</b></div><span></span></div>`;
+  const grid = `<div class="tlgrid k" aria-hidden="true"><span></span><div class="tlplot">${ticks.map((d) => `<u style="left:${X(d).toFixed(2)}%"></u>`).join('')}<u class="td" style="left:${tx.toFixed(2)}%"></u></div><span></span></div>`;
+  return head + `<div class="tll">${grid}${D.map((t) => {
+    const l = X(dayOf(t.start)), w = Math.max(0.9, X(dayOf(t.end)) - X(dayOf(t.start))), el = t.state === 'Done' ? 100 : Math.max(0, Math.min(100, (T0 - dayOf(t.start)) / Math.max(1, dayOf(t.end) - dayOf(t.start)) * 100));
+    const tip = `${t.title} · ${when(t.start)} to ${when(t.end)} · ${taskState(t).toLowerCase()}`;
+    return `<button class="tkt${over(t) ? ' ov' : ''}${t.state === 'Done' ? ' dn' : ''}" data-task="${esc(t.key)}"><span class="tlt"><b>${esc(t.title)}</b><small>${esc([t.ref, t.src, t.owner].filter(Boolean).join(' · '))}</small></span><span class="tkbar" role="img" aria-label="${esc(tip)}"><span class="tkb" data-tip="${esc(tip)}" style="--l:${l.toFixed(2)}%;--w:${w.toFixed(2)}%"><i style="width:${el.toFixed(1)}%"></i></span></span><span class="tkr2"><small class="tkp ${TONE[t.state] || 'mut'}">${esc(taskState(t))}</small><small>${esc(dateText(t))}</small></span></button>`;
+  }).join('')}</div><div class="wleg gleg"><span><i class="lgs"></i>Time passed</span><span><i class="lgr"></i>Time to the due date</span><span><i class="lgo"></i>Overdue</span></div>` + und;
+}
+function tasksBody() {
+  const T = M.tasks;
+  if (!T.rows.length) return `<p class="empty3 plain">${esc(T.note)}</p>`;
+  if (taskView === 'stage') {
+    const cols = ['To do', 'In progress', 'On hold', 'Done'].map((s) => [s, T.rows.filter((t) => (t.state === 'In review' ? 'In progress' : t.state) === s)]);
+    const none = T.rows.filter((t) => !t.state);
+    const all = cols.concat(none.length ? [['No result recorded', none]] : []);
+    return `<div class="istg tkkb" style="grid-template-columns:repeat(${all.length},minmax(0,1fr))">${all.map(([s, L]) => `<div class="isc"><p class="label">${esc(s)} <em>${L.length}</em></p>${L.map((t) => `<button class="icd tkc${over(t) ? ' ov' : ''}" data-task="${esc(t.key)}" aria-haspopup="dialog"><b>${esc(t.title)}</b><small>${esc([t.ref, t.src].filter(Boolean).join(' · '))}</small>${t.state === 'In review' || dateText(t) ? `<span class="tkcm">${t.state === 'In review' ? '<small class="tkp wip">In review</small>' : '<span></span>'}<small>${esc(dateText(t))}</small></span>` : ''}</button>`).join('') || '<p class="mut">None</p>'}</div>`).join('')}</div>`;
+  }
+  if (taskView === 'time') return tasksTimeline();
+  return `<div class="tkl" role="list">${T.rows.map(taskRow).join('')}</div>`;
+}
+function tasksHtml() {
+  const T = M.tasks;
+  let bar = '';
+  if (T.bar) bar = `<div class="stb" style="margin:0 0 12px"><span class="sbar2"><i style="flex:${T.bar.done || 0.0001}"></i><i class="g" style="flex:${T.bar.wip || 0.0001}"></i><i class="t" style="flex:${T.bar.todo || 0.0001}"></i></span><small>${T.bar.done} done · ${T.bar.wip} in progress · ${T.bar.todo} to do</small></div>`;
+  else if (T.progress) bar = `<div class="stb" style="margin:0 0 12px"><span class="sbar2"><i style="flex:${T.progress.done || 0.0001}"></i><i class="t" style="flex:${Math.max(0.0001, T.progress.total - T.progress.done)}"></i></span><small>${esc(T.progress.label || T.progress.done + ' of ' + T.progress.total)}</small></div>`;
+  const seg = `<div class="seg" id="tkTabs" role="group" aria-label="Task view"><i class="pill"></i><button data-v="list" aria-pressed="${taskView === 'list'}">List</button><button data-v="stage" aria-pressed="${taskView === 'stage'}">By stage</button><button data-v="time" aria-pressed="${taskView === 'time'}">Timeline</button></div>`;
+  return `<section class="card rise ifull" style="--d:5" id="cIniTk" aria-labelledby="hTk"><div class="ch"><span class="ic">${ICO('<rect x="4" y="4" width="16" height="16" rx="3"/><path d="m8.5 12 2.5 2.5 4.5-5"/>')}</span><h2 id="hTk">Tasks</h2><small>${esc(T.cap)}</small><button class="fold alt tkadd" data-tkadd="1">Add a task</button></div>${bar}${seg}<div id="tkBody">${tasksBody()}</div>${T.note && T.rows.length ? `<p class="note" style="margin-top:12px">${esc(T.note)}</p>` : ''}</section>`;
+}
+$('#iMain').addEventListener('click', (e) => {
+  const v = e.target.closest('#tkTabs [data-v]'); if (v) { taskView = v.dataset.v; $('#tkBody').innerHTML = tasksBody(); $$('#tkTabs button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.v === taskView)); pillOf($('#tkTabs')); return; }
+  if (e.target.closest('[data-tkadd]')) { openAddTask(); return; }
+  const t = e.target.closest('[data-task]'); if (t) { openTask(M.tasks.rows.find((x) => x.key === t.dataset.task)); return; }
+  const f = e.target.closest('[data-dmf]'); if (f) { docFilter = f.dataset.dmf; drawDocList(); return; }
+  const d = e.target.closest('[data-draft]'); if (d && !d.disabled) { draft(d); return; }
+  const all = e.target.closest('[data-draftall]'); if (all && !all.disabled) { draftAll(all); return; }
+  const o = e.target.closest('[data-doc]'); if (o) { openSheet(M.docs.rows.find((x) => x.key === o.dataset.doc)); }
+});
+const STATES = ['To do', 'In progress', 'In review', 'Done'];
+function openTask(t) {
+  if (!t) return;
+  const rows = [['Type', t.kind || (taskKind(t) === 'req' ? 'PRD requirement' : 'Task')], ['Reference', t.ref], ['Source', t.src], ['Owner', t.owner], ['Starts', t.start ? when(t.start) : ''], ['Due', t.end ? when(t.end) : ''], ['Status', t.state || 'No result recorded']];
+  const say = t.title + (t.state ? ' is ' + t.state.toLowerCase() + '.' : ' has no result recorded. The repository records none for a PRD requirement.');
+  const act = t.pmos ? `<div class="tkact"><span class="label">Status</span><div class="seg tkst" role="group" aria-label="Status"><i class="pill"></i>${STATES.map((s) => `<button data-tks="${esc(s)}" aria-pressed="${t.state === s}">${s}</button>`).join('')}</div></div><p class="note" style="margin-top:12px">A PMOS task is kept on the board. Jira tickets are read-only here: Jira owns their status and dates.</p>` : `<p class="xn">${t.src === 'PRD requirement' ? 'Read from the initiative’s PRD. Nothing on this page changes it.' : 'Read from the board. Jira owns its status and dates.'}</p>`;
+  openDlg({ eye: 'Task · real data', title: t.title, sub: M.title, say, stream: turnA(ptx(say)), noteKey: null, pane: `<article class="paper doc">${kv(rows)}${act}</article>`, label: 'Task' });
+  $('#askF').hidden = true; if ($('#oMain .tkst')) pillOf($('#oMain .tkst'));
+  $$('#oMain [data-tks]').forEach((b) => { b.onclick = async () => {
+    if (b.getAttribute('aria-pressed') === 'true') return;
+    const res = await pmPost('/api/boards/tasks/state', { ws: M.board.ws, board: M.board.id, task: t.uid, state: b.dataset.tks });
+    if (!res || res.ok !== true) { toast((res && res.error) || 'The status could not be changed.'); return; }
+    toast('Status changed to ' + b.dataset.tks.toLowerCase() + '.'); closeDlg(); await load();
+  }; });
+}
+function openAddTask() {
+  const prefs = ['Research plan', 'Release plan', 'UAT', 'Rollback plan', 'Support briefing', 'Legal review'];
+  const form = `<div class="addf"><p class="note" style="margin:0">Use a task for work that is not a Jira ticket, such as a research plan, a release plan or UAT. It is kept on the board and it is not a Jira ticket.</p>
+  <div><span class="label">Common tasks</span><div class="chq">${prefs.map((q, n) => `<button type="button" data-pre="${n}">${esc(q)}</button>`).join('')}</div></div>
+  <label>Title<input id="atT" maxlength="200" placeholder="For example: UAT with five partners"></label>
+  <div class="two"><label>Owner<input id="atO" maxlength="80" placeholder="Leave empty to use your name"></label><span></span></div>
+  <div class="two"><label><span>Start <em>optional</em></span><input type="date" id="atF"></label><label><span>Due <em>optional</em></span><input type="date" id="atD"></label></div>
+  <p class="note" style="margin:0">With no dates the board plans the task from tomorrow, for a week.</p>
+  <p class="note" id="atM" role="status" style="margin:0;min-height:1.2em"></p><div class="cact"><button class="cta" id="atGo">Add task</button><button class="cta alt" id="atNo">Cancel</button></div></div>`;
+  openDlg({ eye: 'New task · real data', title: 'Add a task', sub: M.title, say: 'Say what the task is. It is written to the board’s record.', stream: turnA(ptx('Say what the task is and when it is due. It is written to the board’s record, and I change nothing else.')), noteKey: null, pane: `<article class="paper doc">${form}</article>`, label: 'Task' });
+  $('#askF').hidden = true;
+  $('#oMain').onclick = async (e) => {
+    const pre = e.target.closest('[data-pre]'); if (pre) { $('#atT').value = prefs[+pre.dataset.pre]; $('#atT').focus(); return; }
+    if (e.target.closest('#atNo')) { closeDlg(); return; }
+    if (!e.target.closest('#atGo')) return;
+    const title = $('#atT').value.trim(), m = $('#atM'), f = $('#atF').value, z = $('#atD').value;
+    if (!title) { m.textContent = 'Give the task a title.'; $('#atT').focus(); return; }
+    if (f && z && z < f) { m.textContent = 'The due date is before the start date.'; return; }
+    if (f && !z) { m.textContent = 'Add a due date too, or clear the start date.'; return; }
+    e.target.closest('#atGo').disabled = true;
+    const res = await pmPost('/api/boards/tasks/add', { ws: M.board.ws, board: M.board.id, initiative: M.id, title, owner: $('#atO').value.trim() || undefined, start: f || undefined, due: z || undefined });
+    if (!res || res.ok !== true) { $('#atGo').disabled = false; m.textContent = (res && res.error) || 'The task could not be added.'; return; }
+    toast('Task added to the board.'); closeDlg(); await load();
+  };
+}
+
+/* ── documents ──────────────────────────────────────────────────────────────────────────────────────────── */
+function docRow(d) {
+  const act = d.act && d.act.kind === 'draft' ? `<button class="dmcta alt" data-draft="${esc(d.key)}"${d.running ? ' disabled' : ''}>${d.running ? '<span class="spin"></span>' : ICO(SPARK)}${esc(d.act.label)}</button>` : d.path ? `<button class="dmcta alt" data-doc="${esc(d.key)}">Read</button>` : '';
+  const inner = `<span class="dmi c-${esc(d.cat || 'Board')}">${ICO(DOCI)}</span><span class="dmn"><b>${esc(d.title)}</b><small>${esc(d.what)}</small><span class="dmm"><span class="s ${esc(d.st || 'live')}">${ICO(STATE_ICO[d.state] || STATE_ICO['Not started'])}${esc(d.state)}</span>${d.when ? `<span>${ICO('<rect x="3" y="5" width="18" height="16" rx="3"/><path d="M3 10h18M8 3v4M16 3v4"/>')}updated ${esc(d.when)}</span>` : ''}${d.by ? `<span>${ICO('<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>')}${esc(d.by)}</span>` : ''}</span></span>`;
+  return `<div class="dmr ${esc(d.st || '')}" role="listitem">${d.path ? `<button class="dmo" data-doc="${esc(d.key)}" aria-haspopup="dialog">${inner}</button>` : `<span class="dmo">${inner}</span>`}<span class="dmq">${act}</span></div>`;
+}
+const matches = (d) => (docFilter === 'all' || (docFilter === 'none' ? d.st === 'missing' : docFilter === 'draft' ? d.st === 'draft' : (d.st === 'ok' || d.st === 'live'))) && (!docQuery.trim() || (d.title + ' ' + d.what).toLowerCase().includes(docQuery.trim().toLowerCase()));
+function drawDocList() {
+  const D = M.docs, L = D.rows.filter(matches), core = L.filter((d) => !d.tech), tech = L.filter((d) => d.tech);
+  const none = !L.length ? `<div class="dmem"><p>No document matches${docQuery.trim() ? ' “' + esc(docQuery.trim()) + '”' : ''}.</p></div>` : '';
+  $('#dmList').innerHTML = none || (core.length ? `<div class="dmg two" role="list">${core.map(docRow).join('')}</div>` : '')
+    + (tech.length ? `<details class="src dmtech"${docQuery.trim() || docFilter !== 'all' ? ' open' : ''}><summary>Technical documents (${D.techCount})<small>for the engineering side. Not counted above.</small></summary><div class="dmg two" role="list">${tech.map(docRow).join('')}</div></details>` : '');
+  $$('#dmF button').forEach((b) => b.setAttribute('aria-pressed', b.dataset.dmf === docFilter)); pillOf($('#dmF'));
+}
+function docsHtml() {
+  const D = M.docs, c = D.counts;
+  if (!D.rows.length) return `<section class="card rise ifull" style="--d:6" id="cIniDoc" aria-labelledby="hDoc"><div class="ch"><span class="ic">${ICO(DOCI)}</span><h2 id="hDoc">Core documents</h2></div><p class="empty3 plain">${D.missing ? 'The core documents could not be read, so none is shown.' : 'No core documents are on record for this initiative.'}</p></section>`;
+  const dot = { ok: 'ok', draft: 'warn', missing: 'mut' };
+  const core = D.rows.filter((d) => !d.tech);
+  return `<section class="card rise ifull" style="--d:6" id="cIniDoc" aria-labelledby="hDoc"><div class="ch"><span class="ic">${ICO(DOCI)}</span><h2 id="hDoc">Core documents</h2><small>${c.all}</small></div>
+ <p class="dsum"><span><b>${c.draft}</b> ${c.draft === 1 ? 'draft' : 'drafts'} to review</span><span><b>${c.none}</b> not started</span><span><b>${c.ok}</b> up to date</span>${draftable().length > 1 ? `<button class="dlink" data-draftall="1">${ICO(SPARK)}Draft the ${draftable().length} not started</button>` : ''}</p>
+ <div class="dprog" role="img" aria-label="${c.ok} of ${c.all} up to date">${core.map((d) => `<i class="${dot[d.st] || (d.st === 'live' ? 'ok' : 'mut')}"></i>`).join('')}</div>
+ <div class="dtool"><div class="seg" id="dmF" role="group" aria-label="Filter documents"><i class="pill"></i>${[['all', 'All', c.all], ['none', 'Not started', c.none], ['draft', 'Draft', c.draft], ['ok', 'Up to date', c.ok]].map(([k, l, n]) => `<button data-dmf="${k}" aria-pressed="${docFilter === k}">${l}<em>${n}</em></button>`).join('')}</div>
+  <label class="dmsr">${ICO('<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4-4"/>')}<input id="dmQ" type="search" placeholder="Find a document" aria-label="Find a document" value="${esc(docQuery)}"></label></div>
+ <div id="dmList"></div>
+ <p class="note" style="margin-top:12px">The core documents of this initiative. Press a row to read it, see its edit log or its health. Draft it starts a read-only agent run that writes a draft for you to read; nothing is sent. Editing, issuing and dropping a document are not built on this page.</p></section>`;
+}
+$('#iMain').addEventListener('input', (e) => { if (e.target.id === 'dmQ') { docQuery = e.target.value; drawDocList(); } });
+const draftable = () => M.docs.rows.filter((d) => !d.tech && d.st === 'missing' && d.act && d.act.kind === 'draft' && !d.running);
+async function draftKey(key) {
+  const d = M.docs.rows.find((x) => x.key === key);
+  const res = await pmPost('/api/core-docs/draft', { ws: M.board.ws, scope: M.docs.scope, key });
+  if (!res || res.ok !== true) { toast((res && res.error) || 'The draft could not be started.'); await load(); return false; }
+  toast('The agent is drafting “' + (d ? d.title : key) + '”. It runs in the background and sends nothing.');
+  await load(); return true;
+}
+async function draftAll(b) {
+  b.disabled = true;
+  const L = draftable(); let n = 0;
+  for (const d of L) { const res = await pmPost('/api/core-docs/draft', { ws: M.board.ws, scope: M.docs.scope, key: d.key }); if (res && res.ok === true) n++; else { toast((res && res.error) || 'A draft could not be started.'); break; } }
+  if (n) toast('The agent is drafting ' + n + ' ' + (n === 1 ? 'document' : 'documents') + '. They run in the background and send nothing.');
+  await load();
+}
+async function draft(b) {
+  const key = b.dataset.draft, d = M.docs.rows.find((x) => x.key === key);
+  b.disabled = true;
+  const res = await pmPost('/api/core-docs/draft', { ws: M.board.ws, scope: M.docs.scope, key });
+  if (!res || res.ok !== true) { b.disabled = false; toast((res && res.error) || 'The draft could not be started.'); return; }
+  toast('The agent is drafting “' + (d ? d.title : key) + '”. It runs in the background and sends nothing.');
+  await load();
+}
+
+/* ── the initiative's own dialog: the read-only agent about this initiative, with an optional first question ─────────────────────── */
+function openAsk(q) {
+  const r = M.rows[0]; if (!r) return;
+  openDlg({ eye: 'Initiative · real data', title: r.title, sub: r.sub, say: r.dialog.say, stream: turnA(logHtml({ logTitle: 'Read from the repository', log: ['Read the initiative from the board and its sheet', 'Read its workflow steps from the workflow engine', 'Changed nothing'] })) + turnA(ptx(r.dialog.say)), noteKey: r.key, pane: `<article class="paper doc">${kv(r.dialog.facts)}<p class="xn">The initiative as the board holds it. Ask the agent anything about it; it reads this repository and changes nothing.</p></article>`, label: 'Initiative' });
+  loadThread(r.key);
+  if (q) { const i = $('#askIn'); i.value = q; $('#askF').dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }
+  setMode('chat');
+}
+
+/* ── the document sheet: Read, Edit log, Health. Read-only. ─────────────────────────────────────────────── */
+let sheet = null;   // { d, tab, text, log, health, err }
+const TABS = [['read', 'Read'], ['log', 'Edit log'], ['health', 'Health']];
+function mdHtml(text) {
+  const lines = String(text || '').replace(/\r/g, '').split('\n'), out = [], outline = [];
+  let i = 0, fm = [];
+  if (lines[0] === '---') { const e = lines.indexOf('---', 1); if (e > 0) { fm = lines.slice(1, e).map((l) => /^([A-Za-z_][\w -]*):\s*(.*)$/.exec(l)).filter(Boolean).slice(0, 10).map((m) => [m[1], m[2].replace(/^"(.*)"$/, '$1')]); i = e + 1; } }
+  let para = [], list = [];
+  const flushP = () => { if (para.length) { out.push(`<p>${esc(para.join(' '))}</p>`); para = []; } };
+  const flushL = () => { if (list.length) { out.push(`<ul>${list.map((x) => `<li>${esc(x)}</li>`).join('')}</ul>`); list = []; } };
+  for (; i < lines.length; i++) {
+    const l = lines[i];
+    if (/^```/.test(l)) { flushP(); flushL(); const buf = []; for (i++; i < lines.length && !/^```/.test(lines[i]); i++) buf.push(lines[i]); out.push(`<pre class="mdp">${esc(buf.join('\n'))}</pre>`); continue; }
+    const h = /^(#{1,4})\s+(.*)$/.exec(l);
+    if (h) { flushP(); flushL(); const n = outline.length; outline.push(h[2]); out.push(`<h3 class="d2" id="ds-h${n}">${esc(h[2])}</h3>`); continue; }
+    if (/^\s*[-*]\s+/.test(l)) { flushP(); list.push(l.replace(/^\s*[-*]\s+/, '')); continue; }
+    if (/^\|/.test(l)) { flushP(); flushL(); const buf = [l]; while (i + 1 < lines.length && /^\|/.test(lines[i + 1])) buf.push(lines[++i]); out.push(`<pre class="mdp">${esc(buf.join('\n'))}</pre>`); continue; }
+    if (!l.trim()) { flushP(); flushL(); continue; }
+    flushL(); para.push(l.trim());
+  }
+  flushP(); flushL();
+  return { html: out.join(''), outline, fm };
+}
+function sheetPane() {
+  const s = sheet, d = s.d;
+  const menu = `<div class="seg" id="shT" role="group" aria-label="Document views"><i class="pill"></i>${TABS.map(([k, n]) => `<button data-sh="${k}" aria-pressed="${s.tab === k}">${n}</button>`).join('')}</div>`;
+  const head = `<p class="dpath">${esc(d.path)}</p><div class="dsm"><span class="${d.st === 'ok' ? 'ok' : d.st === 'draft' ? 'warn' : 'mut'}">${esc(d.state)}</span>${d.when ? `<span>updated ${esc(d.when)}</span>` : ''}${d.by ? `<span>${esc(d.by)}</span>` : ''}</div>`;
+  let body = '';
+  if (s.err) body = `<p class="empty3 plain">${esc(s.err)}</p>`;
+  else if (s.tab === 'read') {
+    if (s.text == null) body = '<p class="empty3 plain">Reading the file.</p>';
+    else { const m = s.md || (s.md = mdHtml(s.text)); body = (m.fm.length ? kv(m.fm) : '') + `<div class="dsrd${m.outline.length > 2 ? '' : ' no'}">${m.outline.length > 2 ? `<nav class="dso" aria-label="Outline"><p class="label">Outline <em>${m.outline.length} headings</em></p>${m.outline.map((t, n) => `<button data-go="${n}">${esc(t)}</button>`).join('')}</nav>` : ''}<div class="dsbody">${m.html}</div></div>`; }
+  } else if (s.tab === 'log') {
+    if (!s.log) body = '<p class="empty3 plain">Reading the log.</p>';
+    else {
+      const R = (s.log.revisions || []).slice().reverse(), E = (s.log.events || []).slice().reverse();
+      body = (R.length ? `<div class="evl">${R.map((r) => `<div class="hsr"><time>${esc(when(r.at))}</time><span><b>v${esc(r.rev)}</b> ${esc(r.why || (r.by === 'baseline' ? 'The file as the sheet first saw it' : 'No reason recorded'))}${r.by ? ' · ' + esc(r.by) : ''}</span></div>`).join('')}</div>` : '<p class="mut">No revision is recorded.</p>')
+        + (E.length ? `<p class="label" style="margin:18px 0 8px">Other entries</p><div class="evl">${E.map((e) => `<div class="hsr"><time>${esc(when(e.at))}</time><span><b>${esc(e.kind)}</b> ${esc(e.prompt || e.why || '')}</span></div>`).join('')}</div>` : '');
+    }
+  } else if (s.tab === 'health') {
+    if (!s.health) body = '<p class="empty3 plain">Checking the document.</p>';
+    else body = `<p class="note" style="margin:0 0 10px">${s.health.passed} of ${s.health.total} checks that had the input they need passed. A check with no input is not counted.</p><div class="ckl">${s.health.checks.map((c) => `<div class="ckr ${c.pass === true ? 'done' : c.pass === false ? 'blocked' : 'skipped'}"><i></i><b>${esc(c.id)}</b><span>${c.pass === true ? 'Passed' : c.pass === false ? 'Not passed' : 'No input'}</span><small>${esc(c.reason || '')}</small></div>`).join('')}</div>`;
+  }
+  return `<article class="paper doc">${head}${menu}<div id="shBody">${body}</div><p class="xn">Read-only. Editing a document and accepting an agent’s proposal are not built on this page.</p></article>`;
+}
+function drawSheet() { $('#oMain').innerHTML = sheetPane(); pillOf($('#shT')); }
+async function getJson(url, init) { try { const r = await fetch(url, Object.assign({ credentials: 'same-origin' }, init || {})); return await r.json(); } catch { return null; } }
+async function loadTab(tab) {
+  const s = sheet, p = encodeURIComponent(s.d.path), ws = M.board.ws ? '&ws=' + encodeURIComponent(M.board.ws) : '';
+  if (tab === 'read' && s.text == null) {
+    const lg = s.log || (s.log = await getJson('/api/doc-sheet/log?path=' + p + ws));
+    if (sheet !== s) return;
+    const revs = lg && lg.ok ? lg.revisions || [] : [];
+    const at = revs.length ? await getJson('/api/doc-sheet/at?path=' + p + '&rev=' + revs[revs.length - 1].rev + ws) : null;
+    if (sheet !== s) return;
+    if (at && at.ok) s.text = at.text; else s.err = (at && at.error) || (lg && lg.error) || 'The file could not be read.';
+  } else if (tab === 'log' && !s.log) {
+    s.log = await getJson('/api/doc-sheet/log?path=' + p + ws);
+    if (sheet !== s) return;
+    if (!s.log || s.log.ok === false) { s.err = (s.log && s.log.error) || 'The edit log could not be read.'; s.log = null; }
+  } else if (tab === 'health' && !s.health) {
+    const h = await getJson('/api/doc-health/check', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path: s.d.path, ws: M.board.ws }) });
+    if (sheet !== s) return;
+    if (!h || h.ok === false) s.err = (h && h.error) || 'The health check could not run.'; else s.health = h.health;
+  }
+  if (sheet === s && s.tab === tab) drawSheet();
+}
+function openSheet(d) {
+  if (!d || !d.path) return;
+  sheet = { d, tab: 'read', text: null, log: null, health: null, err: null };
+  const key = 'doc:' + M.id + ':' + d.key, say = d.title + ' is ' + d.state.toLowerCase() + (d.by ? '. ' + d.by + '.' : '.') + ' I can read the file with you and answer questions. I change nothing.';
+  openDlg({ eye: 'Document · real data', title: d.title, sub: M.title, say, stream: turnA(logHtml({ logTitle: 'Read from the repository', log: ['Found the file ' + d.path, 'Read its revisions from the document sheet', 'Left the file as it is'] })) + turnA(ptx(say)), noteKey: key, pane: '', label: 'Document' });
+  drawSheet(); loadThread(key); loadTab('read');
+}
+$('#oMain').addEventListener('click', (e) => {
+  const t = e.target.closest('[data-sh]');
+  if (t && sheet) { sheet.tab = t.dataset.sh; sheet.err = null; drawSheet(); loadTab(sheet.tab); return; }
+  const g = e.target.closest('[data-go]'); if (g) { const h = $('#ds-h' + g.dataset.go); if (h) h.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
+});
+$('#dBody').addEventListener('click', (e) => { const lt = e.target.closest('#logT'); if (lt) { const c = $('#alog').classList.toggle('col'); lt.setAttribute('aria-expanded', !c); } });
+
+/* ── load: the routes derive the initiatives in the background, so the first answers are "reading" ────────── */
+let crumbed = false;
+function draw() {
+  if (!crumbed) {
+    crumbed = true;
+    $('#crumbHost').innerHTML = crumbHtml({ board: M.board.name || 'Board', boards: M.boards, ini: M.crumbTitle, siblings: M.siblings, ask: 'Ask about this initiative' });
+    const q = (id) => '?id=' + encodeURIComponent(id) + (M.board.ws ? '&ws=' + encodeURIComponent(M.board.ws) + '&board=' + encodeURIComponent(M.board.id) : '');
+    wireCrumb({ boards: M.boards, board: M.board.id, siblings: M.siblings, ini: M.id,
+      goBoard: (ws, id) => location.assign('/premium-board.html' + (ws ? '?ws=' + encodeURIComponent(ws) + '&board=' + encodeURIComponent(id) : '')),
+      goIni: (id) => location.assign('/premium-initiative.html' + q(id)), ask: () => openAsk('') });
+  }
+  $('#iH1').textContent = M.title; document.title = 'PMOS · ' + M.title;
+  $('#snap').textContent = M.header.text;
+  $('#snap').title = 'Every figure on this page comes from a record. A date, owner or progress shows only when one was set.';
+  const keepQ = $('#dmQ') && document.activeElement === $('#dmQ');
+  $('#iMain').innerHTML = headHtml() + `<div class="bcols"><div>${overviewHtml()}</div><div>${checksHtml()}</div></div>` + tasksHtml() + docsHtml();
+  if ($('#dmList')) drawDocList();
+  if (keepQ) { const q = $('#dmQ'); q.focus(); q.setSelectionRange(q.value.length, q.value.length); }
+  pillOf($('#tkTabs'));
+  $('#dN').textContent = M.dock.stage || '·'; $('#dLab').textContent = M.dock.label;
+  $('#dNext').innerHTML = M.dock.next ? `<i></i>Next <b>${esc(M.dock.next)}</b>` : 'Nothing is waiting';
+  onScroll();
+}
+async function load() {
+  let r = null, status = 0;
+  try { const res = await fetch('/api/initiative-premium?' + query(), { credentials: 'same-origin' }); status = res.status; r = await res.json(); } catch { r = null; }
+  clearInterval(readTimer);
+  if (r && r.state === 'reading') {
+    const t0 = Date.now(), tick = () => { $('#snap').textContent = 'Reading the initiative · ' + Math.round((Date.now() - t0) / 1000) + ' s so far'; };
+    tick(); readTimer = setInterval(tick, 1000);
+    setTimeout(load, 3000);
+    return;
+  }
+  if (!r || !r.ok) {
+    $('#snap').textContent = 'The initiative could not be read';
+    $('#iMain').innerHTML = `<p class="empty3 plain">${status === 404 ? esc((r && r.error) || 'This initiative is not on a board.') : 'The initiative could not be read, so this page shows nothing rather than guess.' + (r && r.error ? ' The reason: ' + esc(r.error) : status ? ' (the server answered ' + status + ')' : ' The server did not answer.')}</p>`;
+    if (status !== 404 && status !== 400) setTimeout(load, 15000);
+    return;
+  }
+  M = r.model; M.asOf = r.as_of; draw();
+  if (M.docs.rows.some((d) => d.running)) setTimeout(load, 5000);   // a core-document run is going: ask again until it ends
+}
+if (!ID) { $('#snap').textContent = 'No initiative named'; $('#iMain').innerHTML = '<p class="empty3 plain">This page needs an initiative. Open one from the Board.</p>'; } else load();