@vintasoftware/pr-review-canvas 0.1.0

package/static/js/header.js

@@ -0,0 +1,134 @@
+// @ts-check
+/** @typedef {import('./contract-types.js').PrBundle} PrBundle */
+/** @typedef {import('./contract-types.js').RiskTag} RiskTag */
+import { setDisabledReason } from './composer.js'
+import { esc, timeAgo } from './dom.js'
+import { refreshRail } from './layers.js'
+import { progressSummary } from './progress.js'
+import { approveBlockedReason } from './signoff.js'
+import { skinLabel } from './skin.js'
+import { themeLabel } from './theme.js'
+
+/**
+ * @param {ReadonlyArray<RiskTag>} risk
+ * @returns {string} the `touches:` line, or '' when nothing is tagged
+ */
+export function riskLineHtml(risk) {
+  if (risk.length === 0) {
+    return ''
+  }
+  const pills = risk
+    .map(r => {
+      const title = r.source === 'model' && r.reason ? ` title="${esc(r.reason)}"` : ''
+      return `<span class="pill risk ${r.source}"${title}>${esc(r.label)}</span>`
+    })
+    .join('<span aria-hidden="true">·</span>')
+  return `<p class="touches"><span>touches:</span>${pills}</p>`
+}
+
+/**
+ * One line saying the canvas was generated under the large-change-set caps, so a reader who finds
+ * a file with no annotation knows why.
+ * @param {PrBundle} bundle
+ */
+export function largePrNoticeHtml(bundle) {
+  if (!bundle.largePr) {
+    return ''
+  }
+  return (
+    '<p class="notice large-pr" role="status">Large change set: the canvas keeps at most 6 annotations per file ' +
+    'and 12 attention points, and diffs were not inlined for the generator.</p>'
+  )
+}
+
+/** @param {PrBundle['pr']} pr */
+export function statePill(pr) {
+  const state = pr.state === 'open' && pr.draft ? 'draft' : pr.state
+  return `<span class="pill ${esc(state)}">${esc(state)}</span>`
+}
+
+/**
+ * @param {PrBundle} bundle
+ * @param {{ host: string, theme: import('./theme.js').Theme, skin: import('./skin.js').Skin, now: Date }} opts
+ * @returns {string}
+ */
+export function renderHeader(bundle, opts) {
+  const { pr, artifact } = bundle
+  const ready = bundle.status === 'ready' && artifact !== undefined
+  // A stale canvas can be exported and regenerated too, so both commands stay live for it.
+  const hasCanvas = artifact !== undefined && (bundle.status === 'ready' || bundle.status === 'stale')
+  const agent = ready
+    ? `<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>`
+  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-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="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>` +
+    `<button class="cmd" type="button" id="theme-toggle" title="Switch between Light, Dark, and Auto themes">${esc(themeLabel(opts.theme))}</button>` +
+    '</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>` +
+    `<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>`
+  )
+}
+
+/**
+ * The thin line, its text, and the two sign-off commands. Approve stays disabled with the
+ * reason until every layer that is not Other has been marked reviewed.
+ * @param {import('./contract-types.js').ReviewArtifact} artifact
+ * @param {import('./contract-types.js').PrState} state
+ */
+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>`
+  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>' +
+    '<span class="capability-note" role="status"></span></div>'
+  )
+}
+
+/**
+ * Draws the progress line, its text, and the approve command again from the current state, and
+ * with them the rail. Called after every reviewed change.
+ * @param {ParentNode} root
+ * @param {import('./contract-types.js').ReviewArtifact} artifact
+ * @param {import('./contract-types.js').PrState} state
+ */
+export function refreshProgress(root, artifact, state) {
+  const p = progressSummary(artifact, state)
+  const line = root.querySelector('.pline')
+  const fill = line?.querySelector('span')
+  if (line !== null) {
+    line.setAttribute('aria-valuenow', String(p.done))
+    line.setAttribute('aria-valuemax', String(p.total))
+  }
+  if (fill instanceof HTMLElement) {
+    fill.style.width = `${p.percent}%`
+  }
+  const text = root.querySelector('.ptext')
+  if (text !== null) {
+    text.textContent = `${p.done} of ${p.total} layers reviewed`
+  }
+  setDisabledReason(root.querySelector('#approve'), approveBlockedReason(artifact, state))
+  refreshRail(root, artifact, state)
+  return p
+}

package/static/js/hunks.js

@@ -0,0 +1,62 @@
+// @ts-check
+// Hunk header parsing and the hunk-for-line lookup. One implementation for the browser and the
+// server (src/git/patch-lines.ts re-exports it), so both sides agree on which hunk owns a line.
+/** @typedef {import('./contract-types.js').Side} Side */
+/** @typedef {{ oldStart: number, oldLines: number, newStart: number, newLines: number }} HunkRange */
+
+export const HUNK_HEADER_RE = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/
+
+/**
+ * Line numbers and counts of a unified-diff hunk header; a missing count means 1.
+ * @param {string} line
+ * @returns {HunkRange | null} null when the line is not a hunk header
+ */
+export function parseHunkHeader(line) {
+  const m = HUNK_HEADER_RE.exec(line)
+  if (!m) {
+    return null
+  }
+  return {
+    oldStart: Number(m[1]),
+    oldLines: m[2] === undefined ? 1 : Number(m[2]),
+    newStart: Number(m[3]),
+    newLines: m[4] === undefined ? 1 : Number(m[4]),
+  }
+}
+
+/**
+ * The hunk that covers `line` on `side`, or null when the line is outside the diff.
+ * @template {HunkRange} H
+ * @param {ReadonlyArray<H>} hunks
+ * @param {Side} side
+ * @param {number} line
+ * @returns {H | null}
+ */
+export function hunkForLine(hunks, side, line) {
+  for (const h of hunks) {
+    const start = side === 'new' ? h.newStart : h.oldStart
+    const count = side === 'new' ? h.newLines : h.oldLines
+    // A zero-length range (pure deletion or pure addition) still anchors on its start line.
+    const end = start + Math.max(count, 1) - 1
+    if (line >= start && line <= end) {
+      return h
+    }
+  }
+  return null
+}
+
+/**
+ * Valid anchor ranges, using the same zero-length anchor rule as hunkForLine.
+ * @param {ReadonlyArray<HunkRange>} hunks
+ * @param {Side} side
+ * @returns {string}
+ */
+export function hunkLineRanges(hunks, side) {
+  const ranges = hunks.map(h => {
+    const start = side === 'new' ? h.newStart : h.oldStart
+    const count = side === 'new' ? h.newLines : h.oldLines
+    const end = start + Math.max(count, 1) - 1
+    return start === end ? `${start}` : `${start}-${end}`
+  })
+  return `${side}-side lines ${ranges.length ? ranges.join(', ') : 'none'}`
+}

package/static/js/import-zone.js

@@ -0,0 +1,95 @@
+// @ts-check
+// The drop zone of the empty and stale screens: pick or drop a zip, POST it, and show what
+// happened next to the zone instead of in the console.
+/** @typedef {import('./contract-types.js').ImportResult} ImportResult */
+/** @typedef {import('./empty-state.js').DropState} DropState */
+/** @typedef {typeof import('./api.js').importCanvas} ImportCanvas */
+import { clearCommandError, showCommandError } from './commands.js'
+import { qs } from './dom.js'
+import { DROP_ZONE_ID, dropReducer, INITIAL_DROP_STATE, validateCanvasFilename } from './empty-state.js'
+
+/**
+ * @param {DropState} state
+ * @returns {string}
+ */
+export function dropStatusText(state) {
+  if (state.phase === 'busy') {
+    return `importing… ${Math.round(state.progress * 100)}%`
+  }
+  return state.phase === 'over' ? 'drop to import' : ''
+}
+
+/**
+ * @typedef {{
+ *   prNumber: number,
+ *   importImpl: ImportCanvas,
+ *   onImported: (result: ImportResult) => void,
+ * }} DropZoneOptions
+ */
+
+/**
+ * @typedef {{ element: HTMLElement, send: (file: File) => Promise<void>, state: () => DropState }} DropZone
+ */
+
+/**
+ * Wires the zone under `root`. Returns null when the screen has no drop zone.
+ * @param {HTMLElement} root
+ * @param {DropZoneOptions} opts
+ * @returns {DropZone | null}
+ */
+export function wireDropZone(root, opts) {
+  const label = qs('.drop', root)
+  const input = qs(`#${DROP_ZONE_ID}`, root)
+  const status = qs('.drop-status', root)
+  if (!(label instanceof HTMLElement && input instanceof HTMLInputElement && status instanceof HTMLElement)) {
+    return null
+  }
+  let state = INITIAL_DROP_STATE
+  const apply = (/** @type {import('./empty-state.js').DropEvent} */ event) => {
+    state = dropReducer(state, event)
+    label.classList.toggle('over', state.phase === 'over')
+    status.textContent = dropStatusText(state)
+    if (state.error === null) {
+      clearCommandError(status)
+    } else {
+      showCommandError(status, state.error)
+    }
+  }
+  const send = async (/** @type {File} */ file) => {
+    const problem = validateCanvasFilename(file.name)
+    if (problem !== null) {
+      apply({ type: 'fail', message: problem })
+      return
+    }
+    apply({ type: 'start' })
+    try {
+      const result = await opts.importImpl(opts.prNumber, file, {
+        onProgress: fraction => apply({ type: 'progress', fraction }),
+      })
+      apply({ type: 'done' })
+      opts.onImported(result)
+    } catch (err) {
+      apply({ type: 'fail', message: err instanceof Error ? err.message : String(err) })
+    }
+  }
+  label.addEventListener('dragover', event => {
+    event.preventDefault()
+    apply({ type: 'enter' })
+  })
+  label.addEventListener('dragleave', () => apply({ type: 'leave' }))
+  label.addEventListener('drop', event => {
+    event.preventDefault()
+    apply({ type: 'leave' })
+    const file = event instanceof DragEvent ? event.dataTransfer?.files[0] : undefined
+    if (file) {
+      void send(file)
+    }
+  })
+  input.addEventListener('change', () => {
+    const file = input.files?.[0]
+    if (file) {
+      void send(file)
+    }
+  })
+  return { element: label, send, state: () => state }
+}