create-pmos 0.150.0 → 0.152.0

package/workspace/public/pm/c3-doc-sheet.js

@@ -1,24 +1,38 @@
-/* pm/c3-doc-sheet.js — the DOCUMENT SHEET of /c3.html Initiatives > Documents (console3.html: docPanel line 4090, dpHead 4089, the diff 4075 and 4076, the sheet 4104,
- * the handlers dmode, dask, dsave 4136 to 4143, relHtml 4180 to 4190). The right-hand sheet from c3-sheet.js, up to 780px, a bottom sheet on a phone.
+/* pm/c3-doc-sheet.js — the DOCUMENT SHEET of /c3.html (Initiatives › Documents, an initiative's Docs, Reports). The right-hand sheet from
+ * c3-sheet.js, up to 780px, a bottom sheet on a phone. Initiative c3-doc-sheet-rich: the approved mockup (planning/prd/c3-doc-sheet-rich-prd.md).
  *
- *   openDocSheet({ ws, doc, mode, prompt, relations(doc, openOther), onChanged })    doc = { path, name, ty, v, st, ini }
+ *   openDocSheet({ ws, doc, mode, prompt, relations(doc, openOther), onChanged, generated, secExtra })    doc = { path, name, ty, v, st, ini, iniName }
  *
- * Six modes (the segment under the header): Read (one `.dsec` per heading with who changed it last), Edit by hand (sections become editable; a WHY is required;
- * POST /api/doc-sheet/edit), Ask the agent (the word diff of what the agent proposes and Accept as a slide bound to the proposal's hash: POST /api/doc-sheet/accept),
- * History (GET /api/doc-sheet/revisions and /at: the revisions and a compare of any one with the one before), Health (POST /api/doc-health/check: the six checks, N of M),
- * Relations (the document graph around this document, from the library's edges).
- * Ask the agent (page-starts-agent): in real mode the button starts a background agent run from the page (POST /api/doc-sheet/ask). The run may only read; its
- * answer is recorded as a proposal (GET /api/doc-sheet/ask?id= is polled until it is), and the proposal is accepted only by the PM's slide, bound to its hash.
- * Copy the request stays as the way to give it to a session the PM already has. The demo (?demo=1) answers the propose and accept routes from fixtures.
- * Nothing is invented: an edit writes the file through the route, and every save keeps its why in the revisions.
- * Pure parts (Node-testable): splitDoc, joinDoc, changedSections, wordDiffTokens, byName, dayName. */
+ * Six modes (the segment under the header; the keys are kept for the callers):
+ *   read    Read      the markdown rendered (pm/c3-md.js): the front matter as properties, each section with who changed it last (from the
+ *                     revisions), "Show who wrote what", the Markdown source with a copy button, a Contents menu, the stale banner, and the
+ *                     open proposals pinned to the sections they change, with "Show change" for the diff in place.
+ *   edit    Edit      a rich-text editor of the whole document (toolbar, Rich | Markdown over the same draft), the front matter as fields; a
+ *                     changed section is marked; saving needs a reason (POST /api/doc-sheet/edit). A section nobody touched is written back
+ *                     exactly as it was, so opening and saving without a change writes nothing.
+ *   ask     Proposals Ask the agent (POST /api/doc-sheet/ask: a background run that may only read; its answer becomes a proposal), the open
+ *                     proposals (GET /api/doc-sheet/proposals) with a tick per section, a rendered diff and the slide that accepts the ticked
+ *                     sections (POST /api/doc-sheet/accept with `sections`), Reject with a reason (POST /api/doc-sheet/reject), and the closed ones.
+ *   hist    Edit log  every revision and event (GET /api/doc-sheet/log): who wrote the text, how it came in (this sheet, a proposal, outside
+ *                     PMOS with its commit), the reason, the sections, the words added and removed, Show the change, and a reason for an outside
+ *                     change that has none (POST /api/doc-sheet/why).
+ *   health  Health    POST /api/doc-health/check: the checks, N of M; a failing Fresh check lists the sources that changed, and "Mark as still
+ *                     current" records a reason (POST /api/doc-sheet/mark-current).
+ *   links   Relations the document graph around this document, from the caller.
+ * Nothing is invented: a part with no data says so. The demo (?demo=1) answers the routes from fixtures.
+ *
+ * Two options for a report, which is a document with no stored file yet (report-families-view.js):
+ *   generated = { text, why, health }   Read shows the generated text; Edit and Proposals say why they need a stored document; Health shows `health`.
+ *   secExtra(name)                      a node under each section in Read: the report's claims and where they come from.
+ * Pure parts (Node-testable): splitDoc, joinDoc, changedSections, wordDiffTokens, byName, dayName, parseFront, setFront, composeSections. */
 import { el } from './dom.js';
 import { pmGet, pmPost } from './http.js';
-import { c3ic, c3ib } from './pm-work-view.js';
+import { c3ic } from './pm-work-view.js';
 import { openSheet } from './c3-sheet.js';
-import { renderCase } from './c3-case.js';
 import { say } from './c3-init-extras.js';
 import { c3btn } from './page-agent.js';
+import { mountSlide } from './slide-confirm.js';
+import { parseMd, toMd, canonMd, diffMd, toDom, fromDom, wordCounts, safeHref } from './c3-md.js';
 
 /* ── pure: sections, round trip, word diff ── */
 
@@ -49,12 +63,12 @@ export function joinDoc(secs, edits) {
 /** The sections of `after` that differ from `before`, by name: [{ name, before, after, kind: 'changed'|'added'|'removed' }]. */
 export function changedSections(before, after) {
   const A = splitDoc(before); const B = splitDoc(after); const out = [];
-  B.forEach((s) => { const p = A.find((q) => q.name === s.name); if (!p) out.push({ name: s.name, before: '', after: s.text, kind: 'added' }); else if (p.text !== s.text) out.push({ name: s.name, before: p.text, after: s.text, kind: 'changed' }); });
+  B.forEach((s) => { const p = A.find((q) => q.name === s.name); if (!p) out.push({ name: s.name, before: '', after: s.text, kind: 'added' }); else if (p.text !== s.text || p.prefix !== s.prefix) out.push({ name: s.name, before: p.text, after: s.text, kind: 'changed' }); });
   A.forEach((q) => { if (!B.some((s) => s.name === q.name)) out.push({ name: q.name, before: q.text, after: '', kind: 'removed' }); });
   return out;
 }
 
-/** The word diff (the mockup's wdiff, line 4065): [{ op: 'same'|'add'|'del', text }], whitespace kept in the tokens. */
+/** The word diff: [{ op: 'same'|'add'|'del', text }], whitespace kept in the tokens. */
 export function wordDiffTokens(a, b) {
   const x = String(a || '').split(/(\s+)/).filter((s) => s !== ''); const y = String(b || '').split(/(\s+)/).filter((s) => s !== '');
   const n = x.length; const m = y.length;
@@ -70,7 +84,7 @@ export function wordDiffTokens(a, b) {
 }
 
 /** Who a ledger `by` is, as the page says it. */
-export const byName = (by) => { const b = String(by || ''); return /^(agent|claude)/i.test(b) ? 'Agent' : /^(pm|human:wawan|you)$/i.test(b) || b === '' ? 'You' : b.replace(/^human:/, ''); };
+export const byName = (by) => { const b = String(by || ''); return /^(agent|claude)/i.test(b) ? 'Agent' : /^(pm|human:wawan|human:pm|you)$/i.test(b) || b === '' ? 'You' : b.replace(/^human:/, ''); };
 const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 /** '2026-10-05T09:00:00Z' to 'Mon 5 Oct'. Anything that is not a date comes back as it is. */
 export function dayName(v) {
@@ -78,60 +92,115 @@ export function dayName(v) {
   const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
   return WD[d.getUTCDay()] + ' ' + (+m[3]) + ' ' + MON[+m[2] - 1];
 }
-const nextV = (v) => { const m = /^v(\d+)$/.exec(v || ''); return m ? 'v' + (+m[1] + 1) : 'v1'; };
+const timeOf = (v) => { const m = /T(\d{2}):(\d{2})/.exec(String(v || '')); return m ? m[1] + ':' + m[2] : ''; };
+const whenOf = (v) => dayName(v) + (timeOf(v) ? ', ' + timeOf(v) : '');
+const nextV = (v) => { const m = /^v(\d+)$/.exec(v || ''); return m ? 'v' + (+m[1] + 1) : ''; };
+
+/** The front matter of a text: { block, rest, fields: [{ key, value, line, editable, quote }] } or null. `block` is the `---` … `---` lines
+ * without the newline after them; `rest` is everything after. A field is editable when it is one line with a plain value. */
+export function parseFront(text) {
+  const t = String(text == null ? '' : text);
+  const m = /^---\n([\s\S]*?)\n---(?=\n|$)/.exec(t);
+  if (!m) return null;
+  const fields = []; const lines = m[1].split('\n');
+  lines.forEach((l, line) => {
+    const f = /^([A-Za-z_][\w.-]*):[ \t]*(.*)$/.exec(l);
+    if (f) {
+      const raw = f[2]; const q = /^"(.*)"\s*$/.exec(raw) || /^'(.*)'\s*$/.exec(raw);
+      const multi = raw === '' || /^[|>]/.test(raw);
+      fields.push({ key: f[1], value: q ? (raw[0] === '"' ? q[1].replace(/\\"/g, '"').replace(/\\\\/g, '\\') : q[1].replace(/''/g, "'")) : raw, line, editable: !multi && !/^[[{]/.test(raw), quote: q ? raw[0] : '' });
+    } else if (fields.length && /^\s+(-\s+)?\S/.test(l)) {
+      const last = fields[fields.length - 1];
+      last.value = (last.value ? last.value + ', ' : '') + l.trim().replace(/^-\s+/, '');
+      last.editable = false;
+    }
+  });
+  return { block: m[0], rest: t.slice(m[0].length), fields };
+}
+/** The front matter block with `values` ({ key: value }) written into its editable fields; every other line stays as it was. */
+export function setFront(block, values) {
+  const p = parseFront(block); if (!p) return block;
+  const inner = block.replace(/^---\n/, '').replace(/\n---$/, '').split('\n');
+  for (const f of p.fields) {
+    if (!f.editable || !Object.prototype.hasOwnProperty.call(values, f.key) || values[f.key] === f.value) continue;
+    const v = String(values[f.key]);
+    const needs = /^[\s"'#&*!|>%@`[{-]|:\s|\s#|\s$/.test(v) || v === '';
+    const out = f.quote === "'" ? "'" + v.replace(/'/g, "''") + "'" : f.quote === '"' || needs ? JSON.stringify(v) : v;
+    inner[f.line] = f.key + ': ' + out;
+  }
+  return '---\n' + inner.join('\n') + '\n---';
+}
+
+/** The new text of a document from the editor's sections. `base` is splitDoc of the text the editor was drawn from; each group is
+ * { sid, level, name, md } where sid is the index of the base section it was drawn from (or null for a new one) and md is the markdown
+ * the editor holds now. `intro` is the markdown before the first heading, `front` the front matter block (or null).
+ * A section whose heading and canonical text did not change is written back exactly as it was. */
+export function composeSections(base, groups, intro, front) {
+  const levelOf = (s) => (/^(#+)/.exec(s.prefix || '') || ['', ''])[1].length;
+  const out = [];
+  const b0 = base.find((s) => s.prefix === '');
+  if (b0 || intro || front) {
+    const fm = b0 ? parseFront(b0.text) : null;
+    const restOrig = fm ? fm.rest : b0 ? b0.text : '';
+    const same = canonMd(restOrig) === canonMd(intro || '');
+    const body = same ? restOrig : (intro ? (front ? '\n\n' : '') + intro : '');
+    const text = (front || '') + body;
+    if (text || (b0 && (b0.lead || b0.tail))) out.push({ prefix: '', lead: b0 ? b0.lead : '', text, tail: b0 ? b0.tail : '\n\n' });
+  }
+  const used = new Set();
+  for (const g of groups) {
+    const B = g.sid != null && !used.has(g.sid) ? base[g.sid] : null;
+    if (B) used.add(g.sid);
+    const sameHead = B && B.name === g.name && levelOf(B) === g.level;
+    const sameText = B && canonMd(B.text) === canonMd(g.md);
+    out.push({ bi: B ? g.sid : null, prefix: sameHead ? B.prefix : '#'.repeat(g.level || 2) + ' ' + g.name + '\n', lead: B ? B.lead : (g.md ? '\n' : ''), text: sameText ? B.text : g.md, tail: B ? B.tail : '\n\n' });
+  }
+  if (out.length && out[0].prefix === '' && b0) out[0].bi = b0.i;
+  // where two parts were not next to each other before, the first ends in a blank line; a new last part ends in one newline
+  out.forEach((p, k) => {
+    const s = p.prefix + p.lead + p.text + p.tail;
+    if (k < out.length - 1) {
+      if (p.bi != null && out[k + 1].bi === p.bi + 1) return;
+      if (!/\n[ \t]*\n$/.test(s)) p.tail = p.tail.replace(/[ \t]*$/, '') + (/\n$/.test(s) ? '\n' : '\n\n');
+    } else if (p.bi !== base.length - 1 || p.bi == null) p.tail = p.tail.replace(/\s*$/, '') + '\n';
+  });
+  return out.map((p) => p.prefix + p.lead + p.text + p.tail).join('');
+}
 
 /* ── the sheet ── */
 
 const NAMES = { fresh: 'Fresh', decisions: 'Matches decisions', data: 'Matches the data', complete: 'Complete', traced: 'Traced to a goal and tickets', readers: 'Readers have this version' };
-const hcol = (h) => (!h || h.total === 0 ? 'var(--muted-foreground)' : h.passed === h.total ? 'var(--success)' : h.total - h.passed === 1 ? 'var(--warning)' : 'var(--destructive)');
-const STATE = { current: ['Current', 'var(--success)', 'check'], stale: ['Stale', 'var(--warning)', 'alert'], draft: ['Draft', 'var(--acc)', 'clock'], missing: ['Missing', 'var(--destructive)', 'plus'] };
-const TABS = [['read', 'eye', 'Read'], ['edit', 'notes', 'Edit by hand'], ['ask', 'spark', 'Ask the agent'], ['hist', 'clock', 'History'], ['health', 'shield', 'Health'], ['links', 'init', 'Relations']];
+const STATE = { current: ['Current', 'ds-good', 'check'], stale: ['Stale', 'ds-warn', 'alert'], draft: ['Draft', 'ds-pe', 'clock'], missing: ['Missing', 'ds-bad', 'plus'] };
+const TABS = [['read', 'eye', 'Read'], ['edit', 'edit', 'Edit'], ['ask', 'spark', 'Proposals'], ['hist', 'clock', 'Edit log'], ['health', 'shield', 'Health'], ['links', 'init', 'Relations']];
+const MODE = { proposals: 'ask', props: 'ask', log: 'hist', history: 'hist' };
 const isDemo = () => !!window.__c3demo;
-const q = (o) => Object.entries(o).map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+const q = (o) => Object.entries(o).filter(([, v]) => v != null && v !== '').map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&');
+const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's');
+const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const hcls = (h) => (!h || h.total === 0 ? '' : h.passed === h.total ? 'ds-good' : h.total - h.passed === 1 ? 'ds-warn' : 'ds-bad');
+const isAgentRev = (r) => !!r && (r.text_by ? r.text_by === 'agent' : byName(r.by) === 'Agent');
+const md = (text, extra) => el('div', { class: 'ds-md' + (extra ? ' ' + extra : '') }, toDom(parseMd(text), document));
+const btn = (cls, attrs, kids, onClick) => c3btn(cls, attrs, kids, onClick);
+const headLevel = (s) => (/^(#+)/.exec(s.prefix || '') || ['', ''])[1].length;
 
-/** The mockup's agentDraft (line 4077): a deterministic rewrite of the sections for the demo's request box. Real mode has no agent behind the page. */
-function demoDraft(secs, prompt) {
-  const p = prompt.toLowerCase(); const out = secs.map((s) => ({ name: s.name, text: s.text })); let did = false;
-  if (/flow|scope|cut|three|3/.test(p)) out.forEach((s) => { if (s.name === 'Scope') { s.text = 'Three flows ship together: one-page address entry, wallet pay and guest checkout. Saved-card removal moves to the next release.'; did = true; } if (s.name === 'Risks' && /audit/i.test(s.text)) s.text += ' The cut frees the 21 Oct audit slot.'; });
-  if (/growth|forecast|6%|number|assumption/.test(p)) out.forEach((s) => { if (/4%/.test(s.text) && s.name === 'Goal') { s.text = s.text.replace('Growth assumption 4%', 'Growth assumption 6% (Q4 forecast, row 14), pending your confirmation'); did = true; } });
-  if (/summar|tl;dr|short/.test(p)) { out.unshift({ name: 'Summary', text: 'One page: raise conversion to 4.0% by fixing the address step, removing saved cards and shipping wallet pay and guest checkout.' }); did = true; }
-  if (/leadership|note|change/.test(p)) { out.push({ name: 'Change note', text: 'The next version changes the scope after the 8 Oct decision. Everything else is unchanged.' }); did = true; }
-  if (!did) out.push({ name: 'Agent note', text: 'Drafted from your request: ' + prompt.slice(0, 160) });
-  return out;
-}
-/** The draft's sections back into the document's text: a changed section is replaced in place, a new Summary goes first, any other new section goes last. */
-const sectionsToText = (before, drafted) => {
-  const A = splitDoc(before); const names = new Set(A.map((s) => s.name)); const edits = {};
-  A.forEach((s) => { const d = drafted.find((x) => x.name === s.name); if (d && d.text !== s.text) edits[s.i] = d.text; });
-  let text = joinDoc(A, edits);
-  for (const d of drafted) {
-    if (names.has(d.name)) continue;
-    if (d.name === 'Summary') text = '## Summary\n' + d.text + '\n\n' + text;
-    else text = text.replace(/\s*$/, '\n\n') + '## ' + d.name + '\n' + d.text + '\n';
-  }
-  return text;
-};
-
-/* Two additive options for a report, which is a document in the mockup (console3.html r2doc):
- *   generated = { text, why, health }   the report has no stored document yet. The sheet shows the generated sections read-only; Edit and Ask say why they
- *                                       need a stored document (why), History says there is none, Health shows `health` ({ passed, total, checks }) as given.
- *   secExtra(name)                      a node under each section in Read: the report's claims and where they come from. */
 export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, onChanged, generated, secExtra }) {
-  const S = { draft: {}, mode, prompt, text: null, err: '', revs: null, texts: {}, cmp: null, health: null, hAsk: false, prop: null, busy: false, changed: false, why: '', metaFor: null, asking: null, closed: false };
+  const S = { mode: MODE[mode] || mode, prompt, text: null, err: '', revs: null, texts: {}, health: null, hAsk: false, busy: false, changed: false,
+    meta: null, metaFor: null, props: null, propsErr: '', log: null, logErr: '', asking: null, closed: false, who: false, src: false, preview: {},
+    pick: {}, rejFor: null, rejWhy: '', whyFor: null, whyText: '', staleWhy: null, logF: 'all', cmp: null, cmpNode: null, flashRev: null, ed: null, leave: null };
   const demo = isDemo();
   const base = { ws, path: doc.path };
   let ui = null;
 
-  /* data */
+  /* ── data ── */
   const loadText = async () => {
     if (generated) { S.text = String(generated.text || ''); S.err = ''; return; }
     try { const r = await fetch('/api/doc?' + q({ ws, path: doc.path })); if (!r.ok) throw new Error((await r.text()) || 'could not read the document'); S.text = await r.text(); S.err = ''; }
     catch (e) { S.text = null; S.err = (e && e.message) || 'could not read the document'; }
   };
   const loadRevs = async () => {
-    if (generated) { S.revs = []; S.revsErr = generated.why; return; }
+    if (generated) { S.revs = []; return; }
     const j = await pmGet('/api/doc-sheet/revisions?' + q(base)).catch(() => null);
-    S.revs = j && j.ok ? j.revisions : []; S.revsErr = j && j.ok ? '' : (j && j.error) || 'The history could not be read.';
+    S.revs = j && j.ok ? j.revisions : [];
   };
   const textAt = async (rev) => {
     if (S.texts[rev] != null) return S.texts[rev];
@@ -139,12 +208,23 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     S.texts[rev] = j && j.ok ? j.text : null; return S.texts[rev];
   };
   const loadHealth = async () => {
-    S.hAsk = true; draw();
+    S.hAsk = true;
     if (generated) { S.health = generated.health || { passed: 0, total: 0, checks: [], err: generated.why }; drawBg(); return; }
-    const r = await pmPost('/api/doc-health/check', base);
+    const r = await pmPost('/api/doc-health/check', base).catch(() => null);
     S.health = r && r.ok && r.health ? r.health : { passed: 0, total: 0, checks: [], err: (r && r.error) || 'The checks could not run.' }; drawBg();
   };
-  /* who changed each section last: needs the text of every revision (a few, fetched once) */
+  const loadProps = async () => {
+    if (generated) { S.props = []; return; }
+    const j = await pmGet('/api/doc-sheet/proposals?' + q(base)).catch(() => null);
+    S.props = j && j.ok ? j.proposals || [] : []; S.propsErr = j && j.ok ? '' : (j && j.error) || 'The proposals could not be read.';
+  };
+  const loadLog = async () => {
+    if (generated) { S.log = { revisions: [], events: [] }; return; }
+    const j = await pmGet('/api/doc-sheet/log?' + q(base)).catch(() => null);
+    if (j && j.ok) { S.log = { revisions: j.revisions || [], events: j.events || [] }; S.logErr = ''; }
+    else { S.log = { revisions: S.revs || [], events: [] }; S.logErr = j && j.error ? j.error : ''; }
+  };
+  /* who changed each section last: the text of the last revisions (a few, fetched once) */
   const loadMeta = async () => {
     if (!S.revs || !S.revs.length || S.metaFor === S.revs.length) return;
     S.metaFor = S.revs.length;
@@ -154,190 +234,512 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     rs.forEach((r, i) => { if (texts[i] == null) return; const cur = splitDoc(texts[i]); const prev = i ? splitDoc(texts[i - 1] || '') : []; cur.forEach((s) => { const p = prev.find((x) => x.name === s.name); if (!p || p.text !== s.text) meta[s.name] = r; }); });
     S.meta = meta; drawBg();
   };
+  const reloadAll = async () => {
+    S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false; S.log = null;
+    await loadText(); draw();
+    await Promise.all([loadRevs(), loadProps(), loadHealth()]); loadMeta(); if (S.mode === 'hist') { await loadLog(); } draw();
+  };
 
-  /* ── drawing ── */
-  const head = () => {
-    const st = STATE[doc.st] || STATE.current; const h = S.health;
-    return el('div', { class: 'chips2', style: 'flex-wrap:wrap', 'data-doc-meta': '' },
-      el('span', { class: 'chip2', style: 'color:' + st[1] }, c3ic(st[2], 'sm'), st[0]), el('span', { class: 'chip2' }, doc.ty || 'Document'), doc.v ? el('span', { class: 'chip2 mono' }, doc.v) : null,
-      h && h.total ? el('span', { class: 'chip2', style: 'color:' + hcol(h) }, c3ic('shield', 'sm'), h.passed + ' of ' + h.total + ' checks') : null,
-      el('span', { class: 'chip2' }, doc.iniName || doc.ini || 'Portfolio'));
+  /* ── drawing helpers ── */
+  const openProps = () => (S.props || []).filter((p) => p.state === 'proposed');
+  const failing = () => (S.health && !S.health.err ? S.health.checks.filter((c) => c.pass === false) : []);
+  const fresh = () => (S.health && !S.health.err ? S.health.checks.find((c) => c.id === 'fresh' && c.pass === false) : null);
+  const lastRev = () => (S.revs && S.revs.length ? S.revs[S.revs.length - 1] : null);
+  const whoOf = (r) => {
+    if (!r) return '';
+    if (isAgentRev(r)) return 'Agent' + (r.via === 'proposal' || r.by === 'pm' ? ' · accepted by you' : '');
+    if (r.git && r.git.author) return r.git.author;
+    if (r.via === 'first' || r.via === 'outside' || r.by === 'baseline') return r.via === 'first' ? 'Before the sheet' : 'Outside PMOS';
+    return byName(r.by);
+  };
+  const byChip = (r) => {
+    if (!r) return null;
+    const ag = isAgentRev(r); const label = whoOf(r);
+    return btn('ds-by', { 'data-doc-by': String(r.rev), title: 'Open revision ' + r.rev + ' in the edit log' },
+      [el('span', { class: 'ds-dot' + (ag ? ' a' : '') }, ag ? c3ic('spark') : (label[0] || '?').toUpperCase()), label + ' · ' + (r.v || 'rev ' + r.rev) + ' · ' + dayName(r.at)],
+      () => { S.flashRev = r.rev; S.logF = 'all'; go('hist'); });
   };
-  const failing = () => (S.health ? S.health.checks.filter((c) => c.pass === false) : []);
-  const seg = () => el('div', { class: 'seg', role: 'group', 'aria-label': 'Document mode' }, TABS.map(([k, ic, l]) => {
-    const bad = k === 'health' ? failing().length : 0;
-    return el('button', { type: 'button', 'aria-pressed': String(S.mode === k), 'aria-label': l, title: l, 'data-dmode': k, onclick: () => go(k) }, c3ic(ic, 'sm'), S.mode === k ? l : null, bad ? [' ', el('span', { class: 'bdg' }, String(bad))] : null);
-  }));
-  const go = (m) => { S.mode = m; if (m !== 'hist') S.cmp = null; if (m === 'health' && !S.hAsk) loadHealth(); if (m === 'hist' && S.revs === null) loadRevs().then(draw); if (m === 'read' || m === 'edit') loadMeta(); draw(); };
+  const goEl = (sel) => { const n = ui && ui.body.querySelector(sel); if (n) { n.scrollIntoView({ block: 'start' }); n.classList.remove('flash'); void n.offsetWidth; n.classList.add('flash'); } };
+
+  function head() {
+    const st = STATE[fresh() ? 'stale' : doc.st] || STATE.current; const h = S.health; const last = lastRev();
+    return el('div', { class: 'chips2 ds-meta', 'data-doc-meta': '' },
+      el('span', { class: 'chip2 ' + st[1] }, c3ic(st[2], 'sm'), st[0]), el('span', { class: 'chip2' }, doc.ty || 'Document'), doc.v ? el('span', { class: 'chip2 mono' }, doc.v) : null,
+      h && h.total ? btn('chip2 lk ' + hcls(h), { 'data-doc-hchip': '' }, [c3ic('shield', 'sm'), h.passed + ' of ' + h.total + ' checks'], () => go('health')) : null,
+      el('span', { class: 'chip2' }, c3ic('init', 'sm'), doc.iniName || doc.ini || 'Portfolio'),
+      last && !generated ? btn('chip2 lk', { 'data-doc-last': '' }, [c3ic(isAgentRev(last) ? 'spark' : 'user', 'sm'), 'Last change: ', el('b', null, whoOf(last) + ','), ' ' + dayName(last.at)], () => go('hist')) : null);
+  }
+  function seg() {
+    return el('div', { class: 'seg', role: 'group', 'aria-label': 'Document mode' }, TABS.map(([k, ic, l]) => {
+      const n = k === 'health' ? failing().length : k === 'ask' ? openProps().length : 0;
+      return btn('', { 'aria-pressed': String(S.mode === k), 'aria-label': l, title: l, 'data-dmode': k },
+        [c3ic(ic, 'sm'), el('span', { class: 'lbl' }, l), n ? el('span', { class: 'bdg ' + (k === 'ask' ? 'p' : 'w') }, String(n)) : null], () => go(k));
+    }));
+  }
+  function go(m) {
+    if (S.mode === 'edit' && m !== 'edit' && S.ed && dirty().length && S.leave !== m) { S.leave = m; draw(); return; }
+    if (m !== 'edit') S.ed = null;
+    S.leave = null; S.mode = m;
+    if (m === 'edit' && !S.ed) startEdit();
+    if (m === 'health' && !S.hAsk) loadHealth();
+    if (m === 'hist') { S.cmp = null; loadLog().then(() => { draw(); if (S.flashRev != null) { goEl('[data-log-rev="' + S.flashRev + '"]'); S.flashRev = null; } }); }
+    if (m === 'ask' && S.props === null) loadProps().then(draw);
+    if (m === 'read') loadMeta();
+    draw();
+    const sb = ui && ui.body.closest('.sb'); if (sb) sb.scrollTop = 0;
+  }
+
+  /* the stale banner: the Fresh check's sources, the sections that cite them, the open proposal */
+  function staleBanner() {
+    const f = fresh(); if (!f || generated) return null;
+    const secs = S.text ? splitDoc(S.text) : [];
+    const srcs = Array.isArray(f.sources) ? f.sources : [];
+    const cites = (p) => { const b = String(p).split('/').pop(); return secs.filter((s) => s.name !== 'Front matter' && (s.text.includes(p) || (b && s.text.includes(b)))).map((s) => s.name); };
+    const op = openProps();
+    if (S.staleWhy !== null) {
+      const inp = el('input', { type: 'text', id: 'dstalewhy', 'data-doc-stalewhy': '', placeholder: 'For example: the launch date is not agreed yet', 'aria-label': 'Why it is still current', value: S.staleWhy, onInput: (e) => { S.staleWhy = e.target.value; } });
+      return el('div', { class: 'ds-stale', role: 'note', 'data-doc-stale': '' }, el('div', { class: 't' }, c3ic('alert', 'sm'), 'Mark as still current'),
+        el('p', null, 'Say why the document is still right. The reason goes in the edit log, and the Fresh check counts it as a change.'),
+        el('div', { class: 'ds-whyadd' }, inp, btn('ds-btn pri', { 'data-doc-markok': '' }, 'Mark current', () => markCurrent()), btn('ds-btn', {}, 'Cancel', () => { S.staleWhy = null; draw(); })));
+    }
+    return el('div', { class: 'ds-stale', role: 'note', 'data-doc-stale': '' }, el('div', { class: 't' }, c3ic('alert', 'sm'), 'Stale'),
+      el('p', null, f.reason + '.' + (op.length ? ' ' + plural(op.length, 'open proposal') + ' may bring it up to date.' : ' Edit the sections they touch, or ask the agent for an update.')),
+      srcs.length ? el('ul', null, srcs.map((s) => { const c = cites(s.path); return el('li', { 'data-doc-stalesrc': s.path }, s.path + (s.changed ? ', changed ' + dayName(s.changed) : '') + (c.length ? ' (cited in ' + c.join(', ') + ')' : '')); })) : null,
+      el('div', { class: 'ds-acts' }, op.length ? btn('ds-btn ag', {}, [c3ic('spark', 'sm'), 'Review the proposals'], () => go('ask'))
+        : btn('ds-btn ag', {}, [c3ic('spark', 'sm'), 'Ask the agent'], () => { S.prompt = 'Bring this document up to date with ' + (srcs.map((s) => s.path).join(', ') || 'its sources'); go('ask'); }),
+      btn('ds-btn', { 'data-doc-mark': '' }, 'Mark as still current', () => { S.staleWhy = ''; draw(); const i = ui.body.querySelector('#dstalewhy'); if (i) i.focus(); })));
+  }
+  async function markCurrent() {
+    const w = String(S.staleWhy || '').trim();
+    if (!w) { say('Say why it is still current'); const i = ui.body.querySelector('#dstalewhy'); if (i) i.focus(); return; }
+    const r = await pmPost('/api/doc-sheet/mark-current', { ...base, why: w }).catch(() => null);
+    if (!r || !r.ok) { say((r && r.error) || 'It was not marked.'); return; }
+    S.staleWhy = null; S.changed = true; if (doc.st === 'stale') doc.st = 'current'; S.health = null; S.hAsk = false; S.log = null;
+    await loadHealth(); draw(); say('Marked as current. The reason is in the edit log.');
+  }
 
-  const flags = () => { const f = {}; failing().forEach((c) => { if (c.section && c.flag) f[c.section] = c.flag; }); return f; };
-  const readBody = (editing, quiet) => {
-    if (editing && generated) return el('div', { class: 'dpn' }, el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'edit' }, c3ic('lock', 'sm'), generated.why), readBody(false, true));
+  /* ── Read ── */
+  function propsBlock(secs, editing) {
+    const s0 = secs.find((s) => s.prefix === ''); const fm = s0 && parseFront(s0.text);
+    if (!fm || !fm.fields.length) return null;
+    if (editing) {
+      return el('dl', { class: 'ds-props', 'data-doc-props': 'edit' }, fm.fields.map((f) => [el('dt', null, el('label', { for: 'dsp-' + f.key }, f.key)),
+        el('dd', null, f.editable ? el('input', { id: 'dsp-' + f.key, type: 'text', value: S.ed.front[f.key] != null ? S.ed.front[f.key] : f.value, 'data-doc-prop': f.key, onInput: (e) => { S.ed.front[f.key] = e.target.value; mark(); } }) : f.value)]));
+    }
+    const r = S.meta && S.meta['Front matter'];
+    return el('dl', { class: 'ds-props', 'data-doc-props': '' }, fm.fields.map((f) => [el('dt', null, f.key), el('dd', null, f.value)]),
+      el('div', { class: 'sub' }, c3ic('doc', 'sm'), 'Front matter', r ? [' · ', byChip(r)] : null));
+  }
+  function readBody() {
     if (S.text == null) return S.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.err) : el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the document.');
-    const secs = splitDoc(S.text); const fl = flags(); const meta = S.meta || {};
-    if (!secs.some((s) => s.text.trim() || s.name !== 'Overview')) return el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'The document is empty.');
+    const secs = splitDoc(S.text);
+    if (!S.text.trim()) return el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'The document is empty.');
+    const named = secs.filter((s) => s.prefix);
+    const toc = el('select', { class: 'ds-sel', 'aria-label': 'Contents', 'data-doc-toc': '', onChange: (e) => { const v = e.target.value; e.target.value = ''; if (v !== '') goEl('[data-dsec-i="' + v + '"]'); } },
+      el('option', { value: '' }, 'Contents'), named.map((s) => el('option', { value: String(s.i) }, (headLevel(s) > 2 ? '  ' : '') + s.name)));
+    const tg = (id, label, on, set) => el('label', { class: 'ds-tg' }, el('input', { type: 'checkbox', checked: on, 'data-doc-toggle': id, onChange: (e) => { set(e.target.checked); draw(); } }), label);
+    const bar = el('div', { class: 'ds-rbar' }, toc, el('span', { class: 'ds-acts' },
+      generated ? null : tg('who', 'Show who wrote what', S.who, (v) => { S.who = v; }), tg('src', 'Markdown source', S.src, (v) => { S.src = v; })));
+    const legend = S.who ? el('div', { class: 'ds-legend' }, el('span', null, el('i', { class: 'h' }), 'Written by a person'), el('span', null, el('i', { class: 'a' }), 'Written by the agent, accepted by a person')) : null;
+    if (S.src) {
+      const pre = el('pre', { 'data-doc-source': '' }, el('code', null, S.text));
+      const copy = async () => { try { await navigator.clipboard.writeText(S.text); say('Copied the markdown.'); } catch { const s = getSelection(); const rg = document.createRange(); rg.selectNodeContents(pre); s.removeAllRanges(); s.addRange(rg); say('Copying is blocked here. The text is selected.'); } };
+      return el('div', { class: 'ds' }, bar, el('div', { class: 'ds-acts' }, btn('ds-btn', { 'data-doc-copysrc': '' }, [c3ic('copy', 'sm'), 'Copy the markdown'], copy), el('span', { class: 'ds-mono' }, doc.path)), el('div', { class: 'ds-md' }, pre));
+    }
+    const meta = S.meta || {};
+    const pins = (name) => openProps().filter((p) => p.sections.some((c) => c.name === name && c.kind !== 'added'));
+    const flags = {}; failing().forEach((c) => { if (c.section && c.flag) flags[c.section] = c.flag; });
     const cells = secs.map((s) => {
-      const mt = meta[s.name];
-      const dt = el('div', { class: 'dt', 'data-sec': s.i, ...(editing ? { contenteditable: 'plaintext-only', role: 'textbox', 'aria-label': s.name, 'aria-multiline': 'true', style: 'white-space:pre-wrap' } : { style: 'white-space:pre-wrap' }) }, editing && S.draft[s.i] != null ? S.draft[s.i] : s.text);
-      if (editing && dt.contentEditable !== 'plaintext-only') dt.setAttribute('contenteditable', 'true');
-      if (editing) dt.addEventListener('input', () => { S.draft[s.i] = dt.contentEditable === 'plaintext-only' ? dt.textContent : dt.innerText; });
-      return el('div', { class: 'dsec' + (fl[s.name] ? ' warn' : ''), 'data-dsec': s.name }, el('h4', null, s.name), dt,
-        el('div', { class: 'mt' }, mt ? el('span', { style: 'color:' + (byName(mt.by) === 'Agent' ? 'var(--purple)' : 'var(--acc)') }, c3ic(byName(mt.by) === 'Agent' ? 'spark' : 'user', 'sm'), 'Last changed by ' + byName(mt.by) + ', ' + dayName(mt.at)) : null,
-          fl[s.name] ? el('span', { style: 'color:var(--warning)' }, c3ic('alert', 'sm'), fl[s.name]) : null), !editing && secExtra ? secExtra(s.name) : null);
+      const fm = s.prefix === '' ? parseFront(s.text) : null;
+      const body = fm ? fm.rest.trim() : s.text;
+      if (!s.prefix && !body) return null;
+      const r = meta[s.name]; const P = pins(s.name);
+      const shown = P.find((p) => S.preview[p.id]);
+      const ch = shown && shown.sections.find((c) => c.name === s.name);
+      const content = ch ? md(diffMd(ch.stale ? s.text : ch.before, ch.after), 'ds-body') : body ? md(body, 'ds-body') : headLevel(s) === 1 ? null : el('p', { class: 'ds-note' }, 'This section is empty.');
+      const lvl = Math.min(3, Math.max(2, headLevel(s)));
+      return el('div', { class: 'ds-sec ' + (r ? (isAgentRev(r) ? 'a' : 'h') : '') + (ch ? ' prev' : ''), 'data-dsec': s.name, 'data-dsec-i': String(s.i) },
+        s.prefix ? el('div', { class: 'ds-sec-h' }, headLevel(s) === 1 ? el('div', { class: 'ds-md' }, el('h1', null, s.name)) : el('h' + lvl, null, s.name), generated ? null : byChip(r)) : null,
+        P.map((p) => { const c = p.sections.find((x) => x.name === s.name); return el('div', { class: 'ds-pin', 'data-doc-pin': p.id }, el('span', null, c3ic('spark', 'sm'), (c.stale ? 'A proposal was drafted against older text here' : 'The agent proposes a change here') + ': “' + short(p.prompt) + '”'),
+          el('span', { class: 'ds-acts' }, btn('ds-btn', { 'data-doc-preview': p.id }, S.preview[p.id] ? 'Show current' : 'Show change', () => { S.preview[p.id] = !S.preview[p.id]; draw(); }),
+            btn('ds-btn ag', {}, 'Review', () => { S.openProp = p.id; go('ask'); }))); }),
+        flags[s.name] ? el('div', { class: 'fold w', role: 'note' }, c3ic('alert', 'sm'), flags[s.name]) : null,
+        content, secExtra ? secExtra(s.name) : null);
     });
-    if (!editing) return el('div', { class: 'dpn' }, generated && !quiet ? el('div', { class: 'fold', role: 'note', 'data-doc-generated': '' }, c3ic('info', 'sm'), generated.why) : null, cells);
-    const why = el('input', { type: 'text', id: 'dwhy', placeholder: 'Why are you changing it? (kept in the history)', 'aria-label': 'Why', 'data-doc-why': '', value: S.why, onInput: (e) => { S.why = e.target.value; } });
-    return el('div', { class: 'dpn' }, cells, why,
-      S.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.err) : null,
-      el('div', { class: 'chips2' }, c3ib('Save as ' + nextV(doc.v), 'check', { 'data-doc-save': '', onClick: () => save(secs) }, ''), c3ib('Cancel', 'x', { onClick: () => { S.err = ''; S.draft = {}; go('read'); } }, '')));
-  };
+    const adds = openProps().flatMap((p) => p.sections.filter((c) => c.kind === 'added' && S.preview[p.id]).map((c) => el('div', { class: 'ds-sec a prev', 'data-dsec-new': c.name },
+      el('div', { class: 'ds-pin' }, el('span', null, c3ic('spark', 'sm'), 'The proposal adds a section: ' + c.name)), el('div', { class: 'ds-sec-h' }, el('h2', null, c.name)), md(diffMd(null, c.after), 'ds-body'))));
+    return el('div', { class: 'ds' + (S.who ? ' who' : '') }, bar, legend, generated ? el('div', { class: 'fold', role: 'note', 'data-doc-generated': '' }, c3ic('info', 'sm'), generated.why) : null,
+      staleBanner(), propsBlock(secs, false), cells, adds);
+  }
+  const short = (t) => { const s = String(t || '').replace(/\s+/g, ' ').trim(); return s.length > 90 ? s.slice(0, 88) + '…' : s; };
 
-  async function save(secs) {
-    const edits = {};
-    ui.body.querySelectorAll('[data-sec]').forEach((n) => { const i = Number(n.dataset.sec); const v = n.contentEditable === 'plaintext-only' ? n.textContent : n.innerText; if (v !== secs[i].text) edits[i] = v; });
-    if (!Object.keys(edits).length) { say('Nothing changed'); S.err = ''; S.draft = {}; go('read'); return; }
-    if (!S.why.trim()) { S.err = 'Say why the document changes: the reason is kept in the history.'; draw(); ui.body.querySelector('#dwhy') && ui.body.querySelector('#dwhy').focus(); return; }
-    const before = S.text; const after = joinDoc(secs, edits);
-    const r = await pmPost('/api/doc-sheet/edit', { ...base, text: after, why: S.why.trim() });
-    if (!r || !r.ok) { S.err = (r && r.error) || 'The document was not saved.'; draw(); return; }
-    S.err = ''; S.why = ''; S.draft = {}; S.changed = true; S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false;
-    await loadText(); go('read');
-    say('Saved as ' + nextV(doc.v) + (r.rev ? ' (revision ' + r.rev + ')' : ''), async () => {
-      const u = await pmPost('/api/doc-sheet/edit', { ...base, text: before, why: 'Undone: restored the text from before the last edit.' });
-      if (u && u.ok) { S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false; await loadText(); draw(); } else say((u && u.error) || 'The edit could not be undone.');
+  /* ── Edit ── */
+  function startEdit() {
+    if (generated || S.text == null) { S.ed = null; return; }
+    S.ed = { text: S.text, base: splitDoc(S.text), front: {}, kind: 'rich', why: '', whyBad: false, node: null, ta: null, range: null, link: false };
+  }
+  function edNode() {
+    const E = S.ed; const kids = [];
+    E.base.forEach((s, i) => {
+      if (s.prefix === '') { const fm = parseFront(s.text); const rest = fm ? fm.rest.trim() : s.text; if (rest) kids.push(...toDom(parseMd(rest), document, { editable: true })); return; }
+      const h = el('h' + Math.min(6, Math.max(1, headLevel(s))), { 'data-sid': String(i) }, s.name);
+      kids.push(h, ...toDom(parseMd(s.text), document, { editable: true }));
+    });
+    const n = el('div', { class: 'ds-md ds-ed', id: 'ded', contenteditable: 'true', role: 'textbox', 'aria-multiline': 'true', 'aria-label': 'Document', spellcheck: 'true', 'data-doc-editor': '',
+      onInput: () => { clearTimeout(E.t); E.t = setTimeout(mark, 200); }, onChange: () => mark(),
+      onKeyDown: (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); linkOpen(); } if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); save(); } } }, kids);
+    n.querySelectorAll('input[type=checkbox]').forEach((c) => { c.disabled = false; });
+    return n;
+  }
+  /** The draft as text, from whichever editor is open. */
+  function draftText() {
+    const E = S.ed; if (!E) return S.text;
+    const s0 = E.base.find((s) => s.prefix === ''); const fm = s0 && parseFront(s0.text);
+    const front = fm ? setFront(fm.block, E.front) : null;
+    if (E.kind === 'md') {
+      let t = E.ta ? E.ta.value : E.text;
+      if (fm && front !== fm.block && t.startsWith(fm.block)) t = front + t.slice(fm.block.length);
+      return t;
+    }
+    if (!E.node) return E.text;
+    const groups = []; let intro = []; let cur = null;
+    for (const n of Array.from(E.node.childNodes)) {
+      if (n.nodeType === 1 && /^H[1-6]$/.test(n.tagName)) { cur = { sid: n.hasAttribute('data-sid') ? Number(n.getAttribute('data-sid')) : null, level: Number(n.tagName[1]), name: n.textContent.replace(/\s+/g, ' ').trim() || 'Untitled section', nodes: [] }; groups.push(cur); continue; }
+      (cur ? cur.nodes : intro).push(n);
+    }
+    const mdOf = (nodes) => { const d = document.createElement('div'); nodes.forEach((x) => d.appendChild(x.cloneNode(true))); return toMd(fromDom(d)); };
+    return composeSections(E.base, groups.map((g) => ({ sid: g.sid, level: g.level, name: g.name, md: mdOf(g.nodes) })), mdOf(intro), front);
+  }
+  const dirty = () => (S.ed ? changedSections(S.text, draftText()) : []);
+  const clashOf = (name) => openProps().find((p) => p.sections.some((c) => c.name === name));
+  function mark() {
+    const E = S.ed; if (!E) return;
+    const ch = dirty(); const names = new Set(ch.map((c) => c.name));
+    if (E.node) E.node.querySelectorAll(':scope > h1,:scope > h2,:scope > h3,:scope > h4,:scope > h5,:scope > h6').forEach((h) => {
+      const nm = h.textContent.replace(/\s+/g, ' ').trim(); const on = !h.hasAttribute('data-sid') || names.has(nm) || names.has(E.base[Number(h.getAttribute('data-sid'))]?.name);
+      h.classList.toggle('chg', on); h.classList.toggle('clash', !!(on && clashOf(nm)));
+    });
+    const s = ui.body.querySelector('[data-doc-savesum]'); if (s) s.replaceChildren(...saveSum(ch).filter(Boolean));
+  }
+  function saveSum(ch) {
+    if (!ch.length) return [c3ic('info', 'sm'), 'No changes yet. Health checks the document again after you save.'];
+    const cl = [...new Set(ch.map((c) => clashOf(c.name)).filter(Boolean))];
+    return [c3ic('edit', 'sm'), plural(ch.length, 'section') + ' changed: ' + ch.map((c) => c.name).join(', ') + '.',
+      cl.length ? el('span', { class: 'ds-warn' }, ' ' + plural(cl.length, 'open proposal') + ' also change' + (cl.length === 1 ? 's' : '') + ' them; accepting it after your save needs a new draft.') : null];
+  }
+  const keepRange = () => { const E = S.ed; const s = getSelection(); if (E && E.node && s.rangeCount && E.node.contains(s.anchorNode)) E.range = s.getRangeAt(0).cloneRange(); };
+  const restore = () => { const E = S.ed; if (E && E.range) { const s = getSelection(); s.removeAllRanges(); s.addRange(E.range); } };
+  function cmd(c, arg) {
+    const E = S.ed; if (!E || E.kind !== 'rich' || !E.node) { say('Switch to Rich to use the toolbar.'); return; }
+    E.node.focus(); restore();
+    const txt = getSelection().toString();
+    if (c === 'code') document.execCommand('insertHTML', false, '<code>' + esc(txt || 'code') + '</code>&#8203;');
+    else if (c === 'task') document.execCommand('insertHTML', false, '<ul class="tasks"><li class="task"><input type="checkbox" aria-label="Done"><span>' + esc(txt || 'New item') + '</span></li></ul>');
+    else if (c === 'table') document.execCommand('insertHTML', false, '<div class="tw"><table><thead><tr><th>Column</th><th>Column</th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></div><p><br></p>');
+    else if (c === 'formatBlock') document.execCommand('formatBlock', false, arg);
+    else document.execCommand(c, false, arg);
+    keepRange(); mark();
+  }
+  function linkOpen() { keepRange(); S.ed.link = true; drawEdit(); const i = ui.body.querySelector('#dlink'); if (i) i.focus(); }
+  function linkDone(ok, url) {
+    const E = S.ed; E.link = false; const u = safeHref(String(url || '').trim());
+    drawEdit();
+    if (!ok || !u) { if (ok && url && !u) say('That link cannot be used. Use an http or https address, or a path.'); return; }
+    E.node.focus(); restore();
+    if (getSelection().toString()) document.execCommand('createLink', false, u); else document.execCommand('insertHTML', false, '<a href="' + esc(u) + '">' + esc(u) + '</a>');
+    mark();
+  }
+  function toolbar() {
+    const E = S.ed;
+    const tb = (c, ic, l, arg) => btn('', { 'aria-label': l, title: l, 'data-doc-cmd': c, onMouseDown: (e) => e.preventDefault() }, c3ic(ic, 'sm'), () => (c === 'link' ? linkOpen() : cmd(c, arg)));
+    const style = el('select', { 'aria-label': 'Paragraph style', 'data-doc-style': '', onChange: (e) => { cmd('formatBlock', e.target.value); e.target.value = ''; } },
+      el('option', { value: '' }, 'Style'), el('option', { value: 'p' }, 'Text'), el('option', { value: 'h2' }, 'Section heading'), el('option', { value: 'h3' }, 'Subheading'), el('option', { value: 'blockquote' }, 'Callout'));
+    const kind = el('div', { class: 'seg', role: 'group', 'aria-label': 'Editor' },
+      btn('', { 'aria-pressed': String(E.kind === 'rich'), 'data-doc-edkind': 'rich' }, [c3ic('eye', 'sm'), 'Rich'], () => switchKind('rich')),
+      btn('', { 'aria-pressed': String(E.kind === 'md'), 'data-doc-edkind': 'md' }, [c3ic('md', 'sm'), 'Markdown'], () => switchKind('md')));
+    const bar = el('div', { class: 'ds-tb', role: 'toolbar', 'aria-label': 'Formatting' }, style, el('span', { class: 'sep' }),
+      tb('bold', 'bold', 'Bold (Ctrl+B)'), tb('italic', 'italic', 'Italic (Ctrl+I)'), tb('code', 'code', 'Inline code'), tb('link', 'link', 'Link (Ctrl+K)'), el('span', { class: 'sep' }),
+      tb('insertUnorderedList', 'ul', 'Bulleted list'), tb('insertOrderedList', 'ol', 'Numbered list'), tb('task', 'task', 'Checklist'), tb('table', 'table', 'Table'), tb('insertHorizontalRule', 'hr', 'Divider'), el('span', { class: 'sep' }),
+      tb('undo', 'undo', 'Undo (Ctrl+Z)'), tb('redo', 'redo', 'Redo'), el('span', { class: 'sp' }), kind);
+    if (!E.link) return bar;
+    const inp = el('input', { id: 'dlink', type: 'url', placeholder: 'Paste a link, for example a Confluence page', 'aria-label': 'Link address', onKeyDown: (e) => { if (e.key === 'Enter') { e.preventDefault(); linkDone(true, e.target.value); } if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); linkDone(false); } } });
+    return [bar, el('div', { class: 'ds-pop', 'data-doc-linkpop': '' }, c3ic('link', 'sm'), inp, btn('ds-btn pri', {}, 'Add link', () => linkDone(true, inp.value)), btn('ds-btn', {}, 'Cancel', () => linkDone(false)))];
+  }
+  function switchKind(k) {
+    const E = S.ed; if (E.kind === k) return;
+    E.text = draftText(); E.kind = k;
+    if (k === 'rich') { E.base = splitDoc(E.text); E.node = null; }
+    drawEdit();
+  }
+  function editBody() {
+    if (generated) return el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'edit' }, c3ic('lock', 'sm'), generated.why);
+    if (S.text == null) return readBody();
+    if (!S.ed) startEdit();
+    const E = S.ed;
+    const secs = splitDoc(S.text);
+    let area;
+    if (E.kind === 'rich') { if (!E.node) E.node = edNode(); area = E.node; E.ta = null; }
+    else { E.ta = E.ta || el('textarea', { class: 'ds-src', id: 'dsrc', 'aria-label': 'Markdown source', spellcheck: 'false', 'data-doc-mdsrc': '', onInput: () => { clearTimeout(E.t); E.t = setTimeout(mark, 250); } }, E.text); area = E.ta; E.node = null; }
+    const why = el('input', { type: 'text', id: 'dwhy', class: E.whyBad ? 'bad' : '', placeholder: 'Why are you changing it? Kept in the edit log.', 'aria-label': 'Why', 'data-doc-why': '', value: E.why,
+      onInput: (e) => { E.why = e.target.value; if (E.whyBad && E.why.trim()) { E.whyBad = false; e.target.classList.remove('bad'); const a = ui.body.querySelector('[data-doc-whybad]'); if (a) a.remove(); } } });
+    const save = el('div', { class: 'ds-save' }, el('div', { class: 'sum', 'data-doc-savesum': '' }, saveSum([])), why,
+      E.whyBad ? el('div', { class: 'fold w', role: 'alert', 'data-doc-whybad': '' }, c3ic('alert', 'sm'), 'Say why the document changes. The reason is kept in the edit log.') : null,
+      S.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.err) : null,
+      el('div', { class: 'row' }, el('span', { class: 'ds-mono' }, c3ic('user', 'sm'), ' Saved by you' + (nextV(doc.v) ? ' as ' + nextV(doc.v) : '')),
+        el('span', { class: 'ds-acts' }, btn('ds-btn', { 'data-doc-cancel': '' }, 'Cancel', () => { S.ed = null; S.err = ''; go('read'); }),
+          btn('ds-btn pri', { 'data-doc-save': '' }, [c3ic('check', 'sm'), 'Save' + (nextV(doc.v) ? ' as ' + nextV(doc.v) : '')], () => saveDoc()))));
+    return el('div', { class: 'ds', 'data-doc-edit': '' }, staleBanner(), propsBlock(secs, true), area, save);
+  }
+  function drawEdit() { draw(); if (S.ed) setTimeout(mark, 0); }
+  async function saveDoc() {
+    const E = S.ed; if (!E || S.busy) return;
+    const after = draftText(); const ch = changedSections(S.text, after);
+    if (after === S.text || !ch.length) { say('Nothing changed.'); S.ed = null; S.err = ''; go('read'); return; }
+    if (!E.why.trim()) { E.whyBad = true; E.text = after; if (E.kind === 'rich') { E.base = splitDoc(after); E.node = null; } else if (E.ta) E.ta.value = after; drawEdit(); const w = ui.body.querySelector('#dwhy'); if (w) w.focus(); return; }
+    const before = S.text; S.busy = true;
+    const r = await pmPost('/api/doc-sheet/edit', { ...base, text: after, why: E.why.trim() }).catch(() => null);
+    S.busy = false;
+    if (!r || !r.ok) { S.err = (r && r.error) || 'The document was not saved.'; E.text = after; if (E.kind === 'rich') { E.base = splitDoc(after); E.node = null; } drawEdit(); return; }
+    const v = nextV(doc.v); if (v) doc.v = v; if (doc.st === 'stale') doc.st = 'current';
+    S.err = ''; S.ed = null; S.changed = true; S.mode = 'read';
+    await reloadAll();
+    say('Saved' + (v ? ' as ' + v : '') + '. ' + plural(ch.length, 'section') + ' changed; the reason is in the edit log.', async () => {
+      const u = await pmPost('/api/doc-sheet/edit', { ...base, text: before, why: 'Undone: restored the text from before the last edit.' }).catch(() => null);
+      if (u && u.ok) { await reloadAll(); } else say((u && u.error) || 'The edit could not be undone.');
     });
   }
 
-  /* Ask the agent */
-  const diffNode = (list, all) => {
-    const rows = list.filter((d) => all || d.kind !== 'same');
-    return el('div', { class: 'dpn dfi', 'data-doc-diff': '' }, rows.length ? rows.map((d) => el('div', { class: 'dsec warn' }, el('h4', null, d.name), el('p', null, wordDiffTokens(d.before, d.after).map((t) => (t.op === 'add' ? el('ins', null, t.text) : t.op === 'del' ? el('del', null, t.text) : t.text))))) : el('div', { class: 'dim' }, 'No change.'));
-  };
-  const askBody = () => {
-    if (generated) return el('div', { class: 'dpn' }, el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'ask' }, c3ic('lock', 'sm'), generated.why));
-    const ta = el('textarea', { id: 'dpr', placeholder: 'Tell the agent what to change, for example: cut the scope to 3 flows', 'aria-label': 'Request to the agent', 'data-doc-prompt': '', onInput: (e) => { S.prompt = e.target.value; } }, S.prompt);
+  /* ── Proposals ── */
+  function askBox() {
+    const A = S.asking;
+    const ta = el('textarea', { id: 'dpr', placeholder: 'Tell the agent what to change, for example: add a one-paragraph summary at the top', 'aria-label': 'Request to the agent', 'data-doc-prompt': '', onInput: (e) => { S.prompt = e.target.value; } }, S.prompt);
     const sug = [...new Set(failing().map((c) => c.fix).filter(Boolean))];
     const copy = async () => { const t = 'Change ' + doc.path + ': ' + (S.prompt || '').trim(); try { await navigator.clipboard.writeText(t); say('The request is copied. Give it to your agent session.'); } catch { say('Copying is blocked here. Select the request and copy it.'); } };
-    const kids = [ta, el('div', { class: 'chips2' },
-      demo ? c3ib('Ask the agent', 'spark', { 'data-doc-ask': '', onClick: () => askDemo() }, '')
-        : S.asking && S.asking.state === 'working' ? c3btn('pill', { disabled: true, 'aria-disabled': 'true', 'data-doc-ask': '' }, [c3ic('clock', 'sm'), 'The agent is drafting'])
-          : c3btn('pill', { 'data-doc-ask': '' }, [c3ic('spark', 'sm'), 'Ask the agent'], () => askReal()),
-      !demo ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-copy': '', onclick: copy }, c3ic('doc', 'sm'), 'Copy the request') : null,
-      ...sug.map((t, i) => el('button', { type: 'button', class: 'chip2 lk', 'data-doc-chip': String(i), onclick: () => { S.prompt = t; draw(); } }, c3ic('spark', 'sm'), t)))];
-    const A = S.asking;
-    if (!demo && A && A.state === 'working') kids.push(el('div', { class: 'fold', role: 'status', 'data-doc-asking': '' }, c3ic('clock', 'sm'), 'The agent is reading the document and drafting the change. It runs in the background and can only read; you can close this sheet and come back. Its run is listed in Sessions.'));
-    else if (!demo && A && A.state === 'failed') kids.push(el('div', { class: 'fold w', role: 'alert', 'data-doc-ask-err': '' }, c3ic('alert', 'sm'), A.error || 'The agent did not answer.'));
-    if (S.prop) kids.push(propCase());
-    else if (!demo && !A) kids.push(el('div', { class: 'fold', role: 'note', 'data-doc-ask-why': '' }, c3ic('info', 'sm'), 'The agent drafts the change in the background and shows you the difference. It can only read: nothing is saved until you slide to accept it.'));
-    else if (demo) kids.push(el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'The agent drafts the change as a new version and shows you the difference. Nothing is saved or shared until you accept it.'));
-    return el('div', { class: 'dpn' }, kids);
-  };
+    const working = A && A.state === 'working';
+    return el('div', { class: 'ds-ask' }, el('label', { class: 'ds-h', for: 'dpr' }, c3ic('spark', 'sm'), 'Ask the agent'), ta,
+      el('div', { class: 'ds-acts' },
+        btn('ds-btn ag', { 'data-doc-ask': '', disabled: working, 'aria-disabled': working ? 'true' : null }, [c3ic(working ? 'clock' : 'spark', 'sm'), working ? 'The agent is drafting' : 'Ask the agent'], () => (demo ? askDemo() : askReal())),
+        demo ? null : btn('ds-btn', { 'data-doc-copy': '' }, [c3ic('copy', 'sm'), 'Copy the request'], copy),
+        sug.map((t, i) => btn('chip2 lk', { 'data-doc-chip': String(i) }, [c3ic('spark', 'sm'), t], () => { S.prompt = t; draw(); }))),
+      working ? el('div', { class: 'fold', role: 'status', 'data-doc-asking': '' }, c3ic('clock', 'sm'), 'The agent is reading the document and drafting the change. It runs in the background and can only read; you can close this sheet and come back. Its run is listed in Sessions.')
+        : A && A.state === 'failed' ? el('div', { class: 'fold w', role: 'alert', 'data-doc-ask-err': '' }, c3ic('alert', 'sm'), A.error || 'The agent did not answer.')
+          : el('p', { class: 'ds-note', 'data-doc-ask-why': '' }, 'The agent drafts a proposal and can only read. Nothing in the document changes until you accept it, and your request is kept in the edit log.'));
+  }
   async function askDemo() {
     const pr = (S.prompt || '').trim(); if (!pr) { say('Tell the agent what to change'); return; }
-    const before = S.text || ''; const drafted = demoDraft(splitDoc(before), pr); const after = sectionsToText(before, drafted);
-    const r = await pmPost('/api/doc-sheet/propose', { ...base, prompt: pr, after });
+    const before = S.text || ''; const after = before.replace(/\s*$/, '\n\n') + '## Agent note\n\nDrafted from your request: ' + pr.slice(0, 160) + '\n';
+    const r = await pmPost('/api/doc-sheet/propose', { ...base, prompt: pr, after }).catch(() => null);
     if (!r || !r.ok) { say((r && r.error) || 'The agent did not answer.'); return; }
-    S.prop = { id: r.id, hash: r.hash, prompt: pr, before, after, nextV: nextV(doc.v) }; draw();
+    S.prompt = ''; S.openProp = r.id; await loadProps(); draw();
   }
-  /* real mode: start the run from the page, then read its state until the proposal is there */
+  /* real mode: start the run from the page (page-starts-agent), then read its state until the proposal is there */
   async function askReal() {
-    const pr = (S.prompt || '').trim(); if (!pr) { say('Tell the agent what to change'); return; }
-    S.prop = null; S.asking = { state: 'working' }; draw();
-    const r = await pmPost('/api/doc-sheet/ask', { ...base, prompt: pr });
+    const pr = (S.prompt || '').trim(); if (!pr) { say('Tell the agent what to change'); const t = ui.body.querySelector('#dpr'); if (t) t.focus(); return; }
+    S.asking = { state: 'working' }; draw();
+    const r = await pmPost('/api/doc-sheet/ask', { ...base, prompt: pr }).catch(() => null);
     if (!r || !r.ok) { S.asking = { state: 'failed', error: (r && r.error) || 'The agent could not start.' }; draw(); return; }
-    S.asking = { id: r.id, state: 'working' }; draw();
-    pollAsk(r.id, pr);
+    S.asking = { id: r.id, state: 'working' }; S.prompt = ''; S.log = null; draw();
+    pollAsk(r.id);
   }
-  async function pollAsk(id, pr) {
+  async function pollAsk(id) {
     while (!S.closed && S.asking && S.asking.id === id) {
       await new Promise((ok) => setTimeout(ok, 3000));
       if (S.closed || !S.asking || S.asking.id !== id) return;
-      const r = await pmGet('/api/doc-sheet/ask?id=' + encodeURIComponent(id) + (ws ? '&ws=' + encodeURIComponent(ws) : '')).catch(() => null);
+      const r = await pmGet('/api/doc-sheet/ask?' + q({ id, ws })).catch(() => null);
       if (!r || !r.ok || r.state === 'working') continue;
-      if (r.state === 'proposed' && r.proposal) { S.asking = null; S.prop = { id: r.proposal.id, hash: r.proposal.hash, prompt: r.proposal.prompt || pr, before: r.proposal.before, after: r.proposal.after, nextV: nextV(doc.v) }; }
+      if (r.state === 'proposed' && r.proposal) { S.asking = null; S.openProp = r.proposal.id; await loadProps(); }
       else S.asking = { id, state: 'failed', error: r.error };
-      if (S.mode === 'ask') draw();
-      say(S.prop ? 'The agent’s draft is ready. Read it, then slide to accept.' : 'The agent did not draft the change.');
+      S.log = null; drawBg();
+      say(r.state === 'proposed' ? 'The agent’s draft is ready in Proposals. Read it, then slide to accept.' : 'The agent did not draft the change.');
       return;
     }
   }
-  function propCase() {
-    const P = S.prop; const D = changedSections(P.before, P.after);
-    const c = renderCase({ id: 'docedit:' + doc.path, sit: 'You asked: “' + P.prompt + '”. The draft changes ' + D.length + ' section' + (D.length === 1 ? '' : 's') + ' and saves as ' + P.nextV + '. Nothing is shared until you send it.', conf: 76,
-      chg: D.map((x) => ['notes', 'Section: ' + x.name, x.kind, 'warn']), cta: 'Slide to accept ' + P.nextV,
-      opts: [{ id: 'ac', l: 'Accept as ' + P.nextV, rec: 1, fx: [['check', 'Health is re-checked', 'ok'], ['lock', 'Bound to proposal ' + P.hash.slice(0, 8), '']] }, { id: 'rf', l: 'Change the request', fx: [] }, { id: 'ds', l: 'Discard', fx: [] }] },
-    { onConfirm: async ({ option }) => {
-      if (option.id === 'ds') { S.prop = null; say('Discarded.'); draw(); return; }
-      if (option.id === 'rf') { S.prop = null; draw(); const t = ui.body.querySelector('#dpr'); if (t) t.focus(); return; }
-      const r = await pmPost('/api/doc-sheet/accept', { ...base, id: P.id, hash: P.hash });
-      if (!r || !r.ok) { say('Not accepted: ' + ((r && (r.error || r.reason)) || 'the proposal changed.')); return; }
-      S.prop = null; S.changed = true; S.revs = null; S.meta = null; S.metaFor = null; S.texts = {}; S.health = null; S.hAsk = false; doc.v = P.nextV; if (doc.st !== 'current') doc.st = 'current';
-      await loadText(); go('read'); say('Saved as ' + P.nextV + '. History records your request.');
-    } });
-    const viz = diffNode(D.map((x) => ({ ...x })));
-    c.insertBefore(viz, c.querySelector('.chgl') || c.querySelector('.opts'));
-    return c;
+  function propCard(p) {
+    const pick = S.pick[p.id] || (S.pick[p.id] = {});
+    p.sections.forEach((c) => { if (pick[c.name] == null || c.stale) pick[c.name] = !c.stale; });
+    const n = p.sections.filter((c) => pick[c.name]).length;
+    const anyStale = p.sections.some((c) => c.stale);
+    const hd = el('div', { class: 'hd' }, el('span', { class: 'ds-av ' + (p.by === 'pm' ? 'h' : 'a') }, p.by === 'pm' ? 'Y' : c3ic('spark', 'sm')),
+      el('span', null, el('div', { class: 'ti' }, short(p.prompt) || 'A proposal'), el('div', { class: 'sub' }, el('span', null, p.by === 'pm' ? 'Drafted by you' : 'Drafted by the agent'), el('span', null, whenOf(p.at)), p.hash ? el('span', null, 'hash ' + String(p.hash).slice(0, 8)) : null)),
+      el('span', { class: 'tag ds-ag' }, plural(p.sections.length, 'section')));
+    const why = el('p', { class: 'ds-why' }, c3ic('user', 'sm'), el('span', null, 'You asked: ', el('q', null, p.prompt)));
+    const chs = p.sections.map((c) => {
+      const [a, d] = wordCounts(c.stale ? c.current || '' : c.before, c.after);
+      const box = el('input', { type: 'checkbox', checked: !!pick[c.name], disabled: c.stale, 'data-doc-pick': p.id + ':' + c.name, onChange: (e) => { pick[c.name] = e.target.checked; draw(); } });
+      return el('div', { class: 'ds-chg' + (pick[c.name] ? '' : ' off'), 'data-doc-chg': c.name },
+        el('header', null, el('label', null, box, (c.kind === 'added' ? 'New section: ' : c.kind === 'removed' ? 'Removes: ' : '') + c.name),
+          c.stale ? el('span', { class: 'ds-warn', 'data-doc-chgstale': '' }, c3ic('alert', 'sm'), ' Changed since this draft. Ask again to re-draft it.') : el('span', { class: 'dim' }, '+' + a + ' −' + d + ' words')),
+        md(c.kind === 'added' ? diffMd(null, c.after) : diffMd(c.stale ? c.current || '' : c.before, c.after)));
+    });
+    const host = el('div', { class: 'ds-slide', 'data-doc-slide': p.id });
+    if (n) mountSlide(host, { label: 'Slide to accept ' + n + ' of ' + p.sections.length, hash: p.hash, onConfirm: (h) => acceptProp(p, h) });
+    else host.append(el('div', { class: 'slt-why', role: 'note' }, c3ic('lock', 'sm'), anyStale && p.sections.every((c) => c.stale) ? 'Every section changed since this draft. Ask the agent again.' : 'Tick at least one section to accept.'));
+    const rej = S.rejFor === p.id
+      ? el('div', { class: 'ds-whyadd' }, el('input', { type: 'text', id: 'drejwhy', 'data-doc-rejwhy': '', placeholder: 'Why are you rejecting it? Kept in the edit log.', 'aria-label': 'Why reject', value: S.rejWhy, onInput: (e) => { S.rejWhy = e.target.value; } }),
+        btn('ds-btn pri', { 'data-doc-rejok': p.id }, 'Reject', () => rejectProp(p)), btn('ds-btn', {}, 'Cancel', () => { S.rejFor = null; draw(); }))
+      : el('div', { class: 'ds-acts' }, btn('ds-btn', { 'data-doc-showin': p.id }, [c3ic('eye', 'sm'), 'Show it in the document'], () => { S.preview[p.id] = true; go('read'); const c = p.sections[0]; if (c) goEl(c.kind === 'added' ? '[data-dsec-new="' + c.name + '"]' : '[data-dsec="' + c.name + '"]'); }),
+        demo ? null : btn('ds-btn', { 'data-doc-refine': p.id }, [c3ic('reply', 'sm'), 'Change the request'], () => { S.prompt = p.prompt + ', and '; draw(); const t = ui.body.querySelector('#dpr'); if (t) { t.focus(); t.setSelectionRange(t.value.length, t.value.length); } }),
+        btn('ds-btn', { 'data-doc-rej': p.id }, [c3ic('x', 'sm'), 'Reject'], () => { S.rejFor = p.id; S.rejWhy = ''; draw(); const i = ui.body.querySelector('#drejwhy'); if (i) i.focus(); }));
+    return el('div', { class: 'ds-prop', id: 'dprop-' + p.id, 'data-doc-prop-card': p.id }, hd, el('div', { class: 'pb' }, why, chs, host,
+      el('p', { class: 'ds-note' }, 'Logged as text by the agent, accepted by you. Health checks the document again after.'), rej));
+  }
+  async function acceptProp(p, hash) {
+    const names = p.sections.filter((c) => (S.pick[p.id] || {})[c.name] && !c.stale).map((c) => c.name);
+    const r = await pmPost('/api/doc-sheet/accept', { ...base, id: p.id, hash, sections: names }).catch(() => null);
+    if (!r || !r.ok) { say('Not accepted: ' + ((r && (r.error || r.reason)) || 'the proposal changed.')); await loadProps(); draw(); return; }
+    const v = nextV(doc.v); if (v) doc.v = v; if (doc.st === 'stale') doc.st = 'current';
+    S.changed = true; S.preview[p.id] = false; delete S.pick[p.id];
+    await reloadAll();
+    say('Accepted ' + plural(names.length, 'section') + (v ? ' as ' + v : '') + '. The edit log names the agent and you.');
+  }
+  async function rejectProp(p) {
+    const w = String(S.rejWhy || '').trim();
+    if (!w) { say('Say why you are rejecting it'); const i = ui.body.querySelector('#drejwhy'); if (i) i.focus(); return; }
+    const r = await pmPost('/api/doc-sheet/reject', { ...base, id: p.id, why: w }).catch(() => null);
+    if (!r || !r.ok) { say((r && r.error) || 'It was not rejected.'); return; }
+    S.rejFor = null; S.rejWhy = ''; S.log = null; await loadProps(); draw(); say('Rejected. The reason is in the edit log.');
+  }
+  function propsBody() {
+    if (generated) return el('div', { class: 'fold w', role: 'note', 'data-doc-nostore': 'ask' }, c3ic('lock', 'sm'), generated.why);
+    const op = openProps(); const closed = (S.props || []).filter((p) => p.state !== 'proposed');
+    const list = S.props === null ? el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the proposals.')
+      : S.propsErr ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.propsErr)
+        : op.length ? op.map(propCard) : el('div', { class: 'fold', 'data-doc-noprops': '' }, c3ic('check', 'sm'), 'No open proposals.');
+    return el('div', { class: 'ds', 'data-doc-proposals': '' }, staleBanner(), askBox(), el('h3', { class: 'ds-h' }, 'Open proposals · ' + op.length), list,
+      closed.length ? [el('h3', { class: 'ds-h' }, 'Closed'), el('ul', { class: 'ds-closed hx' }, closed.map((p) => el('li', { 'data-doc-closed': p.id },
+        el('span', { class: 'chip2 ' + (p.state === 'accepted' ? 'ds-good' : 'dim') }, c3ic(p.state === 'accepted' ? 'check' : 'x', 'sm'), p.state === 'accepted' ? 'Accepted' : 'Rejected'),
+        el('span', null, el('b', null, short(p.prompt)), el('small', null, p.state === 'accepted' ? (p.taken && p.of && p.taken.length < p.of ? p.taken.length + ' of ' + p.of + ' sections: ' : 'Sections: ') + (p.taken || []).join(', ') : 'Why: ' + (p.why || 'no reason'))),
+        el('span', { class: 'w' }, dayName(p.closed_at || p.at)))))] : null);
   }
 
-  /* History */
-  const histBody = () => {
-    if (S.revs === null) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the history.');
-    if (!S.revs.length) return el('div', { class: 'fold' }, c3ic('info', 'sm'), S.revsErr || 'No revision is recorded yet. The first save through this sheet starts the history.');
-    const rs = S.revs.slice().reverse();
-    const cmp = S.cmp != null ? S.revs.find((r) => r.rev === S.cmp) : null;
-    return el('div', { class: 'dpn' }, el('ul', { class: 'hx' }, rs.map((r) => {
-      const prev = S.revs.find((x) => x.rev === r.rev - 1);
-      return el('li', null, el('span', { class: 'chip2', style: 'color:' + (byName(r.by) === 'Agent' ? 'var(--purple)' : 'var(--acc)') }, c3ic(byName(r.by) === 'Agent' ? 'spark' : 'user', 'sm'), byName(r.by)),
-        el('span', null, el('b', null, r.v || 'Revision ' + r.rev), ' ' + (r.why || ''), el('small', null, prev ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-cmp': String(r.rev), onclick: () => cmpWith(r.rev) }, c3ic('eye', 'sm'), 'Compare with ' + (prev.v || 'revision ' + prev.rev)) : 'First version')),
-        el('span', { class: 'w' }, dayName(r.at)));
-    })), cmp ? el('div', { class: 'dpn' }, el('h4', { style: 'margin:0;font-size:var(--fs-3)' }, ((S.revs.find((x) => x.rev === cmp.rev - 1) || {}).v || 'Revision ' + (cmp.rev - 1)) + ' to ' + (cmp.v || 'revision ' + cmp.rev)), S.cmpNode || el('div', { class: 'fold' }, c3ic('clock', 'sm'), 'Comparing.')) : null);
-  };
+  /* ── Edit log ── */
+  function logEntries() {
+    const L = S.log || { revisions: [], events: [] };
+    const out = [];
+    for (const r of L.revisions) {
+      const ag = isAgentRev(r); const outside = r.via === 'outside' || r.via === 'first' || (r.by === 'baseline' && !r.via);
+      const title = r.via === 'proposal' ? 'Proposal accepted' : r.via === 'outside' || (r.by === 'baseline' && !r.via) ? 'Changed outside the sheet' : r.via === 'first' ? 'First seen by the sheet' : 'Edited in this sheet';
+      out.push({ kind: 'rev', at: r.at, r, ag, outside, people: !ag, title: (r.v ? r.v + ' · ' : 'Revision ' + r.rev + ' · ') + title });
+    }
+    for (const e of L.events) {
+      const t = { proposed: 'The agent drafted a proposal', revised: 'The agent revised a proposal', rejected: 'Proposal rejected', asked: 'You asked the agent', 'ask-failed': 'The agent did not draft the change', marked: 'Marked as still current' }[e.kind] || e.kind;
+      out.push({ kind: e.kind, at: e.at, e, ag: e.by === 'agent' || e.kind === 'proposed' || e.kind === 'revised' || e.kind === 'ask-failed', outside: false, people: e.by === 'pm' || e.kind === 'rejected' || e.kind === 'asked' || e.kind === 'marked', title: t });
+    }
+    return out.sort((a, b) => String(b.at).localeCompare(String(a.at)));
+  }
+  function logRow(x) {
+    const r = x.r; const e = x.e;
+    const av = el('span', { class: 'ds-av ' + (x.kind === 'ask-failed' ? 'w' : x.ag ? 'a' : 'h') }, x.ag ? c3ic(x.kind === 'ask-failed' ? 'alert' : 'spark', 'sm') : (r ? (whoOf(r)[0] || '?') : 'Y').toUpperCase());
+    const who = [];
+    if (r) {
+      if (r.via === 'proposal') who.push(el('span', { class: 'ds-ag' }, c3ic('spark', 'sm'), ' Text by the agent'), el('span', { class: 'ds-pe' }, c3ic('user', 'sm'), ' Accepted by you'), el('span', null, 'Proposal ' + String(r.proposal || '').replace(/^prop-/, '') + (r.sections && r.of ? ', ' + r.sections.length + ' of ' + r.of + ' sections' : '')));
+      else if (x.outside) who.push(el('span', { class: x.ag ? 'ds-ag' : 'ds-pe' }, c3ic(x.ag ? 'spark' : 'user', 'sm'), ' ' + (r.git && r.git.author ? r.git.author : 'Unknown author')), el('span', { class: 'ds-warn' }, c3ic('git', 'sm'), ' ' + (r.git && r.git.commit ? 'commit ' + r.git.commit : 'not committed') + (r.via === 'first' ? ', before the edit log' : ', outside PMOS')));
+      else who.push(el('span', { class: 'ds-pe' }, c3ic('user', 'sm'), ' ' + byName(r.by)), el('span', null, 'This sheet'));
+    } else if (x.ag) who.push(el('span', { class: 'ds-ag' }, c3ic('spark', 'sm'), ' The agent' + (e.session ? ' · session ' + e.session : '')));
+    else who.push(el('span', { class: 'ds-pe' }, c3ic('user', 'sm'), ' You'));
+    let why = null;
+    if (r) {
+      const noReason = x.outside && !r.why_known && !r.why_added;
+      if (r.why_added) why = el('p', { class: 'why' }, r.why_added, el('span', { class: 'dim' }, ' (reason added ' + dayName(r.why_added_at) + ')'));
+      else if (noReason && S.whyFor === r.rev) why = el('div', { class: 'ds-whyadd' }, el('input', { type: 'text', id: 'daddwhy', 'data-doc-addwhy': '', placeholder: 'Why did this change?', 'aria-label': 'Reason', value: S.whyText, onInput: (ev) => { S.whyText = ev.target.value; } }),
+        btn('ds-btn pri', { 'data-doc-whyok': String(r.rev) }, 'Add the reason', () => addWhy(r)), btn('ds-btn', {}, 'Cancel', () => { S.whyFor = null; draw(); }));
+      else if (noReason) why = el('p', { class: 'why none' }, c3ic('alert', 'sm'), ' No reason recorded: this change was made outside PMOS. ', btn('chip2 lk ds-pe', { 'data-doc-whyadd': String(r.rev) }, 'Add a reason', () => { S.whyFor = r.rev; S.whyText = ''; draw(); const i = ui.body.querySelector('#daddwhy'); if (i) i.focus(); }));
+      else if (r.why) why = el('p', { class: 'why' }, r.why);
+    } else {
+      const t = e.kind === 'asked' ? '“' + e.prompt + '”' : e.kind === 'proposed' || e.kind === 'revised' ? 'For: “' + (e.prompt || '') + '”' : e.why || '';
+      if (t) why = el('p', { class: 'why' }, t);
+    }
+    const tags = [];
+    if (r) {
+      const prev = S.texts[r.rev - 1]; const cur = S.texts[r.rev];
+      const secs = r.sections || (prev != null && cur != null ? changedSections(prev, cur).map((c) => c.name) : null);
+      if (secs) secs.forEach((s) => tags.push(el('span', { class: 'tag' }, s)));
+      if (prev != null && cur != null) { const [a, d] = wordCounts(prev, cur); tags.push(el('span', { class: 'tag add' }, '+' + a), el('span', { class: 'tag del' }, '−' + d)); }
+    }
+    const acts = [];
+    if (r && r.rev > 1) acts.push(btn('chip2 lk', { 'data-doc-cmp': String(r.rev) }, [c3ic('eye', 'sm'), S.cmp === r.rev ? 'Hide the change' : 'Show the change'], () => cmpWith(r.rev)));
+    if (e && (e.kind === 'proposed' || e.kind === 'revised') && openProps().some((p) => p.id === e.id)) acts.push(btn('chip2 lk ds-ag', {}, [c3ic('spark', 'sm'), 'Review it'], () => { S.openProp = e.id; go('ask'); }));
+    const cmp = r && S.cmp === r.rev ? el('div', { class: 'ds-cmp', 'data-doc-cmpbox': '' }, S.cmpNode || el('div', { class: 'fold' }, c3ic('clock', 'sm'), 'Comparing.')) : null;
+    return el('li', { 'data-log-kind': x.kind, ...(r ? { 'data-log-rev': String(r.rev) } : {}) }, av, el('div', { class: 'ds-le' },
+      el('div', { class: 'l1' }, el('b', null, x.title), el('span', { class: 'when' }, whenOf(x.at))), el('div', { class: 'who' }, who), why,
+      tags.length ? el('div', { class: 'tags' }, tags) : null, acts.length ? el('div', { class: 'ds-acts' }, acts) : null, cmp));
+  }
   async function cmpWith(rev) {
     if (S.cmp === rev) { S.cmp = null; draw(); return; }
     S.cmp = rev; S.cmpNode = null; draw();
     const [a, b] = await Promise.all([textAt(rev - 1), textAt(rev)]);
     if (S.cmp !== rev) return;
-    S.cmpNode = a == null || b == null ? el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'That revision could not be read.') : diffNode(changedSections(a, b));
+    const D = a == null || b == null ? null : changedSections(a, b);
+    S.cmpNode = !D ? el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'That revision could not be read.')
+      : D.length ? D.map((d) => [el('h4', null, d.name), md(diffMd(d.kind === 'added' ? null : d.before, d.after))]) : el('div', { class: 'dim' }, 'No change in the text.');
     draw();
   }
+  async function addWhy(r) {
+    const w = String(S.whyText || '').trim(); if (!w) { const i = ui.body.querySelector('#daddwhy'); if (i) i.focus(); return; }
+    const j = await pmPost('/api/doc-sheet/why', { ...base, rev: r.rev, why: w }).catch(() => null);
+    if (!j || !j.ok) { say((j && j.error) || 'The reason was not added.'); return; }
+    S.whyFor = null; await loadLog(); draw(); say('Reason added. The revision itself is unchanged.');
+  }
+  function logBody() {
+    if (generated) return el('div', { class: 'fold', 'data-doc-nostore': 'hist' }, c3ic('info', 'sm'), generated.why);
+    if (!S.log) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the edit log.');
+    const F = [['all', 'All'], ['people', 'People'], ['agent', 'Agent'], ['outside', 'Outside PMOS']];
+    const all = logEntries();
+    const rows = all.filter((x) => S.logF === 'all' || (S.logF === 'people' && x.people) || (S.logF === 'agent' && x.ag) || (S.logF === 'outside' && x.outside));
+    return el('div', { class: 'ds', 'data-doc-log': '' }, el('div', { class: 'ds-rbar' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Filter' }, F.map(([k, l]) => btn('', { 'aria-pressed': String(S.logF === k), 'data-doc-logf': k }, l, () => { S.logF = k; draw(); }))),
+      el('span', { class: 'ds-mono' }, plural(all.length, 'entry').replace('entrys', 'entries') + ' · append-only')),
+    S.logErr ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.logErr) : null,
+    rows.length ? el('ul', { class: 'ds-log' }, rows.map(logRow)) : el('div', { class: 'fold' }, c3ic('info', 'sm'), all.length ? 'Nothing in this filter.' : 'Nothing is recorded yet. The first save through this sheet starts the log.'));
+  }
 
-  /* Health */
-  const healthBody = () => {
+  /* ── Health ── */
+  function healthBody() {
     const h = S.health;
     if (!h) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Checking this document.');
     if (h.err) return el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), 'The checks could not run: ' + h.err + '. Nothing is shown.');
     const unanswered = h.checks.filter((c) => c.pass === null).length;
-    return el('div', { class: 'dpn' }, el('div', { class: 'chips2', 'data-doc-health': '' }, el('span', { class: 'ki', style: 'color:' + hcol(h) }, c3ic('shield')), el('b', null, h.passed + ' of ' + h.total + ' checks pass')),
-      unanswered ? el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0' }, unanswered + ' check' + (unanswered === 1 ? '' : 's') + ' not counted: not enough input.') : null,
+    return el('div', { class: 'ds' }, el('div', { class: 'chips2', 'data-doc-health': '' }, el('span', { class: 'ki ' + hcls(h) }, c3ic('shield')), el('b', null, h.passed + ' of ' + h.total + ' checks pass')),
+      unanswered ? el('p', { class: 'ds-note' }, plural(unanswered, 'check') + ' not counted: not enough input.') : null,
       el('ul', { class: 'chgl' }, h.checks.map((c) => el('li', { class: c.pass === null ? '' : c.pass ? 'ok' : 'bad', 'data-check': c.id }, c3ic(c.pass === null ? 'info' : c.pass ? 'check' : 'alert', 'sm'),
-        el('span', null, (c.name || NAMES[c.id] || c.id) + ': ' + c.reason + ' ', c.pass === false && !generated ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-fix': c.id, onclick: () => { S.prompt = c.fix || 'Fix: ' + (NAMES[c.id] || c.id) + ' (' + c.reason + ')'; go('ask'); } }, c3ic('spark', 'sm'), 'Fix with the agent') : null),
+        el('span', null, (c.name || NAMES[c.id] || c.id) + ': ' + c.reason + ' ',
+          c.id === 'fresh' && c.pass === false && Array.isArray(c.sources) && c.sources.length ? el('small', { class: 'ds-mono' }, ' ' + c.sources.map((s) => s.path).join(', ') + ' ') : null,
+          c.id === 'fresh' && c.pass === false && !generated ? btn('chip2 lk', { 'data-doc-hmark': '' }, 'Mark as still current', () => { S.staleWhy = ''; go('read'); const i = ui.body.querySelector('#dstalewhy'); if (i) i.focus(); }) : null,
+          c.pass === false && !generated ? btn('chip2 lk ds-ag', { 'data-doc-fix': c.id }, [c3ic('spark', 'sm'), 'Fix with the agent'], () => { S.prompt = c.fix || 'Fix: ' + (NAMES[c.id] || c.id) + ' (' + c.reason + ')'; go('ask'); }) : null),
         el('span', { class: 'tag' }, c.pass === null ? 'no input' : c.pass ? 'pass' : 'fail')))),
-      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Health answers one question: can I trust this document without rereading it? Checks are recomputed from the text every time it changes.'));
-  };
+      el('p', { class: 'ds-note' }, 'Health answers one question: can I trust this document without rereading it? The checks run again every time the text changes.'));
+  }
 
   const linksBody = () => (relations ? relations(doc, (d) => { if (S.open) S.open(d); }) : el('div', { class: 'fold' }, c3ic('info', 'sm'), 'No relation is recorded for this document.'));
 
   /* a load that finished in the background must not redraw under a hand that is typing */
-  const drawBg = () => { const a = document.activeElement; if (S.mode === 'edit' && a && ui && ui.body.contains(a) && a.closest('[data-sec],#dwhy')) return; draw(); };
+  const drawBg = () => { const a = document.activeElement; if (ui && a && ui.body.contains(a) && a.closest('input,textarea,[contenteditable=true]')) { refreshTop(); return; } draw(); };
+  const top = () => el('div', { class: 'ds-top' }, head(), seg(), S.mode === 'edit' && S.ed ? toolbar() : null,
+    S.leave ? el('div', { class: 'fold w', role: 'alert', 'data-doc-leave': '' }, c3ic('alert', 'sm'), 'You have unsaved changes in ' + plural(dirty().length, 'section') + '. ',
+      btn('ds-btn', {}, 'Keep editing', () => { S.leave = null; drawEdit(); }), btn('ds-btn', { 'data-doc-discard': '' }, 'Discard and leave', () => { const m = S.leave; S.ed = null; S.leave = null; go(m); })) : null);
+  function refreshTop() { const t = ui && ui.body.querySelector('.ds-top'); if (t) t.replaceWith(top()); }
   function draw() {
     if (!ui) return;
-    const body = S.mode === 'read' ? readBody(false) : S.mode === 'edit' ? readBody(true) : S.mode === 'ask' ? askBody() : S.mode === 'hist' ? histBody() : S.mode === 'health' ? healthBody() : linksBody();
-    const keep = ui.body.querySelector('textarea,input');
-    const had = keep && document.activeElement === keep ? { id: keep.id, s: keep.selectionStart } : null;
-    ui.body.replaceChildren(el('div', { class: 'dpn' }, head(), seg(), body));
+    if (S.mode === 'edit' && S.ed && S.ed.kind === 'rich' && S.ed.node) keepRange();
+    const body = S.mode === 'read' ? readBody() : S.mode === 'edit' ? editBody() : S.mode === 'ask' ? propsBody() : S.mode === 'hist' ? logBody() : S.mode === 'health' ? healthBody() : linksBody();
+    const keep = ui.body.querySelector('textarea:focus,input[type=text]:focus');
+    const had = keep ? { id: keep.id, s: keep.selectionStart } : null;
+    ui.body.replaceChildren(el('div', { class: 'dpn ds' }, top(), body));
     if (had && had.id) { const n = ui.body.querySelector('#' + had.id); if (n) { n.focus(); try { n.setSelectionRange(had.s, had.s); } catch { /* not a text field */ } } }
+    if (S.mode === 'ask' && S.openProp) { const id = S.openProp; S.openProp = null; goEl('[data-doc-prop-card="' + id + '"]'); }
   }
 
-  ui = openSheet({ title: doc.name, icon: 'doc', dw: true, body: el('div', { class: 'dpn' }), onClose: () => { S.closed = true; if (S.changed && onChanged) onChanged(); } });
+  document.addEventListener('selectionchange', keepRange);
+  ui = openSheet({ title: doc.name, icon: 'doc', dw: true, body: el('div', { class: 'dpn' }), onClose: () => { S.closed = true; document.removeEventListener('selectionchange', keepRange); if (S.changed && onChanged) onChanged(); } });
   S.open = (d) => { ui.close(); if (S.openOther) S.openOther(d); };
   ui.setOpener = (fn) => { S.openOther = fn; };
   draw();
   (async () => {
-    await loadText(); drawBg();
-    if (S.mode === 'health' && !S.hAsk) loadHealth();
-    if (S.mode === 'hist') loadRevs().then(draw);
-    loadHealth();
-    await loadRevs(); loadMeta();
+    await loadText();
+    if (S.mode === 'edit') startEdit();
+    drawBg();
+    await Promise.all([loadRevs(), loadProps(), loadHealth()]);
+    if (S.mode === 'hist') await loadLog();
+    drawBg(); loadMeta();
   })();
   return ui;
 }