Panel I/O: PanelDef.io ports, scoped publish and upload, I/O section in the Panels dialog

frontend/scripts/capture-screenshots.mjs

@@ -89,13 +89,14 @@ for (const theme of ["light", "dark"]) {
 
     await captureFlows(page, dir)
     await captureDashboards(page, dir)
+    await capturePanels(page, dir)
     await captureMedia(page, dir)
     await captureRuns(page, dir)
     await captureWorkers(page, dir)
 
     await context.close()
     console.log(
-      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel,app-runs,app-run,app-run-context,app-workers}.png`,
+      `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel,app-panels,app-runs,app-run,app-run-context,app-workers}.png`,
     )
   }
 }
@@ -202,6 +203,17 @@ async function captureDashboards(page, dir) {
   await page.screenshot({ path: `${dir}/app-panel.png` })
 }
 
+/** The panels dialog, scrolled to the first panel's I/O when there is one. */
+async function capturePanels(page, dir) {
+  await page.goto(`${APP_URL}/dashboards?panels=true`, {
+    waitUntil: "networkidle",
+  })
+  const io = page.locator("[data-testid^=add-port-]").first()
+  if (await io.count()) await io.scrollIntoViewIfNeeded()
+  await page.waitForTimeout(1000)
+  await page.screenshot({ path: `${dir}/app-panels.png` })
+}
+
 /**
  * A media tile drawing what a camera published, where there is one.
  *