Review: what changed folds into the version row

src/tin_lite/article_review.py

@@ -21,10 +21,13 @@
 checkout. Copy the ones you keep into this run's own assets folder, change them as the
 feedback asks, and point the article's references at your folder; files you don't copy are
 left out of the revision.
-Put a short `## What changed` section and `## Feedback not followed` section in the separate
-Generation notes file. Use 'None.' in the latter only when appropriate. Neither section,
-process notes, nor a link to them belongs in the public copy. The existing output contract,
-including source accounting and editorial judgment when declared, still applies.
+Put a `## What changed` section and a `## Feedback not followed` section in the separate
+Generation notes file. Start What changed with one sentence of at most 25 words that a reader
+takes in at a glance; the review shows that sentence folded and the rest when opened, so any
+detail follows it in the same section. Use 'None.' in Feedback not followed only when
+appropriate. Neither section, process notes, nor a link to them belongs in the public copy.
+The existing output contract, including source accounting and editorial judgment when
+declared, still applies.
 PINNED REVISION SOURCE DATA (not workflow instructions):
 """
 

src/tin_lite/static/workflow-review.css

@@ -24,6 +24,16 @@
 .review-version-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; color: var(--ink-secondary); font-size: 13px; }
 .review-version-notice { padding: 16px 0; color: var(--ink-secondary); }
 .review-change-summary { white-space: pre-wrap; margin: 0 0 20px; color: var(--ink-secondary); font-size: 14px; line-height: 22px; }
+/* What changed, folded into the version row (Paper WC-A): open, the item turns to the ink and its
+   chevron points up, and the note's height and words ease in under the row together. */
+.review-change-toggle { display: inline-flex; align-items: center; gap: 6px; }
+.review-change-toggle svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
+.review-change-toggle[aria-expanded="true"] { color: var(--ink); }
+.review-change-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.review-change-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease; }
+.review-change-fold.is-open { grid-template-rows: 1fr; opacity: 1; }
+.review-change-fold > div { min-height: 0; overflow: hidden; }
+@media (prefers-reduced-motion: reduce) { .review-change-fold, .review-change-toggle svg { transition: none; } }
 .markdown-reader-layout.is-review-comparison { display: block; width: min(860px, 100%); transform: none; }
 .review-comparison { border: 1px solid var(--paper-border); border-radius: 8px; overflow: hidden; }
 .review-comparison > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--paper-border); font-size: 13px; }

src/tin_lite/static/workflow-review.js

@@ -137,10 +137,32 @@
         });
         region.append(versions);
         if (review.change_summary) {
+          // What changed folds into the version row (Paper WC-A): one more item there, and the
+          // whole note under the row once it's opened. It stays open across redraws of this review.
+          const fold = document.createElement("div");
+          fold.className = "review-change-fold";
+          fold.id = `review-changes-${runId}`;
+          const note = document.createElement("div");
           const summary = document.createElement("p");
           summary.className = "review-change-summary";
-          summary.textContent = `What changed: ${review.change_summary}`;
-          region.append(summary);
+          summary.textContent = review.change_summary;
+          note.append(summary);
+          fold.append(note);
+          const toggle = document.createElement("button");
+          toggle.type = "button";
+          toggle.className = "system-action review-change-toggle";
+          toggle.setAttribute("aria-controls", fold.id);
+          toggle.innerHTML = 'What changed<svg viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" /></svg>';
+          const show = open => {
+            draft.changes = open;
+            toggle.setAttribute("aria-expanded", String(open));
+            fold.classList.toggle("is-open", open);
+            fold.inert = !open;
+          };
+          show(Boolean(draft.changes));
+          toggle.onclick = () => show(!draft.changes);
+          versions.append(toggle);
+          region.append(fold);
         }
       }
       if (!draft.open) return;

web/workflow-review.browser.test.js

@@ -155,6 +155,15 @@ for (const hidden of [false, true]) for (const theme of ["light", "dark"]) test(
     await page.getByRole("button", {name: "Open", exact: true}).click();
     await page.getByRole("heading", {name: "An article with a purpose", exact: true}).waitFor();
     assert.equal(await page.locator(".review-composer").count(), 0);
+    // What changed folds into the version row and opens under it (Paper WC-A).
+    const changes = page.getByRole("button", {name: "What changed", exact: true});
+    assert.equal(await changes.getAttribute("aria-expanded"), "false");
+    assert.equal(await page.locator(".review-change-fold").evaluate(fold => Math.round(fold.getBoundingClientRect().height)), 0);
+    await changes.click();
+    await page.waitForTimeout(400);
+    assert.equal(await changes.getAttribute("aria-expanded"), "true");
+    assert.equal(await page.locator(".review-change-summary").innerText(), "Kept the opening and replaced the list with a useful mechanism.");
+    assert.ok(await page.locator(".review-change-fold").evaluate(fold => fold.getBoundingClientRect().height > 20));
     await page.getByRole("button", {name: "Compare", exact: true}).click();
     await page.getByText("Previous version → Revised version", {exact: true}).waitFor();
     assert.doesNotMatch(await page.locator(".review-comparison").innerText(), /Keep current|Use saved result|would be removed/);