@joewinke/jatui 0.36.3 → 0.38.0

package/dist/artifact-blocks/blocks/diff-review/DiffReviewBlock.svelte

@@ -0,0 +1,1055 @@
+<script lang="ts">
+  /**
+   * DiffReviewBlock — the Redline review archetype (docs/review-ux/
+   * proposal.md): per-section before/after diffs with accept / modify /
+   * reject (mos-a3ivi). Built for contract and copy reviews (a BAA/MSA pass):
+   * each section is a card showing the current text against the proposed
+   * text through jatui's HunkDiffView (word-level highlights; side by side
+   * when the block is wide, unified on a phone), and the reviewer decides it.
+   *
+   * The review chrome is the shared jatui review set (mos-lsmve.6, M2):
+   * VerdictControl + ReviewNote + RoundHistory per section, ReviewProgress +
+   * ReviewFilterBar on top, reviewKeys() for the one keyboard map and
+   * ReviewShortcuts rendered from the same key table. "Modify" opens an
+   * inline editor seeded with the proposed text; the reviewer's rewrite
+   * saves as `edited` and renders as a second diff (proposed → yours) so the
+   * agent reading feedback sees exactly what changed.
+   *
+   * State: `{ [itemId]: { verdict, note, edited, at, round?, history? } }`
+   * through ctx.saveState (see decisions.ts) — the flat fields are the
+   * current round; a section the team marks ready again (`team.readySince`,
+   * D7) opens a new round and the previous verdict + note lock into
+   * history. Without saveState (public link, print, tests) the block stays
+   * interactive and nothing persists; a failed save shows in the block with
+   * a Retry; on the read-only route the verdict chrome is hidden and the
+   * diffs stand alone.
+   */
+  import HunkDiffView from "../../../components/HunkDiffView.svelte"
+  import ReviewFilterBar from "../../../components/review/ReviewFilterBar.svelte"
+  import ReviewProgress from "../../../components/review/ReviewProgress.svelte"
+  import ReviewShortcuts from "../../../components/review/ReviewShortcuts.svelte"
+  import RoundHistory from "../../../components/review/RoundHistory.svelte"
+  import VerdictControl from "../../../components/review/VerdictControl.svelte"
+  import { buildReviewFilters } from "../../../components/review/reviewSummary"
+  import { isTypingTarget } from "../../../utils/keyboardShortcutRegistry"
+  import {
+    reviewKeys,
+    type NeedsYou,
+    type ReviewKeyRow,
+    type ReviewKeysOptions,
+    type VerdictOption,
+  } from "../../../actions/reviewKeys"
+  import { showConfirm } from "../../../stores/confirmDialog"
+  import ItemNote from "../../review/ItemNote.svelte"
+  import type { NoteAttachment } from "../../review/attachments.js"
+  import { diffLines } from "diff"
+  import { tick, untrack } from "svelte"
+  import type { BlockProps } from "../../types.js"
+  import BulkRejectForm from "../../review/BulkRejectForm.svelte"
+  import BulkUndoBar from "../../review/BulkUndoBar.svelte"
+  import { decideMany, undoMany, type BulkUndo } from "../../review/bulk.js"
+  import NoteToggle from "../../review/NoteToggle.svelte"
+  import TeamChip from "../../review/TeamChip.svelte"
+  import { historyRounds } from "../../review/roundLines.js"
+  import type { RoundView } from "../../review/rounds.js"
+  import { createStateSaver } from "../../review/saver.js"
+  import { teamRound } from "../../review/team.js"
+  import {
+    nextUndecided,
+    sortRanks,
+    visualItems,
+  } from "../../review/visualOrder.js"
+  import {
+    EDITED_MAX_CHARS,
+    diffRounds,
+    isEmptyDecision,
+    parseDecisions,
+    type DiffDecision,
+    type DiffVerdict,
+  } from "./decisions.js"
+  import type { DiffReviewItem, DiffReviewParams } from "./types.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params, ctx }: BlockProps<DiffReviewParams> = $props()
+
+  const VERDICTS: VerdictOption[] = [
+    { id: "approve", label: "Accept", tone: "success", key: "a" },
+    {
+      id: "modify",
+      label: "Modify",
+      tone: "warning",
+      // m (mos-u8i35, Joe's flip keys); x stays as an alias, see onBlockKey.
+      key: "m",
+      opensNote: true,
+    },
+    { id: "reject", label: "Reject", tone: "error", key: "r", opensNote: true },
+  ]
+
+  /** Stored entries — seeded ONCE from the viewer's saved state (the host
+   * passes state at render, never streams it). */
+  let decisions = $state<Record<string, DiffDecision>>(
+    untrack(() => parseDecisions(ctx.state)),
+  )
+  let filter = $state("all")
+  let notesOpen = $state<Record<string, boolean>>({})
+  let editorsOpen = $state<Record<string, boolean>>({})
+  /** The verdict a section's ReviewNote reacts to, when it must NOT follow
+   * the saved one: typing a rewrite turns the section into a Modify, and
+   * that must not yank the caret out of the editor into the note. */
+  let noteVerdictPin = $state<Record<string, DiffVerdict | null>>({})
+  let helpOpen = $state(false)
+  let rootEl = $state<HTMLElement | null>(null)
+  let width = $state(0)
+
+  /**
+   * mos-guqgs: deciding requires a save channel, not merely a non-readonly
+   * ctx. `!ctx.readonly` left the share link and any saveless mount (where
+   * readonly was never passed) with live verdict controls over a save that
+   * could not happen. Same contract as checklist / compare / callout.
+   */
+  const canDecide = $derived(Boolean(ctx.saveState) && !ctx.readonly)
+  const saver = createStateSaver(() => ctx.saveState)
+
+  const unified = $derived(
+    params.layout === "unified"
+      ? true
+      : params.layout === "split"
+        ? false
+        : width < 720,
+  )
+
+  /** End every non-empty side with a newline so the last line diffs cleanly
+   * ("foo" vs "foo\n" would otherwise read as a change). */
+  function norm(text: string): string {
+    return text && !text.endsWith("\n") ? `${text}\n` : text
+  }
+
+  function lineStats(a: string, b: string) {
+    let removed = 0
+    let added = 0
+    for (const c of diffLines(norm(a), norm(b))) {
+      if (c.removed) removed += c.count ?? 1
+      else if (c.added) added += c.count ?? 1
+    }
+    return { removed, added }
+  }
+
+  const itemsById = $derived(
+    new Map<string, DiffReviewItem>(params.items.map((i) => [i.id, i])),
+  )
+
+  const sections = $derived.by(() => {
+    const named = (params.groups ?? [])
+      .map((g) => ({
+        id: g.id,
+        title: g.title,
+        items: params.items.filter((it) => it.group === g.id),
+      }))
+      .filter((g) => g.items.length > 0)
+    const listed = new Set(named.flatMap((g) => g.items.map((i) => i.id)))
+    const rest = params.items.filter((it) => !listed.has(it.id))
+    // Nothing published is ever hidden: ungrouped items get a catch-all.
+    return rest.length > 0
+      ? [
+          ...named,
+          {
+            id: "__other__",
+            title: named.length > 0 ? "Other" : "",
+            items: rest,
+          },
+        ]
+      : named
+  })
+
+  /** Each section's current round + locked history (pure read). The only
+   * round a section has is the team's readySince (D7). */
+  const views = $derived.by(() => {
+    const out: Record<string, RoundView> = {}
+    for (const item of params.items)
+      out[item.id] = diffRounds.view(decisions[item.id], teamRound(item.team))
+    return out
+  })
+
+  function currentOf(id: string): DiffDecision {
+    return (views[id]?.current ?? {}) as DiffDecision
+  }
+  function verdictOf(id: string): DiffVerdict | null {
+    return currentOf(id).verdict ?? null
+  }
+
+  /** A new round is open and this viewer has not decided it. */
+  function isRetest(item: DiffReviewItem): boolean {
+    if (verdictOf(item.id)) return false
+    return item.team?.status === "ready" || !!views[item.id]?.stale
+  }
+
+  const counts = $derived.by(() => {
+    const byVerdict: Record<string, number> = {}
+    let retest = 0
+    for (const item of params.items) {
+      const v = verdictOf(item.id)
+      if (v) byVerdict[v] = (byVerdict[v] ?? 0) + 1
+      else if (isRetest(item)) retest++
+    }
+    return { byVerdict, retest, total: params.items.length }
+  })
+
+  /** The chips read as states, "Accepted 40 / Rejected 12" (mos-u8i35): the
+   * reviewer scans one group and flips the outliers. */
+  const FILTER_VERDICTS: VerdictOption[] = VERDICTS.map((o) => ({
+    ...o,
+    label:
+      o.id === "approve"
+        ? "Accepted"
+        : o.id === "modify"
+          ? "Modified"
+          : "Rejected",
+  }))
+
+  const filters = $derived(
+    buildReviewFilters({
+      verdicts: FILTER_VERDICTS,
+      counts: counts.byVerdict,
+      total: counts.total,
+      retest: counts.retest,
+    }),
+  )
+
+  function visible(id: string): boolean {
+    if (filter === "all") return true
+    const v = verdictOf(id)
+    if (filter === "undecided") return !v
+    if (filter === "retest") {
+      const item = itemsById.get(id)
+      return !!item && isRetest(item)
+    }
+    return v === filter
+  }
+
+  function needsYou(id: string): NeedsYou {
+    const item = itemsById.get(id)
+    if (!item || verdictOf(id)) return false
+    return isRetest(item) ? "retest" : "undecided"
+  }
+
+  // --- saving -----------------------------------------------------------------
+
+  /** Apply one change under the section's current round (the first save in
+   * a new round locks the old one into history). Local only. */
+  function update(item: DiffReviewItem, patch: Record<string, unknown>) {
+    const next = diffRounds.save(
+      decisions[item.id],
+      { ...patch, at: new Date().toISOString() },
+      teamRound(item.team),
+    ) as DiffDecision
+    const updated = { ...decisions }
+    if (isEmptyDecision(next)) delete updated[item.id]
+    else updated[item.id] = next
+    decisions = updated
+  }
+
+  function flush(): Promise<void> {
+    return saver.save($state.snapshot(decisions) as Record<string, unknown>)
+  }
+
+  function persist(item: DiffReviewItem, patch: Record<string, unknown>) {
+    update(item, patch)
+    // A failure shows as the block's alert (saver.failed), not a throw.
+    flush().catch(() => {})
+  }
+
+  function unpinNote(id: string) {
+    if (!(id in noteVerdictPin)) return
+    const { [id]: _drop, ...rest } = noteVerdictPin
+    noteVerdictPin = rest
+  }
+
+  /** VerdictControl never re-sends the active verdict (mos-yntqm); Undo
+   * clears. A new Reject / Modify opens + focuses the note (ReviewNote,
+   * mos-calzz) — the note stays optional, the verdict is already saved.
+   * Modify also opens its rewrite editor; the note takes the caret (the
+   * ruling), the seeded editor waits one `e` away. A repeat KEY on a
+   * note-worthy verdict re-opens the note. */
+  function setVerdict(id: string, verdict: DiffVerdict) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide) return
+    if (verdict === "modify") editorsOpen = { ...editorsOpen, [id]: true }
+    if (verdictOf(id) === verdict) {
+      unpinNote(id)
+      if (VERDICTS.find((o) => o.id === verdict)?.opensNote) openNote(id)
+      return
+    }
+    unpinNote(id)
+    // A line flipped to Reject after a bulk reject borrows that bulk's
+    // reason, so Esc can keep the reject with no extra typing (mos-u8i35).
+    if (verdict === "reject" && sharedRejectNote && !currentOf(id).note)
+      persist(item, { verdict, note: sharedRejectNote })
+    else persist(item, { verdict })
+  }
+
+  /** Clear the verdict; the note and any rewrite stay (a remark or a draft
+   * is not a verdict, and typing is never thrown away). */
+  function undoVerdict(id: string) {
+    const item = itemsById.get(id)
+    if (!item || !canDecide || !verdictOf(id)) return
+    unpinNote(id)
+    persist(item, { verdict: undefined })
+  }
+
+  function onNoteInput(id: string, text: string) {
+    const item = itemsById.get(id)
+    if (item) update(item, { note: text.slice(0, 2000) || undefined })
+  }
+
+  /** The note's uploaded clips (mos-rccb5): each upload adds its descriptor
+   * to the item's saved entry — the bytes are already in the artifact's
+   * private asset store by the time this fires. */
+  function onItemClips(id: string, clips: NoteAttachment[]) {
+    const item = itemsById.get(id)
+    if (item) persist(item, { attachments: clips })
+  }
+
+  /** ReviewNote's debounced save: rejects so the note shows "Not saved". */
+  const noteSave = $derived(ctx.saveState ? () => flush() : undefined)
+
+  /** Typing a rewrite IS a modify: the verdict follows the edit. Text equal
+   * to the proposal is no rewrite at all, so `edited` drops. */
+  function setEdited(item: DiffReviewItem, text: string) {
+    const prev = verdictOf(item.id)
+    if (prev !== "modify" && !(item.id in noteVerdictPin))
+      noteVerdictPin = { ...noteVerdictPin, [item.id]: prev }
+    persist(item, {
+      verdict: "modify",
+      edited:
+        norm(text) === norm(item.after)
+          ? undefined
+          : text.slice(0, EDITED_MAX_CHARS),
+    })
+  }
+
+  function resetEdit(item: DiffReviewItem) {
+    if (currentOf(item.id).edited === undefined) return
+    persist(item, { edited: undefined })
+  }
+
+  function noteVerdictOf(id: string): string | null {
+    return id in noteVerdictPin ? noteVerdictPin[id] : verdictOf(id)
+  }
+
+  function openNote(id: string) {
+    notesOpen = { ...notesOpen, [id]: true }
+    tick().then(() => document.getElementById(`noteinput-${id}`)?.focus())
+  }
+
+  function toggleNote(id: string) {
+    if (!canDecide) return
+    if (notesOpen[id]) notesOpen = { ...notesOpen, [id]: false }
+    else openNote(id)
+  }
+
+  function openEditor(id: string) {
+    if (!canDecide) return
+    editorsOpen = { ...editorsOpen, [id]: true }
+    tick().then(() => {
+      rootEl
+        ?.querySelector<HTMLTextAreaElement>(`#edit-${CSS.escape(id)}`)
+        ?.focus()
+    })
+  }
+
+  function closeEditor(id: string) {
+    editorsOpen = { ...editorsOpen, [id]: false }
+    rootEl
+      ?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(id)}"]`)
+      ?.focus()
+  }
+
+  /** a from the keyboard: accept, then move on to the next UNDECIDED
+   * section (mos-lsmve.12), or the plain next one when none is left. "Next"
+   * is captured BEFORE deciding: under the Undecided filter this section is
+   * about to hide. Reject and Modify open the note instead of advancing
+   * (mos-calzz). */
+  function keyVerdict(id: string, v: DiffVerdict) {
+    if (v !== "approve") return setVerdict(id, v)
+    const items = visualItems(rootEl)
+    const at = items.findIndex((el) => el.dataset.itemId === id)
+    const nextId = nextUndecided(
+      items.map((el) => el.dataset.itemId ?? ""),
+      id,
+      (other) => !!verdictOf(other),
+    )
+    const next =
+      items.find((el) => el.dataset.itemId === nextId) ??
+      (at >= 0 ? items[(at + 1) % items.length] : null)
+    setVerdict(id, v)
+    if (next && next.dataset.itemId !== id) tick().then(() => next.focus())
+  }
+
+  // --- bulk accept / reject (mos-nv4eb, mos-u8i35) --------------------------
+
+  /** Lines a bulk may decide: still undecided, not a retest (a line the
+   * team reopened deserves eyes — media-picker's Approve all rule), and
+   * shown under the active filter chip. A decided line is never touched. */
+  function bulkTargets(items: readonly DiffReviewItem[]): DiffReviewItem[] {
+    return items.filter(
+      (it) => !verdictOf(it.id) && !isRetest(it) && visible(it.id),
+    )
+  }
+
+  const remaining = $derived(bulkTargets(params.items))
+  const hasRisk = $derived(params.items.some((it) => it.risk))
+  const lowRisk = $derived(remaining.filter((it) => it.risk === "low"))
+
+  /** The last bulk, for its Undo (cleared by Undo, dismiss or the next bulk). */
+  let lastBulk = $state<{
+    undo: BulkUndo<DiffDecision>
+    count: number
+  } | null>(null)
+  /** The open bulk-reject form: which lines it will reject, and the control
+   * that opened it (focus goes back there on Cancel). */
+  let rejectAsk = $state<{ ids: string[]; opener: HTMLElement | null } | null>(
+    null,
+  )
+  /** The reason the last bulk reject gave, reused by a later single flip. */
+  let sharedRejectNote = $state<string | null>(null)
+
+  /** Decide every target in ONE save — the same save path as a single
+   * click, batched. Decisions stay drafts until Finish review. */
+  function decideTargets(
+    targets: readonly DiffReviewItem[],
+    verdict: "approve" | "reject",
+    note?: string,
+  ) {
+    if (!canDecide || targets.length === 0) return
+    for (const it of targets) unpinNote(it.id)
+    const { decisions: next, undo } = decideMany(
+      decisions,
+      targets.map((it) => ({ id: it.id, round: teamRound(it.team) })),
+      { verdict, note, at: new Date().toISOString(), save: diffRounds.save },
+    )
+    decisions = next
+    lastBulk = { undo, count: targets.length }
+    flush().catch(() => {})
+  }
+
+  function lineCount(n: number): string {
+    return n === 1 ? "1 line" : `${n} lines`
+  }
+
+  /** Page-level bulk accept (all remaining, or all low-risk): asks first. */
+  async function confirmAccept(targets: readonly DiffReviewItem[]) {
+    if (!canDecide || targets.length === 0) return
+    const ids = targets.map((it) => it.id)
+    const ok = await showConfirm({
+      title: `Accept ${lineCount(targets.length)}?`,
+      body: "You can still change any line after. Lines you already decided stay as they are.",
+      confirmLabel: "Accept",
+      cancelLabel: "Cancel",
+      danger: false,
+      timeoutMs: 0,
+    })
+    if (!ok) return
+    // Re-check after the dialog: a line decided meanwhile is not overwritten.
+    decideTargets(
+      bulkTargets(params.items).filter((it) => ids.includes(it.id)),
+      "approve",
+    )
+  }
+
+  /** Bulk reject (page or section): the inline form asks ONE shared note. */
+  function askReject(targets: readonly DiffReviewItem[]) {
+    if (!canDecide || targets.length === 0) return
+    const active = document.activeElement
+    rejectAsk = {
+      ids: targets.map((it) => it.id),
+      opener: active instanceof HTMLElement ? active : null,
+    }
+  }
+
+  const rejectCount = $derived(
+    rejectAsk
+      ? bulkTargets(params.items).filter((it) => rejectAsk!.ids.includes(it.id))
+          .length
+      : 0,
+  )
+
+  function confirmReject(note: string) {
+    if (!rejectAsk) return
+    const ids = rejectAsk.ids
+    rejectAsk = null
+    sharedRejectNote = note
+    decideTargets(
+      bulkTargets(params.items).filter((it) => ids.includes(it.id)),
+      "reject",
+      note,
+    )
+    // The lines are decided now: start the flip pass at the first one.
+    tick().then(() =>
+      visualItems(rootEl)
+        .find((el) => !el.hidden)
+        ?.focus(),
+    )
+  }
+
+  function cancelReject() {
+    const opener = rejectAsk?.opener
+    rejectAsk = null
+    tick().then(() => opener?.isConnected && opener.focus())
+  }
+
+  function undoBulk() {
+    if (!lastBulk || !canDecide) return
+    decisions = undoMany(decisions, lastBulk.undo)
+    lastBulk = null
+    flush().catch(() => {})
+  }
+
+  /** The card a key acts on: the one holding focus, inside this block. */
+  function focusedItemId(target: EventTarget | null): string | null {
+    const el =
+      target instanceof Element
+        ? target.closest<HTMLElement>("[data-item-id]")
+        : null
+    return el && rootEl?.contains(el) ? (el.dataset.itemId ?? null) : null
+  }
+
+  /** Block keys beyond the shared review map (mos-nv4eb, mos-u8i35):
+   *  - Shift+A / Shift+R: accept / reject all remaining (both ask first);
+   *  - x: Modify, kept as an alias of m for the old shared slot;
+   *  - Enter in a REJECT line's note: save it and go back to the line, so a
+   *    flip pass is r, type, Enter, j.
+   * Never with Ctrl / Meta / Alt; the keys never fire while typing (the
+   * note's Enter is the one deliberate exception). */
+  function onBlockKey(e: KeyboardEvent) {
+    if (e.ctrlKey || e.metaKey || e.altKey) return
+    if (e.defaultPrevented || e.isComposing || !canDecide) return
+    if (isTypingTarget(e.target)) {
+      const t = e.target as HTMLElement
+      if (e.key !== "Enter" || e.shiftKey || !t.id.startsWith("noteinput-"))
+        return
+      const id = t.id.slice("noteinput-".length)
+      if (verdictOf(id) !== "reject") return
+      e.preventDefault()
+      notesOpen = { ...notesOpen, [id]: false }
+      flush().catch(() => {})
+      rootEl
+        ?.querySelector<HTMLElement>(`[data-item-id="${CSS.escape(id)}"]`)
+        ?.focus()
+      return
+    }
+    if (e.shiftKey && (e.key === "A" || e.key === "R")) {
+      if (remaining.length === 0) return
+      e.preventDefault()
+      if (e.key === "A") void confirmAccept(remaining)
+      else askReject(remaining)
+      return
+    }
+    if (e.key === "x" && !e.shiftKey) {
+      const id = focusedItemId(e.target)
+      if (!id) return
+      e.preventDefault()
+      keyVerdict(id, "modify")
+    }
+  }
+
+  // On the block only, like the review map (`global: false`).
+  $effect(() => {
+    const el = rootEl
+    if (!el) return
+    el.addEventListener("keydown", onBlockKey)
+    return () => el.removeEventListener("keydown", onBlockKey)
+  })
+
+  const bulkKeyRows: ReviewKeyRow[] = $derived(
+    canDecide
+      ? [
+          {
+            keys: ["Shift", "A"],
+            description: "Accept all remaining lines (asks first)",
+            group: "Decide",
+          },
+          {
+            keys: ["Shift", "R"],
+            description: "Reject all remaining lines (asks for one note)",
+            group: "Decide",
+          },
+          {
+            keys: ["Enter"],
+            description: "In a reject note: save it and go back to the line",
+            group: "Decide",
+          },
+        ]
+      : [],
+  )
+
+  const keysConfig: ReviewKeysOptions = $derived({
+    verdicts: VERDICTS,
+    onVerdict: canDecide
+      ? (id: string, v: string) => keyVerdict(id, v as DiffVerdict)
+      : undefined,
+    onUndo: canDecide ? undoVerdict : undefined,
+    onNote: canDecide ? toggleNote : undefined,
+    onEdit: canDecide ? openEditor : undefined,
+    onOpen: canDecide ? (id: string) => openEditor(id) : undefined,
+    needsYou: canDecide ? needsYou : undefined,
+    onHelp: () => (helpOpen = true),
+    getItems: () => visualItems(rootEl),
+    global: false,
+  })
+
+  const VERDICT_WORD: Record<DiffVerdict, string> = {
+    approve: "accepted",
+    modify: "modified",
+    reject: "rejected",
+  }
+
+  const RISK_CLASS = {
+    low: "badge-ghost",
+    medium: "badge-warning",
+    high: "badge-error",
+  } as const
+
+  /** Visual sort: undecided first, then modified, accepted, rejected —
+   * through the frozen `ranks` snapshot, never live verdicts. */
+  const ORDER: Record<DiffVerdict, number> = {
+    modify: 1,
+    approve: 2,
+    reject: 3,
+  }
+
+  /** Frozen sort (mos-lsmve.12, ../../review/visualOrder): re-taken only on
+   * a filter change, so a section decided mid-session stays put. */
+  function snapshotRanks() {
+    return sortRanks(
+      params.items.map((it) => it.id),
+      verdictOf,
+      ORDER,
+    )
+  }
+  let ranks = $state<Record<string, number>>(untrack(snapshotRanks))
+  $effect(() => {
+    void filter
+    untrack(() => (ranks = snapshotRanks()))
+  })
+</script>
+
+<!-- The section cards are the interactive elements; jatui reviewKeys
+(listening on this block only) acts on the focused card. -->
+<section
+  bind:this={rootEl}
+  bind:clientWidth={width}
+  class="@container rounded-box border border-base-content/10 bg-base-100"
+  aria-label={params.title ?? "Diff review"}
+  use:reviewKeys={keysConfig}
+>
+  {#if params.title || params.intro}
+    <header class="px-4 pt-4 pb-1 sm:px-5">
+      {#if params.title}
+        <div class="flex items-center gap-2">
+          <h2 class="min-w-0 text-lg font-semibold tracking-tight">
+            {params.title}
+          </h2>
+          <SectionTools {ctx} inline />
+        </div>
+      {/if}
+      {#if params.intro}
+        <p
+          class="mt-0.5 max-w-[70ch] text-sm whitespace-pre-line text-base-content/75"
+        >
+          {params.intro}
+        </p>
+      {/if}
+    </header>
+  {/if}
+
+  <div
+    class="flex flex-col gap-2 border-b border-base-content/10 px-4 py-2.5 sm:px-5"
+  >
+    <ReviewProgress
+      verdicts={VERDICTS}
+      counts={counts.byVerdict}
+      total={counts.total}
+      retest={counts.retest}
+      size="xs"
+      label="Review progress"
+    />
+    <div class="flex flex-wrap items-center gap-2">
+      <ReviewFilterBar
+        {filters}
+        bind:active={filter}
+        onHelp={() => (helpOpen = true)}
+        label="Filter sections"
+      />
+      {#if canDecide && remaining.length > 0}
+        <!-- Joe 2026-10-19: 52 lines clicked one by one. Low-risk first
+             (the safest bulk), then everything left. Both ask first. -->
+        <div class="ml-auto flex shrink-0 flex-wrap items-center gap-2">
+          {#if hasRisk && lowRisk.length > 0}
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs rounded-field"
+              data-accept-low-risk
+              onclick={() => confirmAccept(lowRisk)}
+            >
+              Accept all low-risk
+              <span class="tabular-nums opacity-70">({lowRisk.length})</span>
+            </button>
+          {/if}
+          <button
+            type="button"
+            class="btn btn-outline btn-xs rounded-field"
+            aria-keyshortcuts="Shift+A"
+            data-accept-all
+            onclick={() => confirmAccept(remaining)}
+          >
+            Accept all remaining
+            <span class="tabular-nums opacity-70">({remaining.length})</span>
+          </button>
+          <!-- Joe 2026-10-19: "bulk accept OR reject, then flip the
+               outliers either way." Asks one shared note first. -->
+          <button
+            type="button"
+            class="btn btn-outline btn-error btn-xs rounded-field"
+            aria-keyshortcuts="Shift+R"
+            aria-expanded={!!rejectAsk}
+            data-reject-all
+            onclick={() => askReject(remaining)}
+          >
+            Reject all remaining
+            <span class="tabular-nums opacity-70">({remaining.length})</span>
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if rejectAsk && canDecide && rejectCount > 0}
+    <BulkRejectForm
+      count={rejectCount}
+      noun="line"
+      onConfirm={confirmReject}
+      onCancel={cancelReject}
+    />
+  {/if}
+
+  {#if lastBulk && canDecide}
+    {@const rejected = lastBulk.undo.verdict === "reject"}
+    <BulkUndoBar
+      message="{rejected ? 'Rejected' : 'Accepted'} {lineCount(
+        lastBulk.count,
+      )}. Flip any line with a or r."
+      tone={rejected ? "error" : "success"}
+      onUndo={undoBulk}
+      onDismiss={() => (lastBulk = null)}
+    />
+  {/if}
+
+  {#if saver.failed}
+    <div
+      class="mx-4 mt-3 flex items-center gap-2 rounded-field border border-error/40 bg-error/10 px-3 py-2 text-sm sm:mx-5"
+      role="alert"
+      data-save-error
+    >
+      <span>Your last change was not saved.</span>
+      <button
+        type="button"
+        class="btn btn-xs ml-auto rounded-field"
+        onclick={() => saver.retry()}>Retry</button
+      >
+    </div>
+  {/if}
+
+  <div class="px-4 pt-2 pb-5 sm:px-5">
+    {#if params.items.length === 0}
+      <p class="py-6 text-sm text-base-content/70">No changes to review.</p>
+    {/if}
+    {#each sections as section (section.id)}
+      {@const anyVisible = section.items.some((it) => visible(it.id))}
+      <section aria-label={section.title || "Sections"} hidden={!anyVisible}>
+        {#if section.title}
+          {@const sectionTargets = canDecide ? bulkTargets(section.items) : []}
+          <div class="mt-4 mb-2 flex flex-wrap items-center gap-2">
+            <h3 class="text-sm font-semibold text-base-content/80">
+              {section.title}
+            </h3>
+            {#if sectionTargets.length > 0}
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs rounded-field text-base-content/70"
+                aria-label="Accept {lineCount(
+                  sectionTargets.length,
+                )} left in {section.title}"
+                data-accept-section={section.id}
+                onclick={() => decideTargets(sectionTargets, "approve")}
+              >
+                Accept section
+                <span class="tabular-nums">({sectionTargets.length})</span>
+              </button>
+              <button
+                type="button"
+                class="btn btn-ghost btn-xs rounded-field text-error"
+                aria-label="Reject {lineCount(
+                  sectionTargets.length,
+                )} left in {section.title}"
+                data-reject-section={section.id}
+                onclick={() => askReject(sectionTargets)}
+              >
+                Reject section
+                <span class="tabular-nums">({sectionTargets.length})</span>
+              </button>
+            {/if}
+          </div>
+        {/if}
+        <div class="flex flex-col gap-3">
+          {#each section.items as item (item.id)}
+            {@const d = currentOf(item.id)}
+            {@const v = d.verdict ?? null}
+            {@const stats = lineStats(item.before, item.after)}
+            {@const hasEdit = d.edited !== undefined}
+            {@const retest = isRetest(item)}
+            {@const history = historyRounds(
+              views[item.id]?.history ?? [],
+              diffRounds.roundLabel,
+            )}
+            <!-- The card is the j/k focus target (roving focus, as in
+                 media-picker). -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <article
+              data-item-id={item.id}
+              tabindex="0"
+              class="flex flex-col gap-2 rounded-box border bg-base-100 p-3 transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary motion-reduce:transition-none sm:p-4 {v ===
+              'approve'
+                ? 'border-success ring-1 ring-success/40'
+                : v === 'modify'
+                  ? 'border-warning/60'
+                  : v === 'reject'
+                    ? 'border-error/40 opacity-60 focus-within:opacity-100 hover:opacity-100'
+                    : 'border-base-content/10'}"
+              style:order={ranks[item.id] ?? 0}
+              aria-label="{item.title}, {v
+                ? VERDICT_WORD[v]
+                : retest
+                  ? 'to retest'
+                  : 'undecided'}"
+              hidden={!visible(item.id)}
+            >
+              <div class="flex flex-wrap items-baseline gap-1.5">
+                <h4 class="text-sm leading-snug font-semibold">
+                  {item.title}
+                </h4>
+                {#if item.risk}
+                  <span class="badge badge-sm {RISK_CLASS[item.risk]}">
+                    {item.risk} risk
+                  </span>
+                {/if}
+                {#each item.tags ?? [] as t (t)}
+                  <span class="badge badge-ghost badge-sm">{t}</span>
+                {/each}
+                {#if item.team || (retest && canDecide)}
+                  <TeamChip team={item.team} retest={retest && canDecide} />
+                {/if}
+                {#if v}
+                  <span
+                    class="badge badge-sm font-medium {v === 'approve'
+                      ? 'badge-success'
+                      : v === 'modify'
+                        ? 'badge-warning'
+                        : 'badge-error'}"
+                  >
+                    {VERDICT_WORD[v]}
+                  </span>
+                {/if}
+              </div>
+              {#if item.rationale}
+                <p
+                  class="max-w-[80ch] text-xs leading-relaxed whitespace-pre-line text-base-content/75"
+                >
+                  {item.rationale}
+                </p>
+              {/if}
+
+              <div
+                class="overflow-hidden rounded-box border border-base-content/10"
+              >
+                <div
+                  class="flex items-center gap-2 border-b border-base-content/10 px-3 py-1.5 text-2xs text-base-content/70"
+                >
+                  <span class="badge badge-error badge-sm font-mono"
+                    >-{stats.removed}</span
+                  >
+                  <span class="badge badge-success badge-sm font-mono"
+                    >+{stats.added}</span
+                  >
+                  <span class="ml-auto">
+                    {item.before
+                      ? item.after
+                        ? "current → proposed"
+                        : "proposed: delete this section"
+                      : "proposed: new section"}
+                  </span>
+                </div>
+                <HunkDiffView
+                  oldText={norm(item.before)}
+                  newText={norm(item.after)}
+                  {unified}
+                />
+              </div>
+
+              {#if hasEdit}
+                <div
+                  class="overflow-hidden rounded-box border border-warning/50"
+                >
+                  <div
+                    class="border-b border-base-content/10 px-3 py-1.5 text-2xs font-medium text-base-content/80"
+                  >
+                    Your rewrite (proposed → yours)
+                    {#if v !== "modify"}
+                      <span class="font-normal text-base-content/70"
+                        >· draft, not applied unless Modify is chosen</span
+                      >
+                    {/if}
+                  </div>
+                  <HunkDiffView
+                    oldText={norm(item.after)}
+                    newText={norm(d.edited ?? "")}
+                    {unified}
+                  />
+                </div>
+              {/if}
+
+              <!-- mos-guqgs: the verdict row renders on every surface, but
+                   VISIBLY DISABLED where nothing can save — the old gate hid
+                   the row on read-only mounts yet left it fully live on
+                   saveless ones (readonly=false, saveState=undefined), the
+                   exact interactive-but-unsaved bug. Same contract as
+                   checklist / compare / callout: no saveState, dead controls. -->
+              <div class="flex flex-wrap items-center gap-2">
+                <VerdictControl
+                  options={VERDICTS}
+                  value={v}
+                  label="Verdict for {item.title}"
+                  disabled={!canDecide}
+                  onVerdict={(id) => setVerdict(item.id, id as DiffVerdict)}
+                  onUndo={() => undoVerdict(item.id)}
+                />
+                <NoteToggle
+                  open={!!notesOpen[item.id]}
+                  hasNote={!!d.note}
+                  disabled={!canDecide}
+                  controls="noteinput-{item.id}"
+                  itemTitle={item.title}
+                  onToggle={() => toggleNote(item.id)}
+                />
+              </div>
+
+              {#if canDecide}
+                {#if editorsOpen[item.id]}
+                  <div class="flex flex-col gap-1.5">
+                    <label
+                      class="text-xs font-medium text-base-content/80"
+                      for="edit-{item.id}"
+                    >
+                      Your version of “{item.title}”
+                    </label>
+                    <textarea
+                      id="edit-{item.id}"
+                      class="textarea textarea-sm min-h-32 w-full resize-y rounded-field border-base-content/15 bg-base-200 text-sm leading-relaxed"
+                      rows={Math.min(
+                        16,
+                        Math.max(
+                          4,
+                          (d.edited ?? item.after).split("\n").length + 1,
+                        ),
+                      )}
+                      maxlength={EDITED_MAX_CHARS}
+                      value={d.edited ?? item.after}
+                      oninput={(e) => setEdited(item, e.currentTarget.value)}
+                      onkeydown={(e) => {
+                        if (e.key === "Escape") {
+                          e.preventDefault()
+                          closeEditor(item.id)
+                        }
+                      }}
+                    ></textarea>
+                    <div class="flex items-center gap-2">
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm rounded-field"
+                        disabled={!hasEdit}
+                        onclick={() => resetEdit(item)}
+                      >
+                        Reset to proposed
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-sm ml-auto rounded-field"
+                        onclick={() => closeEditor(item.id)}
+                      >
+                        Done
+                      </button>
+                    </div>
+                  </div>
+                {:else if v === "modify"}
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-sm self-start rounded-field px-2"
+                    onclick={() => openEditor(item.id)}
+                  >
+                    {hasEdit ? "Edit your rewrite" : "Edit the proposed text"}
+                  </button>
+                {/if}
+
+                <!-- The ONE composer in its per-item mode (mos-rccb5): the
+                     ReviewNote text leg is unchanged; the attach lane rides
+                     under it. -->
+                <ItemNote
+    artifactId={ctx.artifactId}
+                  note={{
+                    id: `noteinput-${item.id}`,
+                    value: d.note ?? "",
+                    verdict: noteVerdictOf(item.id),
+                    options: VERDICTS,
+                    round: views[item.id]?.round ?? null,
+                    label: `Note for ${item.title}`,
+                    placeholder: "Why, or what should change?",
+                    onInput: (t) => onNoteInput(item.id, t),
+                    onSave: noteSave,
+                  }}
+                  bind:open={() => !!notesOpen[item.id],
+                  (o) => (notesOpen = { ...notesOpen, [item.id]: o })}
+                  clips={currentOf(item.id).attachments ?? []}
+                  onClipsChange={(clips) => onItemClips(item.id, clips)}
+                  disabled={!canDecide}
+                />
+              {/if}
+              <RoundHistory
+                rounds={history}
+                verdicts={VERDICTS}
+                toggleLabel={(n) =>
+                  n === 1 ? "1 earlier round" : `${n} earlier rounds`}
+              />
+            </article>
+          {/each}
+        </div>
+      </section>
+    {/each}
+
+    {#if params.items.length > 0 && !params.items.some((it) => visible(it.id))}
+      <p class="py-6 text-sm text-base-content/70">
+        Nothing in this filter.
+        <button
+          type="button"
+          class="link link-hover ml-1"
+          onclick={() => (filter = "all")}>Show all</button
+        >
+      </p>
+    {/if}
+  </div>
+</section>
+
+<ReviewShortcuts
+  bind:open={helpOpen}
+  config={keysConfig}
+  extraRows={bulkKeyRows}
+  footnote="Keys act on the focused section. Accept moves on to the next undecided one. Shift+A accepts and Shift+R rejects every undecided line in the current filter; lines you already decided stay. Then flip the outliers: j / k to move, a, r or m to change one line (x also means Modify). Decided sections sort to the end when you change the filter or reload. u (or Undo) clears the verdict; the note and your rewrite stay."
+/>