@vintasoftware/pr-review-canvas 0.3.0 → 0.4.0

package/static/js/empty-state.js

@@ -41,18 +41,42 @@ export function dropReducer(state, event) {
 }
 
 /**
- * The file the user picked has to be a canvas zip. The name is only a first check; the server
- * reads the zip itself and answers CANVAS_INVALID when it is not one.
+ * A looser form of the export name grammar `parseCanvasZipName` (src/canvas/name.ts) holds for the
+ * server: enough to catch the wrong file before it is uploaded, never a second copy of the check.
+ */
+const CANVAS_NAME_RE = /^(?:pr-([1-9]\d*)|ref)-.+-canvas\.zip$/i
+
+/**
+ * The file the user picked has to be a canvas zip for this pull request. The name is only a first
+ * check; the server reads the zip itself and answers CANVAS_INVALID or CANVAS_PR_MISMATCH when it
+ * is not one. A canvas exported before the PR existed is named `ref-` and names no PR.
  * @param {string} filename
+ * @param {number} prNumber the PR the page is on
  * @returns {string | null} the problem, or null when the name is fine
  */
-export function validateCanvasFilename(filename) {
+export function validateCanvasFilename(filename, prNumber) {
   if (!filename.toLowerCase().endsWith('.zip')) {
     return 'that is not a zip file'
   }
-  return /^(?:pr-[1-9]\d*|ref)-.+-canvas\.zip$/i.test(filename)
-    ? null
-    : 'that zip is not a review canvas export'
+  const match = CANVAS_NAME_RE.exec(filename)
+  if (!match) {
+    return 'that zip is not a review canvas export'
+  }
+  const named = match[1] === undefined ? undefined : Number(match[1])
+  if (named !== undefined && named !== prNumber) {
+    return `that canvas was exported for PR #${named}, not #${prNumber}`
+  }
+  return null
+}
+
+/**
+ * The refusals no retry can clear: the zip is a canvas, of the wrong thing. Anything else the
+ * discovery reports is a download that failed, which the link and the drop zone can still rescue.
+ * @type {Record<string, string>}
+ */
+const SHARED_CANVAS_REFUSALS = {
+  'pr-mismatch': 'it was exported for another pull request',
+  'name-mismatch': 'it was exported from another repository',
 }
 
 /**
@@ -68,9 +92,15 @@ export function sharedCanvasCalloutHtml(bundle) {
   if (shared.downloadable) {
     return `<div class="callout" role="status">A canvas is attached to this PR (${name}) &mdash; importing&hellip;</div>`
   }
+  const refused = SHARED_CANVAS_REFUSALS[shared.reason ?? '']
+  const problem = refused ?? `could not be downloaded (${esc(shared.reason ?? 'unknown')})`
+  const next =
+    refused === undefined
+      ? `<a href="${esc(shared.url)}" target="_blank" rel="noopener noreferrer">Download it</a> and drop it here. `
+      : 'Ask its author for a canvas of this pull request, or generate one. '
   return (
-    `<div class="callout warn" role="status">A canvas is attached to this PR (${name}) but could not be downloaded (${esc(shared.reason ?? 'unknown')}). ` +
-    `<a href="${esc(shared.url)}" target="_blank" rel="noopener noreferrer">Download it</a> and drop it here. ` +
+    `<div class="callout warn" role="status">A canvas is attached to this PR (${name}) but ${problem}. ` +
+    next +
     '<button class="cmd" type="button" id="fetch-shared">fetch again</button></div>'
   )
 }
@@ -86,6 +116,16 @@ function skillCommandHtml(bundle) {
   )
 }
 
+/**
+ * What each screen with no canvas is called. A local review names the work it describes, because
+ * `branch` and `uncommitted` are two different reads of the same clone.
+ * @type {Record<string, string>}
+ */
+const LOCAL_HEADINGS = {
+  branch: 'No review canvas for this branch yet',
+  uncommitted: 'No review canvas for your uncommitted work yet',
+}
+
 /** @returns {string} */
 function dropZoneHtml() {
   return (
@@ -97,18 +137,20 @@ function dropZoneHtml() {
 }
 
 /**
- * The `missing` screen: the skill command with its copy command, the drop zone, the callout.
+ * The `missing` screen: the skill command with its copy command, the drop zone, the callout. A
+ * local review has no pull request to carry an attached canvas, so it shows neither of the last two.
  * @param {PrBundle} bundle
  * @returns {string}
  */
 export function renderEmptyState(bundle) {
+  const heading = LOCAL_HEADINGS[bundle.local ?? ''] ?? 'No review canvas for this PR yet'
+  const transfer = bundle.local ? '' : dropZoneHtml() + sharedCanvasCalloutHtml(bundle)
   return (
     '<section class="panel empty" id="empty-state" aria-labelledby="es-h">' +
-    '<div class="panel-h"><h2 id="es-h">No review canvas for this PR yet</h2></div>' +
+    `<div class="panel-h"><h2 id="es-h">${heading}</h2></div>` +
     '<div class="body center">' +
     skillCommandHtml(bundle) +
-    dropZoneHtml() +
-    sharedCanvasCalloutHtml(bundle) +
+    transfer +
     '</div></section>'
   )
 }
@@ -116,11 +158,15 @@ export function renderEmptyState(bundle) {
 /**
  * How far the canvas is from the head, in words.
  * @param {NonNullable<PrBundle['stale']>} stale
+ * @param {PrBundle['local']} [local] which local review this is, when it is one
  * @returns {string}
  */
-export function staleSummary(stale) {
+export function staleSummary(stale, local) {
   const canvas = stale.canvasHeadSha.slice(0, 7)
   const head = stale.currentHeadSha.slice(0, 7)
+  if (local !== undefined) {
+    return `The canvas is for ${canvas}; your work has moved on to ${head} since it was generated.`
+  }
   if (stale.relation === 'unrelated') {
     return `The canvas is for ${canvas}, which is not in this branch any more; the head is ${head}.`
   }
@@ -132,15 +178,36 @@ export function staleSummary(stale) {
  * The bar that stays on screen while a stale canvas is shown, so the reader is never misled about
  * which commit the diffs come from.
  * @param {NonNullable<PrBundle['stale']>} stale
+ * @param {PrBundle['local']} [local]
  * @returns {string}
  */
-export function staleBarHtml(stale) {
+export function staleBarHtml(stale, local) {
   return (
-    `<div class="stale-bar" role="status"><strong>Canvas is outdated.</strong> You are reading an older commit. ${esc(staleSummary(stale))} ` +
+    `<div class="stale-bar" role="status"><strong>Canvas is outdated.</strong> You are reading an older commit. ${esc(staleSummary(stale, local))} ` +
     '<button class="cmd" type="button" id="stale-generate" aria-haspopup="dialog">generate for current head</button></div>'
   )
 }
 
+/**
+ * The note above a canvas that was generated for another commit of the pull request whose diff is
+ * identical to the head's, so the canvas still applies.
+ * @param {NonNullable<PrBundle['carriedOver']>} carried
+ * @returns {string}
+ */
+export function carriedOverBarHtml(carried) {
+  const canvas = carried.canvasHeadSha.slice(0, 7)
+  const head = carried.currentHeadSha.slice(0, 7)
+  // How far the head moved, when the bundle knows: a head that reached the same diff by a rebase
+  // is no number of commits away from the canvas's commit, so the note says nothing about it.
+  const behind = carried.commitsBehind
+  const distance = behind === undefined ? '' : `, ${behind} commit${behind === 1 ? '' : 's'} later,`
+  return (
+    `<div class="stale-bar carried-over-bar" role="status"><strong>Canvas still applies.</strong> ` +
+    `${esc(`It was generated for ${canvas}; the head ${head}${distance} has the identical diff.`)} ` +
+    '<button class="cmd" type="button" id="stale-generate" aria-haspopup="dialog">regenerate anyway</button></div>'
+  )
+}
+
 /**
  * The `stale` screen: the same card as the empty state, plus the two ways forward.
  * @param {PrBundle} bundle
@@ -148,16 +215,16 @@ export function staleBarHtml(stale) {
  */
 export function renderStaleState(bundle) {
   const stale = bundle.stale
+  const transfer = bundle.local ? '' : dropZoneHtml() + sharedCanvasCalloutHtml(bundle)
   return (
     '<section class="panel empty" id="empty-state" aria-labelledby="es-h">' +
     '<div class="panel-h"><h2 id="es-h">Canvas is outdated</h2></div>' +
     '<div class="body center">' +
-    `<p class="hint">${stale ? esc(staleSummary(stale)) : ''}</p>` +
+    `<p class="hint">${stale ? esc(staleSummary(stale, bundle.local)) : ''}</p>` +
     '<div class="cmdbox"><button class="cmd fill" type="button" id="view-stale">view stale canvas</button>' +
     '<button class="cmd" type="button" id="stale-generate" aria-haspopup="dialog">generate for current head</button></div>' +
     skillCommandHtml(bundle) +
-    dropZoneHtml() +
-    sharedCanvasCalloutHtml(bundle) +
+    transfer +
     '</div></section>'
   )
 }

package/static/js/errors.js

@@ -36,8 +36,8 @@ export const ERROR_CARDS = {
     action: 'Start pr-review from a clone, or pass --repo <dir>.',
   },
   NO_ORIGIN: {
-    title: 'No GitHub origin',
-    action: 'Add an origin remote that points at github.com, then restart the server.',
+    title: 'No GitHub or GitLab origin',
+    action: 'Add an origin remote that points at github.com or GitLab, then restart the server.',
   },
   GIT_ERROR: {
     title: 'A git command failed',
@@ -55,6 +55,18 @@ export const ERROR_CARDS = {
     title: 'GitHub refused the request',
     action: 'Retry in a moment. A rate limit or an outage both read like this.',
   },
+  GLAB_MISSING: {
+    title: 'GitLab CLI is not installed',
+    action: 'Install glab from https://gitlab.com/gitlab-org/cli and log in, then retry.',
+  },
+  GLAB_UNAUTHENTICATED: {
+    title: 'GitLab CLI is not logged in',
+    action: 'Run glab auth login in a terminal, then retry.',
+  },
+  GITLAB_API_ERROR: {
+    title: 'GitLab refused the request',
+    action: 'Retry in a moment. A rate limit or an outage both read like this.',
+  },
   PR_NOT_FOUND: {
     title: 'Pull request not found',
     action: 'Check the number, and that this clone’s origin is the right repository.',
@@ -71,6 +83,10 @@ export const ERROR_CARDS = {
     title: 'That canvas belongs to another repository',
     action: 'Import a canvas exported from this repository.',
   },
+  CANVAS_PR_MISMATCH: {
+    title: 'That canvas belongs to another pull request',
+    action: 'Import the canvas exported for this PR, or generate one for it with the skill.',
+  },
   CANVAS_TOO_LARGE: {
     title: 'That canvas is too large',
     action: 'A canvas zip holds two JSON files and stays under 20 MB. Export it again.',
@@ -88,12 +104,12 @@ export const ERROR_CARDS = {
     action: 'Remove it, or run pr-review install-skill --force.',
   },
   COMMENT_FORBIDDEN: {
-    title: 'This GitHub login cannot post here',
-    action: 'Run gh auth refresh -h github.com -s repo, then retry.',
+    title: 'This login cannot post here',
+    action: 'Check the account’s repository access and token permissions, then retry.',
   },
   COMMENT_LINE_NOT_IN_DIFF: {
-    title: 'GitHub takes comments only on lines the diff shows',
-    action: 'Pick a line inside a hunk of this pull request.',
+    title: 'Comments must sit on lines the diff shows',
+    action: 'Pick a line inside a chunk of this pull request.',
   },
   SIGNOFF_INCOMPLETE: {
     title: 'Some layers are not reviewed yet',

package/static/js/header.js

@@ -3,6 +3,7 @@
 /** @typedef {import('./contract-types.js').RiskTag} RiskTag */
 import { setDisabledReason } from './composer.js'
 import { esc, timeAgo } from './dom.js'
+import { authorProfileUrl, currentHost, hostLabel } from './host.js'
 import { refreshRail } from './layers.js'
 import { progressSummary } from './progress.js'
 import { approveBlockedReason } from './signoff.js'
@@ -41,6 +42,19 @@ export function largePrNoticeHtml(bundle) {
   )
 }
 
+/**
+ * The author, linked to their page on the forge. A local review's author is the name this clone
+ * commits as, which is no forge login, so it stays plain text.
+ * @param {string} author
+ * @param {boolean} local
+ * @returns {string}
+ */
+function authorHtml(author, local) {
+  return local
+    ? esc(author)
+    : `<a href="${esc(authorProfileUrl(author))}" target="_blank" rel="noopener noreferrer">${esc(author)}</a>`
+}
+
 /** @param {PrBundle['pr']} pr */
 export function statePill(pr) {
   const state = pr.state === 'open' && pr.draft ? 'draft' : pr.state
@@ -61,15 +75,24 @@ export function renderHeader(bundle, opts) {
     ? `<span class="pill agent">${esc(artifact.generator.agent)}${artifact.generator.model ? ` · ${esc(artifact.generator.model)}` : ''} · ${esc(artifact.generator.harness)}</span><span>generated ${esc(timeAgo(artifact.generatedAt, opts.now))}</span>`
     : ''
   const number = pr.number === null ? '' : `<span class="mono num">#${pr.number}</span>`
+  // Work that is not pushed has no page on the forge, and nothing to refresh from it either.
+  const local = bundle.local !== undefined
+  const forgeLink =
+    pr.url === ''
+      ? ''
+      : `<a class="cmd" href="${esc(pr.url)}" target="_blank" rel="noopener noreferrer">${esc(currentHost().kind)}</a>`
+  const refreshTitle = local
+    ? 'Snapshot the working tree again and redraw'
+    : `Fetch the latest PR, comments, and shared canvas from ${esc(hostLabel())}`
   const progress = ready ? progressHtml(artifact, bundle.state) : ''
   const risk = ready ? riskLineHtml(artifact.risk) : ''
   return (
     '<header class="hdr">' +
     `<div class="hdr-bar"><div class="brand"><span class="brand-wordmark"><img class="brand-icon" src="/static/brand.svg" width="32" height="32" alt="">PR review canvas</span><span class="mono muted">${esc(opts.host)}</span></div>` +
     '<div class="hdr-actions" role="group" aria-label="Canvas actions">' +
-    `<button class="cmd" type="button" id="regenerate" title="Generate a new canvas for this PR" aria-haspopup="dialog"${hasCanvas ? '' : ' disabled'}>regenerate</button>` +
-    `<button class="cmd" type="button" id="export-zip" title="Download this canvas as a zip to share on GitHub"${hasCanvas ? '' : ' disabled'}>export zip</button>` +
-    '<button class="cmd" type="button" id="refresh" title="Fetch the latest PR, comments, and shared canvas from GitHub">refresh</button>' +
+    `<button class="cmd" type="button" id="regenerate" title="Generate a new canvas for ${local ? 'this local work' : 'this PR'}" aria-haspopup="dialog"${hasCanvas ? '' : ' disabled'}>regenerate</button>` +
+    `<button class="cmd" type="button" id="export-zip" title="Download this canvas as a zip to share on ${esc(hostLabel())}"${hasCanvas ? '' : ' disabled'}>export zip</button>` +
+    `<button class="cmd" type="button" id="refresh" title="${refreshTitle}">refresh</button>` +
     `<button class="cmd" type="button" id="settings" data-act="settings" aria-haspopup="dialog"${bundle.chat.enabled || bundle.chat.acpx ? ' title="Configure the AI chat agent, model, and limits"' : ' disabled title="acpx is not installed"'}>settings</button>` +
     '<button class="cmd" type="button" data-act="help" title="Show keyboard shortcuts and review help" aria-haspopup="dialog">help</button>' +
     `<button class="cmd" type="button" id="skin-toggle" title="Switch between Terminal and GitHub styling">${esc(skinLabel(opts.skin))}</button>` +
@@ -77,8 +100,8 @@ export function renderHeader(bundle, opts) {
     '</div></div>' +
     '<div class="stripe" aria-hidden="true"></div>' +
     '<div class="hdr-title">' +
-    `<div class="title"><h1>${number}${esc(pr.title)}</h1><a class="cmd" href="${esc(pr.url)}" target="_blank" rel="noopener noreferrer">github</a></div>` +
-    `<p class="meta"><span>by <a href="https://github.com/${esc(pr.author)}" target="_blank" rel="noopener noreferrer">${esc(pr.author)}</a></span>` +
+    `<div class="title"><h1>${number}${esc(pr.title)}</h1>${forgeLink}</div>` +
+    `<p class="meta"><span>by ${authorHtml(pr.author, local)}</span>` +
     `<span class="mono">${esc(pr.headRef)} &rarr; ${esc(pr.baseRef)}</span>${statePill(pr)}` +
     `<span class="diffstat"><span class="ok">+${pr.additions}</span> <span class="bad">&minus;${pr.deletions}</span></span>${agent}</p>` +
     `${largePrNoticeHtml(bundle)}${risk}${progress}</div></header>`
@@ -95,13 +118,13 @@ export function progressHtml(artifact, state) {
   const p = progressSummary(artifact, state)
   const blocked = approveBlockedReason(artifact, state)
   const approve =
-    `<button class="cmd" type="button" id="approve" data-tooltip="Write and preview an approving review on GitHub" data-act="signoff" data-event="APPROVE" data-needs-post` +
-    `${blocked === null ? ' title="Write and preview an approving review on GitHub"' : ` disabled data-disabled-reason="${esc(blocked)}" title="${esc(blocked)}"`}>approve on github</button>`
+    `<button class="cmd" type="button" id="approve" data-tooltip="Write and preview an approving review on ${esc(hostLabel())}" data-act="signoff" data-event="APPROVE" data-needs-post` +
+    `${blocked === null ? ` title="Write and preview an approving review on ${esc(hostLabel())}"` : ` disabled data-disabled-reason="${esc(blocked)}" title="${esc(blocked)}"`}>approve on ${esc(currentHost().kind)}</button>`
   return (
     `<div class="progress"><div class="pline" role="progressbar" aria-valuenow="${p.done}" aria-valuemin="0" aria-valuemax="${p.total}" aria-label="Layers reviewed"><span style="width:${p.percent}%"></span></div>` +
     `<span class="ptext">${p.done} of ${p.total} layers reviewed</span></div>` +
     `<div class="signoff">${approve}` +
-    '<button class="cmd" type="button" id="request-changes" data-tooltip="Write and preview a review requesting changes on GitHub" title="Write and preview a review requesting changes on GitHub" data-act="signoff" data-event="REQUEST_CHANGES" data-needs-post>request changes</button>' +
+    `<button class="cmd" type="button" id="request-changes" data-tooltip="Write and preview a review requesting changes on ${esc(hostLabel())}" title="Write and preview a review requesting changes on ${esc(hostLabel())}" data-act="signoff" data-event="REQUEST_CHANGES" data-needs-post>request changes</button>` +
     '<span class="capability-note" role="status"></span></div>'
   )
 }

package/static/js/host.js

@@ -0,0 +1,40 @@
+// @ts-check
+// The forge this server talks to, as the page shell's bootstrap names it. One server serves one
+// host, so the words and links that depend on it are read from here rather than threaded through
+// every renderer.
+/** @typedef {import('./contract-types.js').PublicHost} PublicHost */
+
+/** @type {PublicHost} */
+const DEFAULT_HOST = { kind: 'github', label: 'GitHub', webBase: 'https://github.com' }
+
+/** @type {PublicHost} */
+let current = DEFAULT_HOST
+
+/** @param {PublicHost | undefined} host */
+export function setHost(host) {
+  current = host ?? DEFAULT_HOST
+}
+
+export function currentHost() {
+  return current
+}
+
+/** `GitHub` or `GitLab`, for sentences. */
+export function hostLabel() {
+  return current.label
+}
+
+/** `post to github` / `post to gitlab`, the command label. */
+export function postToLabel() {
+  return `post to ${current.kind}`
+}
+
+/** What a command says when this login may not post. */
+export function noPostingTitle() {
+  return `this ${current.label} login cannot post on this repository`
+}
+
+/** @param {string} author */
+export function authorProfileUrl(author) {
+  return `${current.webBase}/${author}`
+}

package/static/js/import-zone.js

@@ -56,7 +56,7 @@ export function wireDropZone(root, opts) {
     }
   }
   const send = async (/** @type {File} */ file) => {
-    const problem = validateCanvasFilename(file.name)
+    const problem = validateCanvasFilename(file.name, opts.prNumber)
     if (problem !== null) {
       apply({ type: 'fail', message: problem })
       return

package/static/js/interactions.js

@@ -616,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)
     },

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 }>}
  */
@@ -281,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
@@ -310,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>`
 }

package/static/js/links.js

@@ -101,7 +101,7 @@ export function resolveLink(link, targets) {
   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)`,
+      message: `${link.path}#${link.n} does not exist (file has ${file.hunks.length} chunks)`,
     }
   }
   if (link.kind === 'line') {
@@ -111,7 +111,7 @@ export function resolveLink(link, targets) {
       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)})`,
+        message: `${link.path}:${range} (${link.side}) is not inside one chunk of the diff (${hunkLineRanges(file.hunks, link.side)})`,
       }
     }
   }
@@ -149,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/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 +

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'
@@ -35,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()}`
 }
 
 /**
@@ -46,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() +
@@ -77,9 +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) {
@@ -133,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
 }

package/static/styles/commands.css

@@ -116,6 +116,12 @@
   color: var(--purple);
   border-color: currentColor;
 }
+/* The two local reviews: work with no pull request, so neither open nor closed. */
+.pill.branch,
+.pill.uncommitted {
+  color: var(--accent);
+  border-color: currentColor;
+}
 .pill.agent {
   color: var(--fg);
   border-color: var(--ink);

package/static/styles/panels.css

@@ -88,6 +88,10 @@
   box-shadow: 2px 2px 0 var(--shadow);
   font-size: 13px;
 }
+/* The same bar for a canvas that still applies: a note, not a warning. */
+.stale-bar.carried-over-bar {
+  background: var(--bg);
+}
 .notice {
   margin: 10px 0 0;
   padding: 6px 10px;

package/static/styles/review-actions.css

@@ -35,6 +35,7 @@ tr.sel-bar .lbl {
   outline: 2px solid var(--focus);
   outline-offset: 1px;
 }
+.preview-controls,
 .composer-actions {
   display: flex;
   gap: 12px;