@olomonhelpdesk2/helpdesk 0.1.13 → 0.1.14

package/helpdesk-capture.mjs

@@ -106,7 +106,12 @@ function readExampleRoutes(raw) {
     }
     paths.set(route, path5);
   }
-  return { ok: true, examples: { paths, refused } };
+  const again = /* @__PURE__ */ new Set();
+  for (const route of Array.isArray(body["again"]) ? body["again"] : []) {
+    if (typeof route === "string" && paths.has(route)) again.add(route);
+    else refused.push({ route: String(route), because: "it is named as safe to open again, but not as a route with a record" });
+  }
+  return { ok: true, examples: { paths, refused, again } };
 }
 function resolveVisit(route, examples) {
   const needs = dynamicSegments(route);
@@ -1298,7 +1303,9 @@ async function phoneFit(page, width) {
         if (content > laid + 1) return { fits: false, because: `it runs ${Math.round(content - laid)}px off the side` };
         const main2 = document.querySelector("main, [role=main]");
         const column = main2 ? main2.getBoundingClientRect().width : laid;
-        return column >= laid * 0.75 ? { fits: true } : { fits: false, because: `its main column is ${Math.round(column)}px of ${laid}px, beside the rest of the layout` };
+        if (column < laid * 0.75) return { fits: false, because: `its main column is ${Math.round(column)}px of ${laid}px, beside the rest of the layout` };
+        const overflow = main2 ? main2.scrollWidth - main2.clientWidth : 0;
+        return overflow > 1 ? { fits: false, because: `its content runs ${Math.round(overflow)}px past its main column` } : { fits: true };
       },
       { width }
     )
@@ -1336,6 +1343,10 @@ import { createHash } from "node:crypto";
 var LAYOUT_MANIFEST_SCHEMA = "helpdesk.layout-manifest/1";
 var PHONE_SUFFIX = "--phone";
 var PHONE_VIEWPORT = { width: 390, height: 844 };
+var PHONE_VIEWPORTS = [PHONE_VIEWPORT, { width: 430, height: 932 }];
+function phoneViewport(width) {
+  return PHONE_VIEWPORTS.find((viewport) => viewport.width === width) ?? PHONE_VIEWPORT;
+}
 var CONTROL_ROLES = [
   "button",
   "link",
@@ -2584,7 +2595,7 @@ async function runCapture(options) {
   const evidence = [];
   const build = await options.browser.build?.().catch(() => void 0);
   for (const [index, shot] of options.shots.entries()) {
-    const taken = await captureOne(options, shot, build);
+    const taken = shot.variant === "phone" ? await captureAtPhoneWidths(options, shot, build) : await captureOne(options, shot, build);
     const outcome = shot.variant ? { ...taken.outcome, variant: shot.variant } : taken.outcome;
     outcomes.push(outcome);
     if (taken.observed && !shot.variant) survey.push(taken.observed);
@@ -2632,6 +2643,19 @@ async function layoutOf(page, shot, options, cover, size, landed) {
     return void 0;
   }
 }
+async function captureAtPhoneWidths(options, shot, build) {
+  const tried = [];
+  let taken;
+  for (const { width } of PHONE_VIEWPORTS) {
+    taken = await captureOne(options, { ...shot, phoneWidth: width }, build);
+    if (taken.unfit === void 0) return taken;
+    tried.push(`at ${width}px ${taken.unfit}`);
+  }
+  return {
+    ...taken,
+    outcome: { ...taken.outcome, reason: `not laid out for a phone (${tried.join("; ")}), so there is no phone-width frame` }
+  };
+}
 async function captureOne(options, shot, build) {
   if (shot.unvisitable) {
     return { outcome: { shotId: shot.id, route: shot.route, status: "skipped", reason: shot.unvisitable } };
@@ -2639,7 +2663,7 @@ async function captureOne(options, shot, build) {
   const visit = shot.visit ?? shot.route;
   let page;
   try {
-    page = await options.browser.page(shot.variant ? { variant: shot.variant } : void 0);
+    page = await options.browser.page(shot.variant ? { variant: shot.variant, ...shot.phoneWidth ? { width: shot.phoneWidth } : {} } : void 0);
     await page.goto(new URL(visit, options.baseUrl).toString());
     if (await page.isSignIn()) {
       return {
@@ -2700,9 +2724,10 @@ async function captureOne(options, shot, build) {
           route: shot.route,
           status: "skipped",
           result: observed.result,
-          reason: `not laid out for a phone at ${PHONE_VIEWPORT.width}px (${fit.because}), so there is no phone-width frame`
+          reason: `not laid out for a phone at ${phoneViewport(shot.phoneWidth).width}px (${fit.because}), so there is no phone-width frame`
         },
-        observed
+        observed,
+        unfit: fit.because
       };
     }
     const evidence = shot.variant ? void 0 : await readEvidence(settledPage, shot.route, options, build, visit);
@@ -2769,7 +2794,7 @@ async function captureOne(options, shot, build) {
     });
     const image = frame.value;
     const size = pngSize(image);
-    const minimum = shot.variant === "phone" ? PHONE_VIEWPORT.width * CAPTURE_CONTRACT.stillScale : CAPTURE_CONTRACT.minStillWidth;
+    const minimum = shot.variant === "phone" ? phoneViewport(shot.phoneWidth).width * CAPTURE_CONTRACT.stillScale : CAPTURE_CONTRACT.minStillWidth;
     if (size && size.width < minimum) {
       return {
         outcome: {
@@ -2988,8 +3013,9 @@ async function playwrightBrowser(options = {}) {
   };
   return {
     async page(wanted) {
+      const phone = phoneViewport(wanted?.width);
       const context = await browser.newContext(
-        wanted?.variant === "phone" ? { ...contextOptions, viewport: { ...PHONE_VIEWPORT }, isMobile: true, hasTouch: true } : wanted?.variant === "clip" ? { ...contextOptions, viewport: { ...CLIP_VIEWPORT }, deviceScaleFactor: CAPTURE_CONTRACT.clipScale } : contextOptions
+        wanted?.variant === "phone" ? { ...contextOptions, viewport: { ...phone }, isMobile: true, hasTouch: true } : wanted?.variant === "clip" ? { ...contextOptions, viewport: { ...CLIP_VIEWPORT }, deviceScaleFactor: CAPTURE_CONTRACT.clipScale } : contextOptions
       );
       if (!options.liveClock) {
         await context.addInitScript(freezeScript(CAPTURE_CONTRACT.pinnedClock));
@@ -3068,7 +3094,7 @@ async function playwrightBrowser(options = {}) {
           return readPageLayout(page, cover ?? []);
         },
         async phoneFit() {
-          return phoneFit(page, PHONE_VIEWPORT.width).catch(() => ({ fits: false, because: "the page could not be measured at that width" }));
+          return phoneFit(page, phone.width).catch(() => ({ fits: false, because: "the page could not be measured at that width" }));
         },
         async location() {
           const url = new URL(page.url());
@@ -4669,11 +4695,18 @@ function shotsFromRepo(repo, previous) {
     }))
   );
 }
-function withPhoneShots(shots, previous) {
+function withPhoneShots(shots, previous, again = /* @__PURE__ */ new Set()) {
   const planned = new Set(shots.map((shot) => shot.id));
-  const phones = shots.filter((shot) => !shot.visit && !shot.unvisitable && !shot.variant && !planned.has(`${shot.id}${PHONE_SUFFIX}`)).map((shot) => {
+  const phones = shots.filter((shot) => (!shot.visit || again.has(shot.route)) && !shot.unvisitable && !shot.variant && !planned.has(`${shot.id}${PHONE_SUFFIX}`)).map((shot) => {
     const id = `${shot.id}${PHONE_SUFFIX}`;
-    return { id, route: shot.route, depicts: `${shot.depicts}, at phone width`, variant: "phone", ...seenBefore(previous.get(id)) };
+    return {
+      id,
+      route: shot.route,
+      ...shot.visit ? { visit: shot.visit } : {},
+      depicts: `${shot.depicts}, at phone width`,
+      variant: "phone",
+      ...seenBefore(previous.get(id))
+    };
   });
   return [...shots, ...phones];
 }
@@ -4943,7 +4976,7 @@ Approve one on the plan page, then run this again.`
     }
   }
   const withRecords = seeded?.examples ? withExamples(shots, seeded.examples) : shots;
-  const planned = seededLast(parsed.phone ? withPhoneShots(withRecords, previous) : withRecords);
+  const planned = seededLast(parsed.phone ? withPhoneShots(withRecords, previous, seeded?.examples?.again) : withRecords);
   if (parsed.cassette) {
     try {
       stage = await stageAgainstRecording({
@@ -4993,7 +5026,7 @@ Approve one on the plan page, then run this again.`
     console.log(`${coverageReport(found, shots.length).join("\n")}
 `);
   }
-  const phones = parsed.phone ? `, each opened at its own address again at ${PHONE_VIEWPORT.width}px wide if it is laid out for a phone` : "";
+  const phones = parsed.phone ? `, each opened at its own address again at phone width (${PHONE_VIEWPORTS.map((viewport) => `${viewport.width}px`).join(", then ")}) if it is laid out for a phone` : "";
   console.log(
     stage ? `Photographing ${shots.length} screen(s) of ${baseUrl}${phones}, served from ${parsed.cassette}.
 ` : `Photographing ${shots.length} screen(s) of ${baseUrl}${phones}.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olomonhelpdesk2/helpdesk",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Reads a product's screens, plans its help articles, and photographs them.",
   "type": "module",
   "engines": {