@vintasoftware/pr-review-canvas 0.2.0 → 0.3.0

package/src/store/derived-store.ts

@@ -69,7 +69,11 @@ export function createDerivedStore(canvases: CanvasStore, git: Git, now: () => D
         await writeTextAtomic(path.join(dir, 'patches', `${f.key}.diff`), `${labelPatch(f.key, f.patch)}\n`)
       }
       await materialize(git, { headSha, mergeBaseSha, files: collected, outDir: dir })
-      await writeJsonAtomic(path.join(dir, 'meta.json'), { headSha, mergeBaseSha, builtAt: now().toISOString() })
+      await writeJsonAtomic(path.join(dir, 'meta.json'), {
+        headSha,
+        mergeBaseSha,
+        builtAt: now().toISOString(),
+      })
       return { files, patches }
     },
     read,

package/src/store/pr-store.ts

@@ -39,7 +39,8 @@ export function createPrStore(repoRoot: string): PrStore {
     writeComments: (number, comments) => writeJsonAtomic(path.join(prDir(number), 'comments.json'), comments),
     readDiscovery: number =>
       readJsonOrDefault(path.join(prDir(number), 'discovery.json'), DiscoveryCacheSchema, () => null),
-    writeDiscovery: (number, discovery) => writeJsonAtomic(path.join(prDir(number), 'discovery.json'), discovery),
+    writeDiscovery: (number, discovery) =>
+      writeJsonAtomic(path.join(prDir(number), 'discovery.json'), discovery),
     listRecent: async limit => {
       let names: string[]
       try {

package/src/store/state-store.ts

@@ -93,7 +93,8 @@ export function createStateStore(prs: PrStore, now: () => Date): StateStore {
       update(number, state => {
         const next = { ...state.dismissed }
         if (dismissed) {
-          next[fingerprint] = reason === undefined ? { at: now().toISOString() } : { at: now().toISOString(), reason }
+          next[fingerprint] =
+            reason === undefined ? { at: now().toISOString() } : { at: now().toISOString(), reason }
         } else {
           delete next[fingerprint]
         }

package/static/brand.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" shape-rendering="crispEdges">
+  <title>PR review canvas</title>
+  <path fill="#7661a8" d="M12 7h31v35H12z"/>
+  <path fill="#aa96d2" d="M39 9h2v24h-2z"/>
+  <path fill="#292b3d" d="M3 3h35v41H3z"/>
+  <path fill="#fff0cf" d="M5 12h31v30H5z"/>
+  <path fill="#45465c" d="M5 5h31v5H5z"/>
+  <path fill="#ffe08a" d="M22 8h3v1h-3z"/>
+  <path fill="#ffffff" d="M27 6h3v3h-3zm1 1v1h1V7z" fill-rule="evenodd"/>
+  <path fill="#ffb3ab" d="M32 6h1v1h1V6h1v1h-1v1h1v1h-1V8h-1v1h-1V8h1V7h-1z"/>
+  <path fill="#b44a45" d="M9 17h9v3H9z"/>
+  <path fill="#e8ddc4" d="M20 15h1v19h-1z"/>
+  <path fill="#827b70" d="M23 17h10v2H23zM23 26h10v2H23zM9 36h16v2H9z"/>
+  <path fill="#437d68" d="M12 23h3v3h3v3h-3v3h-3v-3H9v-3h3z"/>
+  <g transform="scale(0.5)" shape-rendering="geometricPrecision">
+    <path fill="#292b3d" d="M56 68H58V66H60V64H62V62H68V64H70V66H72V68H76V64H78V60H80V56H82V52H84V50H90V52H92V54H94V56H96V62H94V66H92V70H90V74H88V78H86V82H84V86H82V90H80V92H72V90H70V88H68V86H66V84H64V82H62V80H60V78H58V76H56z"/>
+    <path fill="#8bc79a" d="M58 70H60V68H62V66H64V64H66V66H68V68H70V70H72V72H74V74H76V70H78V66H80V62H82V58H84V54H86V52H88V54H90V56H92V58H94V60H92V64H90V68H88V72H86V76H84V80H82V84H80V88H78V90H74V88H72V86H70V84H68V82H66V80H64V78H62V76H60V74H58z"/>
+  </g>
+</svg>

package/static/js/api.js

@@ -161,7 +161,11 @@ export function fetchCapabilities(prNumber, opts = {}) {
  * @returns {Promise<import('./contract-types.js').PostCommentResponse>}
  */
 export function postComment(prNumber, input, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/comments`, { method: 'POST', body: input, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/comments`, {
+    method: 'POST',
+    body: input,
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**
@@ -388,7 +392,11 @@ export function fetchThreads(prNumber, opts = {}) {
  * @returns {Promise<import('./contract-types.js').ChatThreadsResponse>}
  */
 export function createThread(prNumber, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/chat/threads`, { method: 'POST', body: {}, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/chat/threads`, {
+    method: 'POST',
+    body: {},
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**
@@ -409,7 +417,11 @@ export function fetchThreadHistory(prNumber, name, opts = {}) {
  * @returns {Promise<{ cancelled: boolean }>}
  */
 export function cancelChat(prNumber, opts = {}) {
-  return fetchJson(`/api/prs/${prNumber}/chat/cancel`, { method: 'POST', body: {}, fetchImpl: opts.fetchImpl })
+  return fetchJson(`/api/prs/${prNumber}/chat/cancel`, {
+    method: 'POST',
+    body: {},
+    fetchImpl: opts.fetchImpl,
+  })
 }
 
 /**

package/static/js/app.js

@@ -62,7 +62,9 @@ function footerHtml(version, bundle) {
 
 /** @param {ReadonlyArray<string>} warnings */
 function bannerHtml(warnings) {
-  return warnings.length === 0 ? '' : `<div class="banner" role="status">${warnings.map(w => esc(w)).join(' · ')}</div>`
+  return warnings.length === 0
+    ? ''
+    : `<div class="banner" role="status">${warnings.map(w => esc(w)).join(' · ')}</div>`
 }
 
 /**
@@ -369,7 +371,11 @@ export class PrAppElement extends HTMLElement {
       this.viewStale = true
       void this.render(bundle)
     })
-    wireDropZone(this, { prNumber: boot.prNumber, importImpl: importCanvas, onImported: () => void this.reload() })
+    wireDropZone(this, {
+      prNumber: boot.prNumber,
+      importImpl: importCanvas,
+      onImported: () => void this.reload(),
+    })
   }
 
   /**

package/static/js/chat-panel.js

@@ -0,0 +1,93 @@
+// @ts-check
+
+/** Keeps the same chat mounted while switching between the sidebar and floating panel.
+ * @param {HTMLElement} root
+ * @param {HTMLElement} pane
+ */
+export function wireChatPanel(root, pane) {
+  const dialog = /** @type {HTMLDialogElement} */ (root.querySelector('#chat-dialog'))
+  const launcher = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-launcher'))
+  const minimize = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-minimize'))
+  const narrow = window.matchMedia('(max-width: 1360px)')
+  const mobile = window.matchMedia('(max-width: 600px)')
+  let expanded = false
+
+  function sync() {
+    if (dialog.open) dialog.close()
+    if (narrow.matches) {
+      dialog.append(pane)
+      if (expanded) {
+        if (mobile.matches) dialog.showModal()
+        else dialog.show()
+      }
+    } else {
+      dialog.before(pane)
+    }
+    launcher.setAttribute('aria-expanded', String(narrow.matches && expanded))
+    launcher.hidden = narrow.matches && expanded
+  }
+
+  function open() {
+    if (narrow.matches && !expanded) {
+      expanded = true
+      sync()
+    }
+    pane.querySelector('textarea')?.focus()
+  }
+
+  function close() {
+    expanded = false
+    sync()
+    launcher.focus()
+  }
+
+  /** @param {Event} event */
+  function cancel(event) {
+    event.preventDefault()
+    close()
+  }
+
+  /** @param {KeyboardEvent} event */
+  function trapFocus(event) {
+    if (event.key !== 'Tab' || !mobile.matches || !dialog.open) return
+    const controls = [
+      ...dialog.querySelectorAll('button, select, textarea, input, a[href], [tabindex]'),
+    ].filter(
+      el =>
+        el instanceof HTMLElement &&
+        el.tabIndex >= 0 &&
+        !el.matches(':disabled') &&
+        el.getClientRects().length
+    )
+    const first = /** @type {HTMLElement | undefined} */ (controls[0])
+    const last = /** @type {HTMLElement | undefined} */ (controls.at(-1))
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last?.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first?.focus()
+    }
+  }
+
+  launcher.addEventListener('click', open)
+  minimize.addEventListener('click', close)
+  dialog.addEventListener('cancel', cancel)
+  dialog.addEventListener('keydown', trapFocus)
+  narrow.addEventListener('change', sync)
+  mobile.addEventListener('change', sync)
+  sync()
+
+  return {
+    open,
+    stop() {
+      if (dialog.open) dialog.close()
+      launcher.removeEventListener('click', open)
+      minimize.removeEventListener('click', close)
+      dialog.removeEventListener('cancel', cancel)
+      dialog.removeEventListener('keydown', trapFocus)
+      narrow.removeEventListener('change', sync)
+      mobile.removeEventListener('change', sync)
+    },
+  }
+}

package/static/js/chat.js

@@ -8,6 +8,7 @@
 /** @typedef {import('./review-session.js').ReviewSession} ReviewSession */
 import { cancelChat, createThread, fetchThreadHistory, fetchThreads, streamChat } from './api.js'
 import { chatContextAttrs, chatContextLabel, sameChatContext, WHOLE_PR } from './chat-context.js'
+import { wireChatPanel } from './chat-panel.js'
 import {
   canScrollBy,
   chatScrollReducer,
@@ -43,7 +44,8 @@ export function renderChatShell(opts) {
     `<button class="handle" type="button" id="chat-handle" role="separator" aria-orientation="vertical" aria-label="Resize AI Chat" aria-valuenow="${width}" aria-valuemin="${CHAT_WIDTH_MIN}" aria-valuemax="${CHAT_WIDTH_MAX}"></button>` +
     '<div class="chat-h"><h2 id="chat-h">AI Chat</h2><label class="sr" for="thread">Thread</label>' +
     '<select id="thread"></select>' +
-    '<button class="cmd" type="button" id="new-thread">new thread</button></div>' +
+    '<button class="cmd" type="button" id="new-thread">new thread</button>' +
+    '<button class="cmd chat-minimize" type="button" id="chat-minimize" aria-label="Minimize AI Chat">minimize</button></div>' +
     '<p class="ctx-line" id="chat-ctx-line">Context: <span class="ctx-chip" id="chat-ctx">whole PR</span>' +
     ' <button class="cmd" type="button" id="chat-clear" hidden>clear</button></p>' +
     '<div class="transcript" id="chat-log" role="log" aria-label="Transcript" aria-live="polite" tabindex="0">' +
@@ -55,7 +57,9 @@ export function renderChatShell(opts) {
     '<div class="tbtns"><button class="cmd fill" type="submit" id="chat-send">send</button>' +
     '<button class="cmd" type="button" id="chat-stop" hidden>stop</button>' +
     '<span class="muted small">enter to send</span></div></form>' +
-    '</aside>'
+    '</aside>' +
+    '<dialog class="chat-dialog" id="chat-dialog" aria-labelledby="chat-h"></dialog>' +
+    '<button class="chat-launcher" id="chat-launcher" type="button" aria-controls="chat-dialog" aria-expanded="false">AI Chat</button>'
   )
 }
 
@@ -97,12 +101,13 @@ export function writeChatWidth(storage, width) {
   storage?.setItem(CHAT_WIDTH_KEY, String(clampWidth(width)))
 }
 
-/** The four questions the quick menu offers, and the one that just focuses the box. */
+/** The questions the quick menu offers, and the one that just focuses the box. */
 export const QUICK_QUESTIONS = [
-  'Is this covered by tests?',
-  'What could break?',
+  'Suggestion to solve this?',
   'Why this way, and what were the alternatives?',
+  'What could break?',
   'Does this follow how the codebase already does it?',
+  'Is this covered by tests?',
 ]
 
 /**
@@ -148,7 +153,9 @@ function turnHtml(role, bodyHtml, opts = {}) {
  */
 function turnInnerHtml(role, bodyHtml, opts = {}) {
   const note =
-    opts.incomplete === undefined ? '' : `<p class="muted small">the answer stopped early (${esc(opts.incomplete)})</p>`
+    opts.incomplete === undefined
+      ? ''
+      : `<p class="muted small">the answer stopped early (${esc(opts.incomplete)})</p>`
   return (
     `<span class="role">${role === 'assistant' ? 'AI Chat' : 'You'}</span>` +
     `<div class="prose">${bodyHtml}</div>${note}`
@@ -235,7 +242,11 @@ export function wireChat(options) {
   const { root, prNumber, session } = options
   const api = withDefaults(options.api)
   const storage =
-    options.storage === undefined ? (typeof localStorage === 'undefined' ? null : localStorage) : options.storage
+    options.storage === undefined
+      ? typeof localStorage === 'undefined'
+        ? null
+        : localStorage
+      : options.storage
   const paths = new Set(session.artifact.files.map(f => f.path))
   const targets = targetsFromFiles(session.artifact.files)
   const reducedMotion =
@@ -304,7 +315,8 @@ export function wireChat(options) {
   applyWidth(readChatWidth(storage))
 
   const layerTitle = /** @param {string} id */ id => session.artifact.layers.find(l => l.id === id)?.title
-  const pointTitle = /** @param {string} fp */ fp => session.artifact.points.find(p => p.fingerprint === fp)?.title
+  const pointTitle = /** @param {string} fp */ fp =>
+    session.artifact.points.find(p => p.fingerprint === fp)?.title
 
   const drawContext = () => {
     chip.textContent = chatContextLabel(context, layerTitle, pointTitle)
@@ -416,7 +428,8 @@ export function wireChat(options) {
     activeThread = data.activeThread
     select.innerHTML = data.threads
       .map(
-        t => `<option value="${esc(t.name)}"${t.name === data.activeThread ? ' selected' : ''}>${esc(t.title)}</option>`
+        t =>
+          `<option value="${esc(t.name)}"${t.name === data.activeThread ? ' selected' : ''}>${esc(t.title)}</option>`
       )
       .join('')
     if (data.threads.length === 0) {
@@ -510,7 +523,7 @@ export function wireChat(options) {
     const started = Date.now()
     const updateActivity = () => {
       const elapsed = Date.now() - started
-      activity.textContent = `Preparing answer${'.'.repeat(Math.floor(elapsed / 400) % 3 + 1)} · ${Math.floor(elapsed / 1000)}s`
+      activity.textContent = `Preparing answer${'.'.repeat((Math.floor(elapsed / 400) % 3) + 1)} · ${Math.floor(elapsed / 1000)}s`
     }
     updateActivity()
     const timer = setInterval(updateActivity, 400)
@@ -544,7 +557,10 @@ export function wireChat(options) {
               const previous = tools.get(id)
               const title = String(field('title') ?? 'tool')
               tools.delete(id)
-              tools.set(id, { title: title === 'tool' && previous ? previous.title : title, status: String(field('status') ?? 'pending') })
+              tools.set(id, {
+                title: title === 'tool' && previous ? previous.title : title,
+                status: String(field('status') ?? 'pending'),
+              })
               toolDetails.hidden = false
               const latest = tools.get(id)
               toolDetails.innerHTML = `<summary>${esc(latest.title)} · ${esc(latest.status)} (${tools.size} tool calls)</summary><ul>${[...tools.values()].map(t => `<li>${esc(t.title)} · ${esc(t.status)}</li>`).join('')}</ul>`
@@ -578,9 +594,13 @@ export function wireChat(options) {
       const toolSummary = toolDetails.querySelector('summary')
       if (toolSummary) toolSummary.textContent = `${tools.size} tool calls`
       activity.textContent = `Elapsed: ${Math.floor((Date.now() - started) / 1000)}s`
-      if (frame !== 0) { cancelFrame(frame); frame = 0 }
+      if (frame !== 0) {
+        cancelFrame(frame)
+        frame = 0
+      }
       setStreaming(false)
-      answer.body.innerHTML = text === '' ? '<span class="muted">no answer</span>' : renderAnswer(text, turnKey)
+      answer.body.innerHTML =
+        text === '' ? '<span class="muted">no answer</span>' : renderAnswer(text, turnKey)
       if (scroll.pinned) {
         scrollToBottom('follow')
       }
@@ -728,6 +748,7 @@ export function wireChat(options) {
   }
 
   const stopResize = wireResize(pane, root, storage, applyWidth)
+  const panel = wireChatPanel(root, pane)
 
   form.addEventListener('submit', onSubmit)
   root.addEventListener('click', onClick)
@@ -744,12 +765,12 @@ export function wireChat(options) {
     },
     setContext,
     focusInput() {
-      box.focus()
+      panel.open()
     },
     /** @param {ChatContext} next */
     ask(next) {
       setContext(next)
-      box.focus()
+      panel.open()
     },
     /**
      * Sends one of the quick questions about a target.
@@ -758,6 +779,7 @@ export function wireChat(options) {
      */
     askQuestion(next, question) {
       setContext(next)
+      panel.open()
       box.value = question
       void runCommand(sendButton, send, { pendingLabel: 'sending…' })
     },
@@ -775,6 +797,7 @@ export function wireChat(options) {
       select.removeEventListener('change', onThreadChange)
       box.removeEventListener('keydown', /** @type {EventListener} */ (onKeyDown))
       stopResize()
+      panel.stop()
     },
   }
 }

package/static/js/composer.js

@@ -61,8 +61,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>`
   )
 }
 
@@ -232,7 +232,10 @@ export function toggleMarkdownPreview(button, 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))

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

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/empty-state.js

@@ -50,7 +50,9 @@ export function validateCanvasFilename(filename) {
   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'
+  return /^(?:pr-[1-9]\d*|ref)-.+-canvas\.zip$/i.test(filename)
+    ? null
+    : 'that zip is not a review canvas export'
 }
 
 /**

package/static/js/header.js

@@ -65,7 +65,7 @@ export function renderHeader(bundle, opts) {
   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>` +