Photograph the runs screen and a dashboard read against runs

frontend/scripts/capture-screenshots.mjs

@@ -89,16 +89,73 @@ for (const theme of ["light", "dark"]) {
 
     await captureFlows(page, dir)
     await captureDashboards(page, dir)
+    await captureRuns(page, dir)
 
     await context.close()
     console.log(
-      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel}.png`,
+      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel,app-runs,app-run,app-run-context}.png`,
     )
   }
 }
 
 await browser.close()
 
+/**
+ * The experiment log: the table, one run in full, and a dashboard read against
+ * the runs someone picked. Skipped on an instance that has never run anything,
+ * where all three would photograph the same empty state.
+ */
+async function captureRuns(page, dir) {
+  await page.goto(`${APP_URL}/runs`, { waitUntil: "networkidle" })
+  await page.waitForTimeout(1000)
+  await page.screenshot({ path: `${dir}/app-runs.png` })
+
+  const rows = page.getByTestId("run-row")
+  if (!(await rows.count())) return
+
+  // Two runs compared, which is the whole point of the screen.
+  const boxes = page.getByTestId("run-select")
+  await boxes.nth(0).click()
+  if ((await boxes.count()) > 1) await boxes.nth(1).click()
+  await page.waitForTimeout(1500)
+  await page.screenshot({ path: `${dir}/app-runs-compare.png`, fullPage: true })
+
+  // A dashboard read against those two runs: the same page a live run is
+  // watched on, showing finished ones. This is the seam the feature exists for.
+  const picked = await page
+    .getByTestId("run-link")
+    .evaluateAll((links) => links.slice(0, 2).map((a) => a.getAttribute("href")))
+  const ids = picked
+    .map((href) => (href || "").split("/").pop())
+    .filter(Boolean)
+  // The API is its own host here; the SPA's origin does not proxy /api.
+  const apiUrl = APP_URL.replace("//app.", "//api.")
+  const results = await page.evaluate(async (base) => {
+    const answer = await fetch(`${base}/api/v1/dashboards/`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("access_token")}` },
+    })
+    if (!answer.ok) return null
+    const body = await answer.json()
+    return (body.data || [])
+      .map((one) => one.name)
+      .find((n) => n.endsWith("_results"))
+  }, apiUrl)
+  if (results && ids.length) {
+    await page.goto(`${APP_URL}/view/${results}?runs=${ids.join(",")}`, {
+      waitUntil: "networkidle",
+    })
+    await page.waitForTimeout(2000)
+    await page.screenshot({ path: `${dir}/app-run-context.png` })
+  }
+
+  await page.goto(`${APP_URL}/runs`, { waitUntil: "networkidle" })
+  await page.getByTestId("run-link").first().click()
+  await page.waitForURL(/\/runs\/.+/, { timeout: 15000 })
+  await page.waitForLoadState("networkidle")
+  await page.waitForTimeout(1500)
+  await page.screenshot({ path: `${dir}/app-run.png`, fullPage: true })
+}
+
 /**
  * A dashboard as a wall panel sees it. Seeds one if the instance has none, so
  * the shot shows the grid rather than an empty-state message.