@vintasoftware/pr-review-canvas 0.4.0 → 0.5.0

package/static/js/points.js

@@ -5,6 +5,7 @@
 import { askButtonHtml } from './ask.js'
 import { viewCommentHtml } from './comment-link.js'
 import { esc } from './dom.js'
+import { pendingForPoint } from './pending.js'
 import { postToLabel } from './host.js'
 import { layerAnchorId, pointAnchorId } from './keys.js'
 import { renderMarkdown } from './markdown.js'
@@ -65,11 +66,33 @@ export function pointContext(p) {
   return { kind: 'point', fingerprint: p.fingerprint }
 }
 
+/**
+ * What a point offers for getting its text onto the forge: the link to the comment it was posted
+ * as, the note that it is waiting in the review, or the two ways to send it. Unlike the box on a
+ * diff line, a point keeps both ways while a review is open: its text is written in advance, so
+ * firing one off on its own is a use of its own, not a comment jumping the queue.
+ * @param {Point} p
+ * @param {{ postedUrl?: string | undefined, queued?: boolean }} opts
+ */
+function pointSendHtml(p, opts) {
+  if (opts.postedUrl !== undefined) {
+    return viewCommentHtml(opts.postedUrl)
+  }
+  if (opts.queued === true) {
+    return '<span class="pill pending queued">in your review</span>'
+  }
+  return (
+    `<button class="cmd" type="button" data-act="point-post" data-point="${esc(p.id)}" data-needs-post>${postToLabel()}</button>` +
+    `<button class="cmd" type="button" data-act="point-queue" data-point="${esc(p.id)}">add to review</button>`
+  )
+}
+
 /**
  * The commands every point carries. `copy` puts the markdown on the clipboard, `post to github`
- * opens nothing and posts it at the anchor, `dismiss` takes the point off the page.
+ * opens nothing and posts it at the anchor, `add to review` holds it as a draft instead, and
+ * `dismiss` takes the point off the page.
  * @param {Point} p
- * @param {{ dismissed?: boolean, postedUrl?: string | undefined }} [opts]
+ * @param {{ dismissed?: boolean, postedUrl?: string | undefined, queued?: boolean }} [opts]
  * @returns {string}
  */
 export function pointCommandsHtml(p, opts = {}) {
@@ -78,17 +101,24 @@ export function pointCommandsHtml(p, opts = {}) {
     ? `<button class="cmd" type="button" data-act="point-restore" data-fingerprint="${fp}">restore</button>`
     : `<button class="cmd" type="button" data-act="point-dismiss" data-fingerprint="${fp}">dismiss</button>`
   return (
-    '<span class="tbtns">' +
+    `<span class="tbtns" data-queued="${opts.queued === true ? '1' : '0'}">` +
     `<button class="cmd" type="button" data-copy="${esc(pointToMarkdown(p))}">copy</button>` +
-    (opts.postedUrl === undefined
-      ? `<button class="cmd" type="button" data-act="point-post" data-point="${esc(p.id)}" data-needs-post>${postToLabel()}</button>`
-      : viewCommentHtml(opts.postedUrl)) +
+    pointSendHtml(p, opts) +
     askButtonHtml(pointContext(p)) +
     toggle +
     '</span>'
   )
 }
 
+/**
+ * Whether this point is waiting in the review, read from the state the renderer was given.
+ * @param {Point} p
+ * @param {{ state?: PrState }} ctx
+ */
+export function queuedFor(p, ctx) {
+  return pendingForPoint(ctx.state, p.fingerprint) !== undefined
+}
+
 /**
  * The comment this point was posted as, when it was.
  * @param {Point} p
@@ -130,7 +160,7 @@ export function pointCardHtml(p, ctx) {
     `<div class="f-title"><span>${esc(p.title)}</span><span class="pill kind">${esc(p.kind)}</span>` +
     `<a class="loc" href="${esc(pointLink(p))}">${esc(pointLocation(p))}</a></div>` +
     `<div class="prose">${renderMarkdown(p.body, { paths: ctx.paths })}</div>` +
-    `${pointCommandsHtml(p, { postedUrl: posted })}</div></li>`
+    `${pointCommandsHtml(p, { postedUrl: posted, queued: queuedFor(p, ctx) })}</div></li>`
   )
 }
 
@@ -154,7 +184,7 @@ export function dismissedListHtml(points, state, ctx, expanded = false) {
         `<div class="f-title"><span>${esc(p.title)}</span><span class="pill kind">${esc(p.kind)}</span>` +
         `<a class="loc" href="${esc(pointLink(p))}">${esc(pointLocation(p))}</a></div>` +
         `<div class="prose">${renderMarkdown(p.body, { paths: ctx.paths })}</div>` +
-        `${pointCommandsHtml(p, { dismissed: true, postedUrl: posted })}</div></li>`
+        `${pointCommandsHtml(p, { dismissed: true, postedUrl: posted, queued: queuedFor(p, { state }) })}</div></li>`
       )
     })
     .join('')
@@ -183,6 +213,7 @@ export function applyDismissed(root, points, state, ctx) {
     }
     const dismissed = state.dismissed[point.fingerprint] !== undefined
     el.toggleAttribute('hidden', dismissed)
+    refreshPointCommands(el, point, { dismissed, state, ...ctx })
   }
   for (const counter of Array.from(root.querySelectorAll('.point-count'))) {
     const layerId = counter.closest('[data-layer]')?.getAttribute('data-layer')
@@ -212,6 +243,35 @@ export function applyDismissed(root, points, state, ctx) {
   }
 }
 
+/**
+ * Draws a point's commands again when it has just joined the review or just left it, wherever the
+ * point is on the page. Nothing else is touched: a command that is mid-request keeps its state,
+ * because neither posting nor dismissing changes whether the point is waiting in the review.
+ * @param {Element} el the element that carries `data-point`
+ * @param {Point} p
+ * @param {{ dismissed: boolean, state: PrState, posted?: ReadonlyMap<string, string> }} ctx
+ * @returns {boolean} true when the commands were drawn again
+ */
+export function refreshPointCommands(el, p, ctx) {
+  const tbtns = el.querySelector('.tbtns')
+  const queued = queuedFor(p, ctx)
+  if (tbtns === null || (tbtns.getAttribute('data-queued') === '1') === queued) {
+    return false
+  }
+  const template = document.createElement('template')
+  template.innerHTML = pointCommandsHtml(p, {
+    dismissed: ctx.dismissed,
+    queued,
+    ...(postedFor(p, ctx) === undefined ? {} : { postedUrl: postedFor(p, ctx) }),
+  })
+  const next = template.content.firstElementChild
+  if (next === null) {
+    return false
+  }
+  tbtns.replaceWith(next)
+  return true
+}
+
 /**
  * The inline row under a diff line.
  * @param {Point} p
@@ -224,7 +284,7 @@ export function pointRowHtml(p, ctx) {
     `<tr class="ifind ${p.level}" data-point="${esc(p.id)}" data-fingerprint="${esc(p.fingerprint)}"${dismissed ? ' hidden' : ''}><td class="code x" colspan="4">` +
     `<div class="f-title">${squareHtml(p)}<span>${esc(p.title)}</span><span class="pill kind">${esc(p.kind)}</span></div>` +
     `<div class="prose">${renderMarkdown(p.body, { paths: ctx.paths })}</div>` +
-    `${pointCommandsHtml(p, { postedUrl: posted })}</td></tr>`
+    `${pointCommandsHtml(p, { postedUrl: posted, queued: queuedFor(p, ctx) })}</td></tr>`
   )
 }
 

package/static/js/progress.js

@@ -3,7 +3,7 @@
 /** @typedef {import('./contract-types.js').Layer} Layer */
 /** @typedef {import('./contract-types.js').PrState} PrState */
 /** @typedef {import('./contract-types.js').ReviewArtifact} ReviewArtifact */
-import { sanitizeKey } from './keys.js'
+import { reviewedId } from './keys.js'
 
 /**
  * @param {Layer} layer
@@ -11,13 +11,13 @@ import { sanitizeKey } from './keys.js'
  * @returns {'done' | 'partial' | 'none'}
  */
 export function layerProgress(layer, state) {
-  if (state.reviewed[`layer:${layer.id}`] === true) {
+  if (state.reviewed[reviewedId(layer.key)] === true) {
     return 'done'
   }
   const files = layer.files.length
   let reviewedFiles = 0
   for (const f of layer.files) {
-    if (state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true) {
+    if (state.reviewed[reviewedId(layer.key, f.path)] === true) {
       reviewedFiles++
     }
   }
@@ -45,6 +45,5 @@ export function progressSummary(artifact, state) {
  * @param {PrState} state
  */
 export function filesReviewed(layer, state) {
-  return layer.files.filter(f => state.reviewed[`layer:${layer.id}/file:${sanitizeKey(f.path)}`] === true)
-    .length
+  return layer.files.filter(f => state.reviewed[reviewedId(layer.key, f.path)] === true).length
 }

package/static/js/quick-questions.js

@@ -12,6 +12,9 @@ export const HOVER_DELAY_MS = 150
 /** The pointer crosses a gap between the command and the menu, so closing waits out the crossing. */
 export const CLOSE_DELAY_MS = 200
 export const QQ_MENU_ID = 'qq-menu'
+/** The gap between a command and its menu, and the room the menu keeps from the window edge. */
+export const MENU_GAP_PX = 4
+export const MENU_EDGE_PX = 8
 export const ASK_SOMETHING_ELSE = 'ask something else…'
 
 /** @returns {string} */
@@ -77,8 +80,18 @@ export function wireQuickQuestions(root, options) {
     el.setAttribute('aria-expanded', 'true')
     menu.hidden = false
     const rect = el.getBoundingClientRect()
-    menu.style.left = `${Math.round(rect.left)}px`
-    menu.style.top = `${Math.round(rect.bottom + 4)}px`
+    // The menu is positioned against the window, so a command near an edge would push it off
+    // screen: keep it inside, and hang it above a command with no room below.
+    const view = doc.defaultView ?? window
+    // `clientWidth` leaves out the scrollbar; a document that does not report it falls back.
+    const roomAcross = doc.documentElement.clientWidth || view.innerWidth
+    const roomDown = doc.documentElement.clientHeight || view.innerHeight
+    const below = rect.bottom + MENU_GAP_PX
+    const top =
+      below + menu.offsetHeight > roomDown - MENU_EDGE_PX ? rect.top - MENU_GAP_PX - menu.offsetHeight : below
+    const left = Math.min(rect.left, roomAcross - menu.offsetWidth - MENU_EDGE_PX)
+    menu.style.left = `${Math.round(Math.max(MENU_EDGE_PX, left))}px`
+    menu.style.top = `${Math.round(Math.max(MENU_EDGE_PX, top))}px`
   }
 
   const clearTimer = () => {

package/static/js/reading-level.js

@@ -0,0 +1,97 @@
+// @ts-check
+// The reader's control over how much code the canvas hides: the copy that says what each level
+// takes off the screen, the control under the header, and the labels that say how much of the
+// diff that is. The level itself, and the counts, belong to layers.js, which owns the file cards
+// and the rule for what a card keeps open.
+import { esc } from './dom.js'
+import { FOLD_LEVELS } from './fold-levels.js'
+
+/** @typedef {import('./contract-types.js').FoldLevel} FoldLevel */
+/** @typedef {{ total: number, hidden: number }} HiddenCounts */
+
+export const FOLD_LEVEL_SELECT_ID = 'fold-level'
+
+/** What each level adds to the one below it, said in the reader's terms. */
+const FOLD_LEVEL_WHAT = {
+  light: 'the diff as always: imports, whitespace, moved blocks, and generated files',
+  moderate: 'also test bodies, helpers, wiring, templates, and boilerplate',
+  aggressive: 'only the code you have to judge stays open',
+}
+
+/**
+ * What the counter says, or '' when this level hides nothing.
+ * @param {HiddenCounts} counts
+ * @returns {string}
+ */
+export function hiddenLabel(counts) {
+  return counts.hidden === 0 ? '' : `${counts.hidden} of ${counts.total} lines hidden`
+}
+
+/**
+ * The same with the separator the Files heading needs, so an empty counter adds nothing.
+ * @param {HiddenCounts} counts
+ * @returns {string}
+ */
+export function foldCountText(counts) {
+  const label = hiddenLabel(counts)
+  return label === '' ? '' : ` · ${label}`
+}
+
+/**
+ * The line under the control: what this level hides, and how much of the diff that is. The reader
+ * changes one setting, so the page says what it did rather than leaving them to scroll and find out.
+ * @param {FoldLevel} level
+ * @param {HiddenCounts} counts what the level hides across the canvas
+ * @returns {string}
+ */
+export function foldLevelHint(level, counts) {
+  const amount = counts.hidden === 0 ? 'nothing hidden yet' : `${hiddenLabel(counts)} of the diff`
+  return `${FOLD_LEVEL_WHAT[level]} · ${amount}`
+}
+
+/**
+ * The levels as options, with one selected. The control on the page and the default field of the
+ * settings dialog are the same list.
+ * @param {FoldLevel} level
+ * @returns {string}
+ */
+export function foldLevelOptionsHtml(level) {
+  return FOLD_LEVELS.map(
+    l => `<option value="${esc(l)}"${l === level ? ' selected' : ''}>${esc(l)}</option>`
+  ).join('')
+}
+
+/**
+ * How much of the diff the page hides. One control for the whole canvas, next to the review
+ * progress rather than among the commands, because it changes what the reader sees and does not
+ * act on the pull request. The page opens at the level saved in the settings dialog; a change
+ * here holds for this page only.
+ * @param {FoldLevel} level
+ * @param {HiddenCounts} counts what the level hides across the canvas
+ * @returns {string}
+ */
+export function foldLevelControlHtml(level, counts) {
+  const options = foldLevelOptionsHtml(level)
+  return (
+    `<div class="reading"><label for="${FOLD_LEVEL_SELECT_ID}">Hide code</label>` +
+    `<select id="${FOLD_LEVEL_SELECT_ID}" title="How much of the diff this page hides. Press f to step through the levels; the settings dialog sets the default.">${options}</select>` +
+    `<span class="fold-hint" role="status">${esc(foldLevelHint(level, counts))}</span></div>`
+  )
+}
+
+/**
+ * Points the control and its hint at a level the reader chose elsewhere, such as with the `f` key.
+ * @param {ParentNode} root
+ * @param {FoldLevel} level
+ * @param {HiddenCounts} counts what the level hides across the canvas
+ */
+export function refreshFoldLevel(root, level, counts) {
+  const select = root.querySelector(`#${FOLD_LEVEL_SELECT_ID}`)
+  if (select instanceof HTMLSelectElement) {
+    select.value = level
+  }
+  const hint = root.querySelector('.reading .fold-hint')
+  if (hint !== null) {
+    hint.textContent = foldLevelHint(level, counts)
+  }
+}

package/static/js/review-session.js

@@ -9,8 +9,18 @@
 /** @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 {import('./contract-types.js').ReviewComment} ReviewComment */
+import {
+  addPending,
+  deletePending,
+  discardPending,
+  editPending,
+  postComment,
+  postReview,
+  putDismissed,
+  putReviewed,
+  putThreadHidden,
+} from './api.js'
 
 /**
  * @typedef {{
@@ -19,6 +29,10 @@ import { sanitizeKey } from './keys.js'
  *   putThreadHidden: typeof putThreadHidden,
  *   postComment: typeof postComment,
  *   postReview: typeof postReview,
+ *   addPending: typeof addPending,
+ *   editPending: typeof editPending,
+ *   deletePending: typeof deletePending,
+ *   discardPending: typeof discardPending,
  * }} SessionApi
  */
 
@@ -38,22 +52,29 @@ import { sanitizeKey } from './keys.js'
 
 /** @param {Partial<SessionApi> | undefined} overrides */
 function withDefaults(overrides) {
-  return { putReviewed, putDismissed, putThreadHidden, postComment, postReview, ...overrides }
+  return {
+    putReviewed,
+    putDismissed,
+    putThreadHidden,
+    postComment,
+    postReview,
+    addPending,
+    editPending,
+    deletePending,
+    discardPending,
+    ...overrides,
+  }
 }
 
-/**
- * @param {string} layerId
- * @param {string} [path]
- */
-export function reviewedId(layerId, path) {
-  return path === undefined ? `layer:${layerId}` : `layer:${layerId}/file:${sanitizeKey(path)}`
-}
+export { reviewedId } from './keys.js'
 
 /** @param {SessionOptions} options */
 export function createReviewSession(options) {
   const api = withDefaults(options.api)
   /** @type {PrState} */
   let state = options.state
+  /** @type {ReviewComment[]} */
+  let submittedComments = []
   /** @type {Capabilities} */
   let capabilities = options.capabilities
   const keyToPath = new Map(options.files.map(f => [f.key, f.path]))
@@ -131,6 +152,28 @@ export function createReviewSession(options) {
     }
   }
 
+  /**
+   * A change the server owns outright: the answer it sends is the new state. Unlike `change`
+   * there is nothing to show first and nothing to take back, because the page never guessed.
+   * @template {{ state: PrState }} T
+   * @param {() => Promise<T>} request
+   * @returns {Promise<T>}
+   */
+  const run = async request => {
+    inFlight += 1
+    try {
+      const answer = await request()
+      inFlight -= 1
+      takeAnswer(answer.state)
+      settle()
+      return answer
+    } catch (err) {
+      inFlight -= 1
+      settle()
+      throw err
+    }
+  }
+
   /**
    * @param {PrState} current
    * @param {'reviewed' | 'dismissed' | 'hiddenThreads'} field
@@ -234,27 +277,63 @@ export function createReviewSession(options) {
      * @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
-      }
+      return run(() => api.postComment(options.prNumber, { ...input, headSha: options.headSha }))
+    },
+    /** Comments returned by reviews submitted during this session. */
+    get submittedComments() {
+      return submittedComments
+    },
+    /** The comments waiting in the pending review, oldest first. */
+    get pending() {
+      return state.pending ?? []
     },
     /**
-     * @param {'APPROVE' | 'REQUEST_CHANGES'} event
+     * Writes one comment into the pending review. The answer carries the state that holds it, so
+     * the page draws the draft from the same place a reload would read it from.
+     * @param {Omit<import('./contract-types.js').AddPendingInput, 'headSha'>} input
+     * @returns {Promise<PrState>}
+     */
+    async addPending(input) {
+      return (await run(() => api.addPending(options.prNumber, { ...input, headSha: options.headSha }))).state
+    },
+    /**
+     * @param {string} id
+     * @param {string} body
+     * @returns {Promise<PrState>}
+     */
+    async editPending(id, body) {
+      return (await run(() => api.editPending(options.prNumber, id, body))).state
+    },
+    /**
+     * @param {string} id
+     * @returns {Promise<PrState>}
+     */
+    async deletePending(id) {
+      return (await run(() => api.deletePending(options.prNumber, id))).state
+    },
+    /** @returns {Promise<PrState>} */
+    async discardPending() {
+      return (await run(() => api.discardPending(options.prNumber))).state
+    },
+    /**
+     * Submits the review. The pending comments go out with it unless the caller says otherwise,
+     * and the answer's state is the one with them cleared.
+     * @param {import('./contract-types.js').ReviewEvent} event
      * @param {string} [body]
-     * @returns {Promise<ReviewSummary>}
+     * @param {{ includePending?: boolean }} [opts]
+     * @returns {Promise<import('./contract-types.js').PostReviewResponse>}
      */
-    async postReview(event, body) {
-      const input = body === undefined ? { event } : { event, body }
-      return (await api.postReview(options.prNumber, { ...input, headSha: options.headSha })).review
+    async postReview(event, body, opts = {}) {
+      const input = {
+        event,
+        ...(body === undefined ? {} : { body }),
+        ...(opts.includePending === undefined ? {} : { includePending: opts.includePending }),
+      }
+      return run(async () => {
+        const answer = await api.postReview(options.prNumber, { ...input, headSha: options.headSha })
+        submittedComments = [...submittedComments, ...answer.comments]
+        return answer
+      })
     },
   }
 }

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,19 +80,10 @@ 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>` +
@@ -75,7 +97,9 @@ export function settingsDialogHtml(data, agents) {
     `<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>'
@@ -104,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…' }
@@ -129,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)
   }