@vintasoftware/pr-review-canvas 0.1.0

package/static/js/links.js

@@ -0,0 +1,150 @@
+// @ts-check
+// The canvas link scheme. Four forms, used in markdown, diagrams, and chat:
+//   #layer:<layerKey>
+//   #file:<path>
+//   #hunk:<path>#<n>
+//   #line:<path>:<start>[-<end>][:old]
+// The server validates links with this parser (src/contract/links.ts re-exports it) and the
+// browser turns them into anchors, so both sides agree on what a link means.
+
+/**
+ * @typedef {{ kind: 'layer', layerKey: string }
+ *   | { kind: 'file', path: string }
+ *   | { kind: 'hunk', path: string, n: number }
+ *   | { kind: 'line', path: string, start: number, end: number, side: 'new' | 'old' }} ParsedLink
+ */
+
+/**
+ * @typedef {{
+ *   layers: ReadonlyArray<{ key: string }>,
+ *   files: ReadonlyArray<{ path: string, hunks: ReadonlyArray<import('./hunks.js').HunkRange> }>,
+ * }} LinkTargets
+ */
+import { hunkForLine, hunkLineRanges } from './hunks.js'
+
+const LINE_RE = /^([^\n]+?):(\d+)(?:-(\d+))?(:old)?$/
+
+/**
+ * Parses one link. Returns null for anything that is not one of the four forms.
+ * @param {string} href
+ * @returns {ParsedLink | null}
+ */
+export function parseLink(href) {
+  if (href.startsWith('#layer:')) {
+    const layerKey = href.slice('#layer:'.length)
+    return layerKey ? { kind: 'layer', layerKey } : null
+  }
+  if (href.startsWith('#file:')) {
+    const path = href.slice('#file:'.length)
+    return path ? { kind: 'file', path } : null
+  }
+  if (href.startsWith('#hunk:')) {
+    const m = /^(.+)#(\d+)$/.exec(href.slice('#hunk:'.length))
+    if (!m || m[1] === undefined || m[2] === undefined) {
+      return null
+    }
+    return { kind: 'hunk', path: m[1], n: Number(m[2]) }
+  }
+  if (href.startsWith('#line:')) {
+    const m = LINE_RE.exec(href.slice('#line:'.length))
+    if (!m || m[1] === undefined || m[2] === undefined) {
+      return null
+    }
+    const start = Number(m[2])
+    const end = m[3] === undefined ? start : Number(m[3])
+    if (end < start) {
+      return null
+    }
+    return { kind: 'line', path: m[1], start, end, side: m[4] ? 'old' : 'new' }
+  }
+  return null
+}
+
+/**
+ * Every link found in a markdown text, in order. Matches the `#…` inside `](…)` and bare links
+ * that stand on their own (surrounded by whitespace or at the edges).
+ * @param {string} markdown
+ * @returns {string[]}
+ */
+export function extractLinks(markdown) {
+  /** @type {string[]} */
+  const out = []
+  const re = /\]\((#(?:layer|file|hunk|line):[^)\s]+)\)|(?:^|\s)(#(?:layer|file|hunk|line):[^\s)]+)/g
+  for (const m of markdown.matchAll(re)) {
+    if (m[1] !== undefined) {
+      out.push(m[1])
+    } else if (m[2] !== undefined) {
+      // A bare link at the end of a sentence carries the punctuation; it is not part of the target.
+      out.push(m[2].replace(/[.,;:!?]+$/, ''))
+    }
+  }
+  return out
+}
+
+/**
+ * Checks a parsed link against the artifact. The message explains what is missing so the
+ * validator can print it as-is.
+ * @param {ParsedLink} link
+ * @param {LinkTargets} targets
+ * @returns {{ ok: true } | { ok: false, message: string }}
+ */
+export function resolveLink(link, targets) {
+  if (link.kind === 'layer') {
+    return targets.layers.some(l => l.key === link.layerKey)
+      ? { ok: true }
+      : { ok: false, message: `layer ${link.layerKey} does not exist` }
+  }
+  const file = targets.files.find(f => f.path === link.path)
+  if (!file) {
+    return { ok: false, message: `${link.path} is not in the diff` }
+  }
+  if (link.kind === 'hunk' && (link.n < 1 || link.n > file.hunks.length)) {
+    return { ok: false, message: `${link.path}#${link.n} does not exist (file has ${file.hunks.length} hunks)` }
+  }
+  if (link.kind === 'line') {
+    const start = hunkForLine(file.hunks, link.side, link.start)
+    const end = hunkForLine(file.hunks, link.side, link.end)
+    if (start === null || start !== end) {
+      const range = link.end === link.start ? `${link.start}` : `${link.start}-${link.end}`
+      return { ok: false, message: `${link.path}:${range} (${link.side}) is not inside one hunk of the diff (${hunkLineRanges(file.hunks, link.side)})` }
+    }
+  }
+  return { ok: true }
+}
+
+/**
+ * The DOM id a link points at. Line links target their first line.
+ * @param {ParsedLink} link
+ * @param {(path: string) => string} keyFor
+ * @returns {string}
+ */
+export function linkTargetId(link, keyFor) {
+  switch (link.kind) {
+    case 'layer':
+      return `layer-${link.layerKey}`
+    case 'file':
+      return `file-${keyFor(link.path)}`
+    case 'hunk':
+      return `hunk-${keyFor(link.path)}-${link.n}`
+    case 'line':
+      return `L-${keyFor(link.path)}-${link.side}-${link.start}`
+  }
+}
+
+/**
+ * Short text for a link when the markdown had none, for example `packages/x.ts:40-52`.
+ * @param {ParsedLink} link
+ * @returns {string}
+ */
+export function linkLabel(link) {
+  switch (link.kind) {
+    case 'layer':
+      return link.layerKey
+    case 'file':
+      return link.path
+    case 'hunk':
+      return `${link.path} hunk ${link.n}`
+    case 'line':
+      return `${link.path}:${link.start}${link.end !== link.start ? `-${link.end}` : ''}${link.side === 'old' ? ' (old)' : ''}`
+  }
+}

package/static/js/markdown.js

@@ -0,0 +1,232 @@
+// @ts-check
+// Markdown for every AI-written or GitHub-written text: marked (GFM, raw HTML off) →
+// DOMPurify with an allowlist → headings demoted → path:line linkify. Returns an HTML string that
+// is safe to assign to innerHTML.
+import DOMPurify from 'dompurify'
+import { Marked } from 'marked'
+import { diagramPlaceholderHtml } from './diagram.js'
+import { esc } from './dom.js'
+import { linkLabel, parseLink } from './links.js'
+import { splitMermaid } from './mermaid-fences.js'
+
+const ALLOWED_TAGS = [
+  'p',
+  'br',
+  'em',
+  'strong',
+  'code',
+  'pre',
+  'ul',
+  'ol',
+  'li',
+  'a',
+  'blockquote',
+  'table',
+  'thead',
+  'tbody',
+  'tr',
+  'th',
+  'td',
+  // h1 and h2 pass the sanitizer only so demoteHeadings can turn them into h3 and h4.
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hr',
+  'del',
+  'input',
+  'img',
+  'details',
+  'summary',
+  'kbd',
+  'sup',
+  'sub',
+]
+// `type`, `checked`, and `disabled` are for GFM task-list checkboxes. No `class`: model text must
+// not be able to style itself as a command.
+const ALLOWED_ATTR = ['href', 'src', 'alt', 'title', 'type', 'checked', 'disabled', 'open']
+const ALLOWED_URI = /^(?:https?:|#)/i
+
+const marked = new Marked({
+  gfm: true,
+  breaks: false,
+  renderer: {
+    // Raw HTML in the source renders as text, never as markup.
+    html(token) {
+      return esc(token.text)
+    },
+  },
+})
+
+const githubMarked = new Marked({ gfm: true, breaks: false })
+
+/** Model text never outranks the page's own headings: h1→h3, h2→h4, h3→h5, h4-h6→h6. */
+const DEMOTE = { H1: 'h3', H2: 'h4', H3: 'h5', H4: 'h6', H5: 'h6', H6: 'h6' }
+
+/**
+ * @param {HTMLElement} root
+ */
+function demoteHeadings(root) {
+  for (const el of Array.from(root.querySelectorAll('h1,h2,h3,h4,h5,h6'))) {
+    const tag = DEMOTE[/** @type {keyof typeof DEMOTE} */ (el.tagName)]
+    const next = document.createElement(tag)
+    while (el.firstChild) {
+      next.append(el.firstChild)
+    }
+    el.replaceWith(next)
+  }
+}
+
+/**
+ * Turns `path/to/file.ts:12` and `path/to/file.ts:12-20` in text nodes into canvas links, but
+ * only for paths that are in the diff.
+ * @param {HTMLElement} root
+ * @param {ReadonlySet<string>} paths
+ */
+function linkifyPaths(root, paths) {
+  if (paths.size === 0) {
+    return
+  }
+  const re = /((?:[\w@.-]+\/)+[\w@.-]+\.[\w-]+):(\d+)(?:-(\d+))?/g
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  /** @type {Text[]} */
+  const texts = []
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    const parent = n.parentElement
+    if (parent && !parent.closest('a,code,pre')) {
+      texts.push(/** @type {Text} */ (n))
+    }
+  }
+  for (const node of texts) {
+    const text = node.data
+    let last = 0
+    /** @type {Node[]} */
+    const out = []
+    for (const m of text.matchAll(re)) {
+      const path = m[1] ?? ''
+      if (!paths.has(path) || m.index === undefined) {
+        continue
+      }
+      out.push(document.createTextNode(text.slice(last, m.index)))
+      const a = document.createElement('a')
+      const range = m[3] ? `${m[2]}-${m[3]}` : m[2]
+      a.href = `#line:${path}:${range}`
+      a.className = 'loc'
+      a.textContent = m[0]
+      out.push(a)
+      last = m.index + m[0].length
+    }
+    if (out.length === 0) {
+      continue
+    }
+    out.push(document.createTextNode(text.slice(last)))
+    node.replaceWith(...out)
+  }
+}
+
+/**
+ * Canvas links get `.loc` and a label when empty; http(s) links open in a new tab.
+ * @param {HTMLElement} root
+ */
+function decorateLinks(root) {
+  for (const a of Array.from(root.querySelectorAll('a'))) {
+    const href = a.getAttribute('href') ?? ''
+    const link = parseLink(href)
+    if (link) {
+      a.classList.add('loc')
+      a.setAttribute('data-link', href)
+      if (a.textContent === '' || a.textContent === href) {
+        a.textContent = linkLabel(link)
+      }
+    } else if (/^https?:/i.test(href)) {
+      a.setAttribute('target', '_blank')
+      a.setAttribute('rel', 'noopener noreferrer')
+    }
+  }
+}
+
+/**
+ * One markdown text, without mermaid blocks.
+ * @param {string} src markdown
+ * @param {{ paths?: ReadonlySet<string>, github?: boolean }} opts
+ * @returns {string} sanitized HTML
+ */
+function renderProse(src, opts) {
+  const raw = (opts.github ? githubMarked : marked).parse(src, { async: false })
+  // marked's renderer escapes raw HTML, and the sanitizer is still the boundary: nothing from
+  // `raw` reaches a DOM tree before DOMPurify has parsed and filtered it.
+  const root = document.createElement('div')
+  root.append(
+    DOMPurify.sanitize(raw, {
+      ALLOWED_TAGS,
+      FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'style', 'form'],
+      ALLOWED_ATTR,
+      ALLOWED_URI_REGEXP: ALLOWED_URI,
+      KEEP_CONTENT: true,
+      RETURN_DOM_FRAGMENT: true,
+    })
+  )
+  for (const element of root.querySelectorAll('*')) {
+    if (!ALLOWED_TAGS.includes(element.tagName.toLowerCase())) element.remove()
+  }
+  for (const img of root.querySelectorAll('img')) {
+    if (!/^https:\/\//i.test(img.getAttribute('src') ?? '')) {
+      img.remove()
+    } else {
+      img.loading = 'lazy'
+      img.referrerPolicy = 'no-referrer'
+    }
+  }
+  for (const input of root.querySelectorAll('input')) {
+    input.type = 'checkbox'
+    input.disabled = true
+  }
+  demoteHeadings(root)
+  linkifyPaths(root, opts.paths ?? new Set())
+  decorateLinks(root)
+  return root.innerHTML
+}
+
+/**
+ * The link reference definitions of a text, written out again as markdown. Marked reads them, so
+ * a definition shown inside a code block is an example and a definition written over two lines is
+ * still one definition. The title is dropped, since the sanitizer allows no `title` attribute.
+ * @param {string} src markdown
+ * @returns {string}
+ */
+function linkDefinitions(src) {
+  // The destination is already parsed, so the characters marked reads in one are written back
+  // escaped: it parses this text a second time and must arrive at the same destination.
+  return Object.entries(marked.lexer(src).links)
+    .map(([label, def]) => `[${label}]: <${def.href.replace(/[\\<>]/g, ch => `\\${ch}`)}>`)
+    .join('\n')
+}
+
+/**
+ * Markdown as sanitized HTML. Two fields draw diagrams, the PR summary and a layer rationale, and
+ * they ask for it with `diagrams`. Everywhere else a ```mermaid fence stays a code block: a PR
+ * description and a GitHub comment are text from anyone, and the validator counts and measures
+ * diagrams only in the two fields the model writes them in.
+ * @param {string} src markdown
+ * @param {{ paths?: ReadonlySet<string>, diagrams?: boolean, github?: boolean }} [opts] `paths` linkifies `path:line`
+ * @returns {string} sanitized HTML
+ */
+export function renderMarkdown(src, opts = {}) {
+  if (opts.diagrams !== true) {
+    return renderProse(src, opts)
+  }
+  const segments = splitMermaid(src)
+  // Each piece of prose is parsed on its own, so the link definitions of the whole text are
+  // repeated in front of every piece: `[label]: target` written after a drawing still resolves a
+  // `[label]` written before it. A definition renders nothing, so repeating one shows nothing.
+  const defs = linkDefinitions(src)
+  return segments
+    .map(segment =>
+      segment.type === 'mermaid'
+        ? diagramPlaceholderHtml(segment.text)
+        : renderProse(defs === '' ? segment.text : `${defs}\n\n${segment.text}`, opts)
+    )
+    .join('')
+}

package/static/js/mermaid-fences.js

@@ -0,0 +1,55 @@
+// @ts-check
+// Finds the ```mermaid fences in a markdown text. One implementation for both sides: the client
+// turns each block into a diagram placeholder, and the server counts and measures them
+// (src/contract/mermaid-fences.ts re-exports this file).
+import { splitFences } from './fences.js'
+
+/** @typedef {{ type: 'markdown' | 'mermaid', text: string }} MermaidSegment */
+
+/**
+ * The pieces of a markdown text in order: prose and mermaid blocks. A mermaid block is a fenced
+ * block whose info string is exactly `mermaid`.
+ * @param {string} markdown
+ * @returns {MermaidSegment[]}
+ */
+export function splitMermaid(markdown) {
+  return splitFences(markdown, 'mermaid').map(s => ({
+    type: s.type === 'block' ? 'mermaid' : 'markdown',
+    text: s.text,
+  }))
+}
+
+/**
+ * The kind of drawing a source asks for, taken from its first word: `stateDiagram-v2` reads as
+ * `stateDiagram`. An empty or unreadable source has no kind.
+ * @param {string} source mermaid text
+ * @returns {string}
+ */
+export function diagramKind(source) {
+  const first = source.split('\n').find(line => line.trim() !== '' && !line.trim().startsWith('%%')) ?? ''
+  const word = first.trim().split(/[\s{(]/)[0] ?? ''
+  return /^[A-Za-z]/.test(word) ? word.replace(/-v\d+$/, '') : ''
+}
+
+/**
+ * The source of every mermaid block, in order.
+ * @param {string} markdown
+ * @returns {string[]}
+ */
+export function mermaidBlocks(markdown) {
+  return splitMermaid(markdown)
+    .filter(s => s.type === 'mermaid')
+    .map(s => s.text)
+}
+
+/**
+ * The text without its mermaid blocks, for a length measured on the prose a reader reads.
+ * @param {string} markdown
+ * @returns {string}
+ */
+export function withoutMermaid(markdown) {
+  return splitMermaid(markdown)
+    .filter(s => s.type === 'markdown')
+    .map(s => s.text)
+    .join('\n')
+}

package/static/js/nav.js

@@ -0,0 +1,91 @@
+// @ts-check
+// The page order of layers and file cards, for the rail, scrollspy, and the j/k n/p keys. Other
+// comes last with its files, mirroring the ids layers.js renders.
+/** @typedef {import('./contract-types.js').ReviewArtifact} ReviewArtifact */
+import { fileAnchorId, layerAnchorId, sanitizeKey } from './keys.js'
+
+/**
+ * @typedef {{ kind: 'overview', id: 'overview' }
+ *   | { kind: 'layer', id: string, layerId: string, key: string, other: boolean }
+ *   | { kind: 'file', id: string, layerId: string, key: string, path: string, isTest: boolean, other: boolean }} NavItem
+ */
+
+/**
+ * Overview, then every layer followed by its file cards, with the Other layer last.
+ * @param {ReviewArtifact} artifact
+ * @returns {NavItem[]}
+ */
+export function buildNavOrder(artifact) {
+  /** @type {NavItem[]} */
+  const out = [{ kind: 'overview', id: 'overview' }]
+  const layers = [
+    ...artifact.layers.filter(l => l.kind !== 'other'),
+    ...artifact.layers.filter(l => l.kind === 'other'),
+  ]
+  /** @type {Set<string>} */
+  const seen = new Set()
+  for (const layer of layers) {
+    const other = layer.kind === 'other'
+    out.push({ kind: 'layer', id: layerAnchorId(layer.key), layerId: layer.id, key: layer.key, other })
+    for (const f of layer.files) {
+      const key = sanitizeKey(f.path)
+      // The first card of a file carries the plain id; later cards of the same file add the layer key.
+      const id = seen.has(key) ? `${fileAnchorId(key)}-${layer.key}` : fileAnchorId(key)
+      seen.add(key)
+      out.push({ kind: 'file', id, layerId: layer.id, key, path: f.path, isTest: f.isTest, other })
+    }
+  }
+  return out
+}
+
+/**
+ * @param {ReadonlyArray<NavItem>} order
+ * @param {string | null} currentId
+ * @param {'layer' | 'file'} kind
+ * @param {1 | -1} direction
+ * @returns {NavItem | null}
+ */
+function step(order, currentId, kind, direction) {
+  const from = currentId === null ? (direction === 1 ? -1 : order.length) : order.findIndex(i => i.id === currentId)
+  const start = from === -1 && currentId !== null ? (direction === 1 ? -1 : order.length) : from
+  for (let i = start + direction; i >= 0 && i < order.length; i += direction) {
+    const item = order[i]
+    if (item !== undefined && item.kind === kind) {
+      return item
+    }
+  }
+  return null
+}
+
+/** @param {ReadonlyArray<NavItem>} order @param {string | null} currentId */
+export function nextLayer(order, currentId) {
+  return step(order, currentId, 'layer', 1)
+}
+
+/** @param {ReadonlyArray<NavItem>} order @param {string | null} currentId */
+export function prevLayer(order, currentId) {
+  return step(order, currentId, 'layer', -1)
+}
+
+/** @param {ReadonlyArray<NavItem>} order @param {string | null} currentId */
+export function nextFile(order, currentId) {
+  return step(order, currentId, 'file', 1)
+}
+
+/** @param {ReadonlyArray<NavItem>} order @param {string | null} currentId */
+export function prevFile(order, currentId) {
+  return step(order, currentId, 'file', -1)
+}
+
+/**
+ * The layer an item belongs to: itself for a layer, its owner for a file, null for the overview.
+ * @param {ReadonlyArray<NavItem>} order
+ * @param {string} id
+ */
+export function layerOf(order, id) {
+  const item = order.find(i => i.id === id)
+  if (!item || item.kind === 'overview') {
+    return null
+  }
+  return item.kind === 'layer' ? item : (order.find(i => i.kind === 'layer' && i.layerId === item.layerId) ?? null)
+}

package/static/js/overview.js

@@ -0,0 +1,85 @@
+// @ts-check
+/** @typedef {import('./contract-types.js').PrBundle} PrBundle */
+/** @typedef {import('./contract-types.js').IssueComment} IssueComment */
+
+import { commentHtml } from './diff-decorations.js'
+import { viewCommentHtml } from './comment-link.js'
+import { detailsSummaryHtml, esc, avatarHtml, timeAgo } from './dom.js'
+import { renderMarkdown } from './markdown.js'
+import { dismissedListHtml, postedUrls, sevsumHtml } from './points.js'
+
+/**
+ * "What changes": the PR-wide summary as one prose block.
+ * @param {string} summary
+ * @param {ReadonlySet<string>} paths
+ */
+export function summaryHtml(summary, paths) {
+  return `<div class="summary prose">${renderMarkdown(summary, { paths, diagrams: true })}</div>`
+}
+
+/**
+ * @param {IssueComment} c
+ * @param {Date} now
+ */
+export function issueCommentHtml(c, now) {
+  return (
+    `<div class="cmt">${avatarHtml(c)}` +
+    `<span class="who"><b>${esc(c.author)}</b> <span class="muted">${esc(timeAgo(c.createdAt, now))}</span> ${viewCommentHtml(c.url)}</span>` +
+    `<div class="prose">${renderMarkdown(c.body, { github: true })}</div></div>`
+  )
+}
+
+/**
+ * PR-level comments; bot comments (`[bot]` authors) collapse into one details block.
+ * @param {ReadonlyArray<IssueComment>} comments
+ * @param {Date} now
+ */
+export function conversationHtml(comments, now) {
+  const humans = comments.filter(c => !c.author.endsWith('[bot]'))
+  const bots = comments.filter(c => c.author.endsWith('[bot]'))
+  const humanHtml =
+    humans.length === 0
+      ? '<p class="muted">No PR-level comments yet.</p>'
+      : humans.map(c => issueCommentHtml(c, now)).join('')
+  const botHtml =
+    bots.length === 0
+      ? ''
+      : `<details class="bots">${detailsSummaryHtml(`<span class="muted small">${bots.length} bot ${bots.length === 1 ? 'comment' : 'comments'}</span>`, 'Toggle bot comments')}${bots
+          .map(c => issueCommentHtml(c, now))
+          .join('')}</details>`
+  return (
+    `<h3 class="lbl sub">Conversation · ${comments.length}</h3><div class="body conversation">${humanHtml}${botHtml}` +
+    '<div class="pr-composer-host"></div>' +
+    '<p><button class="cmd" type="button" data-act="pr-comment" data-needs-post>comment</button></p></div>'
+  )
+}
+
+/**
+ * @param {PrBundle} bundle
+ * @param {{ paths: ReadonlySet<string>, now: Date }} ctx
+ * @returns {string}
+ */
+export function renderOverview(bundle, ctx) {
+  const artifact = bundle.artifact
+  const active = artifact ? artifact.points.filter(p => bundle.state.dismissed[p.fingerprint] === undefined) : []
+  const summary = artifact ? summaryHtml(artifact.summary, ctx.paths) : ''
+  const description = bundle.pr.body.trim()
+    ? `<details class="pr-desc">${detailsSummaryHtml('<span>PR description (from GitHub)</span>', 'Toggle PR description')}<div class="body prose">${renderMarkdown(bundle.pr.body, { paths: ctx.paths, github: true })}</div></details>`
+    : '<div class="pr-desc body muted">No PR description.</div>'
+  return (
+    '<section class="panel" id="overview" aria-labelledby="ov-h">' +
+    `<div class="panel-h"><h2 id="ov-h">Overview</h2>${artifact ? sevsumHtml(active, artifact.layers) : ''}</div>` +
+    `<div class="body">${summary}</div>` +
+    description +
+    conversationHtml(bundle.comments.issueComments, ctx.now) +
+    (bundle.comments.reviews ?? []).map(review => `<div class="body"><span class="pill">${esc(review.state.toLowerCase().replaceAll('_', ' '))}</span>${issueCommentHtml(review, ctx.now)}</div>`).join('') +
+    (bundle.comments.reviewComments.length ? `<details class="body all-review-comments">${detailsSummaryHtml(`<span>All review comments · ${bundle.comments.reviewComments.length}</span>`, 'Toggle all review comments')}${bundle.comments.reviewComments.map(c => `<div><p class="muted small">${esc(c.path)}${c.line ? `:${c.line}` : ''}${c.outdated ? ' · outdated' : ''}${c.resolved ? ' · resolved' : ''}</p>${commentHtml(c, ctx.now)}</div>`).join('')}</details>` : '') +
+    (artifact
+      ? dismissedListHtml(artifact.points, bundle.state, {
+          paths: ctx.paths,
+          posted: postedUrls(bundle.state, bundle.comments.reviewComments),
+        })
+      : '') +
+    '</section>'
+  )
+}