@vintasoftware/pr-review-canvas 0.1.0

package/static/js/regenerate.js

@@ -0,0 +1,69 @@
+// @ts-check
+// The regenerate dialog: the skill command with --force and a copy command. The page keeps polling
+// while it is open and swaps in the new canvas when one is indexed for the head.
+/** @typedef {import('./contract-types.js').PrBundle} PrBundle */
+import { esc } from './dom.js'
+
+export const REGENERATE_DIALOG_ID = 'regenerate-dialog'
+
+/**
+ * @param {string} command
+ * @returns {string}
+ */
+export function regenerateDialogHtml(command) {
+  return (
+    `<dialog id="${REGENERATE_DIALOG_ID}" class="regen" aria-labelledby="regen-h"><form method="dialog">` +
+    '<h2 id="regen-h">Regenerate the canvas</h2>' +
+    '<p class="hint">Run this in Claude Code or Codex from this repo. The current canvas stays until the new one is published; this page then updates on its own.</p>' +
+    `<div class="cmdbox"><code>${esc(command)}</code><button class="cmd fill" type="button" data-copy="${esc(command)}">copy</button></div>` +
+    '<div class="dialog-actions"><button class="cmd" type="submit" value="close">close</button></div>' +
+    '</form></dialog>'
+  )
+}
+
+/**
+ * Creates the dialog under `root` on first use, updates its command, and opens it.
+ * @param {HTMLElement} root
+ * @param {string} command
+ * @returns {HTMLDialogElement}
+ */
+export function openRegenerateDialog(root, command) {
+  let dialog = root.querySelector(`#${REGENERATE_DIALOG_ID}`)
+  if (!(dialog instanceof HTMLDialogElement)) {
+    const t = document.createElement('template')
+    t.innerHTML = regenerateDialogHtml(command)
+    root.appendChild(t.content)
+    dialog = root.querySelector(`#${REGENERATE_DIALOG_ID}`)
+  }
+  if (!(dialog instanceof HTMLDialogElement)) {
+    throw new Error('regenerate dialog did not render')
+  }
+  const code = dialog.querySelector('code')
+  const copy = dialog.querySelector('[data-copy]')
+  if (code) {
+    code.textContent = command
+  }
+  copy?.setAttribute('data-copy', command)
+  if (typeof dialog.showModal === 'function' && !dialog.open) {
+    dialog.showModal()
+  } else {
+    dialog.setAttribute('open', '')
+  }
+  return dialog
+}
+
+/**
+ * True when `next` carries a canvas that differs from the one the page shows: another head sha,
+ * or the same head regenerated (a newer generatedAt).
+ * @param {PrBundle} current
+ * @param {PrBundle} next
+ */
+export function canvasChanged(current, next) {
+  if (next.status !== 'ready' || !next.artifact || !next.canvas) {
+    return false
+  }
+  if (current.status !== 'ready' || !current.artifact || !current.canvas) {
+    return true
+  }
+  return next.canvas.headSha !== current.canvas.headSha || next.artifact.generatedAt !== current.artifact.generatedAt
+}

package/static/js/review-session.js

@@ -0,0 +1,257 @@
+// @ts-check
+// What the page knows about one PR while it is open: the canvas, the local review state, and
+// what this GitHub login may post. Every change is applied at once and taken back when the
+// server refuses it, so a click is never silently lost.
+/** @typedef {import('./contract-types.js').Capabilities} Capabilities */
+/** @typedef {import('./contract-types.js').FileEntry} FileEntry */
+/** @typedef {import('./contract-types.js').PostCommentInput} PostCommentInput */
+/** @typedef {import('./contract-types.js').PostCommentResponse} PostCommentResponse */
+/** @typedef {import('./contract-types.js').PrState} PrState */
+/** @typedef {import('./contract-types.js').ReviewArtifact} ReviewArtifact */
+/** @typedef {import('./contract-types.js').ReviewSummary} ReviewSummary */
+import { postComment, postReview, putDismissed, putReviewed, putThreadHidden } from './api.js'
+import { sanitizeKey } from './keys.js'
+
+/**
+ * @typedef {{
+ *   putReviewed: typeof putReviewed,
+ *   putDismissed: typeof putDismissed,
+ *   putThreadHidden: typeof putThreadHidden,
+ *   postComment: typeof postComment,
+ *   postReview: typeof postReview,
+ * }} SessionApi
+ */
+
+/**
+ * @typedef {{
+ *   prNumber: number,
+ *   artifact: ReviewArtifact,
+ *   files: ReadonlyArray<FileEntry>,
+ *   state: PrState,
+ *   capabilities: Capabilities,
+ *   headSha: string,
+ *   api?: Partial<SessionApi>,
+ *   onState?: (state: PrState) => void,
+ * }} SessionOptions
+ */
+
+/** @param {Partial<SessionApi> | undefined} overrides */
+function withDefaults(overrides) {
+  return { putReviewed, putDismissed, putThreadHidden, postComment, postReview, ...overrides }
+}
+
+/**
+ * @param {string} layerId
+ * @param {string} [path]
+ */
+export function reviewedId(layerId, path) {
+  return path === undefined ? `layer:${layerId}` : `layer:${layerId}/file:${sanitizeKey(path)}`
+}
+
+/** @param {SessionOptions} options */
+export function createReviewSession(options) {
+  const api = withDefaults(options.api)
+  /** @type {PrState} */
+  let state = options.state
+  /** @type {Capabilities} */
+  let capabilities = options.capabilities
+  const keyToPath = new Map(options.files.map(f => [f.key, f.path]))
+
+  /** @type {Array<(state: PrState) => void>} */
+  const listeners = options.onState === undefined ? [] : [options.onState]
+
+  /** @param {PrState} next */
+  const publish = next => {
+    state = next
+    for (const fn of listeners) {
+      fn(state)
+    }
+  }
+
+  /** How many changes are waiting for an answer. */
+  let inFlight = 0
+  /** The newest answer that came back while others were still in flight, and its write count. */
+  /** @type {PrState | null} */
+  let newestState = null
+  let newestRev = 0
+  /** The write count of the last answer this page took. */
+  let takenRev = 0
+
+  /**
+   * Shows the change at once, then reconciles with the server.
+   *
+   * `apply` and `undo` work on whatever the state is when they run, so a change that fails
+   * takes back only itself and leaves a change that landed meanwhile alone. Answers carry the
+   * write they came from (`rev`), so the newest one wins however the answers arrive, and it is
+   * taken once nothing is in flight.
+   * @param {(state: PrState) => PrState} apply
+   * @param {(state: PrState) => PrState} undo
+   * @param {() => Promise<{ state: PrState }>} request
+   */
+  const change = async (apply, undo, request) => {
+    inFlight += 1
+    publish(apply(state))
+    try {
+      const answer = await request()
+      inFlight -= 1
+      takeAnswer(answer.state)
+      settle()
+      return state
+    } catch (err) {
+      inFlight -= 1
+      // A change that failed was never written, so an answer that is waiting already describes
+      // the state without it; only what this page showed has to be taken back.
+      publish(undo(state))
+      settle()
+      throw err
+    }
+  }
+
+  /** @param {PrState} answered */
+  const takeAnswer = answered => {
+    const rev = answered.rev ?? 0
+    if (rev >= newestRev) {
+      newestRev = rev
+      newestState = answered
+    }
+  }
+
+  /** Takes the newest answer once every change has come back, unless an older one arrived. */
+  const settle = () => {
+    if (inFlight > 0 || newestState === null) {
+      return
+    }
+    const next = newestState
+    newestState = null
+    newestRev = 0
+    if ((next.rev ?? 0) >= takenRev) {
+      takenRev = next.rev ?? 0
+      publish(next)
+    }
+  }
+
+  /**
+   * @param {PrState} current
+   * @param {'reviewed' | 'dismissed' | 'hiddenThreads'} field
+   * @param {string} key
+   * @param {{ at: string, reason?: string | undefined } | true | undefined} value undefined removes the key
+   */
+  const withEntry = (current, field, key, value) => {
+    const next = { ...current[field] }
+    if (value === undefined) {
+      delete next[key]
+    } else {
+      Object.assign(next, { [key]: value })
+    }
+    return { ...current, [field]: next }
+  }
+
+  return {
+    get state() {
+      return state
+    },
+    get capabilities() {
+      return capabilities
+    },
+    get artifact() {
+      return options.artifact
+    },
+    prNumber: options.prNumber,
+    /**
+     * Runs `fn` after every change of the local state, the optimistic one included.
+     * @param {(state: PrState) => void} fn
+     */
+    subscribe(fn) {
+      listeners.push(fn)
+      return () => {
+        const at = listeners.indexOf(fn)
+        if (at >= 0) {
+          listeners.splice(at, 1)
+        }
+      }
+    },
+    /** @param {Capabilities} next */
+    setCapabilities(next) {
+      capabilities = next
+    },
+    /** The commit this page was drawn for; every post names it. */
+    headSha: options.headSha,
+    /** @param {string} key */
+    pathForKey(key) {
+      return keyToPath.get(key)
+    },
+    /** @param {string} id */
+    isReviewed(id) {
+      return state.reviewed[id] === true
+    },
+    /**
+     * @param {string} id
+     * @param {boolean} reviewed
+     */
+    setReviewed(id, reviewed) {
+      const before = state.reviewed[id]
+      return change(
+        current => withEntry(current, 'reviewed', id, reviewed ? true : undefined),
+        current => withEntry(current, 'reviewed', id, before),
+        () => api.putReviewed(options.prNumber, id, reviewed, { headSha: options.headSha })
+      )
+    },
+    /**
+     * @param {string} fingerprint
+     * @param {boolean} dismissed
+     */
+    setDismissed(fingerprint, dismissed) {
+      const before = state.dismissed[fingerprint]
+      const at = new Date().toISOString()
+      return change(
+        current => withEntry(current, 'dismissed', fingerprint, dismissed ? { at } : undefined),
+        current => withEntry(current, 'dismissed', fingerprint, before),
+        () => api.putDismissed(options.prNumber, fingerprint, dismissed)
+      )
+    },
+    /**
+     * @param {number} rootCommentId
+     * @param {boolean} hidden
+     */
+    setThreadHidden(rootCommentId, hidden) {
+      const key = String(rootCommentId)
+      const before = state.hiddenThreads[key]
+      const at = new Date().toISOString()
+      return change(
+        current => withEntry(current, 'hiddenThreads', key, hidden ? { at } : undefined),
+        current => withEntry(current, 'hiddenThreads', key, before),
+        () => api.putThreadHidden(options.prNumber, rootCommentId, hidden)
+      )
+    },
+    /**
+     * Posts one comment. The pending item is the caller's; here only the answer is kept.
+     * @param {PostCommentInput} input
+     * @returns {Promise<PostCommentResponse>}
+     */
+    async postComment(input) {
+      inFlight += 1
+      try {
+        const answer = await api.postComment(options.prNumber, { ...input, headSha: options.headSha })
+        inFlight -= 1
+        takeAnswer(answer.state)
+        settle()
+        return answer
+      } catch (err) {
+        inFlight -= 1
+        settle()
+        throw err
+      }
+    },
+    /**
+     * @param {'APPROVE' | 'REQUEST_CHANGES'} event
+     * @param {string} [body]
+     * @returns {Promise<ReviewSummary>}
+     */
+    async postReview(event, body) {
+      const input = body === undefined ? { event } : { event, body }
+      return (await api.postReview(options.prNumber, { ...input, headSha: options.headSha })).review
+    },
+  }
+}
+
+/** @typedef {ReturnType<typeof createReviewSession>} ReviewSession */

package/static/js/scroll-spy.js

@@ -0,0 +1,66 @@
+// @ts-check
+import { cssEscape } from './anchors.js'
+
+/**
+ * Marks the sidebar link for the section being read.
+ * @param {ParentNode} root
+ * @param {string} anchorId
+ */
+export function markRailCurrent(root, anchorId) {
+  for (const link of root.querySelectorAll('nav.rail a[href]')) {
+    if (link.getAttribute('href') === `#${anchorId}`) {
+      if (link.getAttribute('aria-current') !== 'location') {
+        link.setAttribute('aria-current', 'location')
+      }
+    } else {
+      link.removeAttribute('aria-current')
+    }
+  }
+}
+
+/**
+ * Follows the section at the upper third of the viewport. Section sizes can change as diffs
+ * and diagrams load, so those changes also update the selection.
+ * @param {HTMLElement} root
+ */
+export function initScrollSpy(root) {
+  const sections = Array.from(root.querySelectorAll('nav.rail a[href^="#"]')).flatMap(link => {
+    const id = link.getAttribute('href')?.slice(1) ?? ''
+    const section = id === '' ? null : root.querySelector(`#${cssEscape(id)}`)
+    return section instanceof HTMLElement ? [section] : []
+  })
+  let frame = 0
+  const update = () => {
+    frame = 0
+    let active = sections[0]
+    for (const section of sections) {
+      if (section.getBoundingClientRect().top > window.innerHeight / 3) {
+        break
+      }
+      active = section
+    }
+    if (active !== undefined) {
+      markRailCurrent(root, active.id)
+    }
+  }
+  const schedule = () => {
+    if (frame === 0) {
+      frame = window.requestAnimationFrame(update)
+    }
+  }
+  const observer = new ResizeObserver(schedule)
+  for (const section of sections) {
+    observer.observe(section)
+  }
+  window.addEventListener('scroll', schedule, { passive: true })
+  window.addEventListener('resize', schedule)
+  update()
+  return {
+    stop() {
+      window.removeEventListener('scroll', schedule)
+      window.removeEventListener('resize', schedule)
+      observer.disconnect()
+      window.cancelAnimationFrame(frame)
+    },
+  }
+}

package/static/js/selection.js

@@ -0,0 +1,193 @@
+// @ts-check
+// Picking lines in a diff. The reducer is pure: click selects, clicking the same single line
+// again deselects, shift-click extends, dragging extends and commits when the pointer is
+// released, Esc clears. The DOM side only marks the rows and shows the toolbar.
+/** @typedef {import('./contract-types.js').Side} Side */
+/** @typedef {{ key: string, path: string, side: Side, line: number }} LineRef */
+/**
+ * @typedef {{ key: string, path: string, side: Side, anchor: number, start: number, end: number, dragging: boolean }} Selection
+ */
+/**
+ * @typedef {{ type: 'click', target: LineRef }
+ *   | { type: 'shift-click', target: LineRef }
+ *   | { type: 'drag-start', target: LineRef }
+ *   | { type: 'drag-over', target: LineRef }
+ *   | { type: 'commit' }
+ *   | { type: 'clear' }} SelectionAction
+ */
+
+import { findRow } from './anchors.js'
+import { askButtonHtml } from './ask.js'
+import { esc } from './dom.js'
+
+/**
+ * @param {Selection | null} selection
+ * @param {LineRef} target
+ */
+function sameSide(selection, target) {
+  return selection !== null && selection.key === target.key && selection.side === target.side
+}
+
+/**
+ * @param {LineRef} target
+ * @param {boolean} dragging
+ * @returns {Selection}
+ */
+function single(target, dragging) {
+  return {
+    key: target.key,
+    path: target.path,
+    side: target.side,
+    anchor: target.line,
+    start: target.line,
+    end: target.line,
+    dragging,
+  }
+}
+
+/**
+ * @param {Selection} selection
+ * @param {number} line
+ * @param {boolean} dragging
+ * @returns {Selection}
+ */
+function extend(selection, line, dragging) {
+  return {
+    ...selection,
+    start: Math.min(selection.anchor, line),
+    end: Math.max(selection.anchor, line),
+    dragging,
+  }
+}
+
+/**
+ * @param {Selection | null} selection
+ * @param {SelectionAction} action
+ * @returns {Selection | null}
+ */
+export function selectionReducer(selection, action) {
+  switch (action.type) {
+    case 'click':
+      if (
+        sameSide(selection, action.target) &&
+        selection?.start === action.target.line &&
+        selection.end === action.target.line
+      ) {
+        return null
+      }
+      return single(action.target, false)
+    case 'shift-click':
+      return selection !== null && sameSide(selection, action.target)
+        ? extend(selection, action.target.line, false)
+        : single(action.target, false)
+    case 'drag-start':
+      return single(action.target, true)
+    case 'drag-over':
+      return selection?.dragging === true && sameSide(selection, action.target)
+        ? extend(selection, action.target.line, true)
+        : selection
+    case 'commit':
+      return selection === null ? null : { ...selection, dragging: false }
+    case 'clear':
+      return null
+  }
+}
+
+/** @param {Selection} selection */
+export function selectionLabel(selection) {
+  return selection.start === selection.end
+    ? `${selection.path} line ${selection.start}`
+    : `${selection.path} lines ${selection.start}–${selection.end}`
+}
+
+/**
+ * The little bar under a selection: comment on those lines, or ask the chat about them.
+ * @param {Selection} selection
+ */
+export function selectionToolbarHtml(selection) {
+  const label = selectionLabel(selection)
+  return (
+    `<tr class="sel-bar" data-decoration="selection"><td class="ln" colspan="3"></td><td class="code x">` +
+    `<span class="lbl">${esc(label)}</span>` +
+    '<span class="tbtns"><button class="cmd" type="button" data-act="comment-selection" data-needs-post>comment</button>' +
+    askButtonHtml({
+      kind: 'lines',
+      path: selection.path,
+      side: selection.side,
+      start: selection.start,
+      end: selection.end,
+    }) +
+    '</span></td></tr>'
+  )
+}
+
+/**
+ * Marks the selected rows and puts the toolbar under the last one. Removes the marks of the
+ * previous selection first, so calling it again with any selection leaves one set of marks.
+ * @param {ParentNode} root
+ * @param {Selection | null} selection
+ * @returns {HTMLTableRowElement | null} the row the toolbar was added after
+ */
+export function markSelection(root, selection) {
+  for (const row of Array.from(root.querySelectorAll('tr.is-selected'))) {
+    row.classList.remove('is-selected')
+  }
+  for (const bar of Array.from(root.querySelectorAll('tr.sel-bar'))) {
+    bar.remove()
+  }
+  if (selection === null) {
+    return null
+  }
+  /** @type {HTMLTableRowElement | null} */
+  let last = null
+  for (let line = selection.start; line <= selection.end; line++) {
+    const row = findRow(root, selection.key, selection.side, line)
+    if (row) {
+      row.classList.add('is-selected')
+      last = row
+    }
+  }
+  if (last === null || selection.dragging) {
+    return last
+  }
+  const template = document.createElement('template')
+  template.innerHTML = `<table><tbody>${selectionToolbarHtml(selection)}</tbody></table>`
+  const bar = template.content.querySelector('tr')
+  if (bar !== null) {
+    last.insertAdjacentElement('afterend', bar)
+  }
+  return last
+}
+
+/**
+ * The line a pointer event landed on, read from the row it came from. Null when the event did
+ * not start on a line number cell of a diff row.
+ * @param {Event} event
+ * @param {(key: string) => string | undefined} pathForKey
+ * @returns {LineRef | null}
+ */
+export function lineRefFromEvent(event, pathForKey) {
+  const target = event.target instanceof Element ? event.target.closest('td.ln') : null
+  if (target === null) {
+    return null
+  }
+  const row = target.closest('tr')
+  const table = row?.closest('table.diff')
+  const key = table?.getAttribute('data-key')
+  if (!(row && key) || row.classList.contains('hunk') || row.classList.contains('more')) {
+    return null
+  }
+  // The column decides the side: the left one is the old file, the right one the new file.
+  // A deleted line exists only on the left, so it is always the old side.
+  const cells = Array.from(row.querySelectorAll('td.ln'))
+  const oldText = cells[0]?.textContent?.trim() ?? ''
+  const newText = cells[1]?.textContent?.trim() ?? ''
+  const clickedOld = cells.indexOf(target) === 0 && oldText !== ''
+  const side = row.classList.contains('del') || clickedOld ? 'old' : 'new'
+  const line = Number(side === 'old' ? oldText : newText)
+  const path = pathForKey(key)
+  if (!Number.isInteger(line) || line <= 0 || path === undefined) {
+    return null
+  }
+  return { key, path, side, line }
+}