@vintasoftware/pr-review-canvas 0.3.0 → 0.5.0

package/static/js/app.js

@@ -13,28 +13,43 @@ import {
   saveAppearance,
 } from './api.js'
 import { setChatEnabled } from './ask.js'
-import { readChatWidth, renderChatShell, wireChat } from './chat.js'
+import { readChatMinimized, readChatWidth, renderChatShell, wireChat } from './chat.js'
 import { runCommand, wireCopyCommands } from './commands.js'
 import { initDeepLinks } from './deep-link.js'
 import { initDiagrams } from './diagram.js'
 import { esc, qs } from './dom.js'
 import { exportCanvasZip } from './download.js'
-import { renderEmptyState, renderStaleState, staleBarHtml } from './empty-state.js'
+import {
+  carriedOverBarHtml,
+  marksCarriedBarHtml,
+  renderEmptyState,
+  renderStaleState,
+  staleBarHtml,
+} from './empty-state.js'
 import { errorCardHtml } from './errors.js'
 import { renderHeader } from './header.js'
 import { wireDropZone } from './import-zone.js'
 import { toast, wireReview } from './interactions.js'
-import { defineLayerElements, pathSet, renderLayers, renderRail, setRenderContext } from './layers.js'
+import {
+  defineLayerElements,
+  pathSet,
+  renderLayers,
+  renderRail,
+  setFoldLevel,
+  setRenderContext,
+} from './layers.js'
 import { renderOverview } from './overview.js'
 import { wireQuickQuestions } from './quick-questions.js'
 import { canvasChanged, openRegenerateDialog } from './regenerate.js'
 import { createReviewSession } from './review-session.js'
 import { initScrollSpy } from './scroll-spy.js'
 import { openSettingsDialog } from './settings.js'
-import { applySkin, nextSkin, readSkin, skinLabel } from './skin.js'
+import { applySkin, DEFAULT_SKIN, nextSkin, readSkin, skinLabel } from './skin.js'
 import { applyTheme, nextTheme, readTheme, themeLabel } from './theme.js'
+import { hostLabel, setHost } from './host.js'
 
-/** @typedef {{ prNumber: number, owner: string, repo: string, version: string }} Bootstrap */
+/** @typedef {import('./contract-types.js').ReviewKey} ReviewKey */
+/** @typedef {import('./contract-types.js').ReviewBootstrap} Bootstrap */
 
 /** @returns {Bootstrap | null} */
 function readBootstrap() {
@@ -57,7 +72,7 @@ function footerHtml(version, bundle) {
   const canvas = bundle?.canvas
     ? `<span>canvas <span class="mono">${esc(bundle.canvas.headSha.slice(0, 7))}</span> · ${esc(bundle.canvas.source)}</span>`
     : ''
-  return `<footer><span>pr-review ${esc(version)}</span>${canvas}<span>localhost only · nothing leaves this machine except GitHub posts you confirm</span></footer>`
+  return `<footer><span>pr-review ${esc(version)}</span>${canvas}<span>localhost only · nothing leaves this machine except ${esc(hostLabel())} posts you confirm</span></footer>`
 }
 
 /** @param {ReadonlyArray<string>} warnings */
@@ -83,7 +98,7 @@ function toEnvelopeError(err) {
 /**
  * The patches for the bundle. The first visit builds derived/ while the bundle resolves, so the
  * parallel fetch can land before the patches exist; one more try after the bundle is enough.
- * @param {number} prNumber
+ * @param {ReviewKey} prNumber
  * @param {Promise<Record<string, string> | null>} started
  * @param {string} [headSha] the canvas commit, when it is not the PR head
  */
@@ -107,7 +122,7 @@ export class PrAppElement extends HTMLElement {
   /** @type {import('./theme.js').Theme} */
   theme = 'auto'
   /** @type {import('./skin.js').Skin} */
-  skin = 'terminal'
+  skin = DEFAULT_SKIN
   /** @type {{ stop: () => void } | null} */
   diagrams = null
   /** @type {{ stop: () => void } | null} */
@@ -155,8 +170,12 @@ export class PrAppElement extends HTMLElement {
       this.innerHTML = errorCardHtml({ code: 'INTERNAL', message: 'missing bootstrap data' })
       return
     }
+    setHost(this.bootstrap.host)
     this.theme = readTheme(document.documentElement)
     this.skin = readSkin(document.documentElement)
+    // The reading level the canvas opens at comes from the settings file with the page, so the
+    // first draw hides what the reader asked for.
+    setFoldLevel(this, this.bootstrap.foldLevel)
     const patchesPromise = fetchPatches(this.bootstrap.prNumber).then(
       r => r.patches,
       () => null
@@ -196,6 +215,7 @@ export class PrAppElement extends HTMLElement {
     const header = renderHeader(bundle, { host: location.host, theme: this.theme, skin: this.skin, now })
     const chatEnabled = bundle.chat.enabled
     const storage = typeof localStorage === 'undefined' ? null : localStorage
+    const chatMinimized = chatEnabled && readChatMinimized(storage)
     // The renderers read this while they build the cards, so it is set before the first one.
     setChatEnabled(chatEnabled)
     const showsCanvas = bundle.artifact !== undefined && (bundle.status === 'ready' || this.viewStale)
@@ -215,20 +235,29 @@ export class PrAppElement extends HTMLElement {
         staleSha
       )
       // The context is set before any <pr-file> connects, so each card renders once, when visible.
+      const headSha = staleSha ?? bundle.pr.headSha
       setRenderContext({
         artifact,
         files,
         patches,
+        headSha,
         comments: bundle.comments.reviewComments,
         state: bundle.state,
         now,
       })
       defineLayerElements()
-      const staleBar = bundle.status === 'stale' && bundle.stale ? staleBarHtml(bundle.stale) : ''
+      const staleBar =
+        bundle.status === 'stale' && bundle.stale
+          ? staleBarHtml(bundle.stale, bundle.local)
+          : bundle.carriedOver
+            ? carriedOverBarHtml(bundle.carriedOver)
+            : ''
+      const marksBar =
+        bundle.marksCarriedFrom === undefined ? '' : marksCarriedBarHtml(bundle.marksCarriedFrom)
       this.innerHTML =
         header +
         bannerHtml(bundle.warnings) +
-        `<div class="layout${chatEnabled ? '' : ' no-chat'}">${renderRail(artifact, bundle.state)}<main id="main">${staleBar}${renderOverview(bundle, { paths, now })}${renderLayers(artifact, files, bundle.state, bundle.comments.reviewComments)}</main>${renderChatShell({ enabled: chatEnabled, width: readChatWidth(storage) })}</div>` +
+        `<div class="layout${chatEnabled && !chatMinimized ? '' : ' no-chat'}">${renderRail(artifact, bundle.state)}<main id="main">${staleBar}${marksBar}${renderOverview(bundle, { paths, now })}${renderLayers(artifact, files, bundle.state, bundle.comments.reviewComments, headSha)}</main>${renderChatShell({ enabled: chatEnabled, width: readChatWidth(storage), minimized: chatMinimized })}</div>` +
         footerHtml(boot.version, bundle)
       // The screen is interactive from here: reviewed state, dismissals, threads, and posting.
       // A stale canvas shows the diff of an older commit, so nothing is posted from it: a line
@@ -249,6 +278,8 @@ export class PrAppElement extends HTMLElement {
         state: bundle.state,
         capabilities,
         headSha: bundle.pr.headSha,
+        // The marks are keyed to the canvas on the page, so every mark names it.
+        ...(bundle.canvas === undefined ? {} : { canvasSha: bundle.canvas.headSha }),
       })
       const interactions = wireReview(this, session, {
         chat: () => this.chat,
@@ -371,11 +402,15 @@ export class PrAppElement extends HTMLElement {
       this.viewStale = true
       void this.render(bundle)
     })
-    wireDropZone(this, {
-      prNumber: boot.prNumber,
-      importImpl: importCanvas,
-      onImported: () => void this.reload(),
-    })
+    // Importing a canvas a teammate attached is a pull request thing; local work has no thread
+    // to attach one to, and the local screens draw no drop zone.
+    if (typeof boot.prNumber === 'number') {
+      wireDropZone(this, {
+        prNumber: boot.prNumber,
+        importImpl: importCanvas,
+        onImported: () => void this.reload(),
+      })
+    }
   }
 
   /**

package/static/js/chat-panel.js

@@ -1,42 +1,65 @@
 // @ts-check
 
 /** Keeps the same chat mounted while switching between the sidebar and floating panel.
+ *
+ * The chat minimizes at every width. Narrow screens float it over the canvas, so minimizing
+ * closes the dialog; wide screens dock it in the layout grid, so minimizing drops the column.
+ * Either way the launcher brings back the same pane with its draft and transcript intact.
+ *
  * @param {HTMLElement} root
  * @param {HTMLElement} pane
+ * @param {{ minimized?: boolean, onMinimizedChange?: (minimized: boolean) => void }} [opts]
  */
-export function wireChatPanel(root, pane) {
+export function wireChatPanel(root, pane, opts = {}) {
   const dialog = /** @type {HTMLDialogElement} */ (root.querySelector('#chat-dialog'))
   const launcher = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-launcher'))
   const minimize = /** @type {HTMLButtonElement} */ (root.querySelector('#chat-minimize'))
+  const layout = root.querySelector('.layout')
   const narrow = window.matchMedia('(max-width: 1360px)')
   const mobile = window.matchMedia('(max-width: 600px)')
-  let expanded = false
+  /** Floating panels start minimized; a docked one starts the way the reader last left it. */
+  let floating = false
+  let docked = !opts.minimized
+
+  const shown = () => (narrow.matches ? floating : docked)
 
   function sync() {
     if (dialog.open) dialog.close()
     if (narrow.matches) {
       dialog.append(pane)
-      if (expanded) {
+      pane.hidden = false
+      if (floating) {
         if (mobile.matches) dialog.showModal()
         else dialog.show()
       }
     } else {
       dialog.before(pane)
+      pane.hidden = !docked
     }
-    launcher.setAttribute('aria-expanded', String(narrow.matches && expanded))
-    launcher.hidden = narrow.matches && expanded
+    layout?.classList.toggle('no-chat', !narrow.matches && !docked)
+    launcher.setAttribute('aria-expanded', String(shown()))
+    launcher.hidden = shown()
   }
 
   function open() {
-    if (narrow.matches && !expanded) {
-      expanded = true
+    if (!shown()) {
+      if (narrow.matches) floating = true
+      else {
+        docked = true
+        opts.onMinimizedChange?.(false)
+      }
       sync()
     }
-    pane.querySelector('textarea')?.focus()
+    // The composer sits low in a tall sticky pane, so plain focus() would scroll the canvas to it.
+    pane.querySelector('textarea')?.focus({ preventScroll: true })
   }
 
   function close() {
-    expanded = false
+    if (narrow.matches) floating = false
+    else {
+      docked = false
+      opts.onMinimizedChange?.(true)
+    }
     sync()
     launcher.focus()
   }

package/static/js/chat.js

@@ -23,15 +23,17 @@ import { postedCommentUrl, viewCommentHtml } from './comment-link.js'
 import { esc, qs } from './dom.js'
 import { getRenderContext } from './layers.js'
 import { renderMarkdown } from './markdown.js'
+import { postToLabel } from './host.js'
 import { splitChatAnswer, targetsFromFiles } from './proposed-comment.js'
 
 export const CHAT_WIDTH_KEY = 'pr-review.chat-width'
+export const CHAT_MINIMIZED_KEY = 'pr-review.chat-minimized'
 export const CHAT_WIDTH_MIN = 280
 export const CHAT_WIDTH_MAX = 560
 export const CHAT_WIDTH_DEFAULT = 340
 
 /**
- * @param {{ enabled: boolean, width?: number }} opts
+ * @param {{ enabled: boolean, width?: number, minimized?: boolean }} opts
  * @returns {string} '' when AI Chat is disabled
  */
 export function renderChatShell(opts) {
@@ -39,8 +41,10 @@ export function renderChatShell(opts) {
     return ''
   }
   const width = clampWidth(opts.width ?? CHAT_WIDTH_DEFAULT)
+  // The launcher starts hidden and `wireChatPanel` reveals it where it belongs, so a docked
+  // chat never paints a launcher over itself on the first frame.
   return (
-    '<aside class="chat" aria-labelledby="chat-h">' +
+    `<aside class="chat" aria-labelledby="chat-h"${opts.minimized ? ' hidden' : ''}>` +
     `<button class="handle" type="button" id="chat-handle" role="separator" aria-orientation="vertical" aria-label="Resize AI Chat" aria-valuenow="${width}" aria-valuemin="${CHAT_WIDTH_MIN}" aria-valuemax="${CHAT_WIDTH_MAX}"></button>` +
     '<div class="chat-h"><h2 id="chat-h">AI Chat</h2><label class="sr" for="thread">Thread</label>' +
     '<select id="thread"></select>' +
@@ -59,7 +63,7 @@ export function renderChatShell(opts) {
     '<span class="muted small">enter to send</span></div></form>' +
     '</aside>' +
     '<dialog class="chat-dialog" id="chat-dialog" aria-labelledby="chat-h"></dialog>' +
-    '<button class="chat-launcher" id="chat-launcher" type="button" aria-controls="chat-dialog" aria-expanded="false">AI Chat</button>'
+    '<button class="chat-launcher" id="chat-launcher" type="button" hidden aria-controls="chat-dialog" aria-expanded="false">AI Chat</button>'
   )
 }
 
@@ -101,6 +105,23 @@ export function writeChatWidth(storage, width) {
   storage?.setItem(CHAT_WIDTH_KEY, String(clampWidth(width)))
 }
 
+/**
+ * Only a wide screen stores this: a floating chat always starts minimized.
+ * @param {Storage | null} storage
+ * @returns {boolean}
+ */
+export function readChatMinimized(storage) {
+  return (storage === null ? null : storage.getItem(CHAT_MINIMIZED_KEY)) === '1'
+}
+
+/**
+ * @param {Storage | null} storage
+ * @param {boolean} minimized
+ */
+export function writeChatMinimized(storage, minimized) {
+  storage?.setItem(CHAT_MINIMIZED_KEY, minimized ? '1' : '0')
+}
+
 /** The questions the quick menu offers, and the one that just focuses the box. */
 export const QUICK_QUESTIONS = [
   'Suggestion to solve this?',
@@ -113,7 +134,7 @@ export const QUICK_QUESTIONS = [
 /**
  * @typedef {{
  *   root: HTMLElement,
- *   prNumber: number,
+ *   prNumber: import('./contract-types.js').ReviewKey,
  *   session: ReviewSession,
  *   storage?: Storage | null,
  *   api?: Partial<ChatApi>,
@@ -179,7 +200,7 @@ export function proposedCommentHtml(comment, id, postedUrl) {
     `<div class="prose">${renderMarkdown(comment.body)}</div>` +
     '<span class="tbtns">' +
     (postedUrl === undefined
-      ? `<button class="cmd fill" type="button" data-act="proposed-post" data-proposed="${esc(id)}" data-needs-post>post to github</button>`
+      ? `<button class="cmd fill" type="button" data-act="proposed-post" data-proposed="${esc(id)}" data-needs-post>${postToLabel()}</button>`
       : viewCommentHtml(postedUrl, true)) +
     `<button class="cmd" type="button" data-act="proposed-edit" data-proposed="${esc(id)}" data-needs-post>edit</button>` +
     `<button class="cmd" type="button" data-copy="${esc(comment.body)}">copy</button>` +
@@ -748,7 +769,10 @@ export function wireChat(options) {
   }
 
   const stopResize = wireResize(pane, root, storage, applyWidth)
-  const panel = wireChatPanel(root, pane)
+  const panel = wireChatPanel(root, pane, {
+    minimized: readChatMinimized(storage),
+    onMinimizedChange: minimized => writeChatMinimized(storage, minimized),
+  })
 
   form.addEventListener('submit', onSubmit)
   root.addEventListener('click', onClick)

package/static/js/code-folds.js

@@ -1,10 +1,45 @@
 // @ts-check
 // Rows a reviewer can hide: the canvas folds the model named, and the folds the diff renderer
 // marked (import-only and whitespace-only changes, and moved blocks). Both open again when a
-// deep link lands inside them.
+// deep link lands inside them. Every model fold is wired once, when the diff is drawn; the
+// reader's level only decides which of them are active, so changing it never rebuilds the table
+// and an open composer or an expanded fold survives. The renderer's own folds hide in every mode.
 import { findRow } from './anchors.js'
+import { foldsForLevel } from './fold-levels.js'
 
 /** @typedef {import('./contract-types.js').CodeFold} CodeFold */
+/** @typedef {import('./contract-types.js').FoldLevel} FoldLevel */
+
+/** Rows that keep their code open at every level. */
+const PINNED = '[data-decoration="point"], [data-decoration="thread"]'
+/** Annotation band rows and the note row under them; only an aggressive fold may hide these. */
+const ANNOTATED = '.ann, [data-decoration="note"]'
+
+/**
+ * One model fold on a drawn table. `rows` are fixed when the diff is drawn; `hiddenBefore` is how
+ * each row looked before any fold touched it, so a fold the level turns off gives it back.
+ * @typedef {{
+ *   fold: CodeFold,
+ *   rows: HTMLTableRowElement[],
+ *   hiddenBefore: boolean[],
+ *   summaries: Set<HTMLTableRowElement>,
+ *   header: HTMLTableRowElement,
+ *   toggle: HTMLButtonElement,
+ *   active: boolean,
+ *   expanded: boolean,
+ * }} WiredFold
+ */
+
+/** The folds wired on each drawn diff. A redraw builds a new diff, so it starts a new list. */
+const wiredFolds = /** @type {WeakMap<Element, WiredFold[]>} */ (new WeakMap())
+
+/**
+ * The drawn diff of a card, one table per hunk, or null before it draws.
+ * @param {HTMLElement} card
+ */
+function drawnDiff(card) {
+  return card.querySelector('.diff-wrap')
+}
 
 /**
  * @param {Element | null} summary
@@ -27,7 +62,8 @@ function coveredFoldSummary(summary, rows) {
 }
 
 /**
- * Finds the rows between both anchors. A decorated or overlapping range stays open.
+ * Finds the rows between both anchors. A range holding an attention point or a discussion stays
+ * open at every level; a range holding an annotation stays open unless the fold is aggressive.
  * @param {HTMLElement} card
  * @param {string} key
  * @param {CodeFold} fold
@@ -47,18 +83,30 @@ function foldRows(card, key, fold) {
 
   const siblings = Array.from(first.parentElement.children)
   const from = siblings.indexOf(first)
-  const to = siblings.indexOf(last)
+  let to = siblings.indexOf(last)
 
   if (to < from) {
     return []
   }
 
-  const rows = siblings.slice(from, to + 1).filter(row => row instanceof HTMLTableRowElement)
-  const hasDiscussion = rows.some(row => row.matches('.ann, [data-decoration], [data-code-fold], .code-fold'))
+  const aggressive = fold.level === 'aggressive'
 
-  const hasThread = Boolean(first.closest('table')?.querySelector('[data-decoration="thread"]'))
+  // An annotation's note row sits under the last line it covers, so an aggressive fold that ends
+  // on that line takes the note with it rather than leaving it stranded above open code.
+  if (aggressive) {
+    while (siblings[to + 1]?.matches('[data-decoration="note"]') === true) {
+      to++
+    }
+  }
 
-  if (hasDiscussion || hasThread || last.nextElementSibling?.matches('[data-decoration]')) {
+  const rows = siblings.slice(from, to + 1).filter(row => row instanceof HTMLTableRowElement)
+  const trailing = siblings[to + 1]
+  const blocked =
+    rows.some(row => row.matches(PINNED)) ||
+    (!aggressive && rows.some(row => row.matches(ANNOTATED))) ||
+    trailing?.matches(aggressive ? PINNED : '[data-decoration]') === true
+
+  if (blocked) {
     return []
   }
 
@@ -70,6 +118,20 @@ function foldRows(card, key, fold) {
   return rows
 }
 
+/**
+ * What the toggle says. An aggressive fold that hides an annotation shows the annotation instead
+ * of its own title, so the reader still reads the explanation of the code it replaces. The
+ * validator lets such a fold cover one whole annotation at most, so there is one note to show.
+ * @param {readonly HTMLTableRowElement[]} rows
+ * @param {CodeFold} fold
+ * @returns {string}
+ */
+function foldLabel(rows, fold) {
+  const note = rows.find(row => row.matches('[data-decoration="note"]'))
+  const text = note?.querySelector('.prose')?.textContent?.trim()
+  return text === undefined || text === '' ? fold.title : text
+}
+
 /**
  * Inserts the fold's title above its first row.
  * @param {HTMLTableRowElement} first
@@ -91,63 +153,128 @@ function createToggle(first, title) {
   header.appendChild(cell)
   first.before(header)
 
-  return toggle
+  return { header, toggle }
 }
 
 /**
- * Keeps the original rows in the DOM so comments and deep links retain their anchors.
- * @param {HTMLTableRowElement} first
- * @param {HTMLTableRowElement[]} rows
- * @param {string} title
+ * Draws one fold as the level and the reader left it. An inactive fold gives its rows back as
+ * they were; an active one hides them behind its title until the reader expands it.
+ * @param {WiredFold} wired
  */
-function wireFold(first, rows, title) {
-  const toggle = createToggle(first, title)
-  const table = first.closest('table')
-  const foldSummaries = new Set(rows.filter(row => coveredFoldSummary(row, rows)))
-  toggle.setAttribute(
-    'aria-controls',
-    rows
-      .map(row => row.id)
-      .filter(Boolean)
-      .join(' ')
-  )
-
-  const setExpanded = (/** @type {boolean} */ expanded) => {
-    toggle.setAttribute('aria-expanded', String(expanded))
-
-    for (const row of rows) {
-      row.hidden = !expanded || foldSummaries.has(row)
+function paintFold(wired) {
+  wired.header.hidden = !wired.active
+  wired.toggle.setAttribute('aria-expanded', String(wired.active && wired.expanded))
+  for (const [index, row] of wired.rows.entries()) {
+    if (wired.active) {
+      row.hidden = !wired.expanded || wired.summaries.has(row)
       row.setAttribute('data-code-fold', '')
+    } else {
+      row.hidden = wired.hiddenBefore[index] === true
+      row.removeAttribute('data-code-fold')
     }
   }
+}
 
-  toggle.addEventListener('click', () => setExpanded(toggle.getAttribute('aria-expanded') !== 'true'))
+/**
+ * Points a drawn card's folds at a level: the outermost folds that hide at it become active and
+ * start folded, and the rest give their rows back. A fold that stays active keeps whatever the
+ * reader did with it. A card with a thread or a pending draft keeps all of its code open, so none
+ * is active. Inactive
+ * folds paint first, so a row shared with an active outer or inner fold ends up as the active
+ * one says.
+ * @param {HTMLElement} card
+ * @param {FoldLevel} level
+ * @param {boolean} discussed whether a thread or a pending draft sits in the card's chunks
+ */
+export function setCodeFoldLevel(card, level, discussed) {
+  const diff = drawnDiff(card)
+  const wired = diff === null ? [] : (wiredFolds.get(diff) ?? [])
+  const active = new Set(
+    discussed
+      ? []
+      : foldsForLevel(
+          wired.map(w => w.fold),
+          level
+        )
+  )
 
-  table?.addEventListener('reveal-code', event => {
-    const target = event.target
-    if (target instanceof Node && (target === table || rows.some(row => row.contains(target)))) {
-      setExpanded(true)
+  for (const w of wired) {
+    const now = active.has(w.fold)
+    if (now && !w.active) {
+      w.expanded = false
     }
-  })
-
-  setExpanded(false)
+    w.active = now
+  }
+  const inactive = wired.filter(w => !w.active)
+  for (const w of [...inactive, ...wired.filter(fold => fold.active)]) {
+    paintFold(w)
+  }
 }
 
 /**
- * Adds title-only folds; ranges with annotations, attention points, or discussions stay open.
+ * Wires every model fold of a freshly drawn diff, then applies the reader's level. The rows of
+ * every fold are found before any title row goes in, so nested folds each see only diff rows.
+ * Ranges with attention points stay open, and so do ranges with annotations unless the fold is
+ * aggressive. A second call on the same diff does nothing.
  * @param {HTMLElement} card
  * @param {string} key
  * @param {readonly CodeFold[]} folds
+ * @param {FoldLevel} level the reader's level
+ * @param {boolean} discussed whether a thread or a pending draft sits in the card's chunks
  */
-export function applyCodeFolds(card, key, folds) {
-  for (const fold of folds) {
-    const rows = foldRows(card, key, fold)
-    const first = rows[0]
+export function applyCodeFolds(card, key, folds, level, discussed) {
+  const diff = drawnDiff(card)
+  if (diff === null || wiredFolds.has(diff)) {
+    return
+  }
 
-    if (first !== undefined) {
-      wireFold(first, rows, fold.title)
+  const found = folds.map(fold => ({ fold, rows: foldRows(card, key, fold) }))
+  /** @type {WiredFold[]} */
+  const wired = []
+  for (const { fold, rows } of found) {
+    const first = rows[0]
+    if (first === undefined) {
+      continue
     }
+    const { header, toggle } = createToggle(first, foldLabel(rows, fold))
+    toggle.setAttribute(
+      'aria-controls',
+      rows
+        .map(row => row.id)
+        .filter(Boolean)
+        .join(' ')
+    )
+    const w = {
+      fold,
+      rows,
+      hiddenBefore: rows.map(row => row.hidden),
+      summaries: new Set(rows.filter(row => coveredFoldSummary(row, rows))),
+      header,
+      toggle,
+      active: false,
+      expanded: false,
+    }
+    toggle.addEventListener('click', () => {
+      w.expanded = !w.expanded
+      paintFold(w)
+    })
+    const table = first.closest('table')
+    table?.addEventListener('reveal-code', event => {
+      const target = event.target
+      if (
+        w.active &&
+        target instanceof Node &&
+        (target === table || rows.some(row => row.contains(target)))
+      ) {
+        w.expanded = true
+        paintFold(w)
+      }
+    })
+    wired.push(w)
   }
+
+  wiredFolds.set(diff, wired)
+  setCodeFoldLevel(card, level, discussed)
 }
 
 /**