@vintasoftware/pr-review-canvas 0.2.0 → 0.4.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 {{
@@ -50,7 +51,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>' +
+    `<div class="composer-actions"><button class="cmd fill" type="button" data-act="composer-post" data-needs-post>${postToLabel()}</button>` +
     '<button class="cmd" type="button" data-act="composer-cancel">cancel</button></div></div>'
   )
 }
@@ -61,8 +62,8 @@ export function composerHtml(opts) {
  */
 export function composerRowHtml(opts) {
   return (
-    `<tr class="composer" data-decoration="composer"><td class="ln" colspan="3"></td>` +
-    `<td class="code x">${composerHtml(opts)}</td></tr>`
+    `<tr class="composer" data-decoration="composer">` +
+    `<td class="code x" colspan="4">${composerHtml(opts)}</td></tr>`
   )
 }
 
@@ -144,12 +145,9 @@ export function closeComposers(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 +157,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,20 +220,35 @@ 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() ? renderMarkdown(textarea.value, { github: true }) : '<p class="muted">Nothing to preview.</p>'
+  if (preview)
+    output.innerHTML = textarea.value.trim()
+      ? renderMarkdown(textarea.value, { github: true })
+      : '<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,6 +11,7 @@ export type {
   PostCommentResponse,
   PostReviewResponse,
   PrBundle,
+  PublicHost,
   ReviewBodyResponse,
   ReviewSummary,
   SharedCanvasFetchResponse,
@@ -23,6 +25,7 @@ export type {
   ChatThreadsResponse,
   ChatTurn,
 } from '../../src/contract/chat.js'
+export type { ReviewKey } from '../../src/contract/review-key.js'
 export type {
   CommentsPayload,
   IssueComment,

package/static/js/diagram.js

@@ -554,7 +554,8 @@ export function initDiagrams(root, opts = {}) {
         if (activateNodeLink(event)) {
           return
         }
-        const chevron = event.target instanceof Element ? event.target.closest('.diagram > .diagram-h > .chev') : null
+        const chevron =
+          event.target instanceof Element ? event.target.closest('.diagram > .diagram-h > .chev') : null
         const node = chevron?.closest('.diagram')
         if (node instanceof HTMLElement) {
           void toggleDiagram(node, pass)

package/static/js/diff-decorations.js

@@ -41,7 +41,7 @@ export function insertNoteRow(card, key, a) {
   }
   const range = a.startLine === a.endLine ? `line ${a.startLine}` : `lines ${a.startLine}–${a.endLine}`
   const html =
-    `<tr class="annot ann${approx ? ' is-approx' : ''}" ${DECORATION}="note"><td class="ln" colspan="3"></td><td class="code x">` +
+    `<tr class="annot ann${approx ? ' is-approx' : ''}" ${DECORATION}="note"><td class="code x" colspan="4">` +
     `<span class="lbl">Annotation · ${esc(range)}${a.side === 'old' ? ' (old)' : ''}</span>` +
     `<div class="prose">${renderMarkdown(a.text)}</div></td></tr>`
   last.insertAdjacentElement('afterend', firstRow(html))
@@ -102,7 +102,7 @@ export function threadRowHtml(t, opts) {
     : `<button class="cmd" type="button" data-act="thread-hide" data-thread="${rootId}">hide</button>`
   return (
     `<tr class="thread${t.resolved ? ' resolved' : ''}${hidden ? ' hidden-thread' : ''}" data-thread="${rootId}">` +
-    '<td class="ln" colspan="3"></td><td class="code x">' +
+    '<td class="code x" colspan="4">' +
     `<div class="thread-full"${collapsed ? ' hidden' : ''}>${comments}` +
     `<span class="tbtns"><button class="cmd" type="button" data-act="thread-reply" data-thread="${rootId}" data-needs-post>reply</button>${hide}</span></div>` +
     `<div class="thread-collapsed"${collapsed ? '' : ' hidden'}>${label} · ` +
@@ -186,7 +186,9 @@ export function applyDecorations(card, key, data) {
     }
   }
   for (const t of [...data.threads].reverse()) {
-    count(insertThreadRow(card, key, t, { now: data.now, hidden: data.hiddenThreads?.has(t.root.id) ?? false }))
+    count(
+      insertThreadRow(card, key, t, { now: data.now, hidden: data.hiddenThreads?.has(t.root.id) ?? false })
+    )
   }
   for (const p of [...data.points].reverse()) {
     count(

package/static/js/diff-renderer.js

@@ -113,7 +113,12 @@ export function parsePatch(patch) {
       prevDel = true
       prevAdd = false
     } else {
-      cur.entries.push({ ...base, code: line.startsWith(' ') ? line.slice(1) : line, oldLine: oL, newLine: nL })
+      cur.entries.push({
+        ...base,
+        code: line.startsWith(' ') ? line.slice(1) : line,
+        oldLine: oL,
+        newLine: nL,
+      })
       oL++
       nL++
       prevAdd = false
@@ -850,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/dom.js

@@ -20,7 +20,7 @@ export function esc(value) {
  * in interactions.js reads `data-act` and toggles the card this button belongs to.
  * @param {string} label
  * @param {boolean} [expanded]
- * @param {{ act?: string }} [opts] `act` is omitted inside a <details>, which toggles itself
+ * @param {{ act?: string }} [opts]
  */
 export function chevronHtml(label, expanded = true, opts = {}) {
   const act = opts.act === undefined ? '' : ` data-act="${esc(opts.act)}"`
@@ -29,14 +29,12 @@ export function chevronHtml(label, expanded = true, opts = {}) {
 
 /**
  * The <summary> of a collapsible <details> block: a chevron, then the title. The block relies on the
- * native <details> toggle, so a click anywhere on the summary opens or closes it. Pass `open` when
- * the <details> carries the `open` attribute so the chevron reports the same state.
+ * native <details> toggle. The decorative chevron lets clicks activate the summary.
  * @param {string} titleHtml already escaped
- * @param {string} label the chevron's accessible name
- * @param {{ open?: boolean }} [opts]
+ * @param {string} label the summary's accessible name
  */
-export function detailsSummaryHtml(titleHtml, label, opts = {}) {
-  return `<summary>${chevronHtml(label, opts.open === true)}${titleHtml}</summary>`
+export function detailsSummaryHtml(titleHtml, label) {
+  return `<summary aria-label="${esc(label)}"><span class="chev" aria-hidden="true">&gt;</span>${titleHtml}</summary>`
 }
 
 /**

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,16 +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',
 }
 
 /**
@@ -66,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>'
   )
 }
@@ -84,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 (
@@ -95,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>'
   )
 }
@@ -114,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}.`
   }
@@ -130,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
@@ -146,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="box">PR review canvas</span><span class="mono muted">${esc(opts.host)}</span></div>` +
+    `<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