@vintasoftware/pr-review-canvas 0.3.0 → 0.5.0

package/static/js/settings.js

@@ -1,18 +1,24 @@
 // @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.
+// The settings dialog: the personal settings this browser can change, the reading level a review
+// opens at and the chat settings, 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'
+import { isFoldLevel } from './fold-levels.js'
+import { foldLevelOptionsHtml } from './reading-level.js'
 
 export const SETTINGS_DIALOG_ID = 'settings-dialog'
 
-/** Model ids the input suggests per agent. Free text is allowed; this is only a shortcut. */
+/**
+ * Model ids the input suggests per agent. Free text is allowed; this is only a shortcut. The
+ * server runs the newest model of whichever family is saved, so these do not go stale.
+ */
 export const MODEL_SUGGESTIONS = {
-  claude: ['claude-opus-5', 'claude-sonnet-5', 'claude-haiku-4-5-20251001'],
-  codex: ['gpt-5.2', 'gpt-5.2[high]'],
+  claude: ['opus', 'opus[1m]', 'sonnet', 'haiku', 'fable'],
+  codex: ['gpt-6-astra', 'gpt-6-sol', 'gpt-6-luna', 'gpt-6-astra[high]'],
 }
 
 /** @param {string} agent */
@@ -22,18 +28,43 @@ export function modelOptionsHtml(agent) {
 }
 
 /**
- * @param {SettingsResponse} data
+ * The chat agent's fields, with the notice about acpx when it is missing.
+ * @param {SettingsResponse['settings']} settings
  * @param {AgentsResponse} agents
  * @returns {string}
  */
-export function settingsDialogHtml(data, agents) {
-  const { settings, overrides, project } = data
+function chatFieldsHtml(settings, agents) {
   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('')
+  return (
+    (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>'
+  )
+}
+
+/**
+ * @param {SettingsResponse} data
+ * @param {AgentsResponse | null} agents null when the project turns chat off, so the dialog holds
+ *   only what the page itself reads
+ * @returns {string}
+ */
+export function settingsDialogHtml(data, agents) {
+  const { settings, overrides, project } = data
   const overrideNote =
     overrides.agent === undefined && overrides.model === undefined
       ? ''
@@ -49,32 +80,26 @@ export function settingsDialogHtml(data, agents) {
     `<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>' +
+    '<div class="field"><label for="set-fold-level">Hide code by default</label>' +
+    `<select id="set-fold-level">${foldLevelOptionsHtml(settings.foldLevel)}</select></div>` +
+    '<p class="muted small">The level every review opens at. The Hide code control and the <span class="mono">f</span> key change it for one page.</p>' +
+    (agents === null ? '' : chatFieldsHtml(settings, agents)) +
     `<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>canvas kept for an identical diff: ${project.keepForIdenticalDiff ? 'yes' : 'no'}</li>` +
     `<li>rulebook: ${esc(project.rulebook ?? 'none')}</li>` +
     `<li>configured layer suggestions: ${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>` +
+    `<li>small change set: ${project.smallPrHunks} chunks</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>' +
+    (agents === null
+      ? ''
+      : '<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>'
@@ -103,7 +128,9 @@ export async function openSettingsDialog(root, opener, opts = {}) {
   const loaded = await runCommand(
     opener,
     async () => {
-      const [data, agents] = await Promise.all([api.fetchSettings(), api.fetchAgents()])
+      // With chat off the agent routes do not exist, and the dialog holds only the reading level.
+      const data = await api.fetchSettings()
+      const agents = data.project.chatEnabled ? await api.fetchAgents() : null
       return { data, agents }
     },
     { pendingLabel: 'loading…' }
@@ -128,12 +155,16 @@ export async function openSettingsDialog(root, opener, opts = {}) {
 
 /** The values the dialog holds right now, as the PUT body. */
 export function readSettingsForm(/** @type {ParentNode} */ dialog) {
+  const foldLevel = qs('#set-fold-level', 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 (foldLevel instanceof HTMLSelectElement && isFoldLevel(foldLevel.value)) {
+    input.foldLevel = foldLevel.value
+  }
   if (agent instanceof HTMLSelectElement && agent.value !== '') {
     input.agent = /** @type {import('./contract-types.js').ChatAgent} */ (agent.value)
   }

package/static/js/signoff.js

@@ -4,8 +4,10 @@
 /** @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 { previewControlsHtml, setDisabledReason, setMarkdownPreview } from './composer.js'
 import { esc } from './dom.js'
+import { hostLabel } from './host.js'
+import { pendingLabel } from './pending.js'
 import { layerProgress } from './progress.js'
 
 export const SIGNOFF_DIALOG_ID = 'signoff-dialog'
@@ -13,6 +15,9 @@ 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 it waits after the body failed to load: there is nothing to post. */
+export const FAILED_REASON = 'the review body could not be loaded'
+
 /**
  * Why approve is not allowed yet, or null when it is. Other changes never counts.
  * @param {ReviewArtifact} artifact
@@ -32,22 +37,47 @@ export function approveBlockedReason(artifact, state) {
 }
 
 /**
- * @param {'APPROVE' | 'REQUEST_CHANGES'} event
+ * @param {import('./contract-types.js').ReviewEvent} event
  */
 export function signoffTitle(event) {
-  return event === 'APPROVE' ? 'Approve on GitHub' : 'Request changes on GitHub'
+  switch (event) {
+    case 'APPROVE':
+      return `Approve on ${hostLabel()}`
+    case 'REQUEST_CHANGES':
+      return `Request changes on ${hostLabel()}`
+    case 'COMMENT':
+      return `Comment on ${hostLabel()}`
+  }
 }
 
 /**
- * @param {{ event: 'APPROVE' | 'REQUEST_CHANGES' }} opts
+ * What the dialog says this event does, under its heading.
+ * @param {import('./contract-types.js').ReviewEvent} event
+ */
+export function signoffHint(event) {
+  const where = `on ${hostLabel()} as you`
+  switch (event) {
+    case 'APPROVE':
+      return `This posts an approving review ${where}. Edit the body first if you want to.`
+    case 'REQUEST_CHANGES':
+      return `This posts a review requesting changes ${where}. Edit the body first if you want to.`
+    case 'COMMENT':
+      return `This posts a review with no verdict ${where}: nothing is approved or rejected. Edit the body first if you want to.`
+  }
+}
+
+/**
+ * @param {{ event: import('./contract-types.js').ReviewEvent }} 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="hint">${esc(signoffHint(opts.event))}</p>` +
     '<p class="signoff-target muted mono"></p>' +
+    '<p class="signoff-folds muted"></p>' +
+    '<p class="signoff-pending"></p>' +
     '<label class="sr" for="signoff-body">Review body</label>' +
     previewControlsHtml() +
     '<textarea id="signoff-body" rows="12" aria-busy="true"></textarea>' +
@@ -63,7 +93,7 @@ export function signoffDialogHtml(opts) {
  * 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
+ * @param {{ event: import('./contract-types.js').ReviewEvent }} opts
  * @returns {HTMLDialogElement}
  */
 export function openSignoffDialog(root, opts) {
@@ -77,14 +107,20 @@ export function openSignoffDialog(root, opts) {
   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 }))
+  setMarkdownPreview(dialog, false)
   dialog.setAttribute('data-event', opts.event)
   const heading = dialog.querySelector('#signoff-h')
   if (heading !== null) {
     heading.textContent = signoffTitle(opts.event)
   }
+  const hint = dialog.querySelector('.hint')
+  if (hint !== null) {
+    hint.textContent = signoffHint(opts.event)
+  }
+  const pending = dialog.querySelector('.signoff-pending')
+  if (pending !== null) {
+    pending.textContent = ''
+  }
   const result = dialog.querySelector('.signoff-result')
   if (result !== null) {
     result.textContent = ''
@@ -104,6 +140,20 @@ export function openSignoffDialog(root, opts) {
   return dialog
 }
 
+/**
+ * Records how much code the reader had hidden while reviewing, so the sign-off says what was
+ * read at a glance and what was read line by line.
+ * @param {HTMLDialogElement} dialog
+ * @param {string} note
+ */
+export function setSignoffFolds(dialog, note) {
+  const box = dialog.querySelector('.signoff-folds')
+  if (box !== null) {
+    box.textContent = note
+  }
+  return dialog
+}
+
 /**
  * Puts the generated body and the target commit in the dialog.
  * @param {HTMLDialogElement} dialog
@@ -121,6 +171,17 @@ export function fillSignoffDialog(dialog, preview) {
   if (target !== null) {
     target.textContent = `on commit ${preview.headSha.slice(0, 7)}`
   }
+  // The drafts go out with the review, so the dialog says so before anything is posted.
+  const pending = dialog.querySelector('.signoff-pending')
+  if (pending !== null) {
+    pending.textContent =
+      preview.pending > 0 ? `${pendingLabel(preview.pending)} will be posted with this review.` : ''
+    pending.classList.toggle('has-pending', preview.pending > 0)
+  }
+  const post = dialog.querySelector('[data-act="signoff-post"]')
+  if (post !== null) {
+    post.textContent = preview.pending > 0 ? `post review · ${pendingLabel(preview.pending)}` : 'post review'
+  }
   return dialog
 }
 
@@ -133,7 +194,7 @@ 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'))
+    result.append(externalLink(review.url, `see it on ${hostLabel()}`))
   }
   return result
 }
@@ -165,6 +226,14 @@ export function showSignoffError(dialog, message) {
   if (result !== null) {
     result.textContent = message
   }
+  // The load this reports is over, so the box stops saying it is busy. Posting stays out of
+  // reach, but for the reason that is true now rather than the one that was true before.
+  const area = dialog.querySelector('textarea')
+  if (area instanceof HTMLTextAreaElement && area.getAttribute('aria-busy') === 'true') {
+    area.removeAttribute('aria-busy')
+    area.placeholder = ''
+    setDisabledReason(dialog.querySelector('[data-act="signoff-post"]'), FAILED_REASON)
+  }
   return result
 }
 

package/static/js/skin.js

@@ -11,7 +11,7 @@ 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')
+export const DEFAULT_SKIN = /** @type {Skin} */ ('github')
 
 /**
  * @param {unknown} value
@@ -37,7 +37,7 @@ export function readSkin(root) {
  */
 export function nextSkin(skin) {
   const next = SKINS[SKINS.indexOf(skin) + 1]
-  return next ?? DEFAULT_SKIN
+  return next ?? SKINS[0]
 }
 
 /**

package/static/styles/chat-panel.css

@@ -1,30 +1,28 @@
-.chat-launcher,
-.chat-minimize {
+/* The launcher stands in for the chat at every width; the script hides it while the chat is up. */
+.chat-launcher {
+  display: block;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 10;
+  padding: 14px 20px;
+  border: 1px solid var(--ink);
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--bg);
+  box-shadow: 0 4px 20px #0003;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.chat-launcher[hidden] {
   display: none;
 }
+/* Always the last thing on its row, whether or not the header wraps. */
+.chat-minimize {
+  margin-left: auto;
+}
 @media (max-width: 1360px) {
-  .chat-launcher {
-    display: block;
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    z-index: 10;
-    padding: 14px 20px;
-    border: 1px solid var(--ink);
-    border-radius: 999px;
-    background: var(--accent);
-    color: var(--bg);
-    box-shadow: 0 4px 20px #0003;
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-  }
-  .chat-launcher[hidden] {
-    display: none;
-  }
-  .chat-minimize {
-    display: inline-block;
-  }
   dialog.chat-dialog {
     position: fixed;
     inset: auto 20px 20px auto;

package/static/styles/chat.css

@@ -7,6 +7,10 @@
   height: 100vh;
   background: transparent;
 }
+/* Minimized on a wide screen: the pane stays mounted with its draft, out of the grid. */
+.chat[hidden] {
+  display: none;
+}
 .handle {
   position: absolute;
   left: -1px;

package/static/styles/commands.css

@@ -116,6 +116,12 @@
   color: var(--purple);
   border-color: currentColor;
 }
+/* The two local reviews: work with no pull request, so neither open nor closed. */
+.pill.branch,
+.pill.uncommitted {
+  color: var(--accent);
+  border-color: currentColor;
+}
 .pill.agent {
   color: var(--fg);
   border-color: var(--ink);

package/static/styles/header.css

@@ -46,6 +46,27 @@
   gap: 4px 16px;
   align-items: baseline;
 }
+/* How much code is hidden: a setting on the reading, so it sits with the progress line and not
+   among the commands, and says what it hides rather than leaving the reader to find out. */
+.reading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  align-items: baseline;
+  margin-top: 14px;
+}
+.reading label {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.reading select {
+  padding: 2px 6px;
+  font-size: 13px;
+}
+.fold-hint {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
 .stripe {
   height: 6px;
   background: var(--stripe-y);

package/static/styles/panels.css

@@ -88,6 +88,10 @@
   box-shadow: 2px 2px 0 var(--shadow);
   font-size: 13px;
 }
+/* The same bar for a canvas that still applies: a note, not a warning. */
+.stale-bar.carried-over-bar {
+  background: var(--bg);
+}
 .notice {
   margin: 10px 0 0;
   padding: 6px 10px;

package/static/styles/pending.css

@@ -0,0 +1,102 @@
+/* The pending review: the bar that says one is open, and the drafts drawn on the diff. */
+
+.pending-bar-host:empty {
+  display: none;
+}
+
+.pending-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin: 10px 0 0;
+  padding: 10px 12px;
+  color: var(--fg);
+  background: var(--warn-bg);
+  /* The heavy left edge is what carries across the page: a review is open and unsent. */
+  border: 1px solid var(--warn);
+  border-left: 4px solid var(--warn);
+}
+
+/* The dot pulses so an open review is noticed on a page the reader has scrolled far down. */
+.pending-mark {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  background: var(--warn);
+  border-radius: 50%;
+  animation: pending-pulse 2s ease-in-out infinite;
+}
+
+@keyframes pending-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pending-mark {
+    animation: none;
+  }
+}
+
+.pending-bar .pending-text {
+  flex: 1 1 260px;
+}
+
+.pending-bar .pending-actions {
+  display: flex;
+  flex: none;
+  gap: 6px;
+}
+
+/* A draft on the diff reads as unfinished: dashed edge, and the badge that names it. */
+.cmt.pending-cmt {
+  padding: 8px;
+  background: var(--warn-bg);
+  border: 1px dashed var(--warn);
+}
+
+.pending-av {
+  color: var(--fg-muted);
+  border-color: var(--warn);
+}
+
+/* The avatar column covers the byline and the body, so the commands clear both. */
+.cmt.pending-cmt .tbtns {
+  display: flex;
+  grid-column: 1 / -1;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.pill.pending {
+  color: var(--bg);
+  background: var(--warn);
+}
+
+.signoff-pending:empty {
+  display: none;
+}
+
+.signoff-pending.has-pending {
+  padding: 6px 8px;
+  background: var(--warn-bg);
+  border-left: 3px solid var(--warn);
+}
+
+.earlier-pending {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--warn);
+}
+
+.earlier-draft + .earlier-draft {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--warn);
+}

package/static/styles/review-actions.css

@@ -35,6 +35,7 @@ tr.sel-bar .lbl {
   outline: 2px solid var(--focus);
   outline-offset: 1px;
 }
+.preview-controls,
 .composer-actions {
   display: flex;
   gap: 12px;

package/static/styles/review.css

@@ -65,6 +65,10 @@
   border-bottom: 1px solid var(--line);
   color: var(--fg);
 }
+.fold-count {
+  color: var(--fg-muted);
+  font-weight: 400;
+}
 .summary,
 .rationale,
 .prose {

package/static/styles/skin-github.css

@@ -153,7 +153,9 @@
 [data-skin='github'] .pill.open,
 [data-skin='github'] .pill.merged,
 [data-skin='github'] .pill.closed,
-[data-skin='github'] .pill.draft {
+[data-skin='github'] .pill.draft,
+[data-skin='github'] .pill.branch,
+[data-skin='github'] .pill.uncommitted {
   border-color: transparent;
   color: #ffffff;
 }
@@ -169,6 +171,10 @@
 [data-skin='github'] .pill.draft {
   background: light-dark(#6e7781, #636e7b);
 }
+[data-skin='github'] .pill.branch,
+[data-skin='github'] .pill.uncommitted {
+  background: light-dark(#0969da, #1f6feb);
+}
 [data-skin='github'] .pill.risk,
 [data-skin='github'] .pill.kind,
 [data-skin='github'] .pill.agent {

package/static/styles.css

@@ -10,6 +10,7 @@
 @import './styles/panels.css';
 @import './styles/responsive.css';
 @import './styles/review-actions.css';
+@import './styles/pending.css';
 @import './styles/chat-tools.css';
 @import './styles/skin-github.css';
 @import './styles/chat-panel.css';