create-pmos 0.153.0 → 0.155.0

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

@@ -1,12 +1,14 @@
 /* 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, generated, secExtra })    doc = { path, name, ty, v, st, ini, iniName }
+ *   openDocSheet({ ws, doc, mode, prompt, relations(doc, openOther), onChanged, generated, secExtra, library(), openGraph(doc) })    doc = { path, name, ty, v, st, ini, iniName }
  *
  * 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.
+ *                     revisions), "Show who wrote what", the Markdown source with a copy button, the stale banner, and the open proposals
+ *                     pinned to the sections they change, with "Show change" for the diff in place. The OUTLINE (v2) beside it: the headings
+ *                     nested by level, the section in view marked as the page scrolls, groups that fold, a filter past 12 headings, a dot on
+ *                     stale and proposal sections; Hide is kept in this browser (localStorage); under 900px it is a button over the text.
  *   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.
@@ -18,13 +20,20 @@
  *                     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.
+ *   links   Relations the graph around this document (v2): its sources on the left, its initiative and goals on top, the documents that
+ *                     use it and its copies on the right, a drift link dashed; a node opens that document. It reads `library()` from the
+ *                     caller, else GET /api/docs/library; the caller's `relations` list, when given, is kept below the graph.
+ * COPIES (v2): GET /api/docs gives the document's Confluence and Google Doc links with their signal (lib/doc-sync.js): a chip per copy in
+ * the header, and the "Copies in other tools" panel: Check now (POST /api/docs/check), Open in the tool, Bring their change in as a
+ * proposal (the ask run reads the copy; PMOS keeps hashes, not the copy's text, so the proposal is the difference), Update the copy to
+ * this version (five seconds to undo, then POST /api/docs/sync with use: pmos), and Link a copy (POST /api/docs/link).
  * 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. */
+ * Pure parts (Node-testable): splitDoc, joinDoc, changedSections, wordDiffTokens, byName, dayName, parseFront, setFront, composeSections,
+ * copyKindOf, citesIn, outlineOf, hoodOf. */
 import { el } from './dom.js';
 import { pmGet, pmPost } from './http.js';
 import { c3ic } from './pm-work-view.js';
@@ -183,10 +192,63 @@ const md = (text, extra) => el('div', { class: 'ds-md' + (extra ? ' ' + extra :
 const btn = (cls, attrs, kids, onClick) => c3btn(cls, attrs, kids, onClick);
 const headLevel = (s) => (/^(#+)/.exec(s.prefix || '') || ['', ''])[1].length;
 
-export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, onChanged, generated, secExtra }) {
+/* ── v2 (c3-doc-sheet-v2): the copies in other tools, the outline, the graph ── */
+/* a copy's state (lib/doc-sync.js signal): [label, icon, class, sentence, chip word] */
+const SIG = {
+  same: ['In step', 'check', 'ds-good', 'Both have the same text.', 'in step'],
+  ahead: ['PMOS is ahead', 'up', 'ds-acc', 'PMOS has changes the copy does not have.', 'PMOS ahead'],
+  behind: ['Behind', 'alert', 'ds-warn', 'The copy has changes PMOS does not have.', 'behind'],
+  diverged: ['Both changed', 'alert', 'ds-bad', 'Both changed since they last matched.', 'both changed'],
+  unchecked: ['Not checked', 'info', '', 'No check has read this copy yet.', 'not checked'],
+  unreadable: ['Cannot open', 'alert', 'ds-bad', 'The last check could not open the copy.', 'cannot open'],
+  'missing-remote': ['Not found', 'alert', 'ds-bad', 'The copy is not there any more.', 'not found'],
+  'missing-repo': ['Not in PMOS', 'alert', 'ds-bad', 'This file is not in the repository any more.', 'not in PMOS'] };
+const SYNCING = ['Updating', 'clock', 'ds-acc', 'A session is updating this copy.', 'updating'];
+const KLABEL = { google: 'Google Doc', confluence: 'Confluence' };
+const sigOf = (l) => (l.syncing ? SYNCING : SIG[l.signal] || SIG.unchecked);
+const labelOf = (l) => KLABEL[l.kind] || l.label || l.kind;
+/** Which tool a pasted address names (the server checks it again): 'confluence', 'google' or null. */
+export function copyKindOf(target) {
+  const t = String(target || '');
+  if (/atlassian|confluence|\/wiki\/|pageId=/i.test(t)) return 'confluence';
+  if (/google|docs\.|drive\./i.test(t)) return 'google';
+  return null;
+}
+/** The names of the sections that cite a path (or its file name). */
+export function citesIn(secs, 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);
+}
+/** The outline: the named sections, nested from the top level found (1 to 3). A single title heading on top is left out. */
+export function outlineOf(secs) {
+  let named = secs.filter((s) => s.prefix && headLevel(s) > 0);
+  if (named.length && headLevel(named[0]) === 1 && named.filter((s) => headLevel(s) === 1).length === 1) named = named.slice(1);
+  if (!named.length) return [];
+  const base = Math.min(...named.map(headLevel));
+  return named.map((s) => ({ s, lv: Math.min(3, headLevel(s) - base + 1) }));
+}
+/** The neighbourhood of a document in a library response: { me, src, out } with each edge's state (the Docs page's rule when it has none). */
+export function hoodOf(lib, path) {
+  if (!lib || !Array.isArray(lib.files)) return null;
+  const me = lib.files.findIndex((f) => f.path === path);
+  const kinds = lib.kinds || []; const src = []; const out = [];
+  const st = (a, b, k, s) => s || (['link', 'cites', 'anchor'].includes(kinds[k]) && a.date && b.date && a.date > b.date ? 'drift' : 'ok');
+  if (me >= 0) for (const [a, b, k, s] of lib.edges || []) {
+    if (b === me && a !== me && lib.files[a]) src.push({ f: lib.files[a], kind: kinds[k] || '', st: st(lib.files[a], lib.files[me], k, s) });
+    else if (a === me && b !== me && lib.files[b]) out.push({ f: lib.files[b], kind: kinds[k] || '', st: st(lib.files[me], lib.files[b], k, s) });
+  }
+  return { me: me >= 0 ? lib.files[me] : null, src, out };
+}
+const OL_KEY = 'pmos.c3.docOutline';
+const olGet = () => { try { return localStorage.getItem(OL_KEY) !== 'off'; } catch { return true; } };
+const olSet = (on) => { try { localStorage.setItem(OL_KEY, on ? 'on' : 'off'); } catch { /* no storage here */ } };
+const ESTATE = { ok: 'in step', drift: 'out of step', conflict: 'conflict', missing: 'missing', ahead: 'PMOS ahead' };
+
+export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, onChanged, generated, secExtra, library, openGraph }) {
   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 };
+    pick: {}, rejFor: null, rejWhy: '', whyFor: null, whyText: '', staleWhy: null, logF: 'all', cmp: null, cmpNode: null, flashRev: null, ed: null, leave: null,
+    copies: null, copiesErr: '', syncOpen: false, linking: false, linkUrl: '', pend: {}, checkRun: null, lib: undefined, ol: olGet(), olOpen: false, olq: '', olShut: {}, cur: null };
   const demo = isDemo();
   const base = { ws, path: doc.path };
   let ui = null;
@@ -237,7 +299,7 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
   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();
+    await Promise.all([loadRevs(), loadProps(), loadHealth(), loadCopies()]); loadMeta(); if (S.mode === 'hist') { await loadLog(); } draw();
   };
 
   /* ── drawing helpers ── */
@@ -266,7 +328,7 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     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'),
+      el('span', { class: 'chip2' }, c3ic('init', 'sm'), doc.iniName || doc.ini || 'Portfolio'), copyChips(),
       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() {
@@ -285,6 +347,7 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     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();
+    if (m === 'links') loadLib();
     draw();
     const sb = ui && ui.body.closest('.sb'); if (sb) sb.scrollTop = 0;
   }
@@ -294,7 +357,7 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     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 cites = (p) => citesIn(secs, p);
     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; } });
@@ -318,6 +381,243 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     await loadHealth(); draw(); say('Marked as current. The reason is in the edit log.');
   }
 
+  /* ── v2: the copies in other tools (GET /api/docs: the links and their signals, lib/doc-sync.js) ── */
+  const loadCopies = async () => {
+    if (generated) { S.copies = []; return; }
+    const j = await pmGet('/api/docs?' + q({ ws })).catch(() => null);
+    if (!j || !j.ok) { S.copies = S.copies || []; S.copiesErr = (j && j.error) || 'The copies could not be read.'; return; }
+    const d = (j.docs || []).find((x) => x.path === doc.path);
+    S.copies = d ? d.links || [] : []; S.copiesErr = ''; S.checkRun = j.session || j.open || null;
+  };
+  const copyChips = () => {
+    if (generated || S.copies == null) return null;
+    if (!S.copies.length) return btn('chip2 lk', { 'data-doc-copychip': '', 'aria-expanded': String(S.syncOpen) }, [c3ic('link', 'sm'), 'Link a Confluence or Google Doc copy'], () => toggleCopies());
+    return S.copies.map((l) => { const g = sigOf(l); return btn('chip2 lk ' + g[2], { 'data-doc-copychip': l.kind, 'aria-expanded': String(S.syncOpen), title: l.words || g[3] }, [c3ic(g[1], 'sm'), labelOf(l) + ': ' + g[4]], () => toggleCopies()); });
+  };
+  function toggleCopies() {
+    S.syncOpen = !S.syncOpen;
+    if (S.syncOpen && S.mode === 'edit') { go('read'); return; }
+    draw(); const sb = ui && ui.body.closest('.sb'); if (sb && S.syncOpen) sb.scrollTop = 0;
+  }
+  function copiesPanel() {
+    if (!S.syncOpen || generated) return null;
+    const L = S.copies || [];
+    const rows = L.map((l) => {
+      const g = sigOf(l); const name = labelOf(l); const pend = S.pend[l.kind];
+      const acts = [btn('ds-btn', { 'data-copy-check': l.kind, disabled: !!S.checkRun, 'aria-disabled': S.checkRun ? 'true' : null }, [c3ic(S.checkRun ? 'clock' : 'undo', 'sm'), S.checkRun ? 'Checking' : 'Check now'], () => checkNow()),
+        l.url ? el('a', { class: 'ds-btn', href: l.url, target: '_blank', rel: 'noopener', 'data-copy-open': l.kind }, c3ic('out', 'sm'), 'Open in ' + name) : null];
+      if (!l.syncing && (l.signal === 'behind' || l.signal === 'diverged')) acts.push(btn('ds-btn ag', { 'data-copy-take': l.kind }, [c3ic('spark', 'sm'), 'Bring their change in as a proposal'], () => takeCopy(l)));
+      if (!l.syncing && l.signal === 'ahead') acts.push(pend ? btn('ds-btn', { 'data-copy-undo': l.kind }, [c3ic('undo', 'sm'), 'Undo the update'], () => undoPush(l))
+        : btn('ds-btn pri', { 'data-copy-push': l.kind }, [c3ic('up', 'sm'), 'Update the ' + name + ' to this version'], () => pushCopy(l)));
+      const changed = l.remote_modified_at ? 'changed ' + whenOf(l.remote_modified_at) + (l.remote_modified_by ? ' by ' + l.remote_modified_by : '') : '';
+      return el('li', { 'data-copy': l.kind },
+        el('div', { class: 'l1' }, c3ic('doc', 'sm'), el('b', null, l.title || name), el('span', { class: 'tag ' + g[2], 'data-copy-state': l.syncing ? 'syncing' : l.signal || 'unchecked' }, c3ic(g[1], 'sm'), g[0])),
+        el('div', { class: 'ds-mono' }, [name, l.target, changed].filter(Boolean).join(' · ')),
+        el('p', null, l.words || g[3]),
+        el('div', { class: 'ds-note' }, l.checked_at ? 'Last checked ' + whenOf(l.checked_at) + (l.checked_by ? ' by ' + byName(l.checked_by) : '') + '.' : 'Not checked yet.'),
+        l.syncing ? el('div', { class: 'fold', role: 'status', 'data-copy-syncing': l.kind }, c3ic('clock', 'sm'), 'A session is updating ' + (l.syncing.use === 'copy' ? 'PMOS from the ' + name : 'the ' + name + ' to this version') + (l.syncing.started_at ? '. It started ' + whenOf(l.syncing.started_at) + '.' : '.')) : null,
+        l.sync_failed ? el('div', { class: 'fold w', role: 'alert', 'data-copy-failed': l.kind }, c3ic('alert', 'sm'), 'The last update did not finish' + (l.sync_failed.reason ? ': ' + l.sync_failed.reason : '.')) : null,
+        pend ? el('div', { class: 'fold', role: 'status', 'data-copy-pending': l.kind }, c3ic('clock', 'sm'), 'The update starts in five seconds. Undo stops it.') : null,
+        el('div', { class: 'ds-acts' }, acts));
+    });
+    const linkRow = S.linking ? el('div', { class: 'ds-whyadd ds-linkadd' },
+      el('input', { type: 'text', id: 'dcopyurl', 'data-copy-url': '', placeholder: 'Paste a Confluence page or Google Doc link', 'aria-label': 'Address of the copy', value: S.linkUrl, onInput: (e) => { S.linkUrl = e.target.value; } }),
+      btn('ds-btn pri', { 'data-copy-linkok': '' }, 'Link', () => linkCopy()), btn('ds-btn', {}, 'Cancel', () => { S.linking = false; draw(); })) : null;
+    return el('section', { class: 'ds-sync', 'aria-label': 'Copies in other tools', 'data-doc-copies': '' },
+      el('div', { class: 'hd' }, el('b', null, 'Copies in other tools'), el('span', { class: 'ds-acts' },
+        btn('ds-btn', { 'data-copy-link': '' }, [c3ic('link', 'sm'), L.length ? 'Link another copy' : 'Link a copy'], () => { S.linking = true; S.linkUrl = ''; draw(); const i = ui.body.querySelector('#dcopyurl'); if (i) i.focus(); }),
+        btn('ds-btn', { 'aria-label': 'Close the copies', 'data-copy-close': '' }, c3ic('x', 'sm'), () => { S.syncOpen = false; draw(); }))),
+      S.copiesErr ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.copiesErr) : null, linkRow,
+      L.length ? el('ul', null, rows) : el('p', { class: 'ds-note', 'data-copy-none': '' }, 'This document has no copy in Confluence or Google Docs yet. Link one to see whether it is in step.'),
+      el('p', { class: 'ds-note' }, 'PMOS never overwrites this document from a copy: a change in the copy comes in as a proposal you accept by section. Updating a copy starts one agent session, and you have five seconds to undo.'));
+  }
+  async function checkNow() {
+    const r = await pmPost('/api/docs/check', { ws }).catch(() => null);
+    if (!r || !r.ok) { say((r && r.error) || 'The check did not start.'); return; }
+    S.checkRun = { id: r.session }; draw();
+    say('Checking the copies. An agent session reads them with your connectors; the states change when it finishes.');
+    for (let i = 0; i < 120 && !S.closed && S.checkRun; i++) {
+      await new Promise((ok) => setTimeout(ok, 5000));
+      if (S.closed) return;
+      await loadCopies(); drawBg();
+    }
+  }
+  /* a change in the copy comes in as a proposal: the read-only ask run (#637) reads the copy and drafts it by section */
+  function takeCopy(l) {
+    S.prompt = 'Read the ' + labelOf(l) + ' copy of this document (' + l.target + ') and propose its changes here, section by section. Keep the PMOS text where only PMOS changed.';
+    S.syncOpen = false; go('ask');
+    if (demo) askDemo(); else askReal();
+  }
+  function pushCopy(l) {
+    const name = labelOf(l);
+    S.pend[l.kind] = setTimeout(async () => {
+      delete S.pend[l.kind];
+      const r = await pmPost('/api/docs/sync', { ws, path: doc.path, kind: l.kind, use: 'pmos' }).catch(() => null);
+      if (!r || !r.ok) say((r && r.error) || 'The update did not start.');
+      else say('Updating the ' + name + '. A session writes it with your connectors.');
+      await loadCopies(); drawBg();
+    }, 5000);
+    draw();
+  }
+  function undoPush(l) { clearTimeout(S.pend[l.kind]); delete S.pend[l.kind]; draw(); say('Stopped. The ' + labelOf(l) + ' is not updated.'); }
+  async function linkCopy() {
+    const t = String(S.linkUrl || '').trim(); const kind = copyKindOf(t);
+    if (!kind) { say('Paste a Confluence page or Google Doc link.'); const i = ui.body.querySelector('#dcopyurl'); if (i) i.focus(); return; }
+    const r = await pmPost('/api/docs/link', { ws, path: doc.path, kind, target: t }).catch(() => null);
+    if (!r || !r.ok) { say((r && r.error) || 'The copy was not linked.'); return; }
+    S.linking = false; S.linkUrl = ''; await loadCopies(); draw(); say('Linked the ' + KLABEL[kind] + ' copy. Check now reads it.');
+  }
+
+  /* ── v2: the outline (Read) ── */
+  const staleNames = () => {
+    const f = fresh(); if (!f || !S.text) return new Set();
+    const secs = splitDoc(S.text); const out = new Set();
+    (Array.isArray(f.sources) ? f.sources : []).forEach((x) => citesIn(secs, x.path).forEach((n) => out.add(n)));
+    return out;
+  };
+  function outlineNav(items) {
+    const qq = S.olq.trim().toLowerCase(); const stale = staleNames(); const prop = new Set(openProps().flatMap((p) => p.sections.map((c) => c.name)));
+    const rows = []; let hideUnder = null;
+    items.forEach((it, k) => {
+      const { s, lv } = it;
+      if (hideUnder !== null && lv > hideUnder) return;
+      hideUnder = null;
+      if (qq && !s.name.toLowerCase().includes(qq)) return;
+      let n = 0; for (let j = k + 1; j < items.length && items[j].lv > lv; j++) n++;
+      const shut = !qq && !!S.olShut[s.i]; if (shut) hideUnder = lv;
+      const on = S.cur === s.i;
+      rows.push(el('li', { class: 'l' + lv + (on ? ' on' : ''), 'data-ol-i': String(s.i) },
+        n && !qq ? btn('tw', { 'aria-label': (shut ? 'Show' : 'Hide') + ' the ' + plural(n, 'heading') + ' under ' + s.name, 'aria-expanded': String(!shut), 'data-ol-fold': String(s.i) }, c3ic('next', 'sm'), () => { S.olShut[s.i] = !shut; redrawOl(); }) : el('span', { class: 'tw' }),
+        btn('go', { 'data-ol-go': String(s.i), 'aria-current': on ? 'location' : null }, [el('span', null, s.name),
+          stale.has(s.name) ? el('i', { class: 'mdot w', title: 'A source changed after this section', 'data-ol-stale': '' }) : null,
+          prop.has(s.name) ? el('i', { class: 'mdot p', title: 'The agent proposes a change here', 'data-ol-prop': '' }) : null], () => jumpTo(s.i))));
+    });
+    return el('nav', { class: 'ds-ol', 'aria-label': 'Outline', 'data-doc-outline': '' },
+      el('div', { class: 'hd' }, el('b', null, 'Outline'), el('span', { class: 'ds-mono' }, plural(items.length, 'heading'))),
+      items.length > 12 ? el('input', { type: 'text', id: 'dolq', 'data-ol-find': '', placeholder: 'Find a heading', 'aria-label': 'Find a heading', value: S.olq, onInput: (e) => { S.olq = e.target.value; redrawOl(); } }) : null,
+      el('ul', null, rows.length ? rows : el('li', { class: 'none ds-note' }, 'No heading matches.')),
+      stale.size || prop.size ? el('div', { class: 'key ds-note' }, stale.size ? el('span', null, el('i', { class: 'mdot w' }), 'stale') : null, prop.size ? el('span', null, el('i', { class: 'mdot p' }), 'proposal') : null) : null);
+  }
+  function redrawOl() {
+    const n = ui && ui.body.querySelector('.ds-ol'); if (!n || S.text == null) return;
+    const f = document.activeElement && document.activeElement.id === 'dolq' ? document.activeElement.selectionStart : null;
+    n.replaceWith(outlineNav(outlineOf(splitDoc(S.text)))); placeOl();
+    if (f != null) { const i = ui.body.querySelector('#dolq'); if (i) { i.focus(); try { i.setSelectionRange(f, f); } catch { /* not a text field */ } } }
+  }
+  /* where the sticky header ends: a section scrolled to lands below it, and the outline sticks under it */
+  /* (a sticky element sticks inside the scroller's padding: its edge from the scroller's top adds the padding) */
+  const stickBottom = () => { const t = ui && ui.body.querySelector('.ds-top'); return t ? (parseFloat(getComputedStyle(t).top) || 0) + t.offsetHeight : 0; };
+  const topEdge = () => { const sb = ui && ui.body.closest('.sb'); return stickBottom() + (sb ? parseFloat(getComputedStyle(sb).paddingTop) || 0 : 0); };
+  function placeOl() {
+    const nav = ui && ui.body.querySelector('.ds-ol'); const sb = ui && ui.body.closest('.sb'); if (!nav || !sb) return;
+    const h = stickBottom() + 8;
+    nav.style.setProperty('--in-ds-oltop', h + 'px'); nav.style.setProperty('--in-ds-olmax', Math.max(160, sb.clientHeight - h - 16) + 'px');
+  }
+  function jumpTo(i) {
+    const sb = ui && ui.body.closest('.sb'); const n = ui && ui.body.querySelector('[data-dsec-i="' + i + '"]'); if (!sb || !n) return;
+    sb.scrollTop += n.getBoundingClientRect().top - sb.getBoundingClientRect().top - topEdge() - 8;
+    n.classList.remove('flash'); void n.offsetWidth; n.classList.add('flash');
+    S.cur = i; S.pinCur = i; S.olOpen = false; const lay = ui.body.querySelector('.ds-rlay'); if (lay) lay.classList.remove('olopen');
+    const b = ui.body.querySelector('[data-ol-btn]'); if (b) b.setAttribute('aria-expanded', 'false');
+    markCur();
+  }
+  function trackCur() {
+    if (S.mode !== 'read' || !ui) return;
+    const sb = ui.body.closest('.sb'); const nav = ui.body.querySelector('.ds-ol'); if (!sb || !nav) return;
+    const ids = new Set([...nav.querySelectorAll('[data-ol-i]')].map((x) => x.getAttribute('data-ol-i')));
+    const lim = sb.getBoundingClientRect().top + topEdge() + 24; let cur = null;
+    for (const s of ui.body.querySelectorAll('.ds-rmain [data-dsec-i]')) {
+      const k = s.getAttribute('data-dsec-i');
+      if (s.getBoundingClientRect().top <= lim) { if (ids.has(k)) cur = +k; } else break;
+    }
+    if (cur == null) { const f = nav.querySelector('[data-ol-i]'); cur = f ? +f.getAttribute('data-ol-i') : null; }
+    /* a section pressed near the end cannot scroll to the top: it stays the marked one while it is on screen */
+    if (S.pinCur != null) {
+      const p = ui.body.querySelector('[data-dsec-i="' + S.pinCur + '"]'); const r = p && p.getBoundingClientRect(); const b = sb.getBoundingClientRect();
+      if (r && r.top >= b.top + topEdge() - 8 && r.top < b.bottom - 40) cur = S.pinCur; else S.pinCur = null;
+    }
+    if (cur !== S.cur) { S.cur = cur; markCur(); }
+  }
+  function markCur() {
+    const nav = ui && ui.body.querySelector('.ds-ol'); if (!nav) return;
+    nav.querySelectorAll('[data-ol-i]').forEach((li) => { const on = +li.getAttribute('data-ol-i') === S.cur; li.classList.toggle('on', on); const g = li.querySelector('[data-ol-go]'); if (g) { if (on) g.setAttribute('aria-current', 'location'); else g.removeAttribute('aria-current'); } });
+    const secs = S.text ? splitDoc(S.text) : []; const c = secs.find((s) => s.i === S.cur);
+    const ob = ui.body.querySelector('[data-ol-btn] b'); if (ob) ob.textContent = c ? c.name : '';
+    const on = nav.querySelector('li.on');
+    if (on && nav.scrollHeight > nav.clientHeight) { const t = on.offsetTop - nav.offsetTop; if (t < nav.scrollTop || t > nav.scrollTop + nav.clientHeight - 30) nav.scrollTop = t - nav.clientHeight / 3; }
+  }
+
+  /* ── v2: Relations, the graph around this document (from the caller's library, else GET /api/docs/library) ── */
+  const loadLib = async () => {
+    if (S.lib !== undefined) return;
+    S.lib = null;
+    const j = await (library ? Promise.resolve().then(library) : pmGet('/api/docs/library?' + q({ ws }))).catch(() => null);
+    S.lib = j && j.ok ? j : { err: (j && j.error) || 'The document graph could not be read.' };
+    drawBg();
+  };
+  const catName = (c) => { const k = ((S.lib && S.lib.categories) || []).find((x) => x.key === c); return k ? k.name : c || 'Document'; };
+  const fileDoc = (f) => ({ path: f.path, name: f.title || f.path, ty: f.ty || catName(f.category), v: f.v || '', st: STATE[f.st] ? f.st : 'current', ini: f.initiative || '',
+    iniName: (S.lib && S.lib.initiatives && S.lib.initiatives[f.initiative] && (S.lib.initiatives[f.initiative].short || S.lib.initiatives[f.initiative].title)) || f.initiative || '' });
+  function graphNodes() {
+    const H = hoodOf(S.lib && !S.lib.err ? S.lib : null, doc.path) || { src: [], out: [] };
+    const isGoal = (f) => f.category === 'goal' || f.node === 'Goal';
+    const nd = (e, side) => { const f = e.f; const file = !f.node && f.st !== 'node' && f.st !== 'missing';
+      return { side, name: f.title || f.path, sub: [...new Set([e.kind, f.node || (f.date ? dayName(f.date) : '')].filter(Boolean).map((x) => x.toLowerCase() === String(e.kind).toLowerCase() ? e.kind : x))].join(' · '), st: e.st, path: f.path, open: file ? fileDoc(f) : null }; };
+    const top = H.src.filter((e) => isGoal(e.f)).map((e) => nd(e, 'top'));
+    if (doc.ini || doc.iniName) top.unshift({ side: 'top', name: doc.iniName || doc.ini, sub: 'initiative', st: 'ok', init: true });
+    const left = H.src.filter((e) => !isGoal(e.f)).map((e) => nd(e, 'left'));
+    const right = H.out.map((e) => nd(e, 'right')).concat((S.copies || []).map((l) => ({ side: 'right', name: labelOf(l) + ' copy', sub: sigOf(l)[4], url: l.url, kind: l.kind,
+      st: l.signal === 'behind' || l.signal === 'diverged' ? 'drift' : l.signal === 'ahead' ? 'ahead' : l.signal === 'same' ? 'ok' : 'missing' })));
+    return { top, left, right };
+  }
+  function graphEl(G) {
+    const CAP = 6;
+    const node = (n) => {
+      const kids = [el('b', null, n.name), el('small', null, n.sub)];
+      const a = { 'data-gn': n.side, 'data-gn-st': n.st, 'data-gn-copy': n.kind || null };
+      if (n.url) return el('a', { class: 'ds-gn ' + n.st, href: n.url, target: '_blank', rel: 'noopener', ...a }, ...kids);
+      if (n.open) return btn('ds-gn ' + n.st, { 'data-gn-path': n.path, title: 'Open ' + n.name, ...a }, kids, () => S.open(n.open));
+      return el('div', { class: 'ds-gn x ' + n.st, ...a }, ...kids);
+    };
+    const col = (list) => [list.slice(0, CAP).map(node), list.length > CAP ? el('div', { class: 'ds-note ds-gmore' }, '+' + (list.length - CAP) + ' more, listed below') : null];
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('class', 'ds-gsvg'); svg.setAttribute('aria-hidden', 'true');
+    const wrap = el('div', { class: 'ds-graph', role: 'group', 'aria-label': 'This document, its sources on the left, its initiative above, the documents that use it and its copies on the right', 'data-doc-graph': '' }, svg,
+      G.top.length ? el('div', { class: 'ds-gtop' }, col(G.top)) : null,
+      el('div', { class: 'ds-gmid' }, el('div', { class: 'ds-gcol' }, G.left.length ? col(G.left) : el('div', { class: 'ds-note' }, 'No source recorded')),
+        el('div', { class: 'ds-gn me', 'data-gn': 'me' }, el('b', null, doc.name), el('small', null, 'this document' + (doc.v ? ' · ' + doc.v : ''))),
+        el('div', { class: 'ds-gcol' }, G.right.length ? col(G.right) : el('div', { class: 'ds-note' }, 'Nothing uses it yet'))),
+      el('div', { class: 'key ds-note' }, el('span', null, el('i', { class: 'ln ok' }), 'in step'), el('span', null, el('i', { class: 'ln drift' }), 'out of step'), el('span', null, el('i', { class: 'ln ahead' }), 'PMOS ahead of the copy'),
+        openGraph ? btn('chip2 lk', { 'data-doc-fullgraph': '' }, [c3ic('tree', 'sm'), 'Open the full graph in Docs'], () => { ui.close(); openGraph(doc); }) : null));
+    if (typeof ResizeObserver === 'function') new ResizeObserver(() => drawEdges(wrap)).observe(wrap);
+    return wrap;
+  }
+  function drawEdges(wrap) {
+    const svg = wrap.querySelector('.ds-gsvg'); const me = wrap.querySelector('[data-gn="me"]'); if (!svg || !me || !wrap.isConnected) return;
+    const W = wrap.getBoundingClientRect(); const M = me.getBoundingClientRect();
+    svg.setAttribute('viewBox', '0 0 ' + Math.round(W.width) + ' ' + Math.round(W.height)); svg.setAttribute('width', String(Math.round(W.width))); svg.setAttribute('height', String(Math.round(W.height)));
+    const paths = [...wrap.querySelectorAll('[data-gn]:not([data-gn="me"])')].map((n) => {
+      const R = n.getBoundingClientRect(); const side = n.getAttribute('data-gn');
+      const [fx, fy, tx, ty] = side === 'left' ? [R.right, R.top + R.height / 2, M.left, M.top + M.height / 2] : side === 'right' ? [M.right, M.top + M.height / 2, R.left, R.top + R.height / 2] : [R.left + R.width / 2, R.bottom, M.left + M.width / 2, M.top];
+      const x1 = fx - W.left; const y1 = fy - W.top; const x2 = tx - W.left; const y2 = ty - W.top;
+      const d = side === 'top' ? 'M' + x1 + ' ' + y1 + ' C ' + x1 + ' ' + (y1 + y2) / 2 + ', ' + x2 + ' ' + (y1 + y2) / 2 + ', ' + x2 + ' ' + y2 : 'M' + x1 + ' ' + y1 + ' C ' + (x1 + x2) / 2 + ' ' + y1 + ', ' + (x1 + x2) / 2 + ' ' + y2 + ', ' + x2 + ' ' + y2;
+      const p = document.createElementNS('http://www.w3.org/2000/svg', 'path'); p.setAttribute('d', d); p.setAttribute('class', 'e ' + (n.getAttribute('data-gn-st') || 'ok')); return p;
+    });
+    svg.replaceChildren(...paths);
+  }
+  function linksBody() {
+    if (S.lib === undefined) loadLib();
+    if (S.lib == null) return el('div', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the document graph.');
+    const G = graphNodes(); const any = G.left.length || G.right.length || G.top.some((n) => !n.init);
+    const rel = (h, list) => list.length ? [el('h3', { class: 'ds-h' }, h), el('ul', { class: 'ds-rel' }, list.map((n) => el('li', { 'data-rel': n.path || n.kind || n.name },
+      c3ic(n.url ? 'out' : n.init ? 'init' : 'doc', 'sm'),
+      n.open ? btn('ds-rlk', { 'data-rel-open': n.path }, [n.name, el('small', null, n.sub)], () => S.open(n.open)) : n.url ? el('a', { class: 'ds-rlk', href: n.url, target: '_blank', rel: 'noopener' }, n.name, el('small', null, n.sub)) : el('span', { class: 'ds-rlk' }, n.name, el('small', null, n.sub)),
+      n.st && n.st !== 'ok' ? el('span', { class: 'tag ' + (n.st === 'ahead' ? 'ds-acc' : n.st === 'drift' ? 'ds-warn' : 'ds-bad') }, ESTATE[n.st] || n.st) : el('span'))))] : null;
+    return el('div', { class: 'ds' },
+      S.lib.err ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), S.lib.err) : null,
+      any ? graphEl(G) : el('div', { class: 'fold', 'data-doc-norel': '' }, c3ic('info', 'sm'), 'No relation is recorded for this document.'),
+      relations ? relations(doc, (d) => { if (S.open) S.open(d); }) : [rel('Sources', G.left), rel('Goals and initiative', G.top.filter((n) => !n.init)), rel('Used by and copies', G.right)]);
+  }
+
   /* ── Read ── */
   function propsBlock(secs, editing) {
     const s0 = secs.find((s) => s.prefix === ''); const fm = s0 && parseFront(s0.text);
@@ -334,11 +634,14 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     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);
     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 items = outlineOf(secs); const olOn = items.length >= 2 && !S.src;
+    if (S.cur == null && items.length) S.cur = items[0].s.i;
+    const curName = (items.find((x) => x.s.i === S.cur) || items[0] || { s: { name: '' } }).s.name;
+    const olCtl = olOn ? el('span', { class: 'ds-acts' },
+      btn('ds-btn ds-olbtn', { 'aria-expanded': String(S.olOpen), 'data-ol-btn': '' }, [c3ic('ul', 'sm'), 'Outline · ', el('b', null, curName)], () => { S.olOpen = !S.olOpen; const lay = ui.body.querySelector('.ds-rlay'); if (lay) lay.classList.toggle('olopen', S.olOpen); const b = ui.body.querySelector('[data-ol-btn]'); if (b) b.setAttribute('aria-expanded', String(S.olOpen)); }),
+      btn('ds-btn ds-olhide', { 'aria-pressed': String(!S.ol), 'data-ol-hide': '' }, [c3ic('ul', 'sm'), S.ol ? 'Hide the outline' : 'Show the outline'], () => { S.ol = !S.ol; olSet(S.ol); draw(); })) : el('span');
     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' },
+    const bar = el('div', { class: 'ds-rbar' }, olCtl, 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) {
@@ -368,8 +671,9 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     });
     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 main = [generated ? el('div', { class: 'fold', role: 'note', 'data-doc-generated': '' }, c3ic('info', 'sm'), generated.why) : null, staleBanner(), propsBlock(secs, false), cells, adds];
+    return el('div', { class: 'ds' + (S.who ? ' who' : '') }, bar, legend,
+      olOn ? el('div', { class: 'ds-rlay' + (S.ol ? '' : ' nool') + (S.olOpen ? ' olopen' : '') }, outlineNav(items), el('div', { class: 'ds-rmain' }, main)) : el('div', { class: 'ds-rmain' }, main));
   }
   const short = (t) => { const s = String(t || '').replace(/\s+/g, ' ').trim(); return s.length > 90 ? s.slice(0, 88) + '…' : s; };
 
@@ -709,8 +1013,6 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
       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 (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,
@@ -723,21 +1025,26 @@ export function openDocSheet({ ws, doc, mode = 'read', prompt = '', relations, o
     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));
+    ui.body.replaceChildren(el('div', { class: 'dpn ds' }, top(), copiesPanel(), body));
+    const sh = ui.body.closest('.sheet'); if (sh) sh.classList.toggle('dwx', S.mode === 'read' && S.ol && !!ui.body.querySelector('.ds-ol'));
+    const sb = ui.body.closest('.sb');
+    if (sb && !sb.__dsTrack) { sb.__dsTrack = true; sb.addEventListener('scroll', trackCur, { passive: true }); }
+    if (S.mode === 'read') { placeOl(); trackCur(); }
+    if (S.mode === 'links') { const g = ui.body.querySelector('.ds-graph'); if (g) requestAnimationFrame(() => drawEdges(g)); }
     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 + '"]'); }
   }
 
   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); };
+  S.open = (d) => { ui.close(); if (S.openOther) S.openOther(d); else openDocSheet({ ws, doc: d, library, openGraph }); };
   ui.setOpener = (fn) => { S.openOther = fn; };
   draw();
   (async () => {
     await loadText();
     if (S.mode === 'edit') startEdit();
     drawBg();
-    await Promise.all([loadRevs(), loadProps(), loadHealth()]);
+    await Promise.all([loadRevs(), loadProps(), loadHealth(), loadCopies()]);
     if (S.mode === 'hist') await loadLog();
     drawBg(); loadMeta();
   })();

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

@@ -9,8 +9,8 @@
  *   GET /api/runs                    the needs-you count only (a run that asks, holds a permission or needs the terminal); the cards are on the Terminal page
  *   GET and POST /api/scratchpad     the session's pad
  * The Message box, Send and End are DISABLED (drawn as the mockup's): no page press route sends a prompt to a session, and none is invented here.
- * Icon language (c3-terminal-icons.js): the header's AGENT button (spark) opens the Terminal page, the full agent surfaces; the TERMINAL glyph (`>_`) is the rail's
- * button (it opens this dock, the terminals of your branches) and every "Open the session" link. The rail draws one glyph button per session below it. */
+ * Icon language (c3-terminal-icons.js): the header's AGENT button (spark) opens the Terminal page, the full agent surfaces; the TERMINAL glyph (`>_`) is every "Open the session" link.
+ * A folded dock leaves no rail (PM, 2026-10-12): Ctrl J and the More menu open it again. */
 import { el } from './dom.js';
 import { pmGet, pmPost } from './http.js';
 import { c3ic } from './pm-work-view.js';
@@ -53,12 +53,11 @@ export function createDock(opts) {
       el('a', { class: 'ib sm', href: '/', title: 'Start a branch and session in the main app. A session starts over the terminal connection; the page has no route for it.', 'aria-label': 'Start a branch and session in the main app' }, c3ic('plus', 'sm')),
       el('button', { type: 'button', class: 'ib sm', title: 'Fold the dock (Ctrl J)', 'aria-label': 'Fold the dock', onclick: () => o.setOpen && o.setOpen(false) }, c3ic('fold'))),
     body);
-  const rail = el('div', { class: 'c3dock dock rail', 'data-c3pg': 'dock-rail' });
 
   const withEnd = (s) => (S.ended.has(s.id) ? { ...s, shown: 'exited', label: 'ended' } : s);
   const mine = () => S.sessions.filter((s) => s.ws === S.ws && !s.automatic).map(withEnd);
   const inTree = (dir) => mine().filter((s) => s.tree === dir).sort((a, b) => (a.shown === 'exited') - (b.shown === 'exited') || String(b.created).localeCompare(String(a.created)));
-  const pick = (id) => { S.sel = id; S.selTree = null; S.confirm = null; drawTree(); drawDetail(); drawRail(); if (o.setOpen) o.setOpen(true); };
+  const pick = (id) => { S.sel = id; S.selTree = null; S.confirm = null; drawTree(); drawDetail(); if (o.setOpen) o.setOpen(true); };
 
   function row(s) {
     const g = smOf(s);
@@ -129,15 +128,9 @@ export function createDock(opts) {
     const r = await pmPost('/api/session/remove', { id: s.id });
     if (r && r.ok) { S.ended.add(s.id); toast({ text: r.removed === false ? 'Asked it to end. Press End again to remove it.' : 'Ended. Any pending change stays a proposal.', timeout: 4200 }); }
     else toast({ text: (r && r.error) ? 'Not ended: ' + r.error : NOEND, tone: 'error' });
-    drawTree(); drawDetail(); drawRail(); refresh();
+    drawTree(); drawDetail(); refresh();
   }
 
-  function drawRail() {
-    const all = S.sessions.filter((s) => !s.automatic);   // the mockup's rail lists the first six sessions of every repository
-    const dots = all.slice(0, 6).map((s) => el('button', { type: 'button', class: 'ib sm', 'data-c3-rail': s.id, title: s.name + ' \u00b7 ' + (s.label || s.shown), 'aria-label': 'Show the session ' + s.name + ' in the dock', onclick: () => pick(s.id) }, el('span', { class: 'mk ' + smOf(s)[1] }, smOf(s)[0])));
-    /* the TERMINAL glyph: this button opens the dock (the terminals of your branches). The needs-you badge is on the agent button, not here. */
-    rail.replaceChildren(el('button', { type: 'button', class: 'ib', title: TIPS.terminalRail, 'aria-label': 'Open the sessions dock', 'data-c3pg': 'rail-open', onclick: () => o.setOpen && o.setOpen(true) }, ic('term')), ...dots);
-  }
 
   async function refresh() {
     const seq = ++S.seq; const ws = S.ws;
@@ -148,7 +141,7 @@ export function createDock(opts) {
     if (wt && wt.ok) { S.trees = wt.worktrees || []; S.err = null; } else if (!S.trees) S.trees = [];
     const m = mine();
     if (!m.some((x) => x.id === S.sel)) S.sel = (m.find((x) => x.shown !== 'exited') || m[0] || {}).id || null;
-    drawTree(); drawRail();
+    drawTree();
     const cur = detail.getAttribute('data-sel');
     if (cur !== String(S.sel)) { detail.setAttribute('data-sel', String(S.sel)); drawDetail(); }
     if (o.onCount) { const all = S.sessions.filter((x) => !x.automatic); o.onCount(all.filter((x) => x.shown === 'working').length, S.need); }
@@ -157,7 +150,7 @@ export function createDock(opts) {
   /* the mockup's keys: Ctrl or Cmd J folds and opens the dock (title "Open sessions (Ctrl J)"); the arrows move along the tree */
   const onKey = (e) => {
     if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === 'j' || e.key === 'J')) {
-      if (!side.isConnected && !rail.isConnected) return;
+      if (!side.isConnected) return;
       e.preventDefault(); if (o.setOpen) o.setOpen(side.hidden); return;
     }
     if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && e.target.closest && e.target.closest('.dk-tree')) {
@@ -167,13 +160,13 @@ export function createDock(opts) {
   };
   let timer = null;
   const api = {
-    side, rail,
+    side,
     setWorkspaces(list, ws) {
       S.ws = ws;
       sel.replaceChildren(...(list.length ? list : [{ id: ws, name: ws || 'workspace' }]).map((w) => el('option', { value: w.id, selected: w.id === ws }, w.name || w.id)));
       sel.onchange = (e) => { S.ws = e.target.value; S.trees = null; S.sel = null; detail.removeAttribute('data-sel'); if (o.onWs) o.onWs(S.ws); drawTree(); refresh(); };
     },
-    start() { document.addEventListener('keydown', onKey); drawTree(); drawRail(); refresh(); timer = setInterval(refresh, 15000); if (source().subscribe) S.unsub = source().subscribe(refresh); },
+    start() { document.addEventListener('keydown', onKey); drawTree(); refresh(); timer = setInterval(refresh, 15000); if (source().subscribe) S.unsub = source().subscribe(refresh); },
     stop() { if (timer) clearInterval(timer); if (S.unsub) S.unsub(); document.removeEventListener('keydown', onKey); },
     refresh,
   };

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

@@ -58,7 +58,8 @@ export async function badge(ctx) {
 function openDoc(V, d, ask) {
   if (!d || d.st === 'missing' || d.node) return;
   const ui = openDocSheet({ ws: V.ctx.ws, doc: { path: d.path, name: d.name, ty: d.ty, v: d.v, st: d.st, ini: d.ini, iniName: iniName(V, d.ini) }, mode: ask ? 'ask' : 'read', prompt: ask || '',
-    relations: (doc, openOther) => relationsOf(V, d, openOther), onChanged: () => { delete V.health[d.path]; V.asking = false; load(V); } });
+    relations: (doc, openOther) => relationsOf(V, d, openOther), library: () => V.lib, openGraph: () => { V.view = 'graph'; V.sel = d.i; V.render(); },
+    onChanged: () => { delete V.health[d.path]; V.asking = false; load(V); } });
   ui.setOpener((o) => openDoc(V, o));
 }
 const iniName = (V, id) => { const i = V.lib && V.lib.initiatives && V.lib.initiatives[id]; return i ? i.short || i.title : id || ''; };

package/workspace/public/pm/c3-ib-docs.js

@@ -30,7 +30,9 @@ export async function loadDocs(ctx, idSet) {
 async function openDoc(ctx, d, titles) {
   try {
     const { openDocSheet } = await import('./c3-doc-sheet.js');
-    openDocSheet({ ws: ctx.ws, doc: { path: d.path, name: d.name, ty: d.ty, v: '', st: d.st, ini: d.ini, iniName: titles.get(d.ini) || d.ini } });
+    const ui = openDocSheet({ ws: ctx.ws, doc: { path: d.path, name: d.name, ty: d.ty, v: '', st: d.st, ini: d.ini, iniName: titles.get(d.ini) || d.ini },
+      library: () => ctx.api.get('/api/docs/library', { board: ctx.board.id }) });
+    ui.setOpener((o) => openDoc(ctx, { path: o.path, name: o.name, ty: o.ty, st: o.st, ini: o.ini }, titles));
   } catch { ctx.toast('The document sheet could not open. The file is ' + d.path + '.'); }
 }
 

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

@@ -102,8 +102,8 @@ function header() {
   S.ttl = el('h1', { 'data-c3pg': 'title' });
   S.sub = el('div', { class: 'sub', 'data-c3pg': 'date' }, dateLine());
   S.termBdg = el('span', { class: 'bdg', hidden: true, 'data-c3pg': 'term-count' }, '0');
-  /* the AGENT button (the bolt glyph, as the mockup's Sessions pill): the Terminal page, the full agent surfaces, with the needs-you badge. The dock's own button is the TERMINAL glyph (c3-terminal-icons.js); Ctrl J and the More menu fold the dock. */
-  S.termBtn = button({ variant: 'ghost', label: [ic('bolt', 'sm'), 'Sessions', S.termBdg], onClick: () => { import('./c3-terminal.js').then((m) => m.openTerminalPage()); },
+  /* the AGENT button (the bolt glyph, as the mockup's Sessions pill): the Terminal page, the full agent surfaces, with the needs-you badge. It is an icon only (PM, 2026-10-12: no "Sessions" label); its tooltip and aria-label name it. Ctrl J and the More menu fold and open the dock. */
+  S.termBtn = button({ variant: 'ghost', label: [ic('bolt', 'sm'), S.termBdg], onClick: () => { import('./c3-terminal.js').then((m) => m.openTerminalPage()); },
     attrs: { class: 'psess', title: 'Agent surfaces: sessions, results to accept, questions for you', 'aria-label': 'Agent surfaces: sessions, results to accept, questions for you', 'aria-haspopup': 'dialog', 'data-c3pg': 'agent-button' } });   // the mockup's header button (agent-surfaces.html #act)
   S.tools = el('div', { class: 'tools', 'data-c3pg': 'tools' });
   if (S.demoMod) S.tools.append(S.demoMod.demoPill());
@@ -423,15 +423,14 @@ function dock() {
     /* the needs-you badge on the agent button: runs that ask, hold a permission or need the terminal (not the running ones) */
     onCount: (live, need) => { S.termBdg.textContent = String(need); S.termBdg.hidden = need === 0; import('./c3-terminal-icons.js').then((m) => { const t = m.TIPS.agentHeader(need); S.termBtn.title = t; S.termBtn.setAttribute('aria-label', t); }); },   // the badge counts runs that need you, never running ones
   });
-  S.dockEl = S.dock.side; S.rail = S.dock.rail;
+  S.dockEl = S.dock.side;
   // a session opens in its own terminal sheet on this page (c3-session-term.js), not in the main app
   window.addEventListener('pmos:open-session', (e) => { const id = e.detail && e.detail.id; if (!id) { location.assign('/'); return; } import('./c3-session-term.js').then((m) => m.openSessionTerm({ id, name: e.detail.name })); });
-  return [S.dock.side, S.dock.rail];
+  return [S.dock.side];
 }
-/* The mockup opens the dock on the Briefing and folds it to a rail on the other tabs (console3.html line 2017). */
+/* The dock is open on the Briefing and folded away on the other tabs. A folded dock leaves no rail (PM, 2026-10-12): the header's Sessions button, Ctrl J and the More menu reach it. */
 function syncDock() {
   S.dockEl.hidden = !S.dockOpen;
-  S.rail.hidden = S.dockOpen || !S.wide;
 }
 
 /* ── the other tabs ── */