@vintasoftware/pr-review-canvas 0.3.0 → 0.5.0

package/static/js/composer.js

@@ -6,6 +6,7 @@
 import { cssEscape } from './anchors.js'
 import { renderMarkdown } from './markdown.js'
 import { esc } from './dom.js'
+import { noPostingTitle, postToLabel } from './host.js'
 
 /**
  * @typedef {{
@@ -19,6 +20,8 @@ import { esc } from './dom.js'
  *   inReplyToId?: number,
  *   pointFingerprint?: string,
  *   body?: string,
+ *   pendingActive?: boolean,
+ *   pendingId?: string,
  * }} ComposerOptions
  */
 
@@ -32,6 +35,8 @@ function dataAttributes(opts) {
     ['data-start-line', opts.startLine],
     ['data-in-reply-to', opts.inReplyToId],
     ['data-fingerprint', opts.pointFingerprint],
+    ['data-pending-id', opts.pendingId],
+    ['data-pending-active', opts.pendingActive === true ? '1' : '0'],
   ]
   return pairs
     .filter(([, value]) => value !== undefined)
@@ -40,7 +45,57 @@ function dataAttributes(opts) {
 }
 
 /**
- * The box itself. The textarea carries the draft; the two commands act on the nearest
+ * The commands under the box, which are the ones the forge's own page offers.
+ *
+ * With no review open, a comment on a diff line can go either way: into a review it starts, or
+ * straight out on its own. Once a review is open it can only join it. Posting one comment on its
+ * own would publish it while the rest of the review is still held back, so that way is closed for
+ * as long as something is waiting, and the drafts are submitted together.
+ *
+ * A draft being edited has neither: it is already in the review, so it is only saved.
+ * @param {ComposerOptions} opts
+ */
+function commandsHtml(opts) {
+  const cancel = '<button class="cmd" type="button" data-act="composer-cancel">cancel</button>'
+  if (opts.pendingId !== undefined) {
+    return `<button class="cmd fill" type="button" data-act="pending-save">save</button>${cancel}`
+  }
+  const post = (lead = false) =>
+    `<button class="cmd${lead ? ' fill' : ''}" type="button" data-act="composer-post" data-needs-post>${postToLabel()}</button>`
+  if (opts.kind !== 'inline') {
+    return `${post(true)}${cancel}`
+  }
+  if (opts.pendingActive === true) {
+    return `<button class="cmd fill" type="button" data-act="composer-queue">add review comment</button>${cancel}`
+  }
+  return (
+    `<button class="cmd fill" type="button" data-act="composer-queue">start a review</button>` +
+    post() +
+    cancel
+  )
+}
+
+/** Keep an open inline composer's commands in step when another action starts a review.
+ * @param {ParentNode} root
+ * @param {boolean} active
+ */
+export function refreshComposerCommands(root, active) {
+  for (const box of root.querySelectorAll('.composer-box[data-kind="inline"]')) {
+    if (
+      box.hasAttribute('data-pending-id') ||
+      box.hasAttribute('data-posting') ||
+      (box.getAttribute('data-pending-active') === '1') === active
+    )
+      continue
+    const actions = box.querySelector('.composer-actions')
+    if (actions !== null)
+      actions.innerHTML = commandsHtml({ id: box.id, label: '', kind: 'inline', pendingActive: active })
+    box.setAttribute('data-pending-active', active ? '1' : '0')
+  }
+}
+
+/**
+ * The box itself. The textarea carries the draft; the commands act on the nearest
  * `.composer-box` ancestor.
  * @param {ComposerOptions} opts
  */
@@ -50,8 +105,7 @@ export function composerHtml(opts) {
     `<label class="sr" for="${esc(opts.id)}-t">${esc(opts.label)}</label>` +
     previewControlsHtml() +
     `<textarea id="${esc(opts.id)}-t" rows="3" placeholder="${esc(opts.label)}">${esc(opts.body ?? '')}</textarea>` +
-    '<div class="composer-actions"><button class="cmd fill" type="button" data-act="composer-post" data-needs-post>post to github</button>' +
-    '<button class="cmd" type="button" data-act="composer-cancel">cancel</button></div></div>'
+    `<div class="composer-actions">${commandsHtml(opts)}</div></div>`
   )
 }
 
@@ -80,6 +134,24 @@ export function composerBody(box) {
   return textarea instanceof HTMLTextAreaElement ? textarea.value.trim() : ''
 }
 
+/**
+ * What this composer would add to the pending review, or null when it is empty or is not a
+ * comment on a diff line. Only inline comments can wait: a reply and a PR-level comment have
+ * no place in a forge review's comment list.
+ * @param {Element} box
+ * @returns {Omit<import('./contract-types.js').AddPendingInput, 'headSha'> | null}
+ */
+export function composerPendingInput(box) {
+  const input = composerInput(box)
+  return input === null || input.kind !== 'inline' ? null : stripKind(input)
+}
+
+/** @param {Extract<PostCommentInput, { kind: 'inline' }>} input */
+function stripKind(input) {
+  const { kind: _kind, ...rest } = input
+  return rest
+}
+
 /**
  * The request that posts what this composer holds.
  * @param {Element} box
@@ -130,8 +202,41 @@ export function focusComposer(root, id) {
   return textarea
 }
 
+/** What a composer stands in for is marked with this while the box is open. */
+const CONCEALED = 'data-composer-concealed'
+
+/** The parts of a concealed host that the box stands in for. */
+const CONCEALED_PARTS = ':scope > .prose, :scope > .tbtns'
+
+/**
+ * Hides what a composer edits while the box is open, so the reader sees one of the two rather
+ * than the draft and its editor at once. The mark is what lets any close put it back.
+ * @param {Element} host the element the composer was appended to
+ */
+export function concealForComposer(host) {
+  host.setAttribute(CONCEALED, '')
+  for (const part of Array.from(host.querySelectorAll(CONCEALED_PARTS))) {
+    part.setAttribute('hidden', '')
+  }
+}
+
 /**
- * Removes every open composer under `root`, so only one is open at a time.
+ * Puts back everything a composer was concealing. Closing is the only way a box goes away, so
+ * doing this here covers cancel, Escape, and opening another box alike.
+ * @param {ParentNode} root
+ */
+export function revealConcealed(root) {
+  for (const host of Array.from(root.querySelectorAll(`[${CONCEALED}]`))) {
+    host.removeAttribute(CONCEALED)
+    for (const part of Array.from(host.querySelectorAll(CONCEALED_PARTS))) {
+      part.removeAttribute('hidden')
+    }
+  }
+}
+
+/**
+ * Removes every open composer under `root`, so only one is open at a time, and reveals whatever
+ * they were standing in for.
  * @param {ParentNode} root
  */
 export function closeComposers(root) {
@@ -141,15 +246,13 @@ export function closeComposers(root) {
     ;(row ?? box).remove()
     closed++
   }
+  revealConcealed(root)
   return closed
 }
 
-/** What a command says when this GitHub login may not post. */
-export const NO_POSTING_TITLE = 'this GitHub login cannot post on this repository'
-
 /**
  * Disables everything that posts when the probe said no, and enables it otherwise. A token
- * whose rights cannot be read ('unknown') stays enabled: GitHub answers for itself.
+ * whose rights cannot be read ('unknown') stays enabled: the host answers for itself.
  *
  * A command can be disabled for a reason of its own (the approve command before every layer is
  * read, a command whose request is still running). Those keep their state: this only adds and
@@ -159,7 +262,7 @@ export const NO_POSTING_TITLE = 'this GitHub login cannot post on this repositor
  */
 export function applyCapabilityGating(root, capabilities) {
   const blocked = capabilities.canComment === false
-  const reason = capabilities.reason ?? NO_POSTING_TITLE
+  const reason = capabilities.reason ?? noPostingTitle()
   for (const el of Array.from(root.querySelectorAll('[data-needs-post]'))) {
     if (!(el instanceof HTMLButtonElement) || el.getAttribute('aria-busy') === 'true') {
       continue
@@ -222,15 +325,19 @@ export function setDisabledReason(el, reason) {
   }
 }
 
+/** One command that swaps the box between writing and previewing; its label is the mode it goes to. */
 export function previewControlsHtml() {
-  return '<div class="preview-controls" role="group" aria-label="Markdown editor"><button class="cmd" type="button" data-act="markdown-write" aria-pressed="true">Write</button><button class="cmd" type="button" data-act="markdown-preview" aria-pressed="false">Preview</button></div><div class="markdown-preview prose" hidden></div>'
+  return '<div class="preview-controls"><button class="cmd" type="button" data-act="markdown-toggle">preview</button></div><div class="markdown-preview prose" hidden></div>'
 }
 
-/** @param {HTMLElement} button @param {boolean} preview */
-export function toggleMarkdownPreview(button, preview) {
-  const host = button.closest('.composer-box, .signoff-dialog')
-  const textarea = host?.querySelector('textarea')
-  const output = host?.querySelector('.markdown-preview')
+/**
+ * Puts one editor into write or preview mode.
+ * @param {Element} host the `.composer-box` or `.signoff-dialog` that holds the editor
+ * @param {boolean} preview
+ */
+export function setMarkdownPreview(host, preview) {
+  const textarea = host.querySelector('textarea')
+  const output = host.querySelector('.markdown-preview')
   if (!(textarea instanceof HTMLTextAreaElement) || !(output instanceof HTMLElement)) return
   if (preview)
     output.innerHTML = textarea.value.trim()
@@ -238,7 +345,15 @@ export function toggleMarkdownPreview(button, preview) {
       : '<p class="muted">Nothing to preview.</p>'
   textarea.hidden = preview
   output.hidden = !preview
-  host?.querySelector('[data-act="markdown-write"]')?.setAttribute('aria-pressed', String(!preview))
-  host?.querySelector('[data-act="markdown-preview"]')?.setAttribute('aria-pressed', String(preview))
+  const toggle = host.querySelector('[data-act="markdown-toggle"]')
+  if (toggle !== null) toggle.textContent = preview ? 'write' : 'preview'
   if (!preview) textarea.focus()
 }
+
+/** @param {HTMLElement} button */
+export function toggleMarkdownPreview(button) {
+  const host = button.closest('.composer-box, .signoff-dialog')
+  if (host === null) return
+  const output = host.querySelector('.markdown-preview')
+  setMarkdownPreview(host, output instanceof HTMLElement && output.hidden)
+}

package/static/js/contract-types.d.ts

@@ -1,6 +1,7 @@
 // Type-only bridge so the browser modules (JSDoc) see the same contract as the server.
 
 export type {
+  CarriedOverInfo,
   CanvasRelation,
   Capabilities,
   ChatStatus,
@@ -10,7 +11,9 @@ export type {
   PostCommentResponse,
   PostReviewResponse,
   PrBundle,
+  PublicHost,
   ReviewBodyResponse,
+  ReviewBootstrap,
   ReviewSummary,
   SharedCanvasFetchResponse,
   SharedCanvasInfo,
@@ -23,6 +26,7 @@ export type {
   ChatThreadsResponse,
   ChatTurn,
 } from '../../src/contract/chat.js'
+export type { ReviewKey } from '../../src/contract/review-key.js'
 export type {
   CommentsPayload,
   IssueComment,
@@ -34,6 +38,7 @@ export type {
   CodeFold,
   Diagram,
   FileEntry,
+  FoldLevel,
   Hunk,
   Layer,
   LayerFile,
@@ -57,3 +62,5 @@ export type {
   Theme,
 } from '../../src/contract/settings.js'
 export type { PrState } from '../../src/contract/state.js'
+export type { AddPendingInput, PendingComment } from '../../src/contract/pending.js'
+export type { ReviewEvent } from '../../src/contract/reviews.js'

package/static/js/diff-decorations.js

@@ -9,6 +9,7 @@ import { findRow, nearestRow } from './anchors.js'
 import { viewCommentHtml } from './comment-link.js'
 import { esc, fragment, avatarHtml, timeAgo } from './dom.js'
 import { renderMarkdown } from './markdown.js'
+import { pendingRowHtml } from './pending.js'
 import { pointRowHtml } from './points.js'
 
 const DECORATION = 'data-decoration'
@@ -146,6 +147,66 @@ export function insertThreadRow(card, key, t, opts) {
   return true
 }
 
+/**
+ * The drafts of one file, drawn under the lines they comment on. A draft whose line is not on the
+ * page (a fold, or a file drawn short) goes under the nearest row, like every other decoration.
+ * @param {HTMLElement} card
+ * @param {string} key
+ * @param {ReadonlyArray<import('./contract-types.js').PendingComment>} drafts
+ * @param {Date} now
+ * @returns {{ placed: number, missed: number }}
+ */
+export function insertPendingRows(card, key, drafts, now) {
+  let placed = 0
+  let missed = 0
+  for (const draft of drafts) {
+    const near = nearestRow(card, key, draft.side, draft.line)
+    if (near === null) {
+      missed++
+      continue
+    }
+    const row = firstRow(pendingRowHtml([draft], now))
+    row.setAttribute(DECORATION, 'pending')
+    row.dataset['pendingId'] = draft.id
+    row.dataset['pendingBody'] = draft.body
+    if (near.approx) row.classList.add('is-approx')
+    let after = near.row
+    while (
+      after.nextElementSibling instanceof HTMLTableRowElement &&
+      after.nextElementSibling.getAttribute(DECORATION) === 'pending'
+    ) {
+      after = after.nextElementSibling
+    }
+    after.insertAdjacentElement('afterend', row)
+    placed++
+  }
+  return { placed, missed }
+}
+
+/** Update draft rows without replacing thread replies, annotations, or active editors.
+ * @param {HTMLElement} card
+ * @param {string} key
+ * @param {ReadonlyArray<import('./contract-types.js').PendingComment>} drafts
+ * @param {Date} now
+ */
+export function refreshPendingRows(card, key, drafts, now) {
+  const remaining = new Map(drafts.map(p => [p.id, p]))
+  for (const row of card.querySelectorAll('tr[data-decoration="pending"]')) {
+    const draft = remaining.get(row.getAttribute('data-pending-id') ?? '')
+    if (draft === undefined) {
+      row.remove()
+      continue
+    }
+    remaining.delete(draft.id)
+    if (row.getAttribute('data-pending-body') !== draft.body) {
+      const prose = row.querySelector('.pending-cmt > .prose')
+      if (prose !== null) prose.innerHTML = renderMarkdown(draft.body, { github: true })
+      row.setAttribute('data-pending-body', draft.body)
+    }
+  }
+  insertPendingRows(card, key, [...remaining.values()], now)
+}
+
 /**
  * @param {string} html
  * @returns {HTMLTableRowElement}
@@ -166,7 +227,7 @@ function firstRow(html) {
  * right after the anchor row, so they are added in reverse).
  * @param {HTMLElement} card
  * @param {string} key
- * @param {{ annotations: ReadonlyArray<Annotation>, points: ReadonlyArray<Point>, threads: ReadonlyArray<Thread>, paths: ReadonlySet<string>, now: Date, state?: import('./contract-types.js').PrState, posted?: ReadonlyMap<string, string>, hiddenThreads?: ReadonlySet<number> }} data
+ * @param {{ annotations: ReadonlyArray<Annotation>, points: ReadonlyArray<Point>, threads: ReadonlyArray<Thread>, pending?: ReadonlyArray<import('./contract-types.js').PendingComment>, paths: ReadonlySet<string>, now: Date, state?: import('./contract-types.js').PrState, posted?: ReadonlyMap<string, string>, hiddenThreads?: ReadonlySet<number> }} data
  * @returns {{ placed: number, missed: number }}
  */
 export function applyDecorations(card, key, data) {
@@ -185,6 +246,11 @@ export function applyDecorations(card, key, data) {
       missed++
     }
   }
+  // Drafts are added before the threads, so under one line they end up after them: the comment
+  // that is already on the forge reads first, the one still being written reads last.
+  const drafts = insertPendingRows(card, key, data.pending ?? [], data.now)
+  placed += drafts.placed
+  missed += drafts.missed
   for (const t of [...data.threads].reverse()) {
     count(
       insertThreadRow(card, key, t, { now: data.now, hidden: data.hiddenThreads?.has(t.root.id) ?? false })

package/static/js/diff-renderer.js

@@ -855,7 +855,7 @@ export function renderDiff(file, patch, opts = {}) {
     highlightHunk(h, file.lang)
     tables.push(
       `<table class="diff" id="${esc(hunkAnchorId(file.key, n))}" data-hunk="${esc(id)}" data-key="${esc(file.key)}">` +
-        `<caption class="sr">Hunk ${n} of ${esc(file.path)}</caption>${THEAD}<tbody>${buildRows(h, file.key)}</tbody></table>`
+        `<caption class="sr">Chunk ${n} of ${esc(file.path)}</caption>${THEAD}<tbody>${buildRows(h, file.key)}</tbody></table>`
     )
   })
   if (tables.length === 0) {

package/static/js/download.js

@@ -26,7 +26,7 @@ export function saveBlob(blob, filename, deps = {}) {
 }
 
 /**
- * @param {number} prNumber
+ * @param {import('./contract-types.js').ReviewKey} prNumber
  * @param {{ headSha?: string, fetchImpl?: typeof fetch } & SaveDeps} [opts]
  * @returns {Promise<string>} the file name the browser saved
  */

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,53 @@ 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 note above a canvas that some of the reviewer's progress followed onto. Without it, the
+ * already-ticked layers look like a bug. The sha is the canvas the marks were made on, which may
+ * be several generations back when the reviewer marked nothing on the canvases in between.
+ * @param {string} markedCanvasSha
+ * @returns {string}
+ */
+export function marksCarriedBarHtml(markedCanvasSha) {
+  return (
+    '<div class="stale-bar carried-over-bar" role="status"><strong>Review progress carried over.</strong> ' +
+    esc(
+      `You marked these on the canvas of ${markedCanvasSha.slice(0, 7)}; a file whose diff has not changed since keeps its mark, and a layer keeps its own when it still holds exactly those files.`
+    ) +
+    '</div>'
+  )
+}
+
 /**
  * The `stale` screen: the same card as the empty state, plus the two ways forward.
  * @param {PrBundle} bundle
@@ -148,16 +232,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',