@vintasoftware/pr-review-canvas 0.2.0 → 0.4.0

package/static/js/interactions.js

@@ -27,13 +27,25 @@ import { flash, scrollIntoViewSafe } from './dom.js'
 import { refreshProgress } from './header.js'
 import { keyAction, openHelpDialog } from './keyboard.js'
 import { pointAnchorId, sanitizeKey } from './keys.js'
-import { getRenderContext, pathSet, setCardRenderedHook, setRenderContext, updateRenderState } from './layers.js'
+import {
+  getRenderContext,
+  pathSet,
+  setCardRenderedHook,
+  setRenderContext,
+  updateRenderState,
+} from './layers.js'
 import { buildNavOrder, layerOf, nextFile, nextLayer, prevFile, prevLayer } from './nav.js'
 import { issueCommentHtml } from './overview.js'
 import { applyDismissed, pointToMarkdown, postedUrls } from './points.js'
 import { layerProgress } from './progress.js'
 import { lineRefFromEvent, markSelection, selectionReducer } from './selection.js'
-import { fillSignoffDialog, openSignoffDialog, showSignoffError, showSignoffResult, signoffBody } from './signoff.js'
+import {
+  fillSignoffDialog,
+  openSignoffDialog,
+  showSignoffError,
+  showSignoffResult,
+  signoffBody,
+} from './signoff.js'
 
 /** @typedef {NonNullable<ReturnType<typeof import('./chat.js').wireChat>>} ChatHandle */
 
@@ -148,7 +160,8 @@ export function nextUnreviewedTarget(root, session, fromId, kind) {
     if (item === undefined || item.kind !== kind || item.other) {
       continue
     }
-    const id = item.kind === 'file' ? `layer:${item.layerId}/file:${sanitizeKey(item.path)}` : `layer:${item.layerId}`
+    const id =
+      item.kind === 'file' ? `layer:${item.layerId}/file:${sanitizeKey(item.path)}` : `layer:${item.layerId}`
     if (!session.isReviewed(id)) {
       return root.querySelector(`#${cssEscape(item.id)}`)
     }
@@ -167,7 +180,13 @@ export function nextUnreviewedTarget(root, session, fromId, kind) {
  */
 export function askTargetFor(root, focusId, focusPointId, selection) {
   if (selection !== null) {
-    return { kind: 'lines', path: selection.path, side: selection.side, start: selection.start, end: selection.end }
+    return {
+      kind: 'lines',
+      path: selection.path,
+      side: selection.side,
+      start: selection.start,
+      end: selection.end,
+    }
   }
   if (focusPointId !== null) {
     const el = root.querySelector(`[data-point="${cssEscape(focusPointId)}"] [data-act="ask"]`)
@@ -213,7 +232,8 @@ export function wireReview(root, session, opts = {}) {
 
   const paths = () => pathSet(getRenderContext()?.files ?? [])
   /** The diff key of a path, which is what the row ids are built from. */
-  const keyForPath = (/** @type {string} */ path) => getRenderContext()?.files.find(f => f.path === path)?.key ?? null
+  const keyForPath = (/** @type {string} */ path) =>
+    getRenderContext()?.files.find(f => f.path === path)?.key ?? null
   /** The time the page was drawn, which the comments it adds are timed against. */
   const renderNow = () => getRenderContext()?.now ?? new Date()
 
@@ -263,7 +283,10 @@ export function wireReview(root, session, opts = {}) {
     const answer = await session.postComment(input)
     const ctx = getRenderContext()
     if (answer.kind === 'review' && ctx !== null) {
-      setRenderContext({ ...ctx, comments: [...ctx.comments.filter(c => c.id !== answer.comment.id), answer.comment] })
+      setRenderContext({
+        ...ctx,
+        comments: [...ctx.comments.filter(c => c.id !== answer.comment.id), answer.comment],
+      })
       onState(session.state)
     }
     return answer
@@ -325,7 +348,8 @@ export function wireReview(root, session, opts = {}) {
    */
   const openComposer = (anchor, options, shape) => {
     closeComposers(root)
-    const node = shape === 'row' ? rowFrom(doc, composerRowHtml(options)) : nodeFrom(doc, composerHtml(options))
+    const node =
+      shape === 'row' ? rowFrom(doc, composerRowHtml(options)) : nodeFrom(doc, composerHtml(options))
     if (node === null) {
       return null
     }
@@ -364,7 +388,10 @@ export function wireReview(root, session, opts = {}) {
   }
 
   /** The inline comment that a posted review comment becomes on the page. */
-  const insertPostedReviewComment = (/** @type {Element} */ composerNode, /** @type {ReviewComment} */ comment) => {
+  const insertPostedReviewComment = (
+    /** @type {Element} */ composerNode,
+    /** @type {ReviewComment} */ comment
+  ) => {
     const thread = root.querySelector(
       `tr.thread[data-thread="${cssEscape(String(comment.inReplyToId ?? comment.id))}"]`
     )
@@ -461,9 +488,9 @@ export function wireReview(root, session, opts = {}) {
    * @param {string} id
    * @param {boolean} reviewed
    * @param {'layer' | 'file'} kind
-   * @param {{ quiet?: boolean }} [opts] `quiet` keeps a checkbox label intact while it runs
+   * @param {{ quiet?: boolean }} [reviewOptions] `quiet` keeps a checkbox label intact while it runs
    */
-  const markReviewed = (button, id, reviewed, kind, opts = {}) => {
+  const markReviewed = (button, id, reviewed, kind, reviewOptions = {}) => {
     const run = async () => {
       await session.setReviewed(id, reviewed)
       const parts = cardForReviewedId(root, id)
@@ -479,7 +506,7 @@ export function wireReview(root, session, opts = {}) {
       }
       toast(root, reviewed ? `${kind} marked reviewed` : `${kind} reopened`)
     }
-    void (opts.quiet === true
+    void (reviewOptions.quiet === true
       ? runControl(button, run)
       : runCommand(button, run, { pendingLabel: reviewed ? 'marking…' : 'unmarking…' }))
   }
@@ -589,8 +616,7 @@ export function wireReview(root, session, opts = {}) {
         postFromComposer(el, box)
       }
     },
-    'markdown-preview': el => toggleMarkdownPreview(el, true),
-    'markdown-write': el => toggleMarkdownPreview(el, false),
+    'markdown-toggle': el => toggleMarkdownPreview(el),
     'composer-cancel': () => {
       closeComposers(root)
     },
@@ -641,7 +667,11 @@ export function wireReview(root, session, opts = {}) {
         return
       }
       composerSeq += 1
-      openComposer(full, { id: `composer-${composerSeq}`, label: 'Reply', kind: 'reply', inReplyToId: id }, 'block')
+      openComposer(
+        full,
+        { id: `composer-${composerSeq}`, label: 'Reply', kind: 'reply', inReplyToId: id },
+        'block'
+      )
     },
     'pr-comment': () => {
       const host = root.querySelector('.conversation .pr-composer-host')
@@ -733,7 +763,10 @@ export function wireReview(root, session, opts = {}) {
     }
     event.preventDefault()
     setSelection(
-      selectionReducer(selection, event.shiftKey ? { type: 'shift-click', target } : { type: 'click', target })
+      selectionReducer(
+        selection,
+        event.shiftKey ? { type: 'shift-click', target } : { type: 'click', target }
+      )
     )
     if (selection !== null && !event.shiftKey) {
       setSelection(selectionReducer(selection, { type: 'drag-start', target }))
@@ -807,12 +840,18 @@ export function wireReview(root, session, opts = {}) {
         const item = order.find(i => i.id === focusId)
         const wanted = decided.action === 'reviewed-file' ? 'file' : 'layer'
         const found =
-          item?.kind === wanted ? item : wanted === 'layer' && focusId !== null ? layerOf(order, focusId) : null
+          item?.kind === wanted
+            ? item
+            : wanted === 'layer' && focusId !== null
+              ? layerOf(order, focusId)
+              : null
         if (found === null || found === undefined || found.kind === 'overview') {
           break
         }
         const id =
-          found.kind === 'file' ? `layer:${found.layerId}/file:${sanitizeKey(found.path)}` : `layer:${found.layerId}`
+          found.kind === 'file'
+            ? `layer:${found.layerId}/file:${sanitizeKey(found.path)}`
+            : `layer:${found.layerId}`
         const parts = cardForReviewedId(root, id)
         const box = parts?.card.querySelector('input[data-reviewed-id]')
         if (box instanceof HTMLElement) {

package/static/js/keyboard.js

@@ -35,7 +35,10 @@ export function isTypingTarget(target) {
   }
   const tag = target.tagName.toLowerCase()
   return (
-    tag === 'input' || tag === 'textarea' || tag === 'select' || target.closest('[contenteditable="true"]') !== null
+    tag === 'input' ||
+    tag === 'textarea' ||
+    tag === 'select' ||
+    target.closest('[contenteditable="true"]') !== null
   )
 }
 
@@ -97,7 +100,9 @@ export function keyAction(event, opts = {}) {
 export const HELP_DIALOG_ID = 'help-dialog'
 
 export function helpDialogHtml() {
-  const rows = KEY_HELP.map(r => `<tr><td class="mono">${esc(r.keys)}</td><td>${esc(r.what)}</td></tr>`).join('')
+  const rows = KEY_HELP.map(r => `<tr><td class="mono">${esc(r.keys)}</td><td>${esc(r.what)}</td></tr>`).join(
+    ''
+  )
   return (
     `<dialog id="${HELP_DIALOG_ID}" class="help" aria-labelledby="help-h"><form method="dialog">` +
     '<h2 id="help-h">Keyboard</h2>' +

package/static/js/layers.js

@@ -77,7 +77,7 @@ export function pathSet(files) {
 }
 
 /**
- * Layer title per hunk id, so a file card can say "2 more hunks in layer 4".
+ * Layer title per hunk id, so a file card can say "2 more chunks in layer 4".
  * @param {ReviewArtifact} artifact
  * @returns {Map<string, { layer: Layer, index: number }>}
  */
@@ -117,7 +117,8 @@ export function railInnerHtml(artifact, state, opts = {}) {
     .map((layer, i) => {
       const progress = layerProgress(layer, state)
       const dotClass = progress === 'done' ? 'dot on' : progress === 'partial' ? 'dot half' : 'dot'
-      const dotLabel = progress === 'done' ? 'reviewed' : progress === 'partial' ? 'in progress' : 'not started'
+      const dotLabel =
+        progress === 'done' ? 'reviewed' : progress === 'partial' ? 'in progress' : 'not started'
       const reviewed = filesReviewed(layer, state)
       const files = layer.files.length
       const meta = reviewed > 0 && reviewed < files ? `${reviewed} of ${files} files` : fileCount(files)
@@ -206,7 +207,11 @@ export function layerDiagramHtml(layer) {
  * @param {ReadonlySet<string>} paths
  */
 export function judgmentHtml(layer, paths) {
-  const block = /** @param {string} cls @param {string} label @param {string | undefined} text */ (cls, label, text) =>
+  const block = /** @param {string} cls @param {string} label @param {string | undefined} text */ (
+    cls,
+    label,
+    text
+  ) =>
     text === undefined
       ? ''
       : `<div class="judgment ${cls}"><h3 class="lbl">${label}</h3><div class="prose">${renderMarkdown(text, { paths })}</div></div>`
@@ -230,7 +235,9 @@ export function layerPointsHtml(layer, points, paths, state, posted) {
     return ''
   }
   const active = own.filter(p => state.dismissed[p.fingerprint] === undefined).length
-  const cards = own.map(p => pointCardHtml(p, posted === undefined ? { paths, state } : { paths, state, posted }))
+  const cards = own.map(p =>
+    pointCardHtml(p, posted === undefined ? { paths, state } : { paths, state, posted })
+  )
   return `<h3 class="lbl sub">Attention points · <span class="point-count">${active}</span></h3><ol class="findings">${cards.join('')}</ol>`
 }
 
@@ -245,14 +252,16 @@ export function renderFileCard(lf, entry, layer, ctx) {
   const key = entry?.key ?? sanitizeKey(lf.path)
   const cardReviewedId = `layer:${layer.id}/file:${sanitizeKey(lf.path)}`
   const cardReviewed = ctx.state?.reviewed[cardReviewedId] === true
-  const collapsed = cardReviewed || (lf.collapsed === true && lf.annotations.length === 0 && ctx.keepOpen !== true)
+  const collapsed =
+    cardReviewed || (lf.collapsed === true && lf.annotations.length === 0 && ctx.keepOpen !== true)
   const isFirst = !ctx.firstCardFor.has(key)
   ctx.firstCardFor.add(key)
   const id = isFirst ? fileAnchorId(key) : `${fileAnchorId(key)}-${layer.key}`
   const pills = entry
     ? `<span class="pill add">+${entry.additions}</span><span class="pill del">&minus;${entry.deletions}</span>`
     : ''
-  const status = entry && entry.status !== 'modified' ? `<span class="status">${esc(entry.status)}</span>` : ''
+  const status =
+    entry && entry.status !== 'modified' ? `<span class="status">${esc(entry.status)}</span>` : ''
   const path =
     entry?.oldPath !== undefined
       ? `<span class="old">${esc(entry.oldPath)} &rarr; </span>${esc(lf.path)}`
@@ -272,7 +281,7 @@ export function renderFileCard(lf, entry, layer, ctx) {
 }
 
 /**
- * "2 more hunks in layer 4 · title" when a file's other hunks live in other layers.
+ * "2 more chunks in layer 4 · title" when a file's other hunks live in other layers.
  * @param {LayerFile} lf
  * @param {FileEntry | undefined} entry
  * @param {Layer} layer
@@ -301,7 +310,7 @@ export function elsewhereHtml(lf, entry, layer, hunkIndex) {
   }
   const parts = [...others.values()].map(
     o =>
-      `${o.n} more ${o.n === 1 ? 'hunk' : 'hunks'} in <a href="#${esc(layerAnchorId(o.layer.key))}">${o.layer.kind === 'other' ? esc(o.layer.title) : `layer ${o.index + 1} · ${esc(o.layer.title)}`}</a>`
+      `${o.n} more ${o.n === 1 ? 'chunk' : 'chunks'} in <a href="#${esc(layerAnchorId(o.layer.key))}">${o.layer.kind === 'other' ? esc(o.layer.title) : `layer ${o.index + 1} · ${esc(o.layer.title)}`}</a>`
   )
   return `<div class="more-hunks">${parts.join(' · ')}</div>`
 }
@@ -411,7 +420,8 @@ export function hydrateFileCard(card, ctx, opts = {}) {
   const entry = ctx.files.find(f => f.key === key)
   const patch = ctx.patches?.[key]
   if (!entry || patch === undefined) {
-    host.innerHTML = '<div class="unavailable">Diff not available locally. Fetch the PR head and reload.</div>'
+    host.innerHTML =
+      '<div class="unavailable">Diff not available locally. Fetch the PR head and reload.</div>'
     return { rendered: false, deferred: false, placed: 0, missed: 0 }
   }
   const lines = patchLineCount(patch)
@@ -432,10 +442,10 @@ export function hydrateFileCard(card, ctx, opts = {}) {
         async () => {
           hydrateFileCard(card, ctx, { force: true })
           // The host element now holds a drawn diff, so a later link into it leaves it alone.
-          const host = card.closest('pr-file')
-          if (host instanceof PrFileElement) {
-            host.rendered = true
-            host.deferred = false
+          const fileHost = card.closest('pr-file')
+          if (fileHost instanceof PrFileElement) {
+            fileHost.rendered = true
+            fileHost.deferred = false
           }
         },
         { pendingLabel: 'drawing…' }
@@ -450,7 +460,9 @@ export function hydrateFileCard(card, ctx, opts = {}) {
   const layer = ctx.artifact.layers.find(l => l.id === layerId)
   const lf = layer?.files.find(f => f.path === entry.path)
   const annotations = lf?.annotations ?? []
-  const points = ctx.artifact.points.filter(p => p.path === entry.path && hunkIds.has(hunkIdForPoint(p, entry)))
+  const points = ctx.artifact.points.filter(
+    p => p.path === entry.path && hunkIds.has(hunkIdForPoint(p, entry))
+  )
   const threads = threadsForHunks(ctx.comments, entry, hunkIds)
   const { placed, missed } = applyDecorations(card, key, {
     annotations,

package/static/js/links.js

@@ -99,14 +99,20 @@ export function resolveLink(link, targets) {
     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)` }
+    return {
+      ok: false,
+      message: `${link.path}#${link.n} does not exist (file has ${file.hunks.length} chunks)`,
+    }
   }
   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: false,
+        message: `${link.path}:${range} (${link.side}) is not inside one chunk of the diff (${hunkLineRanges(file.hunks, link.side)})`,
+      }
     }
   }
   return { ok: true }
@@ -143,7 +149,7 @@ export function linkLabel(link) {
     case 'file':
       return link.path
     case 'hunk':
-      return `${link.path} hunk ${link.n}`
+      return `${link.path} chunk ${link.n}`
     case 'line':
       return `${link.path}:${link.start}${link.end !== link.start ? `-${link.end}` : ''}${link.side === 'old' ? ' (old)' : ''}`
   }

package/static/js/markdown.js

@@ -147,6 +147,28 @@ function decorateLinks(root) {
   }
 }
 
+/**
+ * GitHub images can require a signed-in browser session. Link to them so the browser
+ * can open them on their own origin, where that session is available.
+ * @param {HTMLImageElement} img
+ * @param {string} src
+ */
+function linkGitHubImage(img, src) {
+  const link = document.createElement('a')
+  link.href = src
+  const alt = img.alt.trim()
+  link.textContent = alt ? `View image on GitHub: ${alt}` : 'View image on GitHub'
+  if (img.title) link.title = img.title
+  const enclosingLink = img.closest('a')
+  if (enclosingLink) {
+    // Keep the original destination without creating nested links.
+    img.replaceWith(document.createTextNode(alt || 'Image'))
+    enclosingLink.after(document.createTextNode(' '), link)
+  } else {
+    img.replaceWith(link)
+  }
+}
+
 /**
  * One markdown text, without mermaid blocks.
  * @param {string} src markdown
@@ -172,8 +194,13 @@ function renderProse(src, opts) {
     if (!ALLOWED_TAGS.includes(element.tagName.toLowerCase())) element.remove()
   }
   for (const img of root.querySelectorAll('img')) {
-    if (!/^https:\/\//i.test(img.getAttribute('src') ?? '')) {
+    const imageSrc = img.getAttribute('src') ?? ''
+    if (!/^https:\/\//i.test(imageSrc)) {
       img.remove()
+    } else if (
+      /^https:\/\/(?:github\.com|(?:[a-z0-9-]+\.)*githubusercontent\.com)(?::443)?\//i.test(imageSrc)
+    ) {
+      linkGitHubImage(img, imageSrc)
     } else {
       img.loading = 'lazy'
       img.referrerPolicy = 'no-referrer'

package/static/js/nav.js

@@ -46,7 +46,8 @@ export function buildNavOrder(artifact) {
  * @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 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]
@@ -87,5 +88,7 @@ export function layerOf(order, id) {
   if (!item || item.kind === 'overview') {
     return null
   }
-  return item.kind === 'layer' ? item : (order.find(i => i.kind === 'layer' && i.layerId === item.layerId) ?? null)
+  return item.kind === 'layer'
+    ? item
+    : (order.find(i => i.kind === 'layer' && i.layerId === item.layerId) ?? null)
 }

package/static/js/overview.js

@@ -2,11 +2,32 @@
 /** @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'
+import { buildThreads } from './threads.js'
+
+/**
+ * @param {PrBundle['comments']['reviewComments']} comments
+ * @param {Date} now
+ */
+function outdatedCommentsHtml(comments, now) {
+  const threads = [...buildThreads(comments).outdated.values()].flat()
+  if (!threads.length) return ''
+  const count = threads.reduce((total, thread) => total + 1 + thread.replies.length, 0)
+  const entries = threads
+    .map(thread => {
+      const line = thread.root.originalLine
+      return (
+        `<div class="body"><p class="muted small">${esc(thread.path)}${line === null ? '' : `:${line} (original)`}${thread.resolved ? ' · resolved' : ''}</p>` +
+        [thread.root, ...thread.replies].map(comment => issueCommentHtml(comment, now)).join('') +
+        '</div>'
+      )
+    })
+    .join('')
+  return `<details class="outdated-comments">${detailsSummaryHtml(`<span>Outdated comments · ${count}</span>`, 'Toggle outdated comments')}${entries}</details>`
+}
 
 /**
  * "What changes": the PR-wide summary as one prose block.
@@ -61,7 +82,12 @@ export function conversationHtml(comments, now) {
  */
 export function renderOverview(bundle, ctx) {
   const artifact = bundle.artifact
-  const active = artifact ? artifact.points.filter(p => bundle.state.dismissed[p.fingerprint] === undefined) : []
+  const reviews = (bundle.comments.reviews ?? []).filter(
+    review => review.state !== 'COMMENTED' || review.body.trim().length > 0
+  )
+  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>`
@@ -72,8 +98,10 @@ export function renderOverview(bundle, ctx) {
     `<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>` : '') +
+    (reviews.length
+      ? `<details class="review-history">${detailsSummaryHtml(`<span>Review history · ${reviews.length}</span>`, 'Toggle review history')}${reviews.map(review => `<div class="body review-entry"><span class="pill">${esc(review.state.toLowerCase().replaceAll('_', ' '))}</span>${issueCommentHtml(review, ctx.now)}</div>`).join('')}</details>`
+      : '') +
+    outdatedCommentsHtml(bundle.comments.reviewComments, ctx.now) +
     (artifact
       ? dismissedListHtml(artifact.points, bundle.state, {
           paths: ctx.paths,

package/static/js/points.js

@@ -5,6 +5,7 @@
 import { askButtonHtml } from './ask.js'
 import { viewCommentHtml } from './comment-link.js'
 import { esc } from './dom.js'
+import { postToLabel } from './host.js'
 import { layerAnchorId, pointAnchorId } from './keys.js'
 import { renderMarkdown } from './markdown.js'
 
@@ -80,7 +81,7 @@ export function pointCommandsHtml(p, opts = {}) {
     '<span class="tbtns">' +
     `<button class="cmd" type="button" data-copy="${esc(pointToMarkdown(p))}">copy</button>` +
     (opts.postedUrl === undefined
-      ? `<button class="cmd" type="button" data-act="point-post" data-point="${esc(p.id)}" data-needs-post>post to github</button>`
+      ? `<button class="cmd" type="button" data-act="point-post" data-point="${esc(p.id)}" data-needs-post>${postToLabel()}</button>`
       : viewCommentHtml(opts.postedUrl)) +
     askButtonHtml(pointContext(p)) +
     toggle +
@@ -190,7 +191,8 @@ export function applyDismissed(root, points, state, ctx) {
   }
   const host = root.querySelector('.dismissed-list')
   if (host !== null) {
-    const expanded = host.querySelector('[data-act="show-dismissed"]')?.getAttribute('aria-expanded') === 'true'
+    const expanded =
+      host.querySelector('[data-act="show-dismissed"]')?.getAttribute('aria-expanded') === 'true'
     const template = document.createElement('template')
     template.innerHTML = dismissedListHtml(points, state, ctx, expanded)
     const next = template.content.firstElementChild
@@ -219,7 +221,7 @@ export function pointRowHtml(p, ctx) {
   const dismissed = ctx.state?.dismissed[p.fingerprint] !== undefined
   const posted = postedFor(p, ctx)
   return (
-    `<tr class="ifind ${p.level}" data-point="${esc(p.id)}" data-fingerprint="${esc(p.fingerprint)}"${dismissed ? ' hidden' : ''}><td class="ln" colspan="3"></td><td class="code x">` +
+    `<tr class="ifind ${p.level}" data-point="${esc(p.id)}" data-fingerprint="${esc(p.fingerprint)}"${dismissed ? ' hidden' : ''}><td class="code x" colspan="4">` +
     `<div class="f-title">${squareHtml(p)}<span>${esc(p.title)}</span><span class="pill kind">${esc(p.kind)}</span></div>` +
     `<div class="prose">${renderMarkdown(p.body, { paths: ctx.paths })}</div>` +
     `${pointCommandsHtml(p, { postedUrl: posted })}</td></tr>`

package/static/js/progress.js

@@ -45,5 +45,6 @@ export function progressSummary(artifact, state) {
  * @param {PrState} state
  */
 export function filesReviewed(layer, state) {
-  return layer.files.filter(f => state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true).length
+  return layer.files.filter(f => state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true)
+    .length
 }

package/static/js/proposed-comment.js

@@ -63,7 +63,10 @@ export function parseProposedComment(source, targets) {
     return { reason: 'side must be "new" or "old"' }
   }
   const side = sideRaw === 'old' ? 'old' : 'new'
-  if (startRaw !== undefined && (typeof startRaw !== 'number' || !Number.isInteger(startRaw) || startRaw <= 0)) {
+  if (
+    startRaw !== undefined &&
+    (typeof startRaw !== 'number' || !Number.isInteger(startRaw) || startRaw <= 0)
+  ) {
     return { reason: 'startLine must be a line number' }
   }
   const startLine = typeof startRaw === 'number' ? startRaw : undefined

package/static/js/quick-questions.js

@@ -18,7 +18,8 @@ export const ASK_SOMETHING_ELSE = 'ask something else…'
 export function quickMenuHtml() {
   const items = [...QUICK_QUESTIONS, ASK_SOMETHING_ELSE]
     .map(
-      (q, i) => `<button class="qq-item" type="button" role="menuitem" tabindex="-1" data-qq="${i}">${esc(q)}</button>`
+      (q, i) =>
+        `<button class="qq-item" type="button" role="menuitem" tabindex="-1" data-qq="${i}">${esc(q)}</button>`
     )
     .join('')
   return `<div class="qq-menu" id="${QQ_MENU_ID}" role="menu" aria-label="Quick questions" hidden>${items}</div>`

package/static/js/regenerate.js

@@ -65,5 +65,8 @@ export function canvasChanged(current, next) {
   if (current.status !== 'ready' || !current.artifact || !current.canvas) {
     return true
   }
-  return next.canvas.headSha !== current.canvas.headSha || next.artifact.generatedAt !== current.artifact.generatedAt
+  return (
+    next.canvas.headSha !== current.canvas.headSha ||
+    next.artifact.generatedAt !== current.artifact.generatedAt
+  )
 }

package/static/js/review-session.js

@@ -24,12 +24,13 @@ import { sanitizeKey } from './keys.js'
 
 /**
  * @typedef {{
- *   prNumber: number,
+ *   prNumber: import('./contract-types.js').ReviewKey,
  *   artifact: ReviewArtifact,
  *   files: ReadonlyArray<FileEntry>,
  *   state: PrState,
  *   capabilities: Capabilities,
  *   headSha: string,
+ *   canvasSha?: string,
  *   api?: Partial<SessionApi>,
  *   onState?: (state: PrState) => void,
  * }} SessionOptions
@@ -193,7 +194,11 @@ export function createReviewSession(options) {
       return change(
         current => withEntry(current, 'reviewed', id, reviewed ? true : undefined),
         current => withEntry(current, 'reviewed', id, before),
-        () => api.putReviewed(options.prNumber, id, reviewed, { headSha: options.headSha })
+        () =>
+          api.putReviewed(options.prNumber, id, reviewed, {
+            headSha: options.headSha,
+            ...(options.canvasSha === undefined ? {} : { canvasSha: options.canvasSha }),
+          })
       )
     },
     /**

package/static/js/settings.js

@@ -65,12 +65,13 @@ export function settingsDialogHtml(data, agents) {
     `<p class="muted small mono">${esc(data.file)}</p>` +
     '<div class="panel-ro"><h3>Project config (read-only)</h3>' +
     `<ul class="plain"><li>chat enabled: ${project.chatEnabled ? 'yes' : 'no'}</li>` +
+    `<li>canvas kept for an identical diff: ${project.keepForIdenticalDiff ? 'yes' : 'no'}</li>` +
     `<li>rulebook: ${esc(project.rulebook ?? 'none')}</li>` +
     `<li>configured layer suggestions: ${project.layers}</li>` +
     `<li>high-risk patterns: ${project.highRisk}</li>` +
     `<li>max repair rounds: ${project.maxRepairRounds}</li>` +
     `<li>inline diff max lines: ${project.inlineDiffMaxLines}</li>` +
-    `<li>small change set: ${project.smallPrHunks} hunks</li></ul>` +
+    `<li>small change set: ${project.smallPrHunks} chunks</li></ul>` +
     `<p class="muted small mono">${esc(project.file ?? 'built-in defaults (no pr-review.config.yml)')}</p></div>` +
     '<p class="probe-result" role="status"></p>' +
     '<div class="dialog-actions">' +

package/static/js/signoff.js

@@ -4,8 +4,9 @@
 /** @typedef {import('./contract-types.js').PrState} PrState */
 /** @typedef {import('./contract-types.js').ReviewArtifact} ReviewArtifact */
 /** @typedef {import('./contract-types.js').ReviewBodyResponse} ReviewBodyResponse */
-import { previewControlsHtml, setDisabledReason } from './composer.js'
+import { previewControlsHtml, setDisabledReason, setMarkdownPreview } from './composer.js'
 import { esc } from './dom.js'
+import { hostLabel } from './host.js'
 import { layerProgress } from './progress.js'
 
 export const SIGNOFF_DIALOG_ID = 'signoff-dialog'
@@ -20,7 +21,9 @@ export const LOADING_REASON = 'the review body is still loading'
  * @returns {string | null}
  */
 export function approveBlockedReason(artifact, state) {
-  const [first, ...rest] = artifact.layers.filter(l => l.kind !== 'other' && layerProgress(l, state) !== 'done')
+  const [first, ...rest] = artifact.layers.filter(
+    l => l.kind !== 'other' && layerProgress(l, state) !== 'done'
+  )
   if (first === undefined) {
     return null
   }
@@ -33,7 +36,7 @@ export function approveBlockedReason(artifact, state) {
  * @param {'APPROVE' | 'REQUEST_CHANGES'} event
  */
 export function signoffTitle(event) {
-  return event === 'APPROVE' ? 'Approve on GitHub' : 'Request changes on GitHub'
+  return event === 'APPROVE' ? `Approve on ${hostLabel()}` : `Request changes on ${hostLabel()}`
 }
 
 /**
@@ -44,7 +47,7 @@ export function signoffDialogHtml(opts) {
   return (
     `<dialog id="${SIGNOFF_DIALOG_ID}" class="signoff-dialog" aria-labelledby="signoff-h">` +
     `<h2 id="signoff-h">${esc(signoffTitle(opts.event))}</h2>` +
-    '<p class="hint">This posts a review on GitHub as you. Edit the body first if you want to.</p>' +
+    `<p class="hint">This posts a review on ${esc(hostLabel())} as you. Edit the body first if you want to.</p>` +
     '<p class="signoff-target muted mono"></p>' +
     '<label class="sr" for="signoff-body">Review body</label>' +
     previewControlsHtml() +
@@ -75,7 +78,7 @@ export function openSignoffDialog(root, opts) {
   if (!(dialog instanceof HTMLDialogElement)) {
     throw new Error('sign-off dialog did not render')
   }
-  dialog.querySelector('[data-act="markdown-write"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  setMarkdownPreview(dialog, false)
   dialog.setAttribute('data-event', opts.event)
   const heading = dialog.querySelector('#signoff-h')
   if (heading !== null) {
@@ -129,7 +132,7 @@ export function showSignoffResult(dialog, review) {
   const result = dialog.querySelector('.signoff-result')
   if (result !== null) {
     result.textContent = 'Posted · '
-    result.append(externalLink(review.url, 'see it on GitHub'))
+    result.append(externalLink(review.url, `see it on ${hostLabel()}`))
   }
   return result
 }