Round dashboards: shape and ring, the ring drawn and turned in every look, Knob preset and face guide in the editor

frontend/scripts/capture-screenshots.mjs

@@ -91,12 +91,13 @@ for (const theme of ["light", "dark"]) {
     await captureDashboards(page, dir)
     await capturePanels(page, dir)
     await captureMedia(page, dir)
+    await captureRound(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-panels,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-round,app-runs,app-run,app-run-context,app-workers}.png`,
     )
   }
 }
@@ -123,20 +124,24 @@ async function captureRuns(page, dir) {
   await page.waitForTimeout(1500)
   await page.screenshot({ path: `${dir}/app-runs-compare.png`, fullPage: true })
 
-  // The API is its own host here; the SPA's origin does not proxy /api.
+  // The API is its own host here, unless the stack serves it under the SPA's
+  // own origin (a LAN stack), whose CSP then refuses the other host.
   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)
+  const results = await page.evaluate(async (bases) => {
+    for (const base of bases) {
+      const answer = await fetch(`${base}/api/v1/dashboards/`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+        },
+      }).catch(() => null)
+      if (!answer?.ok) continue
+      const body = await answer.json()
+      return (body.data || [])
+        .map((one) => one.name)
+        .find((n) => n.endsWith("_results"))
+    }
+    return null
+  }, [apiUrl, ""])
 
   // A dashboard read against two runs: the same page a live run is watched
   // on, showing finished ones. This is the seam the feature exists for — and
@@ -254,6 +259,25 @@ async function captureMedia(page, dir) {
   await page.screenshot({ path: `${dir}/app-media.png` })
 }
 
+/**
+ * A round dashboard, on the panel that carries it: the Demo's thermostat on
+ * `/panel/knob`, ring and all. Skipped where the Demo is not seeded.
+ */
+async function captureRound(page, dir) {
+  const answer = await page.goto(`${APP_URL}/panel/knob`, {
+    waitUntil: "networkidle",
+  })
+  if (!answer?.ok()) return
+  try {
+    await page.getByTestId("ring").waitFor({ timeout: 10000 })
+  } catch {
+    console.warn("  no round dashboard drew — is the Demo seeded?")
+    return
+  }
+  await page.waitForTimeout(1000)
+  await page.screenshot({ path: `${dir}/app-round.png` })
+}
+
 /**
  * The flow editor, empty-handed if the instance has no flows yet: seeds one
  * with a node so the canvas and the node panel are both worth looking at.