@ok-ggwp/git-gloss 0.0.0-stage → 0.2.0

package/dist/html/client.js

@@ -0,0 +1,383 @@
+// Renders the gloss page from the embedded JSON. All text goes through
+// textContent; nothing from the data is ever parsed as HTML.
+(function () {
+  'use strict'
+  var data = JSON.parse(document.getElementById('gloss-data').textContent)
+  var app = document.getElementById('app')
+  var hidden = new Set() // necessity values filtered out
+  var multi = data.commits.length > 1 || data.range !== null
+  // Group ids are unique within a commit, not across a range, so a range page
+  // keys cards by commit too: #g-<sha7>-<group>.
+  function key(c, id) { return multi ? c.sha.slice(0, 7) + '-' + id : id }
+
+  function el(tag, cls, text) {
+    var e = document.createElement(tag)
+    if (cls) e.className = cls
+    if (text !== undefined && text !== null) e.textContent = String(text)
+    return e
+  }
+  function add(parent) {
+    for (var i = 1; i < arguments.length; i++) if (arguments[i]) parent.appendChild(arguments[i])
+    return parent
+  }
+  function color(e, necessity) {
+    e.style.setProperty('--c', 'var(--n-' + necessity + ')')
+    return e
+  }
+  function plural(n, word) { return n + ' ' + word + (n === 1 ? '' : 's') }
+  function stats(added, removed) {
+    return add(el('span', 'stats'), el('span', 'plus', '+' + added), document.createTextNode(' '), el('span', 'minus', '−' + removed))
+  }
+  function groupLink(c, id) {
+    var a = el('a', null, id)
+    a.href = '#g-' + key(c, id)
+    a.addEventListener('click', function (ev) { ev.preventDefault(); focusGroup(key(c, id), true) })
+    return a
+  }
+
+  // ---- diff rendering ----
+  function hunkView(c, h) {
+    var head = add(el('div', 'hunk-head'),
+      el('span', 'range', h.ref),
+      el('span', 'file', h.oldFile ? h.oldFile + ' → ' + h.file : h.file),
+      el('span', 'range', h.range),
+      stats(h.added, h.removed))
+    if (h.status === 'changed') add(head, el('span', 'stale', 'changed since glossed'))
+    if (h.status === 'missing') {
+      add(head, el('span', 'stale', 'no longer in this commit'))
+      return add(el('div', 'hunk'), head)
+    }
+    if (h.alsoIn.length) {
+      var also = add(el('span', 'also'), document.createTextNode('shares lines with '))
+      h.alsoIn.forEach(function (id, i) { if (i) also.appendChild(document.createTextNode(', ')); also.appendChild(groupLink(c, id)) })
+      add(head, also)
+    }
+    var table = el('table', 'diff')
+    h.lines.forEach(function (l) {
+      var tr = el('tr', l.kind)
+      if (l.kind === 'meta' || l.kind === 'gap') {
+        var td = el('td', 'text', l.text)
+        td.colSpan = 4
+        add(tr, td)
+      } else {
+        add(tr,
+          el('td', 'ln', l.old === null ? '' : l.old),
+          el('td', 'ln', l.new === null ? '' : l.new),
+          el('td', 'mark', l.kind === 'add' ? '+' : l.kind === 'del' ? '−' : ' '),
+          el('td', 'text', l.text))
+      }
+      table.appendChild(tr)
+    })
+    return add(el('div', 'hunk'), head, add(el('div', 'scroll'), table))
+  }
+
+  // ---- group cards ----
+  var cards = []
+  function groupCard(c, g) {
+    var card = color(el('article', 'group'), g.necessity)
+    card.id = 'g-' + key(c, g.id)
+    card.tabIndex = -1
+    card.dataset.necessity = g.necessity
+
+    var title = add(el('div', 'group-title'),
+      el('span', 'badge', g.necessity),
+      el('span', 'intent', g.intent),
+      el('span', 'gid', g.id))
+    if (g.stale) add(title, el('span', 'stale', g.stale + ' of ' + plural(g.total, 'hunk') + ' changed or gone'))
+    add(title, stats(g.added, g.removed))
+
+    var facts = el('dl', 'facts')
+    function fact(label, value) {
+      if (!value) return
+      add(facts, el('dt', null, label), typeof value === 'string' ? el('dd', null, value) : add(el('dd'), value))
+    }
+    if (g.serves[0] !== 'task') {
+      var links = el('span')
+      g.serves.forEach(function (id, i) { if (i) links.appendChild(document.createTextNode(', ')); links.appendChild(groupLink(c, id)) })
+      fact('serves', links)
+    }
+    fact('if removed', g.removal_impact)
+    fact('evidence', g.evidence)
+    fact('notes', g.notes)
+
+    add(card, add(el('div', 'group-head'), title), facts)
+
+    if (g.hunks.length) {
+      var code = el('div', 'code')
+      code.hidden = true
+      var toggle = el('button', 'code-toggle')
+      toggle.type = 'button'
+      var rendered = false
+      function setOpen(open) {
+        if (open && !rendered) { g.hunks.forEach(function (h) { code.appendChild(hunkView(c, h)) }); rendered = true }
+        code.hidden = !open
+        toggle.textContent = (open ? '▾ Hide code' : '▸ Show code') + ' · ' + plural(g.hunks.length, 'hunk')
+        toggle.setAttribute('aria-expanded', String(open))
+      }
+      toggle.addEventListener('click', function () { setOpen(code.hidden) })
+      setOpen(false)
+      card.setOpen = setOpen
+      card.isOpen = function () { return !code.hidden }
+      add(card, toggle, code)
+    }
+    cards.push(card)
+    return card
+  }
+
+  // ---- page ----
+  function statement(parent, label, text) {
+    if (text) add(parent, add(el('p', 'statement'), el('span', 'label', label), document.createTextNode(text)))
+  }
+  function commitMeta(c) {
+    return add(el('div', 'commit'), el('span', 'sha', c.sha.slice(0, 10)),
+      el('span', null, c.author), el('span', null, new Date(c.date).toLocaleString()))
+  }
+
+  // One commit's groups, unannotated changes, risks and alternatives, with its
+  // entries in the sidebar.
+  function commitBody(c, main) {
+    var tocList = el('ol')
+    var groupsEl = el('section', 'groups')
+    c.groups.forEach(function (g) {
+      groupsEl.appendChild(groupCard(c, g))
+      var li = el('li')
+      li.dataset.necessity = g.necessity
+      li.dataset.key = key(c, g.id)
+      var a = add(el('a'), color(el('span', 'dot'), g.necessity), el('span', null, g.id))
+      a.href = '#g-' + key(c, g.id)
+      a.title = g.intent
+      a.addEventListener('click', function (ev) { ev.preventDefault(); focusGroup(key(c, g.id), false) })
+      tocList.appendChild(add(li, a))
+    })
+    add(main, groupsEl)
+
+    var h = multi ? 'h3' : 'h2'
+    if (c.unannotated.length) {
+      var unId = 'unannotated' + (multi ? '-' + c.sha.slice(0, 7) : '')
+      var un = add(el('section', 'section'), el(h, null, (c.glossed ? 'Unannotated changes' : 'Changes') + ' (' + c.unannotated.length + ')'))
+      var box = add(el('div', 'unannotated'), el('p', null, c.glossed
+        ? 'These changes are in the commit but no group explains them.'
+        : 'This commit has no gloss, so nothing explains these changes.'))
+      c.unannotated.forEach(function (hk) { box.appendChild(hunkView(c, hk)) })
+      un.id = unId
+      add(main, add(un, box))
+      var ua = add(el('a'), el('span', null, c.glossed ? 'unannotated' : 'unglossed diff'))
+      ua.href = '#' + unId
+      tocList.appendChild(add(el('li'), ua))
+    }
+    if (c.risks.length) {
+      var rl = el('ul', 'list')
+      c.risks.forEach(function (r) { rl.appendChild(el('li', null, r)) })
+      add(main, add(el('section', 'section'), el(h, null, 'Risks'), rl))
+    }
+    if (c.alternatives.length) {
+      var al = el('ul', 'list')
+      c.alternatives.forEach(function (x) {
+        al.appendChild(add(el('li'), el('strong', null, x.option), el('span', 'why', ' — ' + x.rejected_because)))
+      })
+      add(main, add(el('section', 'section'), el(h, null, 'Alternatives considered'), al))
+    }
+    return tocList
+  }
+
+  function render() {
+    var layout = el('div', 'layout')
+    var toc = el('nav', 'toc')
+    var main = el('main')
+    add(layout, toc, main)
+    var allGroups = []
+    data.commits.forEach(function (c) { allGroups = allGroups.concat(c.groups) })
+
+    // Whether each commit as it is now was reviewed, per stage; each stage's
+    // reports open on demand. Findings are shown as text.
+    function reviewsBlock(c, target) {
+      var box = el('div', 'reviews')
+      if (!c.reviews.length) { add(target, add(box, el('span', 'review-none', 'No reviews recorded'))); return }
+      c.reviews.forEach(function (r) {
+        var d = el('details', 'review')
+        add(d, add(el('summary'), el('span', r.state === 'seen' && r.verdict !== 'issues' ? (r.verdict === 'clean' ? 'review-ok' : 'review-none') : 'stale', r.phrase)))
+        r.entries.forEach(function (e) {
+          add(d, el('div', 'note', r.stage + ' by ' + e.agent + (e.model ? ':' + e.model : '') + (e.mode ? ' (' + e.mode + ')' : '') +
+            ', ' + e.at.slice(0, 16).replace('T', ' ') + ', of ' + e.target), el('pre', 'findings', e.findings))
+        })
+        add(box, d)
+      })
+      add(target, box)
+    }
+
+    // Header: the commit itself, or the range and its commits.
+    if (multi) {
+      var glossed = data.commits.filter(function (c) { return c.glossed }).length
+      var vetted = data.commits.filter(function (c) {
+        return c.glossed && c.reviews.some(function (r) { return r.stage === 'honesty' && r.state === 'seen' })
+      }).length
+      add(main, add(el('div', 'commit'), el('span', 'sha', data.range),
+        el('span', null, plural(data.commits.length, 'commit') + ', ' + glossed + ' glossed' + (glossed ? ', ' + vetted + ' honesty-reviewed' : ''))))
+      add(main, el('h1', null, 'Branch ' + data.range))
+      var list = el('ol', 'commit-list')
+      data.commits.forEach(function (c) {
+        var a = add(el('a'), el('span', 'sha', c.sha.slice(0, 7)), document.createTextNode(' ' + c.subject))
+        a.href = '#c-' + c.sha.slice(0, 7)
+        var li = add(el('li'), a)
+        if (!c.glossed) add(li, el('span', 'stale', 'no gloss'))
+        else if (c.warnings.length) add(li, el('span', 'stale', 'stale gloss'))
+        if (c.glossed) {
+          var honesty = c.reviews.filter(function (r) { return r.stage === 'honesty' })[0]
+          add(li, !honesty ? el('span', 'stale', 'not reviewed')
+            : honesty.state !== 'seen' ? el('span', 'stale', 'changed since review')
+            : honesty.verdict === 'issues' ? el('span', 'stale', 'honesty: issues found')
+            : el('span', 'review-ok', honesty.verdict === 'clean' ? 'honesty: no issues' : 'honesty-reviewed'))
+        }
+        list.appendChild(li)
+      })
+      data.merges.forEach(function (m) {
+        list.appendChild(add(el('li'), el('span', 'sha', m.sha.slice(0, 7)), document.createTextNode(' ' + m.subject),
+          el('span', 'stale', 'merge, not reviewed')))
+      })
+      add(main, list)
+    } else {
+      var only = data.commits[0]
+      add(main, commitMeta(only), el('h1', null, only.subject))
+      statement(main, 'Task', only.task)
+      statement(main, 'Summary', only.summary)
+      only.warnings.forEach(function (w) { add(main, el('div', 'warning', '⚠ ' + w)) })
+      reviewsBlock(only, main)
+    }
+
+    // Necessity overview across every commit: bar weighted by changed lines,
+    // chips filter groups.
+    var present = data.necessity.filter(function (n) { return allGroups.some(function (g) { return g.necessity === n.name }) })
+    var total = allGroups.reduce(function (s, g) { return s + g.weight }, 0) || 1
+    var bar = el('div', 'bar')
+    var chips = el('div', 'chips')
+    present.forEach(function (n) {
+      var groups = allGroups.filter(function (g) { return g.necessity === n.name })
+      var weight = groups.reduce(function (s, g) { return s + g.weight }, 0)
+      var seg = color(el('span'), n.name)
+      seg.style.width = (100 * weight / total) + '%'
+      seg.title = n.name + ': ' + Math.round(100 * weight / total) + '% of changed lines'
+      bar.appendChild(seg)
+
+      var chip = color(el('button', 'chip'), n.name)
+      chip.type = 'button'
+      chip.title = n.help + ' (click to show or hide)'
+      chip.setAttribute('aria-pressed', 'true')
+      add(chip, el('span', 'dot'), el('span', null, n.name), el('span', 'count', groups.length))
+      chip.dataset.necessity = n.name
+      chip.addEventListener('click', function () {
+        if (hidden.has(n.name)) hidden.delete(n.name); else hidden.add(n.name)
+        chip.setAttribute('aria-pressed', String(!hidden.has(n.name)))
+        applyFilter()
+      })
+      chips.appendChild(chip)
+    })
+    add(main, add(el('section', 'overview'), bar, chips,
+      el('div', 'note', 'Bar shows each category’s share of changed lines' + (multi ? ' across the range' : '') +
+        '. Click a category to hide or show its groups.')))
+
+    // Toolbar
+    var shown = el('span', 'shown')
+    var expand = el('button', 'btn', 'Expand all code')
+    var collapse = el('button', 'btn', 'Collapse all')
+    expand.type = collapse.type = 'button'
+    expand.addEventListener('click', function () { setAll(true) })
+    collapse.addEventListener('click', function () { setAll(false) })
+    add(main, add(el('div', 'toolbar'), shown, add(el('span'), expand, document.createTextNode(' '), collapse)))
+
+    // Commits, each with its groups; the sidebar groups them by commit.
+    data.commits.forEach(function (c) {
+      var target = main
+      if (multi) {
+        target = el('section', 'commit-section')
+        target.id = 'c-' + c.sha.slice(0, 7)
+        add(target, commitMeta(c), el('h2', null, c.subject))
+        statement(target, 'Task', c.task)
+        statement(target, 'Summary', c.summary)
+        c.warnings.forEach(function (w) { add(target, el('div', 'warning', '⚠ ' + w)) })
+        reviewsBlock(c, target)
+        add(main, target)
+      }
+      var tocList = commitBody(c, target)
+      var heading = multi ? c.sha.slice(0, 7) + ' ' + c.subject : 'Groups'
+      var tocHead = el('h2', multi ? 'commit-head' : null, heading)
+      if (multi) tocHead.title = c.subject
+      add(toc, tocHead, tocList)
+    })
+
+    var foot = el('footer')
+    add(foot, document.createTextNode('Keys: '), el('kbd', null, 'j'), document.createTextNode(' / '), el('kbd', null, 'k'),
+      document.createTextNode(' next / previous group · '), el('kbd', null, 'o'), document.createTextNode(' show or hide code · '),
+      el('kbd', null, 'e'), document.createTextNode(' expand all · '), el('kbd', null, 'c'),
+      document.createTextNode(' collapse all.'))
+    add(foot, el('p', null, 'A snapshot generated by git-gloss ' + new Date(data.generated).toLocaleString() +
+      '. It does not update if the gloss or commit changes; regenerate with git gloss html ' +
+      (data.range || data.commits[0].sha.slice(0, 10)) + '.'))
+    add(main, foot)
+
+    app.textContent = ''
+    app.appendChild(layout)
+
+    function applyFilter() {
+      var visible = 0
+      cards.forEach(function (c) {
+        var off = hidden.has(c.dataset.necessity)
+        c.classList.toggle('hidden', off)
+        if (!off) visible++
+      })
+      toc.querySelectorAll('li[data-necessity]').forEach(function (li) { li.classList.toggle('hidden', hidden.has(li.dataset.necessity)) })
+      shown.textContent = visible === cards.length
+        ? plural(cards.length, 'group')
+        : 'Showing ' + visible + ' of ' + plural(cards.length, 'group')
+    }
+    applyFilter()
+    showNecessity = function (n) {
+      hidden.delete(n)
+      chips.querySelectorAll('.chip').forEach(function (c) { if (c.dataset.necessity === n) c.setAttribute('aria-pressed', 'true') })
+      applyFilter()
+    }
+  }
+  var showNecessity = function () {}
+
+  function setAll(open) {
+    cards.forEach(function (c) { if (c.setOpen && !c.classList.contains('hidden')) c.setOpen(open) })
+  }
+
+  var current = -1
+  function focusGroup(k, openCode, instant) {
+    var i = cards.findIndex(function (c) { return c.id === 'g-' + k })
+    if (i < 0) return
+    var card = cards[i]
+    // Following a link to a filtered-out group turns its category back on.
+    if (card.classList.contains('hidden')) showNecessity(card.dataset.necessity)
+    cards.forEach(function (c) { c.classList.remove('focused') })
+    card.classList.add('focused')
+    current = i
+    if (openCode && card.setOpen) card.setOpen(true)
+    card.scrollIntoView({ block: 'start', behavior: instant ? 'auto' : 'smooth' })
+    document.querySelectorAll('.toc li').forEach(function (li) { li.classList.toggle('active', li.dataset.key === k) })
+    history.replaceState(null, '', '#g-' + k)
+  }
+  function step(dir) {
+    var visible = cards.filter(function (c) { return !c.classList.contains('hidden') })
+    if (!visible.length) return
+    var pos = visible.indexOf(cards[current])
+    var next = visible[Math.min(visible.length - 1, Math.max(0, pos + dir))] || visible[0]
+    focusGroup(next.id.slice(2), false)
+  }
+
+  document.addEventListener('keydown', function (ev) {
+    if (ev.metaKey || ev.ctrlKey || ev.altKey) return
+    var t = ev.target
+    if (t && (/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) || t.isContentEditable)) return
+    if (ev.key === 'j') step(1)
+    else if (ev.key === 'k') step(-1)
+    else if (ev.key === 'o' && cards[current] && cards[current].setOpen) cards[current].setOpen(!cards[current].isOpen())
+    else if (ev.key === 'e') setAll(true)
+    else if (ev.key === 'c') setAll(false)
+  })
+
+  render()
+  if (location.hash.indexOf('#g-') === 0) {
+    try { focusGroup(decodeURIComponent(location.hash.slice(3)), true, true) } catch (e) { /* malformed hash */ }
+  }
+})()

package/dist/html/data.js

@@ -0,0 +1,147 @@
+import { commitDiff, commitSubject, git } from '../git.js';
+import { reviewStatus, statusPhrase, verdict } from '../reviews.js';
+import { parseDiff } from '../diff.js';
+import { loadGloss } from '../loader.js';
+import { bodyLines, changedCount, gapText, isGap, refLabel, slice, sliceStats } from '../selection.js';
+import { NECESSITY, NECESSITY_HELP, servesOf } from '../schema.js';
+function pageReviews(sha) {
+    return reviewStatus(sha).map((s) => ({
+        stage: s.stage,
+        state: s.code === 'changed' ? 'code-changed'
+            : (s.stage === 'honesty' || s.stage === 'improve') && s.gloss === 'changed' ? 'gloss-changed' : 'seen',
+        verdict: verdict(s),
+        phrase: statusPhrase(s),
+        entries: s.reviews.map((r) => ({ agent: r.agent, model: r.model, mode: r.mode, at: r.at, target: r.target, findings: r.findings })),
+    }));
+}
+// The lines to show for a selection: the @@ header, then the slice, with
+// changed lines that belong to other groups collapsed into gap rows.
+export function pageLines(h, selected) {
+    const body = bodyLines(h);
+    if (body.every((l) => l.kind === 'meta'))
+        return body.map((l) => ({ kind: 'meta', old: null, new: null, text: l.raw }));
+    const header = { kind: 'meta', old: null, new: null, text: h.text.split('\n')[0] };
+    return [header, ...slice(body, selected).map((l) => isGap(l)
+            ? { kind: 'gap', old: null, new: null, text: gapText(l.gap) }
+            : { kind: l.kind, old: l.oldNo, new: l.newNo, text: l.kind === 'meta' ? l.raw : l.raw.slice(1) })];
+}
+// A glossed hunk that is no longer in the commit: shown as a placeholder so
+// the reader can see what the gloss refers to, rather than it vanishing.
+function missingHunk(h) {
+    const s = h.stored;
+    return {
+        id: h.id,
+        ref: refLabel(h.id, h.lines),
+        file: s?.file ?? '?',
+        oldFile: s?.oldFile && s.oldFile !== s.file ? s.oldFile : null,
+        range: s && (s.newLines || s.oldLines) ? `-${s.oldStart},${s.oldLines} +${s.newStart},${s.newLines}` : '',
+        status: 'missing',
+        added: 0,
+        removed: 0,
+        alsoIn: [],
+        lines: [],
+    };
+}
+function pageHunk(h, lines, status, alsoIn) {
+    const counts = sliceStats(h, lines);
+    return {
+        id: h.id,
+        ref: refLabel(h.id, lines),
+        file: h.file,
+        oldFile: h.oldFile && h.oldFile !== h.file ? h.oldFile : null,
+        range: h.newLines || h.oldLines ? `-${h.oldStart},${h.oldLines} +${h.newStart},${h.newLines}` : 'file header',
+        status,
+        added: counts.added,
+        removed: counts.removed,
+        alsoIn,
+        lines: pageLines(h, lines),
+    };
+}
+const allLines = (h) => Array.from({ length: changedCount(h) }, (_, i) => i + 1);
+export function commitData(gloss) {
+    const [author, date] = git(['log', '-1', '--format=%an%x00%aI', gloss.sha]).trim().split('\0');
+    const a = gloss.note.annotation;
+    // Which groups claim each changed line, so shared lines are split between
+    // their groups in the bar and each hunk can link to the groups it shares
+    // lines with. A header-only hunk counts as one shared unit.
+    const owners = new Map();
+    const claimed = (h, lines) => (changedCount(h) ? [...(lines ?? allLines(h))] : [0]);
+    for (const g of gloss.groups) {
+        for (const h of g.hunks) {
+            if (!h.current)
+                continue;
+            const byLine = owners.get(h.current) ?? new Map();
+            for (const i of claimed(h.current, h.lines))
+                byLine.set(i, [...(byLine.get(i) ?? []), g.group.id]);
+            owners.set(h.current, byLine);
+        }
+    }
+    const groups = gloss.groups
+        .map(({ group: g, hunks }) => {
+        const live = hunks.filter((h) => h.current !== null);
+        const counts = live.map((h) => sliceStats(h.current, h.lines));
+        const shares = (h) => claimed(h.current, h.lines).map((i) => owners.get(h.current).get(i));
+        return {
+            id: g.id,
+            intent: g.intent,
+            necessity: g.necessity,
+            serves: servesOf(g),
+            removal_impact: g.removal_impact,
+            evidence: g.evidence,
+            notes: g.notes,
+            stale: hunks.filter((h) => h.status !== 'ok').length,
+            total: hunks.length,
+            added: counts.reduce((n, c) => n + c.added, 0),
+            removed: counts.reduce((n, c) => n + c.removed, 0),
+            weight: live.reduce((n, h) => n + (changedCount(h.current) ? shares(h).reduce((w, o) => w + 1 / o.length, 0) : 0), 0),
+            hunks: hunks.map((h) => h.current
+                ? pageHunk(h.current, h.lines, h.status, [...new Set(shares(h).flat())].filter((id) => id !== g.id))
+                : missingHunk(h)),
+        };
+    })
+        .sort((x, y) => NECESSITY.indexOf(x.necessity) - NECESSITY.indexOf(y.necessity));
+    return {
+        sha: gloss.sha,
+        subject: gloss.subject,
+        author,
+        date,
+        glossed: true,
+        task: a.task,
+        summary: a.summary,
+        warnings: gloss.warnings,
+        groups,
+        unannotated: gloss.unannotated.map((u) => pageHunk(u.hunk, u.lines, 'unannotated', [])),
+        alternatives: a.alternatives ?? [],
+        risks: a.risks ?? [],
+        reviews: pageReviews(gloss.sha),
+    };
+}
+function unglossedData(sha) {
+    const [author, date] = git(['log', '-1', '--format=%an%x00%aI', sha]).trim().split('\0');
+    return {
+        sha,
+        subject: commitSubject(sha),
+        author,
+        date,
+        glossed: false,
+        task: '',
+        warnings: [],
+        groups: [],
+        unannotated: parseDiff(commitDiff(sha)).map((h) => pageHunk(h, null, 'unannotated', [])),
+        alternatives: [],
+        risks: [],
+        reviews: pageReviews(sha),
+    };
+}
+export function buildPageData(shas, range = null, merges = []) {
+    return {
+        range,
+        merges: merges.map((sha) => ({ sha, subject: commitSubject(sha) })),
+        necessity: NECESSITY.map((name) => ({ name, help: NECESSITY_HELP[name] })),
+        commits: shas.map((sha) => {
+            const gloss = loadGloss(sha);
+            return gloss ? commitData(gloss) : unglossedData(sha);
+        }),
+        generated: new Date().toISOString(),
+    };
+}

package/dist/html/page.js

@@ -0,0 +1,35 @@
+import { randomBytes } from 'node:crypto';
+import { readFileSync } from 'node:fs';
+const asset = (name) => readFileSync(new URL(name, import.meta.url), 'utf8');
+// JSON inside a <script> element: escape "<" so no string in the data, such as
+// "</script>", can end the element early.
+export function embedJson(data) {
+    return JSON.stringify(data).replace(/</g, '\\u003c');
+}
+const escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+export function renderPage(data) {
+    // The page only runs our own inline script. If escaping ever failed, an
+    // injected script would lack the nonce and the CSP would block it.
+    const nonce = randomBytes(16).toString('base64');
+    const csp = `default-src 'none'; style-src 'nonce-${nonce}'; script-src 'nonce-${nonce}'`;
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="${csp}">
+<title>${data.range ? `gloss ${escapeHtml(data.range)} (${data.commits.length} commit${data.commits.length === 1 ? '' : 's'})` : `gloss ${escapeHtml(data.commits[0].sha.slice(0, 7))}: ${escapeHtml(data.commits[0].subject)}`}</title>
+<style nonce="${nonce}">
+${asset('./style.css')}
+</style>
+</head>
+<body>
+<div id="app"><noscript>This page needs JavaScript to render the gloss.</noscript></div>
+<script type="application/json" id="gloss-data">${embedJson(data)}</script>
+<script nonce="${nonce}">
+${asset('./client.js')}
+</script>
+</body>
+</html>
+`;
+}