@vintasoftware/pr-review-canvas 0.1.0

package/static/js/code-folds.js

@@ -0,0 +1,200 @@
+// @ts-check
+// Rows a reviewer can hide: the canvas folds the model named, and the folds the diff renderer
+// marked (import-only and whitespace-only changes, and moved blocks). Both open again when a
+// deep link lands inside them.
+import { findRow } from './anchors.js'
+
+/** @typedef {import('./contract-types.js').CodeFold} CodeFold */
+
+/**
+ * @param {Element | null} summary
+ * @param {readonly HTMLTableRowElement[]} rows
+ */
+function coveredFoldSummary(summary, rows) {
+  if (!summary?.matches('.fold')) {
+    return false
+  }
+
+  let next = summary.nextElementSibling
+  while (next instanceof HTMLTableRowElement && next.matches('.folded')) {
+    if (!rows.includes(next)) {
+      return false
+    }
+    next = next.nextElementSibling
+  }
+
+  return true
+}
+
+/**
+ * Finds the rows between both anchors. A decorated or overlapping range stays open.
+ * @param {HTMLElement} card
+ * @param {string} key
+ * @param {CodeFold} fold
+ * @returns {HTMLTableRowElement[]}
+ */
+function foldRows(card, key, fold) {
+  const first = findRow(card, key, fold.side, fold.startLine)
+  const last = findRow(card, key, fold.side, fold.endLine)
+
+  if (first === null || last === null || first.parentElement === null) {
+    return []
+  }
+
+  if (last.parentElement !== first.parentElement) {
+    return []
+  }
+
+  const siblings = Array.from(first.parentElement.children)
+  const from = siblings.indexOf(first)
+  const to = siblings.indexOf(last)
+
+  if (to < from) {
+    return []
+  }
+
+  const rows = siblings.slice(from, to + 1).filter(row => row instanceof HTMLTableRowElement)
+  const hasDiscussion = rows.some(row => row.matches('.ann, [data-decoration], [data-code-fold], .code-fold'))
+
+  const hasThread = Boolean(first.closest('table')?.querySelector('[data-decoration="thread"]'))
+
+  if (hasDiscussion || hasThread || last.nextElementSibling?.matches('[data-decoration]')) {
+    return []
+  }
+
+  const preceding = first.previousElementSibling
+  if (preceding instanceof HTMLTableRowElement && coveredFoldSummary(preceding, rows)) {
+    rows.unshift(preceding)
+  }
+
+  return rows
+}
+
+/**
+ * Inserts the fold's title above its first row.
+ * @param {HTMLTableRowElement} first
+ * @param {string} title
+ */
+function createToggle(first, title) {
+  const header = document.createElement('tr')
+  header.className = 'more code-fold'
+
+  const cell = document.createElement('td')
+  cell.colSpan = 4
+
+  const toggle = document.createElement('button')
+  toggle.className = 'cmd'
+  toggle.type = 'button'
+  toggle.textContent = title
+
+  cell.appendChild(toggle)
+  header.appendChild(cell)
+  first.before(header)
+
+  return toggle
+}
+
+/**
+ * Keeps the original rows in the DOM so comments and deep links retain their anchors.
+ * @param {HTMLTableRowElement} first
+ * @param {HTMLTableRowElement[]} rows
+ * @param {string} title
+ */
+function wireFold(first, rows, title) {
+  const toggle = createToggle(first, title)
+  const table = first.closest('table')
+  const foldSummaries = new Set(rows.filter(row => coveredFoldSummary(row, rows)))
+  toggle.setAttribute(
+    'aria-controls',
+    rows
+      .map(row => row.id)
+      .filter(Boolean)
+      .join(' ')
+  )
+
+  const setExpanded = (/** @type {boolean} */ expanded) => {
+    toggle.setAttribute('aria-expanded', String(expanded))
+
+    for (const row of rows) {
+      row.hidden = !expanded || foldSummaries.has(row)
+      row.setAttribute('data-code-fold', '')
+    }
+  }
+
+  toggle.addEventListener('click', () => setExpanded(toggle.getAttribute('aria-expanded') !== 'true'))
+
+  table?.addEventListener('reveal-code', event => {
+    const target = event.target
+    if (target instanceof Node && (target === table || rows.some(row => row.contains(target)))) {
+      setExpanded(true)
+    }
+  })
+
+  setExpanded(false)
+}
+
+/**
+ * Adds title-only folds; ranges with annotations, attention points, or discussions stay open.
+ * @param {HTMLElement} card
+ * @param {string} key
+ * @param {readonly CodeFold[]} folds
+ */
+export function applyCodeFolds(card, key, folds) {
+  for (const fold of folds) {
+    const rows = foldRows(card, key, fold)
+    const first = rows[0]
+
+    if (first !== undefined) {
+      wireFold(first, rows, fold.title)
+    }
+  }
+}
+
+/**
+ * The `.fold` summary row that owns a folded row, or null when the row is not in a fold.
+ * @param {Element} row
+ * @returns {HTMLTableRowElement | null}
+ */
+function foldSummaryFor(row) {
+  if (!row.matches('tr.folded')) {
+    return null
+  }
+  let previous = row.previousElementSibling
+  while (previous instanceof HTMLTableRowElement && previous.matches('.folded')) {
+    previous = previous.previousElementSibling
+  }
+  return previous instanceof HTMLTableRowElement && previous.matches('.more.fold') ? previous : null
+}
+
+/**
+ * Shows or hides the rows a summary row stands for, and relabels its button.
+ * @param {HTMLTableRowElement} summary
+ * @param {boolean} shown
+ */
+export function setFoldShown(summary, shown) {
+  let next = summary.nextElementSibling
+  while (next instanceof HTMLTableRowElement && next.matches('.folded')) {
+    next.classList.toggle('shown', shown)
+    next = next.nextElementSibling
+  }
+  const toggle = summary.querySelector('button[data-act="show-fold"]')
+  if (toggle instanceof HTMLElement) {
+    toggle.setAttribute('aria-expanded', String(shown))
+    toggle.textContent = shown ? 'hide' : 'show'
+  }
+}
+
+/**
+ * Opens the folded rows around a deep-link target, so a line inside a fold can be reached.
+ * @param {HTMLElement} card
+ */
+export function wireFoldReveal(card) {
+  card.addEventListener('reveal-code', event => {
+    const target = event.target
+    const row = target instanceof Element ? target.closest('tr') : null
+    const summary = row === null ? null : foldSummaryFor(row)
+    if (summary !== null) {
+      setFoldShown(summary, true)
+    }
+  })
+}

package/static/js/commands.js

@@ -0,0 +1,110 @@
+// @ts-check
+// Every command that triggers a request goes through runCommand, so the click always shows a
+// pending state and a failure always shows its message next to the command.
+import { copyToClipboard } from './dom.js'
+
+/**
+ * @template T
+ * @param {HTMLElement} el the .cmd button
+ * @param {() => Promise<T>} fn
+ * @param {{ pendingLabel?: string }} [opts] label shown while `fn` runs; default is the label plus `…`
+ * @returns {Promise<T | undefined>} the result, or undefined after a failure (already shown inline)
+ */
+export async function runCommand(el, fn, opts = {}) {
+  const original = el.textContent ?? ''
+  const pending = opts.pendingLabel ?? `${original}…`
+  clearCommandError(el)
+  if (el instanceof HTMLButtonElement) {
+    el.disabled = true
+  }
+  el.setAttribute('aria-busy', 'true')
+  el.textContent = pending
+  try {
+    return await fn()
+  } catch (err) {
+    showCommandError(el, err instanceof Error ? err.message : String(err))
+    return undefined
+  } finally {
+    el.textContent = original
+    el.removeAttribute('aria-busy')
+    if (el instanceof HTMLButtonElement) {
+      el.disabled = false
+    }
+  }
+}
+
+/**
+ * The same pending and error handling for a control whose label must not change: a checkbox
+ * keeps its box, so only `aria-busy` and the disabled state move.
+ * @template T
+ * @param {HTMLElement} el the element the error is shown next to
+ * @param {() => Promise<T>} fn
+ * @returns {Promise<T | undefined>}
+ */
+export async function runControl(el, fn) {
+  clearCommandError(el)
+  const inputs = el instanceof HTMLInputElement ? [el] : Array.from(el.querySelectorAll('input'))
+  /** @param {boolean} disabled */
+  const setDisabled = disabled => {
+    for (const input of inputs) {
+      input.disabled = disabled
+    }
+  }
+  el.setAttribute('aria-busy', 'true')
+  setDisabled(true)
+  try {
+    return await fn()
+  } catch (err) {
+    showCommandError(el, err instanceof Error ? err.message : String(err))
+    return undefined
+  } finally {
+    el.removeAttribute('aria-busy')
+    setDisabled(false)
+  }
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} message
+ */
+export function showCommandError(el, message) {
+  clearCommandError(el)
+  const err = document.createElement('span')
+  err.className = 'cmd-err'
+  err.setAttribute('role', 'alert')
+  err.textContent = message
+  el.insertAdjacentElement('afterend', err)
+}
+
+/** @param {HTMLElement} el */
+export function clearCommandError(el) {
+  const next = el.nextElementSibling
+  if (next?.classList.contains('cmd-err')) {
+    next.remove()
+  }
+}
+
+const COPY_WIRED = new WeakSet()
+
+/**
+ * One delegated click handler per root for every `button[data-copy]` under it, present now or
+ * rendered later. Calling it again for the same root does nothing, so re-rendering the root's
+ * content never stacks handlers (a second handler would run runCommand twice on one click).
+ * @param {HTMLElement} root
+ * @param {(text: string) => Promise<void>} [copy]
+ * @returns {boolean} true when the handler was added by this call
+ */
+export function wireCopyCommands(root, copy = copyToClipboard) {
+  if (COPY_WIRED.has(root)) {
+    return false
+  }
+  COPY_WIRED.add(root)
+  root.addEventListener('click', event => {
+    const el = event.target instanceof Element ? event.target.closest('button[data-copy]') : null
+    if (el instanceof HTMLElement) {
+      const text = el.getAttribute('data-copy') ?? ''
+      void runCommand(el, () => copy(text), { pendingLabel: 'copying…' })
+    }
+  })
+  return true
+}

package/static/js/comment-link.js

@@ -0,0 +1,37 @@
+// @ts-check
+import { esc } from './dom.js'
+
+/** @param {string} url @param {boolean} [filled] */
+export function viewCommentHtml(url, filled = false) {
+  return `<a class="cmd${filled ? ' fill' : ''}" href="${esc(url)}" target="_blank" rel="noopener noreferrer">view comment</a>`
+}
+
+/** @param {HTMLElement} button @param {string} url */
+export function replacePostButton(button, url) {
+  const template = button.ownerDocument.createElement('template')
+  template.innerHTML = viewCommentHtml(url, button.classList.contains('fill'))
+  const link = template.content.firstElementChild
+  if (link instanceof HTMLAnchorElement) {
+    const focused = button.ownerDocument.activeElement === button
+    button.replaceWith(link)
+    if (focused) {
+      link.focus()
+    }
+  }
+}
+
+/**
+ * @param {import('./proposed-comment.js').ProposedComment} proposed
+ * @param {ReadonlyArray<import('./contract-types.js').ReviewComment>} posted
+ */
+export function postedCommentUrl(proposed, posted) {
+  return posted.find(
+    c =>
+      c.inReplyToId === undefined &&
+      c.path === proposed.path &&
+      c.line === proposed.line &&
+      c.side === proposed.side &&
+      (c.startLine ?? c.line) === (proposed.startLine ?? proposed.line) &&
+      c.body === proposed.body
+  )?.url
+}

package/static/js/composer.js

@@ -0,0 +1,241 @@
+// @ts-check
+// The inline comment box. One markup for all three places it appears: on a diff line, under a
+// thread as a reply, and in the overview for a PR-level comment.
+/** @typedef {import('./contract-types.js').Side} Side */
+/** @typedef {import('./contract-types.js').PostCommentInput} PostCommentInput */
+import { cssEscape } from './anchors.js'
+import { renderMarkdown } from './markdown.js'
+import { esc } from './dom.js'
+
+/**
+ * @typedef {{
+ *   id: string,
+ *   label: string,
+ *   kind: 'inline' | 'reply' | 'issue',
+ *   path?: string,
+ *   line?: number,
+ *   side?: Side,
+ *   startLine?: number,
+ *   inReplyToId?: number,
+ *   pointFingerprint?: string,
+ *   body?: string,
+ * }} ComposerOptions
+ */
+
+/** @param {ComposerOptions} opts */
+function dataAttributes(opts) {
+  const pairs = [
+    ['data-kind', opts.kind],
+    ['data-path', opts.path],
+    ['data-line', opts.line],
+    ['data-side', opts.side],
+    ['data-start-line', opts.startLine],
+    ['data-in-reply-to', opts.inReplyToId],
+    ['data-fingerprint', opts.pointFingerprint],
+  ]
+  return pairs
+    .filter(([, value]) => value !== undefined)
+    .map(([name, value]) => ` ${String(name)}="${esc(value)}"`)
+    .join('')
+}
+
+/**
+ * The box itself. The textarea carries the draft; the two commands act on the nearest
+ * `.composer-box` ancestor.
+ * @param {ComposerOptions} opts
+ */
+export function composerHtml(opts) {
+  return (
+    `<div class="composer-box" id="${esc(opts.id)}"${dataAttributes(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>'
+  )
+}
+
+/**
+ * The same box as a diff row, so it can sit under the line it comments on.
+ * @param {ComposerOptions} 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>`
+  )
+}
+
+/** The pending item shown while GitHub answers, replaced by the comment it returns. */
+export function pendingCommentHtml() {
+  return '<div class="cmt pending" data-pending="1"><span class="who muted">posting…</span></div>'
+}
+
+/**
+ * The body a composer holds, trimmed. Empty means there is nothing to post.
+ * @param {Element} box
+ */
+export function composerBody(box) {
+  const textarea = box.querySelector('textarea')
+  return textarea instanceof HTMLTextAreaElement ? textarea.value.trim() : ''
+}
+
+/**
+ * The request that posts what this composer holds.
+ * @param {Element} box
+ * @returns {PostCommentInput | null} null when the box is empty or misses its target
+ */
+export function composerInput(box) {
+  const body = composerBody(box)
+  if (body === '') {
+    return null
+  }
+  const kind = box.getAttribute('data-kind')
+  if (kind === 'issue') {
+    return { kind: 'issue', body }
+  }
+  if (kind === 'reply') {
+    const inReplyToId = Number(box.getAttribute('data-in-reply-to'))
+    return Number.isInteger(inReplyToId) && inReplyToId > 0 ? { kind: 'reply', inReplyToId, body } : null
+  }
+  const path = box.getAttribute('data-path')
+  const line = Number(box.getAttribute('data-line'))
+  const side = box.getAttribute('data-side') === 'old' ? 'old' : 'new'
+  if (path === null || !Number.isInteger(line) || line <= 0) {
+    return null
+  }
+  /** @type {PostCommentInput} */
+  const input = { kind: 'inline', path, line, side, body }
+  const startLine = Number(box.getAttribute('data-start-line'))
+  if (Number.isInteger(startLine) && startLine > 0 && startLine !== line) {
+    input.startLine = startLine
+  }
+  const fingerprint = box.getAttribute('data-fingerprint')
+  if (fingerprint !== null && fingerprint !== '') {
+    input.pointFingerprint = fingerprint
+  }
+  return input
+}
+
+/**
+ * Puts the focus in the box that was just opened.
+ * @param {ParentNode} root
+ * @param {string} id
+ */
+export function focusComposer(root, id) {
+  const textarea = root.querySelector(`#${cssEscape(id)}-t`)
+  if (textarea instanceof HTMLTextAreaElement) {
+    textarea.focus()
+  }
+  return textarea
+}
+
+/**
+ * Removes every open composer under `root`, so only one is open at a time.
+ * @param {ParentNode} root
+ */
+export function closeComposers(root) {
+  let closed = 0
+  for (const box of Array.from(root.querySelectorAll('.composer-box'))) {
+    const row = box.closest('tr.composer')
+    ;(row ?? box).remove()
+    closed++
+  }
+  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.
+ *
+ * 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
+ * removes the reason it owns, which the element carries in `data-post-blocked`.
+ * @param {ParentNode} root
+ * @param {import('./contract-types.js').Capabilities} capabilities
+ */
+export function applyCapabilityGating(root, capabilities) {
+  const blocked = capabilities.canComment === false
+  const reason = capabilities.reason ?? NO_POSTING_TITLE
+  for (const el of Array.from(root.querySelectorAll('[data-needs-post]'))) {
+    if (!(el instanceof HTMLButtonElement) || el.getAttribute('aria-busy') === 'true') {
+      continue
+    }
+    const own = el.getAttribute('data-disabled-reason')
+    if (blocked) {
+      el.toggleAttribute('data-post-blocked', true)
+      el.disabled = true
+      el.title = reason
+    } else {
+      el.removeAttribute('data-post-blocked')
+      el.disabled = own !== null
+      if (own === null) {
+        const tooltip = el.getAttribute('data-tooltip')
+        if (tooltip) {
+          el.title = tooltip
+        } else {
+          el.removeAttribute('title')
+        }
+      } else {
+        el.title = own
+      }
+    }
+  }
+  const note = root.querySelector('.capability-note')
+  if (note !== null) {
+    // A disabled command cannot take focus, so the reason is also said in plain sight.
+    note.textContent = blocked ? `Posting to GitHub is off: ${reason}` : ''
+  }
+  return blocked
+}
+
+/**
+ * Disables one command for a reason of its own, or lifts that reason. The capability state is
+ * untouched, so a command that both rules disable stays disabled until both allow it.
+ * @param {Element | null} el
+ * @param {string | null} reason null enables the command again
+ */
+export function setDisabledReason(el, reason) {
+  if (!(el instanceof HTMLButtonElement)) {
+    return
+  }
+  if (reason === null) {
+    el.removeAttribute('data-disabled-reason')
+    if (!el.hasAttribute('data-post-blocked')) {
+      el.disabled = false
+      const tooltip = el.getAttribute('data-tooltip')
+      if (tooltip) {
+        el.title = tooltip
+      } else {
+        el.removeAttribute('title')
+      }
+    }
+    return
+  }
+  el.setAttribute('data-disabled-reason', reason)
+  el.disabled = true
+  if (!el.hasAttribute('data-post-blocked')) {
+    el.title = reason
+  }
+}
+
+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>'
+}
+
+/** @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')
+  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>'
+  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))
+  if (!preview) textarea.focus()
+}

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

@@ -0,0 +1,59 @@
+// Type-only bridge so the browser modules (JSDoc) see the same contract as the server.
+
+export type {
+  CanvasRelation,
+  Capabilities,
+  ChatStatus,
+  ErrorEnvelope,
+  ImportResult,
+  PatchesResponse,
+  PostCommentResponse,
+  PostReviewResponse,
+  PrBundle,
+  ReviewBodyResponse,
+  ReviewSummary,
+  SharedCanvasFetchResponse,
+  SharedCanvasInfo,
+  StaleInfo,
+  StateResponse,
+} from '../../src/contract/api.js'
+export type {
+  ChatEvent,
+  ChatHistoryResponse,
+  ChatThreadsResponse,
+  ChatTurn,
+} from '../../src/contract/chat.js'
+export type {
+  CommentsPayload,
+  IssueComment,
+  PostCommentInput,
+  ReviewComment,
+} from '../../src/contract/comments.js'
+export type {
+  Annotation,
+  CodeFold,
+  Diagram,
+  FileEntry,
+  Hunk,
+  Layer,
+  LayerFile,
+  Point,
+  Pr,
+  ReviewArtifact,
+  RiskTag,
+  Side,
+  TestEntry,
+} from '../../src/contract/review-artifact.js'
+export type {
+  AgentAvailability,
+  AgentProbeResult,
+  AgentsResponse,
+  AppearanceInput,
+  AppearanceResponse,
+  ChatAgent,
+  Settings,
+  SettingsInput,
+  SettingsResponse,
+  Theme,
+} from '../../src/contract/settings.js'
+export type { PrState } from '../../src/contract/state.js'