docs(web): add Dream Progress screenshots + capture script

Wires up the DEV-only /dream-progress showcase to a Playwright script that captures idle/active/stalled variants for documentation. Also regenerates routeTree.gen.ts to include the new queue + showcase routes and folds in Biome formatter fixes. Run `node scripts/screenshot-dream-progress.mjs` from packages/web with the dev server up to refresh the images.
2026-05-24 18:29:37 +01:00
parent 93c117b16b
commit 5f61769adc
8 changed files with 155 additions and 37 deletions
--- a/packages/web/scripts/screenshot-dream-progress.mjs
+++ b/packages/web/scripts/screenshot-dream-progress.mjs
@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+/**
+ * Capture documentation screenshots for the Dream Progress panel.
+ *
+ * The dev server must already be running at the URL passed in via PREVIEW_URL
+ * (defaults to http://localhost:5178). The /dream-progress showcase route is
+ * DEV-only and renders three variants of the panel against mock data.
+ *
+ * Usage:
+ *   PREVIEW_URL=http://localhost:5178 OUT_DIR=../../docs/screenshots/live-dream-progress \
+ *     node scripts/screenshot-dream-progress.mjs
+ */
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PREVIEW_URL = process.env.PREVIEW_URL ?? "http://localhost:5178";
+const OUT_DIR = path.resolve(
+	__dirname,
+	process.env.OUT_DIR ?? "../../../docs/screenshots/live-dream-progress",
+);
+
+async function main() {
+	await mkdir(OUT_DIR, { recursive: true });
+	const browser = await chromium.launch();
+	const context = await browser.newContext({
+		viewport: { width: 1440, height: 900 },
+		deviceScaleFactor: 2,
+		colorScheme: "dark",
+	});
+	const page = await context.newPage();
+
+	// Seed localStorage with a fake instance so the root redirect doesn't kick
+	// us to the settings page. The showcase doesn't actually make any network
+	// requests — it renders against in-memory mock data.
+	await page.addInitScript(() => {
+		localStorage.setItem(
+			"openconcho:instances",
+			JSON.stringify({
+				instances: [
+					{
+						id: "inst_dev_demo",
+						name: "Demo (mock)",
+						baseUrl: "http://localhost:9999",
+						token: "",
+					},
+				],
+				activeId: "inst_dev_demo",
+			}),
+		);
+	});
+
+	await page.goto(`${PREVIEW_URL}/dream-progress`, { waitUntil: "networkidle" });
+	await page.waitForSelector('[data-testid="dream-progress-panel"]');
+	// Let framer-motion entrance animations settle.
+	await page.waitForTimeout(600);
+
+	// Full showcase — top-to-bottom view of all three variants.
+	await page.screenshot({
+		path: path.join(OUT_DIR, "overview.png"),
+		fullPage: true,
+	});
+
+	// Variant: idle
+	{
+		const handle = await page.locator("section").nth(0);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "idle.png") });
+	}
+
+	// Variant: active (with per-session breakdown)
+	{
+		const handle = await page.locator("section").nth(1);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "active.png") });
+	}
+
+	// Variant: stalled (>30m without forward progress)
+	{
+		const handle = await page.locator("section").nth(2);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "stalled.png") });
+	}
+
+	await browser.close();
+	console.log(`Saved screenshots to ${OUT_DIR}`);
+}
+
+main().catch((err) => {
+	console.error(err);
+	process.exit(1);
+});