@vintasoftware/pr-review-canvas 0.1.0

package/static/js/settings.js

@@ -0,0 +1,206 @@
+// @ts-check
+// The settings dialog: the personal chat settings this browser can change, and a read-only look
+// at the project config, which is committed and belongs to the repository.
+/** @typedef {import('./contract-types.js').AgentsResponse} AgentsResponse */
+/** @typedef {import('./contract-types.js').SettingsResponse} SettingsResponse */
+import { fetchAgents, fetchSettings, probeAgent, saveSettings } from './api.js'
+import { runCommand } from './commands.js'
+import { esc, qs } from './dom.js'
+
+export const SETTINGS_DIALOG_ID = 'settings-dialog'
+
+/** Model ids the input suggests per agent. Free text is allowed; this is only a shortcut. */
+export const MODEL_SUGGESTIONS = {
+  claude: ['claude-opus-5', 'claude-sonnet-5', 'claude-haiku-4-5-20251001'],
+  codex: ['gpt-5.2', 'gpt-5.2[high]'],
+}
+
+/** @param {string} agent */
+export function modelOptionsHtml(agent) {
+  const list = agent === 'codex' ? MODEL_SUGGESTIONS.codex : MODEL_SUGGESTIONS.claude
+  return list.map(id => `<option value="${esc(id)}"></option>`).join('')
+}
+
+/**
+ * @param {SettingsResponse} data
+ * @param {AgentsResponse} agents
+ * @returns {string}
+ */
+export function settingsDialogHtml(data, agents) {
+  const { settings, overrides, project } = data
+  const options = agents.agents
+    .map(a => {
+      const reason = a.available ? '' : ` (${a.reason ?? 'not available'})`
+      return `<option value="${esc(a.id)}"${a.id === settings.agent ? ' selected' : ''}${a.available ? '' : ' disabled'}>${esc(a.id)}${esc(reason)}</option>`
+    })
+    .join('')
+  const overrideNote =
+    overrides.agent === undefined && overrides.model === undefined
+      ? ''
+      : `<p class="notice" role="status">A serve flag wins over this file for now: ${esc(
+          [
+            overrides.agent === undefined ? '' : `--agent ${overrides.agent}`,
+            overrides.model === undefined ? '' : `--model ${overrides.model}`,
+          ]
+            .filter(Boolean)
+            .join(' ')
+        )}</p>`
+  return (
+    `<dialog id="${SETTINGS_DIALOG_ID}" class="settings" aria-labelledby="settings-h">` +
+    '<h2 id="settings-h">Settings</h2>' +
+    overrideNote +
+    (agents.acpx.installed
+      ? ''
+      : '<p class="notice" role="status">acpx is not on PATH, so AI Chat is off. Install acpx and reload.</p>') +
+    '<div class="field"><label for="set-agent">Agent</label>' +
+    `<select id="set-agent">${options}</select></div>` +
+    '<div class="field"><label for="set-model">Model</label>' +
+    `<input id="set-model" list="model-list" value="${esc(settings.model ?? '')}" placeholder="the agent's default">` +
+    `<datalist id="model-list">${modelOptionsHtml(settings.agent)}</datalist></div>` +
+    '<div class="field"><label for="set-timeout">Chat timeout (seconds)</label>' +
+    `<input id="set-timeout" type="number" min="30" max="3600" value="${esc(settings.chatTimeoutSec)}"></div>` +
+    '<div class="field"><label for="set-turns">Max turns</label>' +
+    `<input id="set-turns" type="number" min="1" max="100" value="${esc(settings.maxTurns ?? '')}" placeholder="the agent's default"></div>` +
+    '<p class="muted small">Changing the agent starts a new chat thread; the old ones stay in the list.</p>' +
+    `<p class="muted small mono">${esc(data.file)}</p>` +
+    '<div class="panel-ro"><h3>Project config (read-only)</h3>' +
+    `<ul class="plain"><li>chat enabled: ${project.chatEnabled ? 'yes' : 'no'}</li>` +
+    `<li>rulebook: ${esc(project.rulebook ?? 'none')}</li>` +
+    `<li>layers in the taxonomy: ${project.layers}</li>` +
+    `<li>high-risk patterns: ${project.highRisk}</li>` +
+    `<li>max repair rounds: ${project.maxRepairRounds}</li>` +
+    `<li>inline diff max lines: ${project.inlineDiffMaxLines}</li>` +
+    `<li>small change set: ${project.smallPrHunks} hunks</li></ul>` +
+    `<p class="muted small mono">${esc(project.file ?? 'built-in defaults (no pr-review.config.yml)')}</p></div>` +
+    '<p class="probe-result" role="status"></p>' +
+    '<div class="dialog-actions">' +
+    '<button class="cmd" type="button" data-act="settings-probe">test agent</button>' +
+    '<button class="cmd fill" type="button" data-act="settings-save">save</button>' +
+    '<button class="cmd" type="button" data-act="settings-close">close</button>' +
+    '</div></dialog>'
+  )
+}
+
+/**
+ * The four requests the dialog makes. Tests pass their own.
+ * @typedef {{
+ *   fetchSettings: typeof fetchSettings,
+ *   saveSettings: typeof saveSettings,
+ *   fetchAgents: typeof fetchAgents,
+ *   probeAgent: typeof probeAgent,
+ * }} SettingsApi
+ */
+
+/**
+ * Opens the dialog, filling it from the server. The caller passes the command that opened it so
+ * its pending state shows while the two requests are in flight.
+ * @param {HTMLElement} root
+ * @param {HTMLElement} opener
+ * @param {{ api?: Partial<SettingsApi>, onSaved?: (data: SettingsResponse) => void }} [opts]
+ */
+export async function openSettingsDialog(root, opener, opts = {}) {
+  const api = { fetchSettings, saveSettings, fetchAgents, probeAgent, ...opts.api }
+  const loaded = await runCommand(
+    opener,
+    async () => {
+      const [data, agents] = await Promise.all([api.fetchSettings(), api.fetchAgents()])
+      return { data, agents }
+    },
+    { pendingLabel: 'loading…' }
+  )
+  if (loaded === undefined) {
+    return null
+  }
+  qs(`#${SETTINGS_DIALOG_ID}`, root)?.remove()
+  root.insertAdjacentHTML('beforeend', settingsDialogHtml(loaded.data, loaded.agents))
+  const dialog = qs(`#${SETTINGS_DIALOG_ID}`, root)
+  if (!(dialog instanceof HTMLDialogElement)) {
+    return null
+  }
+  wireSettingsDialog(dialog, api, opts.onSaved)
+  if (typeof dialog.showModal === 'function') {
+    dialog.showModal()
+  } else {
+    dialog.setAttribute('open', '')
+  }
+  return dialog
+}
+
+/** The values the dialog holds right now, as the PUT body. */
+export function readSettingsForm(/** @type {ParentNode} */ dialog) {
+  const agent = qs('#set-agent', dialog)
+  const model = qs('#set-model', dialog)
+  const timeout = qs('#set-timeout', dialog)
+  const turns = qs('#set-turns', dialog)
+  /** @type {import('./contract-types.js').SettingsInput} */
+  const input = {}
+  if (agent instanceof HTMLSelectElement && agent.value !== '') {
+    input.agent = /** @type {import('./contract-types.js').ChatAgent} */ (agent.value)
+  }
+  if (model instanceof HTMLInputElement) {
+    input.model = model.value.trim() === '' ? null : model.value.trim()
+  }
+  if (timeout instanceof HTMLInputElement && timeout.value !== '') {
+    input.chatTimeoutSec = Number(timeout.value)
+  }
+  if (turns instanceof HTMLInputElement) {
+    input.maxTurns = turns.value.trim() === '' ? null : Number(turns.value)
+  }
+  return input
+}
+
+/**
+ * @param {HTMLDialogElement} dialog
+ * @param {SettingsApi} api
+ * @param {((data: SettingsResponse) => void) | undefined} onSaved
+ */
+export function wireSettingsDialog(dialog, api, onSaved) {
+  dialog.addEventListener('change', event => {
+    if (event.target instanceof HTMLSelectElement && event.target.id === 'set-agent') {
+      const list = dialog.querySelector('#model-list')
+      if (list !== null) {
+        list.innerHTML = modelOptionsHtml(event.target.value)
+      }
+    }
+  })
+  dialog.addEventListener('click', event => {
+    const el = event.target instanceof Element ? event.target.closest('[data-act]') : null
+    if (!(el instanceof HTMLElement)) {
+      return
+    }
+    const act = el.getAttribute('data-act')
+    if (act === 'settings-close') {
+      dialog.close()
+      return
+    }
+    if (act === 'settings-save') {
+      void runCommand(
+        el,
+        async () => {
+          const saved = await api.saveSettings(readSettingsForm(dialog))
+          onSaved?.(saved)
+          dialog.close()
+        },
+        { pendingLabel: 'saving…' }
+      )
+      return
+    }
+    if (act === 'settings-probe') {
+      const agent = qs('#set-agent', dialog)
+      const id = agent instanceof HTMLSelectElement ? agent.value : ''
+      void runCommand(
+        el,
+        async () => {
+          const result = await api.probeAgent(id)
+          const out = dialog.querySelector('.probe-result')
+          if (out !== null) {
+            out.textContent = result.ok
+              ? `${result.id} answered in ${Math.round(result.ms / 100) / 10}s${result.cached ? ' (cached)' : ''}`
+              : `${result.id} failed: ${result.message ?? result.code ?? 'unknown'}`
+          }
+        },
+        { pendingLabel: 'testing…' }
+      )
+    }
+  })
+}

package/static/js/signoff.js

@@ -0,0 +1,171 @@
+// @ts-check
+// Signing off: approve or request changes. The dialog shows the body the server built, lets the
+// reader edit it, and names the commit the review lands on.
+/** @typedef {import('./contract-types.js').PrState} PrState */
+/** @typedef {import('./contract-types.js').ReviewArtifact} ReviewArtifact */
+/** @typedef {import('./contract-types.js').ReviewBodyResponse} ReviewBodyResponse */
+import { previewControlsHtml, setDisabledReason } from './composer.js'
+import { esc } from './dom.js'
+import { layerProgress } from './progress.js'
+
+export const SIGNOFF_DIALOG_ID = 'signoff-dialog'
+
+/** Why the post command waits: the body the server writes is not there yet. */
+export const LOADING_REASON = 'the review body is still loading'
+
+/**
+ * Why approve is not allowed yet, or null when it is. Other changes never counts.
+ * @param {ReviewArtifact} artifact
+ * @param {PrState} state
+ * @returns {string | null}
+ */
+export function approveBlockedReason(artifact, state) {
+  const [first, ...rest] = artifact.layers.filter(l => l.kind !== 'other' && layerProgress(l, state) !== 'done')
+  if (first === undefined) {
+    return null
+  }
+  return rest.length === 0
+    ? `1 layer is not reviewed yet: ${first.title}`
+    : `${rest.length + 1} layers are not reviewed yet`
+}
+
+/**
+ * @param {'APPROVE' | 'REQUEST_CHANGES'} event
+ */
+export function signoffTitle(event) {
+  return event === 'APPROVE' ? 'Approve on GitHub' : 'Request changes on GitHub'
+}
+
+/**
+ * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES' }} opts
+ * @returns {string}
+ */
+export function signoffDialogHtml(opts) {
+  return (
+    `<dialog id="${SIGNOFF_DIALOG_ID}" class="signoff-dialog" aria-labelledby="signoff-h">` +
+    `<h2 id="signoff-h">${esc(signoffTitle(opts.event))}</h2>` +
+    '<p class="hint">This posts a review on GitHub as you. Edit the body first if you want to.</p>' +
+    '<p class="signoff-target muted mono"></p>' +
+    '<label class="sr" for="signoff-body">Review body</label>' +
+    previewControlsHtml() +
+    '<textarea id="signoff-body" rows="12" aria-busy="true"></textarea>' +
+    '<p class="signoff-result" role="status"></p>' +
+    '<div class="dialog-actions">' +
+    '<button class="cmd fill" type="button" data-act="signoff-post" data-needs-post disabled ' +
+    `data-disabled-reason="${esc(LOADING_REASON)}" title="${esc(LOADING_REASON)}">post review</button>` +
+    '<button class="cmd" type="button" data-act="signoff-close">cancel</button></div></dialog>'
+  )
+}
+
+/**
+ * Creates the dialog on first use, points it at this event, and opens it. The body arrives
+ * afterwards through `fillSignoffDialog`.
+ * @param {HTMLElement} root
+ * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES' }} opts
+ * @returns {HTMLDialogElement}
+ */
+export function openSignoffDialog(root, opts) {
+  let dialog = root.querySelector(`#${SIGNOFF_DIALOG_ID}`)
+  if (!(dialog instanceof HTMLDialogElement)) {
+    const t = document.createElement('template')
+    t.innerHTML = signoffDialogHtml(opts)
+    root.appendChild(t.content)
+    dialog = root.querySelector(`#${SIGNOFF_DIALOG_ID}`)
+  }
+  if (!(dialog instanceof HTMLDialogElement)) {
+    throw new Error('sign-off dialog did not render')
+  }
+  dialog.querySelector('[data-act="markdown-write"]')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  dialog.setAttribute('data-event', opts.event)
+  const heading = dialog.querySelector('#signoff-h')
+  if (heading !== null) {
+    heading.textContent = signoffTitle(opts.event)
+  }
+  const result = dialog.querySelector('.signoff-result')
+  if (result !== null) {
+    result.textContent = ''
+  }
+  const area = dialog.querySelector('textarea')
+  if (area instanceof HTMLTextAreaElement) {
+    area.value = ''
+    area.placeholder = 'loading the review body…'
+    area.setAttribute('aria-busy', 'true')
+  }
+  setDisabledReason(dialog.querySelector('[data-act="signoff-post"]'), LOADING_REASON)
+  if (typeof dialog.showModal === 'function' && !dialog.open) {
+    dialog.showModal()
+  } else {
+    dialog.setAttribute('open', '')
+  }
+  return dialog
+}
+
+/**
+ * Puts the generated body and the target commit in the dialog.
+ * @param {HTMLDialogElement} dialog
+ * @param {ReviewBodyResponse} preview
+ */
+export function fillSignoffDialog(dialog, preview) {
+  const area = dialog.querySelector('textarea')
+  if (area instanceof HTMLTextAreaElement) {
+    area.value = preview.body
+    area.removeAttribute('aria-busy')
+    area.focus()
+  }
+  setDisabledReason(dialog.querySelector('[data-act="signoff-post"]'), null)
+  const target = dialog.querySelector('.signoff-target')
+  if (target !== null) {
+    target.textContent = `on commit ${preview.headSha.slice(0, 7)}`
+  }
+  return dialog
+}
+
+/**
+ * Shows the link to the review GitHub created.
+ * @param {HTMLDialogElement} dialog
+ * @param {import('./contract-types.js').ReviewSummary} review
+ */
+export function showSignoffResult(dialog, review) {
+  const result = dialog.querySelector('.signoff-result')
+  if (result !== null) {
+    result.textContent = 'Posted · '
+    result.append(externalLink(review.url, 'see it on GitHub'))
+  }
+  return result
+}
+
+/**
+ * An anchor built as a node, with an href only when the target is an http(s) address. A link
+ * that comes from an API is still untrusted input.
+ * @param {string} url
+ * @param {string} text
+ */
+export function externalLink(url, text) {
+  const a = document.createElement('a')
+  a.textContent = text
+  if (/^https?:\/\//i.test(url)) {
+    a.href = url
+    a.target = '_blank'
+    a.rel = 'noopener noreferrer'
+  }
+  return a
+}
+
+/**
+ * Says inside the dialog why the body could not be read, and keeps the post command off.
+ * @param {HTMLDialogElement} dialog
+ * @param {string} message
+ */
+export function showSignoffError(dialog, message) {
+  const result = dialog.querySelector('.signoff-result')
+  if (result !== null) {
+    result.textContent = message
+  }
+  return result
+}
+
+/** @param {HTMLDialogElement} dialog */
+export function signoffBody(dialog) {
+  const area = dialog.querySelector('textarea')
+  return area instanceof HTMLTextAreaElement ? area.value.trim() : ''
+}

package/static/js/skin.js

@@ -0,0 +1,56 @@
+// @ts-check
+// The skin command cycles terminal → github. `data-skin` on <html> says which look the page wears:
+// the component styles are written in the terminal skin, and `styles/skin-github.css` repaints them
+// for github. It is independent of the light/dark theme, so each of the four pairings works.
+//
+// The choice is saved in `.pr-review/settings.yml`, so it holds for every browser that opens this
+// server and can be edited by hand. The server renders `data-skin` into the page, which is why this
+// module reads the attribute instead of storage and never has to guess before the styles apply.
+
+export const SKINS = /** @type {const} */ (['terminal', 'github'])
+/** @typedef {(typeof SKINS)[number]} Skin */
+
+/** The look a page wears when the settings file says nothing. */
+export const DEFAULT_SKIN = /** @type {Skin} */ ('terminal')
+
+/**
+ * @param {unknown} value
+ * @returns {value is Skin}
+ */
+export function isSkin(value) {
+  return typeof value === 'string' && /** @type {readonly string[]} */ (SKINS).includes(value)
+}
+
+/**
+ * The skin the page is wearing, from the attribute the server rendered.
+ * @param {HTMLElement} root usually document.documentElement
+ * @returns {Skin}
+ */
+export function readSkin(root) {
+  const attribute = root.getAttribute('data-skin')
+  return isSkin(attribute) ? attribute : DEFAULT_SKIN
+}
+
+/**
+ * @param {Skin} skin
+ * @returns {Skin}
+ */
+export function nextSkin(skin) {
+  const next = SKINS[SKINS.indexOf(skin) + 1]
+  return next ?? DEFAULT_SKIN
+}
+
+/**
+ * Repaints the page. Saving is the caller's job, so the look changes under the click whether or
+ * not the server answers.
+ * @param {Skin} skin
+ * @param {HTMLElement} root usually document.documentElement
+ */
+export function applySkin(skin, root) {
+  root.setAttribute('data-skin', skin)
+}
+
+/** @param {Skin} skin */
+export function skinLabel(skin) {
+  return `skin: ${skin}`
+}

package/static/js/store.js

@@ -0,0 +1,35 @@
+// @ts-check
+
+/**
+ * @template T
+ * @typedef {{ get: () => T, set: (next: T) => void, update: (fn: (cur: T) => T) => void, subscribe: (fn: (state: T) => void) => () => void }} Store
+ */
+
+/**
+ * A tiny observable value. Subscribers run after every set; unsubscribe with the returned function.
+ * @template T
+ * @param {T} initial
+ * @returns {Store<T>}
+ */
+export function createStore(initial) {
+  let state = initial
+  /** @type {Set<(state: T) => void>} */
+  const subs = new Set()
+  const set = /** @param {T} next */ next => {
+    state = next
+    for (const fn of subs) {
+      fn(state)
+    }
+  }
+  return {
+    get: () => state,
+    set,
+    update: fn => set(fn(state)),
+    subscribe: fn => {
+      subs.add(fn)
+      return () => {
+        subs.delete(fn)
+      }
+    },
+  }
+}

package/static/js/theme.js

@@ -0,0 +1,56 @@
+// @ts-check
+// The theme command cycles auto → light → dark. `data-theme` on <html> says which one the page
+// wears; `auto` follows the operating system, which is what the `color-scheme: light dark` on
+// :root already does, so no rule matches that value and none has to.
+//
+// The choice is saved in `.pr-review/settings.yml` next to the skin, so it holds for every browser
+// that opens this server. The server renders `data-theme` into the page, which is why this module
+// reads the attribute instead of storage and no theme ever flashes before the styles apply.
+
+export const THEMES = /** @type {const} */ (['auto', 'light', 'dark'])
+/** @typedef {(typeof THEMES)[number]} Theme */
+
+/** The theme a page wears when the settings file says nothing. */
+export const DEFAULT_THEME = /** @type {Theme} */ ('auto')
+
+/**
+ * @param {unknown} value
+ * @returns {value is Theme}
+ */
+export function isTheme(value) {
+  return typeof value === 'string' && /** @type {readonly string[]} */ (THEMES).includes(value)
+}
+
+/**
+ * The theme the page is wearing, from the attribute the server rendered.
+ * @param {HTMLElement} root usually document.documentElement
+ * @returns {Theme}
+ */
+export function readTheme(root) {
+  const attribute = root.getAttribute('data-theme')
+  return isTheme(attribute) ? attribute : DEFAULT_THEME
+}
+
+/**
+ * @param {Theme} theme
+ * @returns {Theme}
+ */
+export function nextTheme(theme) {
+  const next = THEMES[THEMES.indexOf(theme) + 1]
+  return next ?? DEFAULT_THEME
+}
+
+/**
+ * Repaints the page. Saving is the caller's job, so the theme changes under the click whether or
+ * not the server answers.
+ * @param {Theme} theme
+ * @param {HTMLElement} root usually document.documentElement
+ */
+export function applyTheme(theme, root) {
+  root.setAttribute('data-theme', theme)
+}
+
+/** @param {Theme} theme */
+export function themeLabel(theme) {
+  return `theme: ${theme}`
+}

package/static/js/threads.js

@@ -0,0 +1,78 @@
+// @ts-check
+/** @typedef {import('./contract-types.js').ReviewComment} ReviewComment */
+
+/**
+ * @typedef {{ root: ReviewComment, replies: ReviewComment[], resolved: boolean, outdated: boolean, path: string, side: 'new' | 'old', line: number | null }} Thread
+ */
+
+/**
+ * @param {string} path
+ * @param {'new' | 'old'} side
+ * @param {number} line
+ */
+export function anchorKey(path, side, line) {
+  return `${path}|${side}|${line}`
+}
+
+/**
+ * Groups review comments into threads by `inReplyToId`. Threads keyed by their anchor line;
+ * outdated threads (no current line) go to the `outdated` bucket per path.
+ * @param {ReadonlyArray<ReviewComment>} comments
+ * @returns {{ byAnchor: Map<string, Thread[]>, outdated: Map<string, Thread[]>, count: number }}
+ */
+export function buildThreads(comments) {
+  /** @type {Map<number, Thread>} */
+  const roots = new Map()
+  const sorted = [...comments].sort((a, b) => a.createdAt.localeCompare(b.createdAt))
+  for (const c of sorted) {
+    if (c.inReplyToId === undefined) {
+      roots.set(c.id, {
+        root: c,
+        replies: [],
+        resolved: c.resolved,
+        outdated: c.outdated,
+        path: c.path,
+        side: c.side,
+        line: c.line,
+      })
+    }
+  }
+  for (const c of sorted) {
+    if (c.inReplyToId === undefined) {
+      continue
+    }
+    const t = roots.get(c.inReplyToId)
+    if (t) {
+      t.replies.push(c)
+      t.resolved = t.resolved || c.resolved
+    } else {
+      // A reply whose root was deleted: show it as its own thread.
+      roots.set(c.id, {
+        root: c,
+        replies: [],
+        resolved: c.resolved,
+        outdated: c.outdated,
+        path: c.path,
+        side: c.side,
+        line: c.line,
+      })
+    }
+  }
+  /** @type {Map<string, Thread[]>} */
+  const byAnchor = new Map()
+  /** @type {Map<string, Thread[]>} */
+  const outdated = new Map()
+  for (const t of roots.values()) {
+    if (t.outdated || t.line === null) {
+      const list = outdated.get(t.path) ?? []
+      list.push(t)
+      outdated.set(t.path, list)
+      continue
+    }
+    const k = anchorKey(t.path, t.side, t.line)
+    const list = byAnchor.get(k) ?? []
+    list.push(t)
+    byAnchor.set(k, list)
+  }
+  return { byAnchor, outdated, count: roots.size }
+}

package/static/js/vendor.d.ts

@@ -0,0 +1,15 @@
+// `hljs` is the import-map name of @highlightjs/cdn-assets/es/highlight.min.js, which ships no types.
+declare module 'hljs' {
+  interface HighlightResult {
+    value: string
+  }
+  interface HighlightOptions {
+    language: string
+    ignoreIllegals?: boolean
+  }
+  const hljs: {
+    highlight(code: string, options: HighlightOptions): HighlightResult
+    getLanguage(name: string): unknown
+  }
+  export default hljs
+}