Capture and annotate post-submit review state (Section 8)

After the user authorized and ran scripts/capture/submit-and-capture-
review.mjs, a Comment-style review was submitted on PR #121 (no Approve,
no stage advancement). The review body is marked '[Documentation training
sandbox]' so future viewers of the PR know it was synthetic.

fig-09-review-submitted: three callouts on the timeline entry —
  1. The 'rmctestreviewer reviewed now' event header
  2. The 'View reviewed changes' link that jumps to a Files-changed view
     of what was reviewed
  3. The review comment card showing the body the reviewer typed

The submit-and-capture-review.mjs selector for the textarea was tightened
to scope inside the dialog (originally picked up GitHub's hidden feedback
form). Added probe-review-submitted.mjs to pin sub-element coords inside
the post-submit timeline block.

Author: AdamGohs

planning/assets/captures/conversation-post-submit.png

@@ -0,0 +1,38 @@
+{
+  "url": "https://github.com/USACE-RMC/RMC-Software-Documentation/pull/121",
+  "capturedAt": "2026-05-20T20:37:36.917Z",
+  "elements": {
+    "reviewEvent": {
+      "x": 168,
+      "y": 2532,
+      "w": 808,
+      "h": 242
+    },
+    "reviewCard": {
+      "x": 168,
+      "y": 2532,
+      "w": 808,
+      "h": 242
+    },
+    "reviewedHeader": {
+      "x": 184,
+      "y": 2532,
+      "w": 792,
+      "h": 65
+    },
+    "reviewedHeaderRow": {
+      "x": 184,
+      "y": 2532,
+      "w": 792,
+      "h": 65
+    },
+    "viewLink": {
+      "x": 832,
+      "y": 2553,
+      "w": 145,
+      "h": 28
+    },
+    "commentHeader": null,
+    "commentCard": null
+  }
+}

planning/assets/captures/files-changed-post-submit.png

@@ -0,0 +1,50 @@
+"""
+Annotated "review submitted" figure for Section 8 of the reviewer-workflow
+chapter — what the reviewer sees on the Conversation tab right after
+clicking Submit review.
+
+Source:
+  planning/assets/captures/conversation-post-submit.png
+  planning/assets/captures/post-submit.coords.json
+
+Highlights:
+  1. The "rmctestreviewer reviewed now" timeline event header
+  2. "View reviewed changes" link — jumps to a Files-changed view that
+     shows only what was reviewed
+  3. The review comment card showing the overall body the reviewer typed
+"""
+
+import json
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parent))
+from annotate_lib import annotate_and_crop  # noqa: E402
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+SRC = REPO_ROOT / "planning" / "assets" / "captures" / "conversation-post-submit.png"
+COORDS = REPO_ROOT / "planning" / "assets" / "captures" / "post-submit.coords.json"
+OUT = REPO_ROOT / "static" / "figures" / "dev" / "reviewer-workflow" / "fig-09-review-submitted.png"
+PPTX = REPO_ROOT / "planning" / "assets" / "figure-pptx" / "fig-09-review-submitted.pptx"
+
+elements = json.loads(COORDS.read_text())["elements"]
+view_link = elements["viewLink"]            # (832, 2553, 145, 28)
+reviewed_row = elements["reviewedHeader"]   # (184, 2532, 792, 65) — full row
+
+# Tighten box 1 to just the "rmctestreviewer reviewed now" text on the left.
+reviewed_text = (reviewed_row["x"], reviewed_row["y"] + 18, 340, 30)
+# Comment card sits just below the event row (probe didn't find it cleanly).
+comment_card = (168, reviewed_row["y"] + 75, 808, 170)
+
+# Crop with a little context above and below.
+top = reviewed_row["y"] - 50
+bottom = comment_card[1] + comment_card[3] + 50
+CROP = (60, top, 1340, bottom)
+
+callouts = [
+    (reviewed_text[0], reviewed_text[1], reviewed_text[2], reviewed_text[3], "tl", 1),
+    (view_link["x"], view_link["y"], view_link["w"], view_link["h"], "tr", 2),
+    (comment_card[0], comment_card[1], comment_card[2], comment_card[3], "tl", 3),
+]
+
+annotate_and_crop(SRC, callouts, CROP, OUT, pptx_out=PPTX)

planning/assets/captures/post-submit.coords.json

@@ -0,0 +1,83 @@
+// Find specific sub-element coords inside the "review submitted" block
+// on the PR #121 Conversation tab.
+
+import { chromium } from 'playwright';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const AUTH_FILE = resolve(process.cwd(), '.playwright-auth', 'github.json');
+const COORDS_FILE = resolve(process.cwd(), 'planning', 'assets', 'captures', 'post-submit.coords.json');
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({ storageState: AUTH_FILE, viewport: { width: 1440, height: 900 } });
+const page = await context.newPage();
+await page.goto('https://github.com/USACE-RMC/RMC-Software-Documentation/pull/121', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(3000);
+// Scroll to bottom to load the recent review event
+await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
+await page.waitForTimeout(800);
+
+const info = await page.evaluate(() => {
+  const r = (el) => { if (!el) return null; const b = el.getBoundingClientRect(); return { x: Math.round(b.x + window.scrollX), y: Math.round(b.y + window.scrollY), w: Math.round(b.width), h: Math.round(b.height) }; };
+
+  // The exact "rmctestreviewer reviewed now" text
+  let reviewedHeader = null;
+  for (const el of document.querySelectorAll('a, span, h3, h4, div')) {
+    const t = (el.innerText || '').trim();
+    if (/^rmctestreviewer reviewed/.test(t) && t.length < 80) {
+      reviewedHeader = el;
+      break;
+    }
+  }
+  // Climb to the containing row
+  let reviewedHeaderRow = reviewedHeader;
+  if (reviewedHeader) {
+    let p = reviewedHeader;
+    for (let i = 0; i < 6 && p.parentElement; i++) {
+      const pr = p.getBoundingClientRect();
+      if (pr.width > 600 && pr.height < 60) { reviewedHeaderRow = p; break; }
+      p = p.parentElement;
+    }
+  }
+
+  // "View reviewed changes" link
+  const viewLink = Array.from(document.querySelectorAll('a, button')).find((e) => /^View reviewed changes$/.test((e.innerText || '').trim()));
+
+  // The blue "left a comment" header strip
+  let commentHeader = null;
+  for (const el of document.querySelectorAll('div, header, span')) {
+    const t = (el.innerText || '').trim();
+    if (/^rmctestreviewer left a comment$/.test(t) && t.length < 80) {
+      commentHeader = el;
+      break;
+    }
+  }
+  // The full review comment card (the bordered box)
+  let commentCard = null;
+  if (commentHeader) {
+    let p = commentHeader;
+    for (let i = 0; i < 8 && p.parentElement; i++) {
+      const pr = p.getBoundingClientRect();
+      if (pr.height > 130 && pr.width > 700 && pr.width < 900) { commentCard = p; break; }
+      p = p.parentElement;
+    }
+  }
+
+  return {
+    reviewedHeader: r(reviewedHeader),
+    reviewedHeaderRow: r(reviewedHeaderRow),
+    viewLink: r(viewLink),
+    commentHeader: r(commentHeader),
+    commentCard: r(commentCard),
+    pageHeight: document.documentElement.scrollHeight,
+  };
+});
+
+console.log(JSON.stringify(info, null, 2));
+
+const existing = JSON.parse(readFileSync(COORDS_FILE, 'utf8'));
+Object.assign(existing.elements, info);
+delete existing.elements.pageHeight;
+writeFileSync(COORDS_FILE, JSON.stringify(existing, null, 2));
+
+await browser.close();

planning/assets/figure-pptx/fig-09-review-submitted.pptx

@@ -40,25 +40,29 @@ console.log('   opening submit-review dialog...');
 await page.locator('button:has-text("Submit review"), button:has-text("Add your review"), button:has-text("Finish your review")').first().click({ timeout: 4000 });
 await page.waitForTimeout(1200);
 
-// 2. Fill the comment textarea
+// Locate the open dialog — GitHub's "Finish your review" overlay. Every
+// click after this is scoped inside the dialog so we don't accidentally
+// hit the page's hidden feedback form (id=feedback) or the dialog-open
+// button at the top right.
+const dialog = page.locator('div[role="dialog"], [aria-modal="true"], dialog')
+  .filter({ hasText: /Finish your review|Submit your review/i })
+  .first();
+await dialog.waitFor({ state: 'visible', timeout: 5000 });
+
+// 2. Fill the comment textarea (only the one inside the dialog)
 console.log('   typing review body...');
-const textarea = page.locator('textarea[placeholder*="comment" i], textarea[name*="body" i], textarea').first();
+const textarea = dialog.locator('textarea').first();
 await textarea.fill(REVIEW_BODY, { timeout: 4000 });
 await page.waitForTimeout(400);
 
 // 3. Confirm "Comment" radio is selected (it's the default, but be explicit)
-const commentRadio = page.locator('input[type="radio"][value="comment" i], input[type="radio"]').first();
+const commentRadio = dialog.locator('input[type="radio"]').first();
 const checked = await commentRadio.isChecked().catch(() => true);
 if (!checked) await commentRadio.click({ timeout: 2000 }).catch(() => {});
 
 // 4. Click the dialog's Submit button
 console.log('   submitting review...');
-// The dialog has its own Submit button — find by its position inside the
-// overlay rather than the top-right open-dialog button.
-await page.locator('div[role="dialog"] button:has-text("Submit review"), .Overlay button:has-text("Submit review")').first().click({ timeout: 5000 }).catch(async () => {
-  // Fallback — click any Submit review button visible after dialog open
-  await page.locator('button:has-text("Submit review")').last().click({ timeout: 4000 });
-});
+await dialog.locator('button:has-text("Submit review")').first().click({ timeout: 5000 });
 
 // Wait for the dialog to close and the page to refresh state
 await page.waitForTimeout(4000);