@olomonhelpdesk2/helpdesk 0.1.11 → 0.1.13

package/helpdesk-capture.mjs

@@ -4,8 +4,8 @@ var CI_EXAMPLES_OUT_ENV = "HELPDESK_EXAMPLES_OUT";
 var EXAMPLES_SCHEMA = "helpdesk.examples/1";
 var MAX_PATH = 2048;
 var MAX_ROUTES = 500;
-function segmentsOf(path3) {
-  return path3.split("/").filter((part) => part !== "");
+function segmentsOf(path5) {
+  return path5.split("/").filter((part) => part !== "");
 }
 function patternOf(route) {
   return segmentsOf(route).map((part) => {
@@ -21,9 +21,9 @@ function patternOf(route) {
 function dynamicSegments(route) {
   return patternOf(route).filter((segment) => segment.kind !== "static").map((segment) => segment.name);
 }
-function fillsPattern(pattern, path3) {
+function fillsPattern(pattern, path5) {
   const want = patternOf(pattern);
-  const have = segmentsOf(path3);
+  const have = segmentsOf(path5);
   const match = (w, h) => {
     if (w === want.length) return h === have.length;
     const segment = want[w];
@@ -37,27 +37,27 @@ function fillsPattern(pattern, path3) {
   };
   return match(0, 0);
 }
-function unusablePath(path3) {
-  if (path3.length > MAX_PATH) return "the path is longer than any screen's";
-  if (!path3.startsWith("/") || path3.startsWith("//")) return "the path is not a path inside the product";
-  if (/[?#\\]/.test(path3)) return "the path carries a query, a fragment or a backslash";
-  if (/\s/.test(path3) || [...path3].some((character) => character.charCodeAt(0) < 32)) {
+function unusablePath(path5) {
+  if (path5.length > MAX_PATH) return "the path is longer than any screen's";
+  if (!path5.startsWith("/") || path5.startsWith("//")) return "the path is not a path inside the product";
+  if (/[?#\\]/.test(path5)) return "the path carries a query, a fragment or a backslash";
+  if (/\s/.test(path5) || [...path5].some((character) => character.charCodeAt(0) < 32)) {
     return "the path carries whitespace or a control character";
   }
-  const segments = segmentsOf(path3);
+  const segments = segmentsOf(path5);
   if (segments.some((segment) => segment === "." || segment === ".." || /%2e%2e|%2f|%5c/i.test(segment))) {
     return "the path climbs out of its position";
   }
-  if (/\[|\]/.test(path3)) return "the path still holds a dynamic segment rather than a record";
+  if (/\[|\]/.test(path5)) return "the path still holds a dynamic segment rather than a record";
   return void 0;
 }
 var PLAIN_QUERY = /^[\w.~%:+,-]+=[\w.~%:+,-]*(?:&[\w.~%:+,-]+=[\w.~%:+,-]*)*$/;
 function queryFor(route, named) {
   const mark = named.indexOf("?");
-  const path3 = mark < 0 ? named : named.slice(0, mark);
+  const path5 = mark < 0 ? named : named.slice(0, mark);
   const query = mark < 0 ? "" : named.slice(mark + 1);
   if (!query) return { because: "it has no dynamic segment, so the only thing to name for it is the query it opens with" };
-  if (path3 !== route) return { because: `${named} is not ${route} with a query` };
+  if (path5 !== route) return { because: `${named} is not ${route} with a query` };
   const unusable = unusablePath(route);
   if (unusable) return { because: unusable };
   if (named.length > MAX_PATH || !PLAIN_QUERY.test(query)) return { because: "the query is not a plain list of names and values" };
@@ -94,25 +94,25 @@ function readExampleRoutes(raw) {
       else paths.set(route, opened.visit);
       continue;
     }
-    const path3 = value.trim();
-    const unusable = unusablePath(path3);
+    const path5 = value.trim();
+    const unusable = unusablePath(path5);
     if (unusable) {
       refused.push({ route, because: unusable });
       continue;
     }
-    if (!fillsPattern(route, path3)) {
-      refused.push({ route, because: `${path3} is not ${route} with its dynamic segments filled in` });
+    if (!fillsPattern(route, path5)) {
+      refused.push({ route, because: `${path5} is not ${route} with its dynamic segments filled in` });
       continue;
     }
-    paths.set(route, path3);
+    paths.set(route, path5);
   }
   return { ok: true, examples: { paths, refused } };
 }
 function resolveVisit(route, examples) {
   const needs = dynamicSegments(route);
-  const path3 = examples.paths.get(route);
-  if (needs.length === 0) return { visit: path3 ?? route };
-  return path3 ? { visit: path3 } : { needs };
+  const path5 = examples.paths.get(route);
+  if (needs.length === 0) return { visit: path5 ?? route };
+  return path5 ? { visit: path5 } : { needs };
 }
 function describeMissingExample(route, needs) {
   const named = needs.map((name) => `[${name}]`).join(" and ");
@@ -212,8 +212,8 @@ function actionFor(outcome) {
       return `${outcome.route} asked for ${outcome.missingEndpoint ?? "data"}, which is not in the recording. Visit this screen while recording, then run this again.`;
   }
 }
-function subjectOf(path3) {
-  const segments = path3.split("/").filter(Boolean).filter((segment) => !/^(api|v\d+)$/.test(segment));
+function subjectOf(path5) {
+  const segments = path5.split("/").filter(Boolean).filter((segment) => !/^(api|v\d+)$/.test(segment));
   while (segments.length > 1 && looksLikeAnId(segments[segments.length - 1])) segments.pop();
   const last = segments[segments.length - 1] ?? "record";
   return last.replace(/[-_]/g, " ").replace(/s$/, "");
@@ -324,11 +324,11 @@ function canonicalisation(asked, landed) {
 function samePlace(asked, landed) {
   return stripQuery(asked) === stripQuery(landed);
 }
-function stripQuery(path3) {
-  return path3.split(/[?#]/)[0] ?? path3;
+function stripQuery(path5) {
+  return path5.split(/[?#]/)[0] ?? path5;
 }
-function normalise(path3) {
-  return stripQuery(path3).toLowerCase().replace(/\/index(\.html?)?$/, "/").replace(/\/+$/, "").replace(/^$/, "/");
+function normalise(path5) {
+  return stripQuery(path5).toLowerCase().replace(/\/index(\.html?)?$/, "/").replace(/\/+$/, "").replace(/^$/, "/");
 }
 function firstSentence(text2) {
   const sentence = text2.trim().split(/(?<=[.!?])\s|\n/)[0] ?? text2;
@@ -422,7 +422,7 @@ function preflight(facts) {
     name: "posture",
     ok: true,
     blocking: false,
-    detail: "read-only: this navigates and photographs, and activates no control"
+    detail: facts.clips ? "read-only for the screenshots; after them, the clips the seed command named press the controls their steps name, in the tenant it built" : "read-only: this navigates and photographs, and activates no control"
   });
   if (facts.rebaselineReason) {
     checks.push({
@@ -440,19 +440,19 @@ function preflight(facts) {
   ];
   return { ok: !blocked.length, checks, lines };
 }
-function attestation(run) {
-  const took = run.unchanged ? `${run.captured} new frame(s) and ${run.unchanged} verified unchanged` : `${run.captured} frame(s)`;
+function attestation(run2) {
+  const took = run2.unchanged ? `${run2.captured} new frame(s) and ${run2.unchanged} verified unchanged` : `${run2.captured} frame(s)`;
   return [
-    `${took} from ${run.baseUrl}${run.browser ? ` with ${run.browser}` : ""}.`,
+    `${took} from ${run2.baseUrl}${run2.browser ? ` with ${run2.browser}` : ""}.`,
     "Every one was checked before the shutter and again on arrival: no frame in this set showed an email address,",
     "an account or card number, a national or tax id, a date of birth, a passport number or a named institution.",
-    run.refused ? `${run.refused} screen(s) were refused for showing something that looked real, and no picture of them exists.` : "Nothing was refused.",
+    run2.refused ? `${run2.refused} screen(s) were refused for showing something that looked real, and no picture of them exists.` : "Nothing was refused.",
     // Two different claims, and the second is much stronger. "Nothing that
     // looked real got through" is a gate doing its job on unknown data; "there
     // was no real data behind any of it" is a fact about where the data came
     // from, and it is the one a compliance reader actually wants.
-    run.replaying ? `Every screen was served from ${run.replaying}, so no customer data was reachable during this run at all.` : "",
-    run.clockPinned && run.replaying ? "The clock was pinned and the data was fixed, so re-running this reproduces the same bytes." : run.clockPinned ? "The clock was pinned. The backend was live, so any screen showing its data can still move between runs." : "The clock ran live, so these frames are not reproducible."
+    run2.replaying ? `Every screen was served from ${run2.replaying}, so no customer data was reachable during this run at all.` : "",
+    run2.clockPinned && run2.replaying ? "The clock was pinned and the data was fixed, so re-running this reproduces the same bytes." : run2.clockPinned ? "The clock was pinned. The backend was live, so any screen showing its data can still move between runs." : "The clock ran live, so these frames are not reproducible."
   ].filter(Boolean).join("\n");
 }
 
@@ -473,24 +473,24 @@ function runIdentityFromEnv(env) {
 }
 
 // core/capture/run-verdict.ts
-function runCounts(run) {
-  return `${run.captured} photographed, ${run.unchanged} unchanged, ${run.skipped} skipped, ${run.refused} refused, ${run.failed} failed`;
-}
-function runVerdict(run) {
-  const delivered = run.captured + run.unchanged;
-  const missed = run.skipped + run.refused + run.failed;
-  const counts = runCounts(run);
-  if (run.screens > 0 && delivered === 0) {
+function runCounts(run2) {
+  return `${run2.captured} photographed, ${run2.unchanged} unchanged, ${run2.skipped} skipped, ${run2.refused} refused, ${run2.failed} failed`;
+}
+function runVerdict(run2) {
+  const delivered = run2.captured + run2.unchanged;
+  const missed = run2.skipped + run2.refused + run2.failed;
+  const counts = runCounts(run2);
+  if (run2.screens > 0 && delivered === 0) {
     return {
       exit: 1,
-      annotation: `::error title=No screenshots were delivered::None of the ${run.screens} screens was photographed (${counts}). The step log says why for each one.`,
+      annotation: `::error title=No screenshots were delivered::None of the ${run2.screens} screens was photographed (${counts}). The step log says why for each one.`,
       sentence: `Nothing was delivered, so this run fails rather than passing with no screenshots: ${counts}.`
     };
   }
   if (missed > 0) {
     return {
-      exit: run.failed > 0 ? 1 : 0,
-      annotation: `::warning title=${missed} of ${run.screens} screens were not photographed::${counts}. The step log says why for each one.`
+      exit: run2.failed > 0 ? 1 : 0,
+      annotation: `::warning title=${missed} of ${run2.screens} screens were not photographed::${counts}. The step log says why for each one.`
     };
   }
   return { exit: 0 };
@@ -777,7 +777,9 @@ function looksLikeSignIn(fields) {
 import { deflateSync, inflateSync } from "node:zlib";
 var MediaRefused = class extends Error {
 };
+var VERIFICATION_SENTINEL = { r: 255, g: 0, b: 255 };
 var PUBLICATION_REDACTION = { r: 100, g: 116, b: 139 };
+var cssColour = (colour) => `#${[colour.r, colour.g, colour.b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
 function decodePng(buffer) {
   if (buffer.length < 8 || buffer.readUInt32BE(0) !== 2303741511) {
     throw new MediaRefused("that is not a PNG");
@@ -856,6 +858,24 @@ function coveredFraction(image) {
   return covered / total;
 }
 var MOSTLY_COVERED = 0.5;
+function readSentinel(image) {
+  let pixels = 0;
+  let at;
+  for (let y = 0; y < image.height; y += 1) {
+    for (let x = 0; x < image.width; x += 1) {
+      const index = (y * image.width + x) * 4;
+      if (image.pixels[index] === VERIFICATION_SENTINEL.r && image.pixels[index + 1] === VERIFICATION_SENTINEL.g && image.pixels[index + 2] === VERIFICATION_SENTINEL.b) {
+        pixels += 1;
+        at ??= { x, y };
+      }
+    }
+  }
+  return {
+    pixels,
+    ...at ? { at } : {},
+    because: pixels === 0 ? `no pixel in this image is ${cssColour(VERIFICATION_SENTINEL)}` : `${pixels} pixel(s) of this image are ${cssColour(VERIFICATION_SENTINEL)}, the first at (${at.x}, ${at.y})`
+  };
+}
 
 // browser/page-side.ts
 function inPage(fn, arg) {
@@ -1029,6 +1049,665 @@ async function readPaintedMarkup(page, regions) {
   );
 }
 
+// browser/layout.ts
+async function readPageLayout(page, cover = []) {
+  return page.evaluate(
+    inPage(
+      (spec) => {
+        const CONTROLS = [
+          "button",
+          "link",
+          "textbox",
+          "searchbox",
+          "checkbox",
+          "radio",
+          "combobox",
+          "listbox",
+          "switch",
+          "tab",
+          "menuitem",
+          "menuitemcheckbox",
+          "menuitemradio",
+          "option",
+          "slider",
+          "spinbutton"
+        ];
+        const LANDMARKS = ["banner", "navigation", "main", "complementary", "contentinfo", "search", "form", "region", "dialog", "alertdialog"];
+        const HEADINGS = "h1, h2, h3, h4, h5, h6, [role=heading]";
+        const clean = (text2) => (text2 ?? "").replace(/\s+/g, " ").trim();
+        const painted = (element) => {
+          const style = window.getComputedStyle(element);
+          if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || style.opacity === "0") return false;
+          for (const box of Array.from(element.getClientRects())) {
+            if (box.width > 0 && box.height > 0) return true;
+          }
+          return false;
+        };
+        const unseen = (element) => {
+          if (element.closest('[aria-hidden="true"], [inert]')) return true;
+          for (let node = element; node; node = node.parentElement) {
+            const style = window.getComputedStyle(node);
+            if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return true;
+          }
+          return !painted(element);
+        };
+        const covered = (element) => spec.cover.some((selector) => {
+          try {
+            return element.closest(selector) !== null;
+          } catch {
+            return false;
+          }
+        });
+        const textOfIds = (ids) => clean(
+          ids.split(/\s+/).map((id) => {
+            const target = document.getElementById(id);
+            return target ? target.innerText ?? target.textContent ?? "" : "";
+          }).join(" ")
+        );
+        const labelOf = (element) => {
+          const by = element.getAttribute("aria-labelledby");
+          const fromIds = by ? textOfIds(by) : "";
+          return fromIds || clean(element.getAttribute("aria-label")) || clean(element.getAttribute("title"));
+        };
+        const scoped = (element) => Boolean(element.parentElement?.closest("article, aside, main, nav, section"));
+        const roleOf = (element) => {
+          const explicit = clean(element.getAttribute("role")).split(" ")[0];
+          if (explicit) return explicit;
+          const tag = element.tagName.toLowerCase();
+          if (tag === "a") return element.hasAttribute("href") ? "link" : null;
+          if (tag === "button" || tag === "summary") return "button";
+          if (tag === "textarea") return "textbox";
+          if (tag === "select") return element.multiple || element.size > 1 ? "listbox" : "combobox";
+          if (tag === "input") {
+            const type = clean(element.getAttribute("type")).toLowerCase() || "text";
+            if (["button", "submit", "reset", "image"].includes(type)) return "button";
+            if (type === "checkbox") return "checkbox";
+            if (type === "radio") return "radio";
+            if (type === "range") return "slider";
+            if (type === "number") return "spinbutton";
+            if (type === "search") return "searchbox";
+            if (type === "hidden" || type === "file" || type === "color") return null;
+            return "textbox";
+          }
+          if (element.getAttribute("contenteditable") === "true" || element.getAttribute("contenteditable") === "") return "textbox";
+          if (tag === "nav") return "navigation";
+          if (tag === "main") return "main";
+          if (tag === "aside") return "complementary";
+          if (tag === "search") return "search";
+          if (tag === "header") return scoped(element) ? null : "banner";
+          if (tag === "footer") return scoped(element) ? null : "contentinfo";
+          if (tag === "form") return labelOf(element) ? "form" : null;
+          if (tag === "section") return labelOf(element) ? "region" : null;
+          if (tag === "dialog") return element.open ? "dialog" : null;
+          if (/^h[1-6]$/.test(tag)) return "heading";
+          return null;
+        };
+        const contentOf = (element) => {
+          const text2 = clean(element.innerText);
+          if (text2) return text2;
+          const alternatives = Array.from(element.querySelectorAll("img[alt], [aria-label], svg title")).map(
+            (node) => node.tagName.toLowerCase() === "img" ? node.getAttribute("alt") : node.tagName.toLowerCase() === "title" ? node.textContent : node.getAttribute("aria-label")
+          );
+          return clean(alternatives.filter(Boolean).join(" "));
+        };
+        const nameOf = (element) => {
+          const labelled = labelOf(element);
+          if (labelled && (element.getAttribute("aria-labelledby") || element.getAttribute("aria-label"))) return labelled;
+          const tag = element.tagName.toLowerCase();
+          if (tag === "input" || tag === "textarea" || tag === "select") {
+            const field = element;
+            const type = clean(field.getAttribute("type")).toLowerCase();
+            if (type === "submit" || type === "reset" || type === "button") return clean(field.value) || (type === "reset" ? "Reset" : type === "submit" ? "Submit" : "");
+            if (type === "image") return clean(field.getAttribute("alt")) || "Submit";
+            const labels = Array.from(field.labels ?? []).map((label) => clean(label.innerText));
+            return clean(labels.filter(Boolean).join(" ")) || clean(field.getAttribute("placeholder")) || clean(field.getAttribute("title"));
+          }
+          return contentOf(element) || clean(element.getAttribute("title"));
+        };
+        const stateOf = (element, role) => {
+          const state = {};
+          const aria = (name) => element.getAttribute(`aria-${name}`);
+          if (element.disabled === true || aria("disabled") === "true") state.disabled = true;
+          if (["checkbox", "radio", "switch", "menuitemcheckbox", "menuitemradio"].includes(role)) {
+            state.checked = element.tagName.toLowerCase() === "input" ? element.checked : aria("checked") === "true";
+          }
+          if (aria("pressed") !== null) state.pressed = aria("pressed") === "true";
+          if (aria("expanded") !== null) state.expanded = aria("expanded") === "true";
+          if (aria("selected") === "true") state.selected = true;
+          if (aria("current") !== null && aria("current") !== "false") state.current = true;
+          return state;
+        };
+        const boxOf = (element) => {
+          const rect = element.getBoundingClientRect();
+          return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+        };
+        const levelOf = (heading) => Number(heading.getAttribute("aria-level")) || Number(heading.tagName.slice(1)) || 2;
+        const sectionOf = (heading) => {
+          const level = levelOf(heading);
+          const rival = (node) => node !== heading && node.matches(HEADINGS) && levelOf(node) <= level && !unseen(node);
+          const holdsRival = (node) => rival(node) || Array.from(node.querySelectorAll(HEADINGS)).some(rival);
+          let top = heading;
+          let open = false;
+          for (let node = heading.parentElement; node && node !== document.body; node = node.parentElement) {
+            if (holdsRival(node)) {
+              open = true;
+              break;
+            }
+            top = node;
+            if (LANDMARKS.includes(roleOf(node) ?? "")) break;
+          }
+          if (covered(top)) return null;
+          const run2 = [top];
+          for (let next = open ? top.nextElementSibling : null; next && !holdsRival(next); next = next.nextElementSibling) {
+            if (!unseen(next) && !covered(next)) run2.push(next);
+          }
+          const boxes = run2.map(boxOf).filter((box) => box.width > 0 && box.height > 0);
+          if (!boxes.length) return null;
+          const x = Math.min(...boxes.map((box) => box.x));
+          const y = Math.min(...boxes.map((box) => box.y));
+          return { x, y, width: Math.max(...boxes.map((box) => box.x + box.width)) - x, height: Math.max(...boxes.map((box) => box.y + box.height)) - y };
+        };
+        const transparent = (colour) => colour === "transparent" || /rgba\([^)]*,\s*0\)$/.test(colour);
+        const backdropOf = (element) => {
+          for (let node = element; node; node = node.parentElement) {
+            const colour = window.getComputedStyle(node).backgroundColor;
+            if (!transparent(colour)) return colour;
+          }
+          return "rgb(255, 255, 255)";
+        };
+        const setApart = (element) => {
+          const style = window.getComputedStyle(element);
+          const bordered = ["Top", "Right", "Bottom", "Left"].filter(
+            (side) => parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) > 0 && !transparent(style.getPropertyValue(`border-${side.toLowerCase()}-color`))
+          ).length;
+          if (bordered >= 3 || style.boxShadow && style.boxShadow !== "none") return true;
+          return !transparent(style.backgroundColor) && style.backgroundColor !== backdropOf(element.parentElement);
+        };
+        const NOT_TITLE = "button, a, input, select, textarea, label, th, td, [role=button], [role=link], [role=tab], [role=columnheader], [role=rowheader], [role=cell], [role=gridcell]";
+        const boxedIn = (node, panel, frame) => {
+          for (let around = node; around && around !== panel; around = around.parentElement) {
+            if (!setApart(around)) continue;
+            const rect = around.getBoundingClientRect();
+            return !(rect.top - frame.y <= 2 && rect.width >= frame.width * 0.9);
+          }
+          return false;
+        };
+        const wordsOf = (node) => {
+          const size = window.getComputedStyle(node).fontSize;
+          const words = Array.from(node.childNodes).map((child) => {
+            if (child.nodeType === Node.TEXT_NODE) return child.textContent ?? "";
+            if (!(child instanceof Element) || child.matches(NOT_TITLE) || child.getAttribute("aria-hidden") === "true" || !painted(child)) return "";
+            const style = window.getComputedStyle(child);
+            return style.display.startsWith("inline") && style.fontSize === size ? wordsOf(child) : "";
+          });
+          return clean(words.join(""));
+        };
+        const titleOf = (panel, frame) => {
+          for (const node of Array.from(panel.querySelectorAll("*"))) {
+            if (node.closest(NOT_TITLE)) continue;
+            if (!Array.from(node.childNodes).some((child) => child.nodeType === Node.TEXT_NODE && clean(child.textContent))) continue;
+            if (node.getBoundingClientRect().top - frame.y > 64) break;
+            if (Number(window.getComputedStyle(node).fontWeight) < 600 || boxedIn(node, panel, frame)) continue;
+            const words = wordsOf(node);
+            if (new RegExp("\\p{L}", "u").test(words)) return words;
+          }
+          return "";
+        };
+        const regions = [];
+        const controls = [];
+        const viewportArea = window.innerWidth * window.innerHeight;
+        const PANELS = ["DIV", "SECTION", "ARTICLE", "ASIDE", "LI", "FORM", "FIELDSET", "DETAILS"];
+        for (const element of Array.from(document.body?.querySelectorAll("*") ?? [])) {
+          const role = roleOf(element);
+          if (!role) {
+            if (!PANELS.includes(element.tagName)) continue;
+            const box2 = boxOf(element);
+            if (box2.width < 160 || box2.height < 48 || box2.width * box2.height > viewportArea * 0.6) continue;
+            if (unseen(element) || covered(element) || !setApart(element)) continue;
+            const title = titleOf(element, box2);
+            if (title) regions.push({ kind: "section", role: "region", label: title, box: box2 });
+            continue;
+          }
+          if (unseen(element) || covered(element)) continue;
+          const box = boxOf(element);
+          if (box.width < 2 || box.height < 2) continue;
+          if (CONTROLS.includes(role)) {
+            const href = role === "link" ? element.href || element.getAttribute("href") : null;
+            controls.push({ role, name: nameOf(element), box, state: stateOf(element, role), ...href ? { href } : {} });
+          } else if (LANDMARKS.includes(role)) {
+            regions.push({ kind: role === "dialog" || role === "alertdialog" ? "dialog" : "landmark", role, label: labelOf(element), box });
+          } else if (role === "heading") {
+            const section = sectionOf(element);
+            if (section) regions.push({ kind: "section", role: "region", label: clean(element.innerText) || labelOf(element), box: section });
+          }
+        }
+        return { viewport: { width: window.innerWidth, height: window.innerHeight }, scale: window.devicePixelRatio, title: clean(document.title), regions, controls };
+      },
+      { cover: [...cover] }
+    )
+  );
+}
+async function phoneFit(page, width) {
+  return page.evaluate(
+    inPage(
+      (phone) => {
+        const root = document.documentElement;
+        const laid = root.clientWidth;
+        if (laid > phone.width + 1) return { fits: false, because: `it lays itself out ${laid}px wide, as a page with no viewport for a phone does` };
+        const content = Math.max(root.scrollWidth, document.body?.scrollWidth ?? 0);
+        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` };
+      },
+      { width }
+    )
+  );
+}
+
+// browser/clip-cursor.ts
+async function drawCursor(page, at, pressed = false) {
+  await page.evaluate(
+    inPage(
+      (spec) => {
+        const id = "helpdesk-clip-cursor";
+        let cursor = document.getElementById(id);
+        if (!cursor) {
+          cursor = document.createElement("div");
+          cursor.id = id;
+          cursor.setAttribute("aria-hidden", "true");
+          cursor.style.cssText = "position:fixed;left:0;top:0;width:28px;height:28px;pointer-events:none;z-index:2147483647;transition:none;animation:none;";
+          cursor.innerHTML = '<svg width="28" height="28" viewBox="0 0 28 28" style="overflow:visible" xmlns="http://www.w3.org/2000/svg"><circle data-press cx="0" cy="0" r="14" fill="rgba(37,99,235,0.3)" stroke="rgb(37,99,235)" stroke-width="2" style="display:none"/><path d="M0 0 L0 19 L5 14.5 L8.5 22.5 L11.6 21.1 L8.2 13.4 L14.8 13.4 Z" fill="rgb(17,24,39)" stroke="rgb(255,255,255)" stroke-width="1.6" stroke-linejoin="round"/></svg>';
+          document.documentElement.appendChild(cursor);
+        }
+        cursor.style.transform = `translate(${spec.x}px, ${spec.y}px)`;
+        const ring = cursor.querySelector("[data-press]");
+        if (ring) ring.style.display = spec.pressed ? "" : "none";
+      },
+      { x: at.x, y: at.y, pressed }
+    )
+  );
+}
+
+// core/capture/clips.ts
+import { createHash } from "node:crypto";
+
+// core/capture/layout-manifest.ts
+var LAYOUT_MANIFEST_SCHEMA = "helpdesk.layout-manifest/1";
+var PHONE_SUFFIX = "--phone";
+var PHONE_VIEWPORT = { width: 390, height: 844 };
+var CONTROL_ROLES = [
+  "button",
+  "link",
+  "textbox",
+  "searchbox",
+  "checkbox",
+  "radio",
+  "combobox",
+  "listbox",
+  "switch",
+  "tab",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "slider",
+  "spinbutton"
+];
+var REGION_ROLES = ["banner", "navigation", "main", "complementary", "contentinfo", "search", "form", "region", "dialog", "alertdialog"];
+var MAX_CONTROLS = 600;
+var MAX_REGIONS = 200;
+var MAX_TEXT = 200;
+var MAX_ID_SLUG = 48;
+function isRole(roles, value) {
+  return typeof value === "string" && roles.includes(value);
+}
+function slugOf(text2) {
+  return text2.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, MAX_ID_SLUG).replace(/-+$/g, "");
+}
+function identityOf(name) {
+  return slugOf(name.replace(/(?:\s+\d[\d\s/.,:%]*)+$/, "")) || slugOf(name);
+}
+function textOf(value) {
+  return typeof value === "string" ? value.replace(/\s+/g, " ").trim().slice(0, MAX_TEXT) : "";
+}
+function recordOf(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : {};
+}
+function readState(value) {
+  const given = recordOf(value);
+  const state = {};
+  if (given["disabled"] === true) state.disabled = true;
+  if (given["selected"] === true) state.selected = true;
+  if (given["current"] === true) state.current = true;
+  if (typeof given["checked"] === "boolean") state.checked = given["checked"];
+  if (typeof given["pressed"] === "boolean") state.pressed = given["pressed"];
+  if (typeof given["expanded"] === "boolean") state.expanded = given["expanded"];
+  return Object.keys(state).length ? state : void 0;
+}
+function placed(box, viewport, scale) {
+  if (![box.x, box.y, box.width, box.height].every(Number.isFinite)) return null;
+  const snap = (value) => Math.round(value * scale) / scale;
+  const left = Math.max(0, box.x);
+  const top = Math.max(0, box.y);
+  const right = Math.min(viewport.width, box.x + box.width);
+  const bottom = Math.min(viewport.height, box.y + box.height);
+  if (right - left < 1 || bottom - top < 1) return null;
+  const x = snap(left);
+  const y = snap(top);
+  return {
+    box: { x, y, width: snap(right) - x, height: snap(bottom) - y },
+    clipped: left !== box.x || top !== box.y || right !== box.x + box.width || bottom !== box.y + box.height
+  };
+}
+function contains(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+function sameBox(left, right) {
+  return left.x === right.x && left.y === right.y && left.width === right.width && left.height === right.height;
+}
+function identify(items, base) {
+  const taken = /* @__PURE__ */ new Set();
+  return items.map((item) => {
+    const root = base(item);
+    let id = root;
+    for (let ordinal = 2; taken.has(id); ordinal += 1) id = `${root}-${ordinal}`;
+    taken.add(id);
+    return id;
+  });
+}
+function smallestAround(regions, box, except) {
+  let best;
+  for (const region of regions) {
+    if (region.id === except || !contains(region.box, box)) continue;
+    const size = region.box.width * region.box.height;
+    if (!best || size < best.size) best = { id: region.id, size };
+  }
+  return best?.id;
+}
+function ownPath(href, origin) {
+  if (typeof href !== "string" || !href) return void 0;
+  try {
+    const base = origin ?? "http://localhost";
+    const url = new URL(href, base);
+    if (url.origin !== new URL(base).origin) return void 0;
+    return `${url.pathname}${url.search}`.slice(0, 2048);
+  } catch {
+    return void 0;
+  }
+}
+function buildLayoutManifest(layout, frame) {
+  const { viewport, scale } = layout;
+  const regions = [];
+  for (const raw of layout.regions.slice(0, MAX_REGIONS)) {
+    if (!isRole(REGION_ROLES, raw.role)) continue;
+    const where = placed(raw.box, viewport, scale);
+    if (!where) continue;
+    if (raw.kind === "section" && regions.some((region) => sameBox(region.box, where.box))) continue;
+    regions.push({ kind: raw.kind, role: raw.role, label: textOf(raw.label), box: where.box, clipped: where.clipped });
+  }
+  const controls = [];
+  for (const raw of layout.controls.slice(0, MAX_CONTROLS)) {
+    if (!isRole(CONTROL_ROLES, raw.role)) continue;
+    const where = placed(raw.box, viewport, scale);
+    if (!where) continue;
+    const href = raw.role === "link" ? ownPath(raw.href, frame.origin) : void 0;
+    const state = readState(raw.state);
+    controls.push({ role: raw.role, name: textOf(raw.name), box: where.box, clipped: where.clipped, ...state ? { state } : {}, ...href ? { href } : {} });
+  }
+  return {
+    schema: LAYOUT_MANIFEST_SCHEMA,
+    screen: {
+      shotId: frame.shotId,
+      route: frame.route,
+      path: frame.path,
+      title: textOf(layout.title),
+      variant: frame.variant,
+      viewport: { width: viewport.width, height: viewport.height },
+      scale,
+      image: { width: frame.image.width, height: frame.image.height }
+    },
+    ...assemble(regions, controls)
+  };
+}
+function assemble(regions, controls) {
+  const regionIds = identify(regions, (region) => region.label ? `${region.role}:${identityOf(region.label) || "unnamed"}` : region.role);
+  const located = regions.map((region, index) => ({ id: regionIds[index], box: region.box }));
+  const controlIds = identify(controls, (control) => `${control.role}:${identityOf(control.name) || "unnamed"}`);
+  return {
+    regions: regions.map((region, index) => {
+      const id = regionIds[index];
+      const parent = smallestAround(located, region.box, id);
+      return {
+        id,
+        kind: region.kind,
+        role: region.role,
+        label: region.label,
+        box: region.box,
+        ...parent ? { parent } : {},
+        ...region.clipped ? { clipped: true } : {}
+      };
+    }),
+    controls: controls.map((control, index) => {
+      const centre = { x: control.box.x + control.box.width / 2, y: control.box.y + control.box.height / 2, width: 0, height: 0 };
+      const region = smallestAround(located, centre);
+      return {
+        id: controlIds[index],
+        role: control.role,
+        name: control.name,
+        box: control.box,
+        ...region ? { region } : {},
+        ...control.state ? { state: control.state } : {},
+        ...control.href ? { href: control.href } : {},
+        ...control.clipped ? { clipped: true } : {}
+      };
+    })
+  };
+}
+function layoutManifestText(manifest) {
+  return [manifest.screen.title, ...manifest.regions.map((region) => region.label), ...manifest.controls.map((control) => control.name)].filter(Boolean).join("\n");
+}
+
+// core/capture/clips.ts
+var CLIP_VIEWPORT = { width: 1280, height: 800 };
+var CLIP_FPS = 10;
+var CLIP_MAX_MS = 3e4;
+var CLIP_MAX_STEPS = 12;
+var CLIP_MAX_MP4_BYTES = 3 * 1024 * 1024;
+var CLIP_MAX_GIF_BYTES = 8 * 1024 * 1024;
+var CLIP_GIF_WIDTH = 960;
+var CLIP_ACTIONS = ["click", "fill", "select", "check"];
+var MAX_SCRIPTS = 50;
+var MAX_TEXT2 = 200;
+var MAX_TITLE = 120;
+var MAX_ID = 80;
+function cleanText(value) {
+  return typeof value === "string" ? value.replace(/\s+/g, " ").trim() : "";
+}
+function recordOf2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) ? value : {};
+}
+function isPathLike(value) {
+  return value.startsWith("/") && !value.startsWith("//") && !value.includes("..") && !value.includes("#") && value.length <= 2048;
+}
+function readStep(value, at) {
+  const step = recordOf2(value);
+  const route = cleanText(step["route"]);
+  const control = recordOf2(step["control"]);
+  const role = control["role"];
+  const name = cleanText(control["name"]);
+  const action = step["action"];
+  const says = cleanText(step["says"]);
+  const given = step["value"];
+  if (!route || !isPathLike(route)) return `step ${at} names no screen`;
+  if (typeof role !== "string" || !CONTROL_ROLES.includes(role)) return `step ${at} names no control role a screen lists`;
+  if (!name || name.length > MAX_TEXT2) return `step ${at} names no control`;
+  if (typeof action !== "string" || !CLIP_ACTIONS.includes(action)) return `step ${at} says neither click, fill, select nor check`;
+  if (!says || says.length > MAX_TEXT2) return `step ${at} has no sentence for a reader`;
+  const typed = action === "fill" || action === "select";
+  if (typed && (typeof given !== "string" || !given.trim() || given.length > MAX_TEXT2)) return `step ${at} has nothing to ${action}`;
+  if (!typed && given !== void 0) return `step ${at} gives a value to ${action}, which takes none`;
+  return { route, control: { role, name }, action, ...typed ? { value: given } : {}, says };
+}
+function readClipScripts(raw) {
+  const scripts = [];
+  const refused = [];
+  if (raw === void 0) return { scripts, refused };
+  if (!Array.isArray(raw)) return { scripts, refused: [{ id: "clips", because: "clips is not a list" }] };
+  for (const value of raw.slice(0, MAX_SCRIPTS)) {
+    const script = recordOf2(value);
+    const id = typeof script["id"] === "string" ? script["id"] : "";
+    const label = id || "a clip";
+    const refuse = (because) => refused.push({ id: label, because });
+    const title = cleanText(script["title"]);
+    const visit = cleanText(script["visit"]);
+    const lands = script["lands"] === void 0 ? void 0 : cleanText(script["lands"]);
+    if (!/^[a-z0-9-]+$/.test(id) || id.length > MAX_ID) {
+      refuse("its id is not lower-case letters, digits and hyphens");
+      continue;
+    }
+    if (scripts.some((kept) => kept.id === id)) {
+      refuse("another clip has the same id");
+      continue;
+    }
+    if (!title || title.length > MAX_TITLE) {
+      refuse("it has no title");
+      continue;
+    }
+    const rawSteps = Array.isArray(script["steps"]) ? script["steps"] : [];
+    if (!rawSteps.length || rawSteps.length > CLIP_MAX_STEPS) {
+      refuse(`it has ${rawSteps.length} steps, and a clip has between 1 and ${CLIP_MAX_STEPS}`);
+      continue;
+    }
+    const steps = [];
+    let problem = "";
+    for (const [index, rawStep] of rawSteps.entries()) {
+      const step = readStep(rawStep, index + 1);
+      if (typeof step === "string") {
+        problem = step;
+        break;
+      }
+      steps.push(step);
+    }
+    if (problem) {
+      refuse(problem);
+      continue;
+    }
+    const first = steps[0];
+    if (!isPathLike(visit) || !fillsPattern(first.route, visit.split("?")[0])) {
+      refuse(`it opens at ${visit || "nowhere"}, which is not ${first.route}`);
+      continue;
+    }
+    if (lands !== void 0 && !isPathLike(lands)) {
+      refuse("it names no screen to land on");
+      continue;
+    }
+    scripts.push({ id, title, visit, steps, ...lands ? { lands } : {} });
+  }
+  return { scripts, refused };
+}
+function resolveStep(manifest, step) {
+  const name = cleanText(step.control.name).toLowerCase();
+  const where = manifest.screen.path;
+  const matches = manifest.controls.filter((control) => control.role === step.control.role && control.name.toLowerCase() === name);
+  if (matches.length === 0) return { ok: false, because: `no ${step.control.role} "${step.control.name}" on ${where}` };
+  if (matches.length > 1) return { ok: false, because: `${matches.length} of ${step.control.role} "${step.control.name}" on ${where}, so the step does not say which` };
+  if (matches[0].state?.disabled) return { ok: false, because: `${step.control.role} "${step.control.name}" on ${where} is disabled` };
+  return { ok: true, control: matches[0] };
+}
+function onScreen(route, location2) {
+  return fillsPattern(route, location2.split("?")[0].split("#")[0]);
+}
+function clipRoutes(script) {
+  return [.../* @__PURE__ */ new Set([...script.steps.map((step) => step.route), ...script.lands ? [script.lands] : []])];
+}
+function clipFingerprint(script, touched) {
+  const canonical = {
+    version: 1,
+    id: script.id,
+    title: script.title,
+    lands: script.lands ?? null,
+    steps: script.steps.map((step) => ({
+      route: step.route,
+      role: step.control.role,
+      name: step.control.name,
+      action: step.action,
+      value: step.value ?? null,
+      says: step.says
+    })),
+    touched: [...touched].map((screen) => [screen.route, screen.shotId, screen.sha256]).sort((left, right) => String(left[0]).localeCompare(String(right[0])))
+  };
+  return createHash("sha256").update(JSON.stringify(canonical)).digest("hex");
+}
+function centreOf(box) {
+  return { x: Math.round(box.x + box.width / 2), y: Math.round(box.y + box.height / 2) };
+}
+function cursorPath(from, to, frames) {
+  return Array.from({ length: Math.max(1, frames) }, (_, index) => {
+    const t = (index + 1) / Math.max(1, frames);
+    const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
+    return { x: Math.round(from.x + (to.x - from.x) * eased), y: Math.round(from.y + (to.y - from.y) * eased) };
+  });
+}
+function framesLength(frames) {
+  return frames.reduce((total, frame) => total + frame.ms, 0);
+}
+function concatList(frames) {
+  const quote = (file) => `'${file.replace(/'/g, "'\\''")}'`;
+  const lines = ["ffconcat version 1.0"];
+  for (const frame of frames) lines.push(`file ${quote(frame.file)}`, `duration ${(frame.ms / 1e3).toFixed(3)}`);
+  if (frames.length) lines.push(`file ${quote(frames[frames.length - 1].file)}`);
+  return `${lines.join("\n")}
+`;
+}
+function mp4Arguments(list, out, quality = 28) {
+  return [
+    "-y",
+    "-loglevel",
+    "error",
+    "-f",
+    "concat",
+    "-safe",
+    "0",
+    "-i",
+    list,
+    "-vf",
+    `fps=${CLIP_FPS},format=yuv420p`,
+    "-c:v",
+    "libx264",
+    "-preset",
+    "slow",
+    "-crf",
+    String(quality),
+    "-threads",
+    "1",
+    "-movflags",
+    "+faststart",
+    "-an",
+    out
+  ];
+}
+function gifArguments(list, out, options = {}) {
+  const width = options.width ?? CLIP_GIF_WIDTH;
+  const fps = options.fps ?? CLIP_FPS;
+  return [
+    "-y",
+    "-loglevel",
+    "error",
+    "-f",
+    "concat",
+    "-safe",
+    "0",
+    "-i",
+    list,
+    "-vf",
+    `fps=${fps},scale=${width}:-1:flags=lanczos,split[a][b];[a]palettegen=stats_mode=diff[p];[b][p]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle`,
+    "-threads",
+    "1",
+    out
+  ];
+}
+
 // core/coverage/normalize.ts
 var CURRENCY = /[$£€¥₹]\s?[\d.,]+(?:\s?[A-Z]{3})?/g;
 var DIGITS = /\d+(?:[.,]\d+)*/g;
@@ -1531,14 +2210,14 @@ function linkTarget(href, context) {
   }
   if (url.protocol !== "http:" && url.protocol !== "https:") return void 0;
   if (url.origin !== context.origin) return `${url.origin}${url.pathname}`;
-  const path3 = url.pathname;
-  const screen = context.patterns.find((pattern) => fillsPattern(pattern, path3));
+  const path5 = url.pathname;
+  const screen = context.patterns.find((pattern) => fillsPattern(pattern, path5));
   if (screen) return screen;
-  return path3.split("/").map((segment) => RECORD_ID.test(segment) ? "[id]" : segment).join("/");
+  return path5.split("/").map((segment) => RECORD_ID.test(segment) ? "[id]" : segment).join("/");
 }
 
 // core/capture/determinism.ts
-import { createHash } from "node:crypto";
+import { createHash as createHash2 } from "node:crypto";
 function freezeScript(pinnedClock, options = {}) {
   const fixed = Date.parse(pinnedClock);
   if (Number.isNaN(fixed)) {
@@ -1587,7 +2266,7 @@ function freezeScript(pinnedClock, options = {}) {
 })();`;
 }
 function frameHash(bytes) {
-  return createHash("sha256").update(bytes).digest("hex");
+  return createHash2("sha256").update(bytes).digest("hex");
 }
 async function settle(options) {
   const wait = options.wait ?? ((ms) => new Promise((resolve) => setTimeout(resolve, ms)));
@@ -1905,13 +2584,18 @@ async function runCapture(options) {
   const evidence = [];
   const build = await options.browser.build?.().catch(() => void 0);
   for (const [index, shot] of options.shots.entries()) {
-    const { outcome, observed, seen } = await captureOne(options, shot, build);
+    const taken = await captureOne(options, shot, build);
+    const outcome = shot.variant ? { ...taken.outcome, variant: shot.variant } : taken.outcome;
     outcomes.push(outcome);
-    if (observed) survey.push(observed);
-    if (seen) evidence.push(seen);
+    if (taken.observed && !shot.variant) survey.push(taken.observed);
+    if (taken.seen && !shot.variant) evidence.push(taken.seen);
     options.onProgress?.(outcome, index + 1, options.shots.length);
   }
-  const count = (status) => outcomes.filter((outcome) => outcome.status === status).length;
+  const tally = (variant) => {
+    const of = outcomes.filter((outcome) => Boolean(outcome.variant) === variant);
+    const count = (status) => of.filter((outcome) => outcome.status === status).length;
+    return { captured: count("captured"), unchanged: count("unchanged"), skipped: count("skipped"), refused: count("refused"), failed: count("failed") };
+  };
   const readings = {};
   for (const outcome of outcomes) {
     if (outcome.facts && (outcome.status === "captured" || outcome.status === "unchanged")) readings[outcome.route] = outcome.facts;
@@ -1923,13 +2607,31 @@ async function runCapture(options) {
     survey,
     readings,
     ...build ? { browser: build } : {},
-    captured: count("captured"),
-    unchanged: count("unchanged"),
-    skipped: count("skipped"),
-    refused: count("refused"),
-    failed: count("failed")
+    ...tally(false),
+    ...outcomes.some((outcome) => outcome.variant) ? { phone: tally(true) } : {}
   };
 }
+async function layoutOf(page, shot, options, cover, size, landed) {
+  if (!page.layout || !size) return void 0;
+  try {
+    const manifest = buildLayoutManifest(await page.layout(cover), {
+      shotId: shot.id,
+      route: shot.route,
+      path: landed,
+      variant: shot.variant ?? "desktop",
+      image: size,
+      origin: new URL(options.baseUrl).origin
+    });
+    const verdict = gateFrame(layoutManifestText(manifest), {
+      route: shot.route,
+      ...options.brands ? { brands: options.brands } : {},
+      ...options.clearance?.expectedBrands?.length ? { expected: options.clearance.expectedBrands } : {}
+    });
+    return verdict.safe ? manifest : void 0;
+  } catch {
+    return void 0;
+  }
+}
 async function captureOne(options, shot, build) {
   if (shot.unvisitable) {
     return { outcome: { shotId: shot.id, route: shot.route, status: "skipped", reason: shot.unvisitable } };
@@ -1937,7 +2639,7 @@ async function captureOne(options, shot, build) {
   const visit = shot.visit ?? shot.route;
   let page;
   try {
-    page = await options.browser.page();
+    page = await options.browser.page(shot.variant ? { variant: shot.variant } : void 0);
     await page.goto(new URL(visit, options.baseUrl).toString());
     if (await page.isSignIn()) {
       return {
@@ -1990,7 +2692,20 @@ async function captureOne(options, shot, build) {
         observed
       };
     }
-    const evidence = await readEvidence(settledPage, shot.route, options, build, visit);
+    const fit = shot.variant === "phone" ? await page.phoneFit?.() : void 0;
+    if (fit && !fit.fits) {
+      return {
+        outcome: {
+          shotId: shot.id,
+          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`
+        },
+        observed
+      };
+    }
+    const evidence = shot.variant ? void 0 : await readEvidence(settledPage, shot.route, options, build, visit);
     const reading = options.clearance ? await readScreen(settledPage, options.clearance) : void 0;
     if (options.clearance && !reading) {
       return {
@@ -2042,7 +2757,7 @@ async function captureOne(options, shot, build) {
         };
       }
     }
-    const facts = await readDetails(settledPage, shot, options);
+    const facts = shot.variant ? void 0 : await readDetails(settledPage, shot, options);
     const approved = new Set(options.clearance?.approved ?? []);
     const cover = (reading?.surfaces ?? []).filter((surface) => !surface.read && !approved.has(surface.where)).map((surface) => surface.where);
     const frame = await settle({
@@ -2054,14 +2769,15 @@ async function captureOne(options, shot, build) {
     });
     const image = frame.value;
     const size = pngSize(image);
-    if (size && size.width < CAPTURE_CONTRACT.minStillWidth) {
+    const minimum = shot.variant === "phone" ? PHONE_VIEWPORT.width * CAPTURE_CONTRACT.stillScale : CAPTURE_CONTRACT.minStillWidth;
+    if (size && size.width < minimum) {
       return {
         outcome: {
           shotId: shot.id,
           route: shot.route,
           status: "failed",
           result: observed.result,
-          reason: `that frame came back ${size.width}px wide; the contract needs at least ${CAPTURE_CONTRACT.minStillWidth}px`
+          reason: `that frame came back ${size.width}px wide; the contract needs at least ${minimum}px`
         },
         observed,
         // The picture is unusable; the reading of the screen is not.
@@ -2082,8 +2798,9 @@ async function captureOne(options, shot, build) {
         ...evidence ? { seen: evidence } : {}
       };
     }
+    const layout = await layoutOf(settledPage, shot, options, cover, size, seen.landedOn ?? visit);
     const sha256 = frameHash(image);
-    if (!options.force && shot.sha256 && shot.sha256 === sha256) {
+    if (!options.force && shot.sha256 && shot.sha256 === sha256 && (shot.layout !== false || !layout)) {
       return {
         outcome: {
           shotId: shot.id,
@@ -2126,7 +2843,8 @@ async function captureOne(options, shot, build) {
         }
       } : {},
       ...build ? { browser: build } : {},
-      ...size ?? {}
+      ...size ?? {},
+      ...layout ? { layout } : {}
     });
     return {
       outcome: sent.ok ? {
@@ -2196,40 +2914,48 @@ async function readEvidence(page, route, options, build, visited = route) {
     channels: { html: Boolean(html), aria: Boolean(aria) }
   };
 }
+var BROWSER_ARGS = [
+  "--no-sandbox",
+  "--disable-dev-shm-usage",
+  /**
+   * Software rendering, deliberately, and it is slower.
+   *
+   * Anything drawn through the GPU — canvas, WebGL, most charting
+   * libraries, some CSS filters — rasterises differently on different
+   * drivers and driver versions. Two machines then produce different bytes
+   * for identical input, so a run on a laptop and a run in CI disagree
+   * about a screen that never changed. That failure is invisible until the
+   * day somebody runs it somewhere new, which is the worst time to find it.
+   */
+  "--disable-gpu",
+  "--disable-software-rasterizer",
+  /**
+   * Font rasterisation, pinned as far as a flag can pin it. Subpixel
+   * antialiasing is tuned per display and hinting varies by platform;
+   * both change every pixel of every glyph without changing a word.
+   */
+  "--font-render-hinting=none",
+  "--disable-lcd-text",
+  /**
+   * Glyphs on whole pixels. With sub-pixel positioning on, a line of text can
+   * come out at one of two sub-pixel phases from one page load to the next,
+   * with the same font and the same layout, so an unchanged screen gets a
+   * new picture on some runs and not others.
+   */
+  "--disable-font-subpixel-positioning",
+  "--force-color-profile=srgb",
+  // A scrollbar is an overlay on some platforms and consumes layout width
+  // on others, so leaving it visible makes the page a different width
+  // depending on who took the picture.
+  "--hide-scrollbars"
+];
 async function playwrightBrowser(options = {}) {
   const { chromium } = await loadPlaywright();
   const executablePath = process.env["CAPTURE_CHROME"] ?? void 0;
   const browser = await chromium.launch({
     headless: options.headless ?? true,
     ...executablePath ? { executablePath } : {},
-    args: [
-      "--no-sandbox",
-      "--disable-dev-shm-usage",
-      /**
-       * Software rendering, deliberately, and it is slower.
-       *
-       * Anything drawn through the GPU — canvas, WebGL, most charting
-       * libraries, some CSS filters — rasterises differently on different
-       * drivers and driver versions. Two machines then produce different bytes
-       * for identical input, so a run on a laptop and a run in CI disagree
-       * about a screen that never changed. That failure is invisible until the
-       * day somebody runs it somewhere new, which is the worst time to find it.
-       */
-      "--disable-gpu",
-      "--disable-software-rasterizer",
-      /**
-       * Font rasterisation, pinned as far as a flag can pin it. Subpixel
-       * antialiasing is tuned per display and hinting varies by platform;
-       * both change every pixel of every glyph without changing a word.
-       */
-      "--font-render-hinting=none",
-      "--disable-lcd-text",
-      "--force-color-profile=srgb",
-      // A scrollbar is an overlay on some platforms and consumes layout width
-      // on others, so leaving it visible makes the page a different width
-      // depending on who took the picture.
-      "--hide-scrollbars"
-    ]
+    args: [...BROWSER_ARGS]
   });
   const contextOptions = {
     viewport: CAPTURE_CONTRACT.viewport,
@@ -2261,8 +2987,10 @@ async function playwrightBrowser(options = {}) {
     ...options.sessionPath ? { storageState: options.sessionPath } : { storageState: void 0 }
   };
   return {
-    async page() {
-      const context = await browser.newContext(contextOptions);
+    async page(wanted) {
+      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
+      );
       if (!options.liveClock) {
         await context.addInitScript(freezeScript(CAPTURE_CONTRACT.pinnedClock));
       }
@@ -2336,6 +3064,36 @@ async function playwrightBrowser(options = {}) {
         async painted(regions) {
           return readPaintedMarkup(page, regions).catch(() => "");
         },
+        async layout(cover) {
+          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" }));
+        },
+        async location() {
+          const url = new URL(page.url());
+          return `${url.pathname}${url.search}`;
+        },
+        async pointer(action) {
+          if (action.kind === "select") {
+            const handle = await page.evaluateHandle(({ x, y }) => document.elementFromPoint(x, y), action.at);
+            const element = handle.asElement();
+            if (!element) throw new Error(`nothing is under (${action.at.x}, ${action.at.y}) to choose in`);
+            await element.selectOption({ label: action.value ?? "" });
+            return;
+          }
+          await page.mouse.click(action.at.x, action.at.y);
+          if (action.kind === "focus") await page.keyboard.press("ControlOrMeta+A");
+        },
+        async type(text2) {
+          await page.keyboard.type(text2);
+        },
+        async cursor(at, pressed) {
+          await drawCursor(page, at, pressed ?? false).catch(() => void 0);
+        },
+        async quiet(timeoutMs) {
+          await page.waitForLoadState("networkidle", { timeout: timeoutMs }).catch(() => void 0);
+        },
         async screenshot(cover) {
           const masks = (cover ?? []).map((selector) => page.locator(selector));
           return page.screenshot({
@@ -2561,6 +3319,320 @@ async function loadPlaywright() {
   );
 }
 
+// adapters/capture-clips.ts
+import { spawn } from "node:child_process";
+import { createHash as createHash3 } from "node:crypto";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import path2 from "node:path";
+var FRAME_MS = 1e3 / CLIP_FPS;
+var OPENING_MS = 700;
+var MOVE_FRAMES = 6;
+var DWELL_MS = 500;
+var PRESS_MS = 200;
+var CHARS_PER_FRAME = 2;
+var SETTLE_MS = 3e3;
+var STEP_WAIT_MS = 4e3;
+var CLOSING_MS = 1200;
+var START = { x: Math.round(CLIP_VIEWPORT.width / 2), y: Math.round(CLIP_VIEWPORT.height * 0.66) };
+function chunksOf(text2, size) {
+  return Array.from({ length: Math.ceil(text2.length / size) }, (_, index) => text2.slice(index * size, (index + 1) * size));
+}
+async function recordClip(options, script, touched) {
+  const dir = path2.join(options.workDir, script.id);
+  const frames = [];
+  const checked = /* @__PURE__ */ new Set();
+  const fail = (because) => ({ ok: false, status: "failed", because });
+  const refuse = (because) => ({ ok: false, status: "refused", because });
+  const page = await options.browser.page({ variant: "clip" }).catch(() => void 0);
+  if (!page) return fail("the browser would not open a page to record in");
+  try {
+    await rm(dir, { recursive: true, force: true });
+    await mkdir(dir, { recursive: true });
+    if (!page.layout || !page.location || !page.pointer || !page.type || !page.cursor) {
+      return fail("this capture runner cannot record clips: it cannot measure a page, act on it or draw a cursor");
+    }
+    const { layout, location: location2, pointer, type, cursor } = { layout: page.layout.bind(page), location: page.location.bind(page), pointer: page.pointer.bind(page), type: page.type.bind(page), cursor: page.cursor.bind(page) };
+    let cover = [];
+    let at = 0;
+    let last = new Uint8Array();
+    const judge = async (where) => {
+      const route = where.split("?")[0];
+      const verdict = gateFrame(await page.text(), {
+        route,
+        ...options.brands ? { brands: options.brands } : {},
+        ...options.clearance?.expectedBrands?.length ? { expected: options.clearance.expectedBrands } : {}
+      });
+      if (!verdict.safe) return verdict.reason ?? `the gate refused ${route}`;
+      if (!options.clearance) return null;
+      const clearance = options.clearance;
+      const reading = await readScreen(page, clearance);
+      if (!reading) return "this browser cannot read a screen against a clearance";
+      if (reading.inventory.unaccounted.length) return `${reading.inventory.unaccounted.length} value(s) on ${route} are outside every region the clearance names`;
+      const approved = new Set(clearance.approved);
+      const loose = reading.surfaces.filter((surface) => !surface.read && !clearance.covers.includes(surface.where) && !approved.has(surface.where));
+      if (loose.length && !clearance.coverUnnamed) return `${loose.length} surface(s) on ${route} are neither approved nor covered`;
+      cover = reading.surfaces.filter((surface) => !surface.read && !approved.has(surface.where)).map((surface) => surface.where);
+      return null;
+    };
+    const keep = async (bytes, ms) => {
+      const file = path2.join(dir, `frame-${String(frames.length + 1).padStart(4, "0")}.png`);
+      await writeFile(file, bytes);
+      frames.push({ file, ms });
+      last = bytes;
+      at += ms;
+      return file;
+    };
+    const shoot = async (ms) => keep(await page.screenshot(cover), ms);
+    const hold = (ms) => {
+      frames[frames.length - 1].ms += ms;
+      at += ms;
+    };
+    const film = async () => {
+      const next = await page.screenshot(cover);
+      if (sameBytes(next, last)) {
+        hold(FRAME_MS);
+        return false;
+      }
+      await keep(next, FRAME_MS);
+      return true;
+    };
+    await page.goto(new URL(script.visit, options.baseUrl).toString());
+    if (await page.isSignIn()) return refuse("its first screen asked for a sign-in, so this session is not the demo tenant's");
+    const opened = await location2();
+    if (!onScreen(script.steps[0].route, opened)) return fail(`it opened on ${opened}, not ${script.steps[0].route}`);
+    const before = await judge(opened);
+    if (before) return refuse(before);
+    let resting = START;
+    let poster;
+    const steps = [];
+    const arrive = async (route) => {
+      let where = await location2();
+      for (let waited = 0; !onScreen(route, where) && waited < STEP_WAIT_MS; waited += FRAME_MS) {
+        await cursor(resting);
+        await film();
+        where = await location2();
+      }
+      if (!onScreen(route, where)) return where;
+      await page.quiet?.(SETTLE_MS);
+      await cursor(resting);
+      for (let waited = 0; waited < SETTLE_MS; waited += FRAME_MS) {
+        if (!await film()) break;
+      }
+      return where;
+    };
+    await cursor(resting);
+    checked.add(await shoot(OPENING_MS));
+    for (const [index, step] of script.steps.entries()) {
+      const where = await arrive(step.route);
+      if (!onScreen(step.route, where)) return fail(`step ${index + 1}: the browser is on ${where}, not ${step.route}`);
+      const arrived = await judge(where);
+      if (arrived) return refuse(arrived);
+      const measure = async () => resolveStep(
+        buildLayoutManifest(await layout(cover), {
+          shotId: script.id,
+          route: step.route,
+          path: where.split("?")[0],
+          variant: "desktop",
+          image: { ...CLIP_VIEWPORT },
+          origin: new URL(options.baseUrl).origin
+        }),
+        step
+      );
+      let resolution = await measure();
+      for (let waited = 0; !resolution.ok && waited < STEP_WAIT_MS; waited += FRAME_MS) {
+        await cursor(resting);
+        await film();
+        resolution = await measure();
+      }
+      if (!resolution.ok) return fail(`step ${index + 1}: ${resolution.because}`);
+      const target = centreOf(resolution.control.box);
+      const startedAt = at;
+      for (const point of cursorPath(resting, target, MOVE_FRAMES)) {
+        await cursor(point);
+        await shoot(FRAME_MS);
+      }
+      resting = target;
+      hold(DWELL_MS);
+      poster ??= frames[frames.length - 1].file;
+      await cursor(target, true);
+      await shoot(PRESS_MS);
+      if (step.action === "fill") {
+        await pointer({ kind: "focus", at: target });
+        await cursor(target, false);
+        for (const chunk of chunksOf(step.value ?? "", CHARS_PER_FRAME)) {
+          await type(chunk);
+          await shoot(FRAME_MS);
+        }
+      } else if (step.action === "select") {
+        await pointer({ kind: "select", at: target, value: step.value ?? "" });
+      } else {
+        await pointer({ kind: "click", at: target });
+      }
+      await cursor(target, false);
+      await page.quiet?.(SETTLE_MS);
+      await cursor(target, false);
+      await shoot(FRAME_MS);
+      for (let waited = 0; waited < SETTLE_MS; waited += FRAME_MS) {
+        if (!await film()) break;
+      }
+      checked.add(frames[frames.length - 1].file);
+      const now = await location2();
+      const after = await judge(now);
+      if (after) return refuse(after);
+      steps.push({
+        route: step.route,
+        role: step.control.role,
+        name: resolution.control.name,
+        action: step.action,
+        says: step.says,
+        atMs: startedAt,
+        box: resolution.control.box
+      });
+    }
+    if (script.lands) {
+      const landed = await arrive(script.lands);
+      if (!onScreen(script.lands, landed)) return fail(`the last step left the browser on ${landed}, not ${script.lands}`);
+      const seen = await judge(landed);
+      if (seen) return refuse(seen);
+    }
+    hold(CLOSING_MS);
+    checked.add(frames[frames.length - 1].file);
+    const durationMs = framesLength(frames);
+    if (durationMs > CLIP_MAX_MS) return fail(`it runs ${(durationMs / 1e3).toFixed(1)} s, over ${CLIP_MAX_MS / 1e3} s, so the steps want splitting`);
+    for (const file of checked) {
+      const pixels = readSentinel(decodePng(await readFile(file))).pixels;
+      if (pixels > 0) return refuse(`a frame of it shows the verification colour (${pixels} pixel(s)), which is never published`);
+    }
+    const encoded = await options.encoder.encode(frames, dir);
+    const mp4 = new Uint8Array(encoded.mp4);
+    return {
+      ok: true,
+      clip: {
+        recording: {
+          clipId: script.id,
+          title: script.title,
+          route: script.steps[0].route,
+          durationMs,
+          width: CLIP_VIEWPORT.width,
+          height: CLIP_VIEWPORT.height,
+          fingerprint: clipFingerprint(script, touched),
+          steps,
+          touched: [...touched],
+          browser: options.build ?? ""
+        },
+        mp4,
+        gif: encoded.gif ? new Uint8Array(encoded.gif) : null,
+        poster: new Uint8Array(await readFile(poster ?? frames[0].file)),
+        sha256: createHash3("sha256").update(mp4).digest("hex")
+      }
+    };
+  } catch (error) {
+    return fail(error instanceof Error ? error.message : String(error));
+  } finally {
+    await page.close().catch(() => void 0);
+    await rm(dir, { recursive: true, force: true }).catch(() => void 0);
+  }
+}
+var CLIP_BUDGET_MS = 10 * 6e4;
+async function runClips(options) {
+  const started = Date.now();
+  const outcomes = [];
+  let spent;
+  for (const [index, script] of options.scripts.entries()) {
+    const touched = clipRoutes(script).map((route) => ({
+      route,
+      shotId: options.frames.get(route)?.shotId ?? "",
+      sha256: options.frames.get(route)?.sha256 ?? null
+    }));
+    const fingerprint = clipFingerprint(script, touched);
+    const base = { clipId: script.id, title: script.title, fingerprint };
+    let outcome;
+    if (spent) {
+      outcome = { ...base, status: "deferred", reason: spent };
+    } else if (Date.now() - started > (options.budgetMs ?? CLIP_BUDGET_MS)) {
+      outcome = { ...base, status: "deferred", reason: "the run's time for clips ran out, so it waits for the next run" };
+    } else if (!options.force && options.held.get(script.id) === fingerprint) {
+      outcome = { ...base, status: "unchanged", reason: "neither its steps nor a screen they touch has changed" };
+    } else {
+      const result = await recordClip(options, script, touched);
+      if (!result.ok) {
+        outcome = { ...base, status: result.status, reason: result.because };
+      } else {
+        const delivered = await options.send(result.clip);
+        if (delivered.ok) {
+          outcome = {
+            ...base,
+            status: "recorded",
+            durationMs: result.clip.recording.durationMs,
+            mp4Bytes: result.clip.mp4.length,
+            gifBytes: result.clip.gif?.length ?? null
+          };
+        } else if (delivered.limit) {
+          spent = delivered.error;
+          outcome = { ...base, status: "deferred", reason: delivered.error };
+        } else {
+          outcome = { ...base, status: "failed", reason: delivered.error };
+        }
+      }
+    }
+    outcomes.push(outcome);
+    options.onProgress?.(outcome, index + 1, options.scripts.length);
+  }
+  return outcomes;
+}
+function run(binary, args) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(binary, args, { stdio: ["ignore", "ignore", "pipe"] });
+    let stderr = "";
+    child.stderr.on("data", (chunk) => {
+      stderr = `${stderr}${chunk.toString()}`.slice(-2e3);
+    });
+    child.on(
+      "error",
+      (error) => reject(new Error(error.code === "ENOENT" ? `${binary} is not installed, and clips need it to encode` : error.message))
+    );
+    child.on("close", (code) => code === 0 ? resolve() : reject(new Error(`${binary} stopped with ${code}: ${stderr.trim() || "no output"}`)));
+  });
+}
+async function ffmpegAvailable(binary = ffmpegBinary()) {
+  return run(binary, ["-hide_banner", "-loglevel", "error", "-version"]).then(
+    () => true,
+    () => false
+  );
+}
+function ffmpegBinary() {
+  return process.env["CAPTURE_FFMPEG"]?.trim() || "ffmpeg";
+}
+function ffmpegEncoder(binary = ffmpegBinary()) {
+  return {
+    async encode(frames, dir) {
+      const list = path2.join(dir, "frames.txt");
+      const mp4Path = path2.join(dir, "clip.mp4");
+      const gifPath = path2.join(dir, "clip.gif");
+      await writeFile(list, concatList(frames), "utf8");
+      await run(binary, mp4Arguments(list, mp4Path));
+      let mp4 = await readFile(mp4Path);
+      if (mp4.length > CLIP_MAX_MP4_BYTES) {
+        await run(binary, mp4Arguments(list, mp4Path, 34));
+        mp4 = await readFile(mp4Path);
+      }
+      if (mp4.length > CLIP_MAX_MP4_BYTES) {
+        throw new Error(`its MP4 is ${(mp4.length / 1024 / 1024).toFixed(1)} MB even at a lower quality, over the ${CLIP_MAX_MP4_BYTES / 1024 / 1024} MB limit`);
+      }
+      await run(binary, gifArguments(list, gifPath));
+      let gif = await readFile(gifPath);
+      if (gif.length > CLIP_MAX_GIF_BYTES) {
+        await run(binary, gifArguments(list, gifPath, { width: 800, fps: 6 }));
+        gif = await readFile(gifPath);
+      }
+      return { mp4, gif: gif.length > CLIP_MAX_GIF_BYTES ? null : gif };
+    }
+  };
+}
+
+// adapters/capture-bin.ts
+import { tmpdir as tmpdir2 } from "node:os";
+
 // adapters/invoked-as-command.ts
 import { realpathSync } from "node:fs";
 import { pathToFileURL as pathToFileURL2 } from "node:url";
@@ -2575,7 +3647,7 @@ function runningAsCommand(moduleUrl) {
 }
 
 // adapters/capture-stage.ts
-import { spawn } from "node:child_process";
+import { spawn as spawn2 } from "node:child_process";
 
 // adapters/seed-proxy.ts
 import { createServer, request as httpRequest } from "node:http";
@@ -2601,7 +3673,7 @@ function looksLikeIdentifier(segment) {
   return /\d/.test(segment) && segment.length >= 3;
 }
 function templatise(paths) {
-  const split = paths.map((path3) => path3.split("/").filter(Boolean));
+  const split = paths.map((path5) => path5.split("/").filter(Boolean));
   const depth2 = Math.max(0, ...split.map((segments) => segments.length));
   const parameters = /* @__PURE__ */ new Set();
   const prefixOf = (segments, upTo) => {
@@ -2704,9 +3776,9 @@ var CassetteIndex = class {
     return void 0;
   }
 };
-function matchesTemplate(template, path3) {
+function matchesTemplate(template, path5) {
   const wanted = template.split("/").filter(Boolean);
-  const actual = path3.split("/").filter(Boolean);
+  const actual = path5.split("/").filter(Boolean);
   if (wanted.length !== actual.length) return false;
   return wanted.every((segment, index) => segment.startsWith(":") || segment === actual[index]);
 }
@@ -2737,10 +3809,10 @@ function shut(server) {
   });
 }
 function splitUrl(url) {
-  const [path3, search] = url.split("?");
+  const [path5, search] = url.split("?");
   const query = {};
   for (const [name, value] of new URLSearchParams(search ?? "")) query[name] = value;
-  return { path: path3 ?? "/", query };
+  return { path: path5 ?? "/", query };
 }
 async function replayFrom(options) {
   const index = new CassetteIndex(options.cassette);
@@ -2748,14 +3820,14 @@ async function replayFrom(options) {
   const served = /* @__PURE__ */ new Set();
   const server = createServer((incoming, outgoing) => {
     void (async () => {
-      const { path: path3, query } = splitUrl(incoming.url ?? "/");
+      const { path: path5, query } = splitUrl(incoming.url ?? "/");
       await bodyOf(incoming);
-      const found = index.find({ method: incoming.method ?? "GET", path: path3, query });
+      const found = index.find({ method: incoming.method ?? "GET", path: path5, query });
       if (!found) {
         const from = incoming.headers["referer"] ?? incoming.headers["x-seed-page"];
         const miss = {
           method: incoming.method ?? "GET",
-          path: path3,
+          path: path5,
           ...Object.keys(query).length ? { query } : {},
           ...typeof from === "string" ? { from: pageOf(from) } : {}
         };
@@ -2795,12 +3867,84 @@ function pageOf(referer) {
   }
 }
 
+// adapters/capture-clock.ts
+import { mkdtemp, rm as rm2, writeFile as writeFile2 } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path3 from "node:path";
+var PINNED_CLOCK_ENV = "HELPDESK_PINNED_CLOCK";
+function clockPreload(setting) {
+  const at = Date.parse(setting.at);
+  if (Number.isNaN(at)) throw new Error(`clockPreload needs a parsable instant, got ${JSON.stringify(setting.at)}`);
+  const from = setting.from === void 0 ? "null" : String(Math.trunc(setting.from));
+  const pin = `(() => {
+  const AT = ${at};
+  const FROM = ${from};
+  const RealDate = globalThis.Date;
+  if (RealDate.helpdeskPinned) return;
+  const now = FROM === null ? () => AT : () => AT + (RealDate.now() - FROM);
+  globalThis.Date = new Proxy(RealDate, {
+    construct: (target, args, newTarget) => Reflect.construct(target, args.length ? args : [now()], newTarget),
+    apply: () => new RealDate(now()).toString(),
+    get: (target, key, receiver) => (key === "now" ? now : key === "helpdeskPinned" ? true : Reflect.get(target, key, receiver)),
+  });
+})();`;
+  return `"use strict";
+${pin}
+(() => {
+  const vm = require("node:vm");
+  const createContext = vm.createContext;
+  vm.createContext = function (...args) {
+    const context = createContext.apply(this, args);
+    try {
+      vm.runInContext(${JSON.stringify(pin)}, context);
+    } catch {}
+    return context;
+  };
+})();
+`;
+}
+function withPreload(nodeOptions, file) {
+  return [nodeOptions?.trim(), `--require ${JSON.stringify(file)}`].filter(Boolean).join(" ");
+}
+async function writeClockPreload(setting) {
+  const dir = await mkdtemp(path3.join(tmpdir(), "helpdesk-clock-"));
+  const file = path3.join(dir, "clock.cjs");
+  await writeFile2(file, clockPreload(setting), "utf8");
+  return { file, remove: () => rm2(dir, { recursive: true, force: true }) };
+}
+function pinnedEnv(at, file, nodeOptions) {
+  return { [PINNED_CLOCK_ENV]: at, NODE_OPTIONS: withPreload(nodeOptions, file) };
+}
+
 // core/ci-api.ts
+var CI_TOKEN_NAME = "HELPDESK_TOKEN";
 var CI_SESSION_OUT_ENV = "HELPDESK_SESSION_OUT";
 var CI_BASE_URL_ENV = "HELPDESK_BASE_URL";
+var CI_WORKFLOW_PATH = ".github/workflows/helpdesk.yml";
+var CAPTURE_WORKFLOW_PATH = ".github/workflows/helpdesk-screenshots.yml";
+function workflowNames(slug) {
+  const tag = (slug ?? "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  if (!tag) {
+    return {
+      secret: CI_TOKEN_NAME,
+      change: { name: "Help desk", path: CI_WORKFLOW_PATH },
+      capture: { name: "Help desk screenshots", path: CAPTURE_WORKFLOW_PATH }
+    };
+  }
+  return {
+    secret: `${CI_TOKEN_NAME}_${tag.toUpperCase().replace(/-/g, "_")}`,
+    change: { name: `Help desk (${tag})`, path: `.github/workflows/helpdesk-${tag}-watch.yml` },
+    capture: { name: `Help desk screenshots (${tag})`, path: `.github/workflows/helpdesk-${tag}-screenshots.yml` }
+  };
+}
 
 // adapters/capture-stage.ts
 var DEFAULT_APP_ENV = "API_BASE_URL";
+async function productClock(pinnedClock) {
+  if (!pinnedClock) return { env: {} };
+  const written = await writeClockPreload({ at: pinnedClock });
+  return { env: pinnedEnv(pinnedClock, written.file, process.env["NODE_OPTIONS"]), written };
+}
 async function waitForApp(url, deadline, onLog, gaveUp) {
   let announced = false;
   while (Date.now() < deadline) {
@@ -2827,9 +3971,10 @@ async function stageAgainstRecording(options) {
   const variable = options.appEnv ?? DEFAULT_APP_ENV;
   let app;
   let died;
+  const clock = options.appCommand ? await productClock(options.pinnedClock) : { env: {} };
   if (options.appCommand) {
-    options.onLog?.(`Starting your product with ${variable}=${replay.url}`);
-    app = spawn(options.appCommand, {
+    options.onLog?.(`Starting your product with ${variable}=${replay.url}${clockNote(options.pinnedClock)}`);
+    app = spawn2(options.appCommand, {
       shell: true,
       // Its own process group, so it can be taken down as one.
       //
@@ -2839,7 +3984,7 @@ async function stageAgainstRecording(options) {
       // the address occupied by the last one — and on a build agent, the job
       // never finishes.
       detached: true,
-      env: { ...process.env, [variable]: replay.url },
+      env: { ...process.env, [variable]: replay.url, ...clock.env },
       stdio: ["ignore", "pipe", "pipe"]
     });
     app.stdout?.on("data", (chunk) => options.onLog?.(`  [app] ${chunk.toString().trimEnd()}`));
@@ -2856,6 +4001,7 @@ async function stageAgainstRecording(options) {
   if (died !== void 0) {
     await replay.close();
     stop(app);
+    await clock.written?.remove();
     throw new Error(
       `The start command exited (${died}) before the product was ready. Its output is above.` + (up ? `
 
@@ -2865,6 +4011,7 @@ Something else is already answering on ${options.appUrl}. That is almost always
   if (!up) {
     await replay.close();
     stop(app);
+    await clock.written?.remove();
     throw new Error(
       `${options.appUrl} never answered. ` + (options.appCommand ? "Check the start command above, and that your product listens on that address." : `Start your product with ${variable}=${replay.url}, then run this again.`)
     );
@@ -2877,9 +4024,13 @@ Something else is already answering on ${options.appUrl}. That is almost always
     close: async () => {
       stop(app);
       await replay.close();
+      await clock.written?.remove();
     }
   };
 }
+function clockNote(pinnedClock) {
+  return pinnedClock ? `, its clock pinned to ${pinnedClock}` : "";
+}
 var SESSION_OUT_ENV = CI_SESSION_OUT_ENV;
 var EXAMPLES_OUT_ENV = CI_EXAMPLES_OUT_ENV;
 async function stageSeeded(options) {
@@ -2894,7 +4045,8 @@ async function stageSeeded(options) {
     {
       [CI_SESSION_OUT_ENV]: options.sessionOut,
       [CI_BASE_URL_ENV]: options.appUrl,
-      ...options.examplesOut ? { [CI_EXAMPLES_OUT_ENV]: options.examplesOut } : {}
+      ...options.examplesOut ? { [CI_EXAMPLES_OUT_ENV]: options.examplesOut } : {},
+      ...options.pinnedClock ? { [PINNED_CLOCK_ENV]: options.pinnedClock } : {}
     },
     onLog
   );
@@ -2913,15 +4065,18 @@ Nothing has been photographed. A run that carried on from here would sign in to
   onLog?.(
     sessionPath ? `The seed command left a session at ${sessionPath}, so the screens behind your login can be photographed.` : `The seed command wrote no session to ${SESSION_OUT_ENV}. Only the screens a signed-out visitor can reach will be photographed.`
   );
-  const examples = options.examplesOut ? await examplesFrom(options.examplesOut, onLog) : void 0;
+  const named = options.examplesOut ? await examplesFrom(options.examplesOut, onLog) : void 0;
+  const examples = named?.examples;
+  const clips = named?.clips ?? [];
   let app;
   let died;
+  const clock = options.appCommand ? await productClock(options.pinnedClock) : { env: {} };
   if (options.appCommand) {
-    onLog?.(`Starting your product with ${options.appCommand}`);
-    app = spawn(options.appCommand, {
+    onLog?.(`Starting your product with ${options.appCommand}${clockNote(options.pinnedClock)}`);
+    app = spawn2(options.appCommand, {
       shell: true,
       detached: true,
-      env: { ...process.env },
+      env: { ...process.env, ...clock.env },
       stdio: ["ignore", "pipe", "pipe"]
     });
     app.stdout?.on("data", (chunk) => onLog?.(`  [app] ${chunk.toString().trimEnd()}`));
@@ -2935,6 +4090,7 @@ Nothing has been photographed. A run that carried on from here would sign in to
   if (died === void 0 && app?.exitCode !== null && app?.exitCode !== void 0) died = app.exitCode;
   if (died !== void 0) {
     stop(app);
+    await clock.written?.remove();
     throw new Error(
       `The start command exited (${died}) before the product was ready. Its output is above.` + (up ? `
 
@@ -2943,6 +4099,7 @@ Something else is already answering on ${options.appUrl}, which is almost always
   }
   if (!up) {
     stop(app);
+    await clock.written?.remove();
     throw new Error(
       `${options.appUrl} never answered. Check the start command above, and that your product listens on that address.`
     );
@@ -2951,16 +4108,18 @@ Something else is already answering on ${options.appUrl}, which is almost always
     appUrl: options.appUrl,
     ...sessionPath ? { sessionPath } : {},
     ...examples ? { examples } : {},
+    ...clips.length ? { clips } : {},
     close: async () => {
       stop(app);
+      await clock.written?.remove();
     }
   };
 }
-async function examplesFrom(path3, onLog) {
-  const { readFile: readFile2 } = await import("node:fs/promises");
+async function examplesFrom(path5, onLog) {
+  const { readFile: readFile3 } = await import("node:fs/promises");
   let text2;
   try {
-    text2 = await readFile2(path3, "utf8");
+    text2 = await readFile3(path5, "utf8");
   } catch {
     return void 0;
   }
@@ -2971,20 +4130,23 @@ async function examplesFrom(path3, onLog) {
     onLog?.(`The seed command wrote ${EXAMPLES_OUT_ENV}, but it is not JSON, so no screen with an id in its address will be opened.`);
     return void 0;
   }
+  const named = readClipScripts(parsed?.clips);
+  if (named.scripts.length) onLog?.(`The seed command named ${named.scripts.length} clip(s) to record.`);
+  for (const refused of named.refused) onLog?.(`  not recording ${refused.id}: ${refused.because}`);
   const reading = readExampleRoutes(parsed);
   if (!reading.ok) {
     onLog?.(`The seed command wrote ${EXAMPLES_OUT_ENV}, but ${reading.because}, so no screen with an id in its address will be opened.`);
-    return void 0;
+    return { clips: named.scripts };
   }
   onLog?.(
     `The seed command named a record for ${reading.examples.paths.size} screen(s) with an id in the address.`
   );
   for (const refused of reading.examples.refused) onLog?.(`  not using ${refused.route}: ${refused.because}`);
-  return reading.examples;
+  return { examples: reading.examples, clips: named.scripts };
 }
 async function runToCompletion(command, timeoutMs, env, onLog) {
   return new Promise((resolve) => {
-    const child = spawn(command, {
+    const child = spawn2(command, {
       shell: true,
       detached: true,
       env: { ...process.env, ...env },
@@ -3025,8 +4187,8 @@ function gapsFrom(misses, cassette) {
   const templates = templatise([...known, ...misses.map((miss) => miss.path)]);
   const grouped = /* @__PURE__ */ new Map();
   for (const miss of misses) {
-    const path3 = templates.get(miss.path) ?? miss.path;
-    const key = interactionKey({ method: miss.method, path: path3, ...miss.query ? { query: miss.query } : {} });
+    const path5 = templates.get(miss.path) ?? miss.path;
+    const key = interactionKey({ method: miss.method, path: path5, ...miss.query ? { query: miss.query } : {} });
     const existing = grouped.get(key);
     if (existing) {
       existing.asked += 1;
@@ -3035,7 +4197,7 @@ function gapsFrom(misses, cassette) {
     }
     grouped.set(key, {
       method: miss.method.toUpperCase(),
-      path: path3,
+      path: path5,
       asked: 1,
       broke: miss.from ? [miss.from] : [],
       example: miss.path
@@ -3104,8 +4266,8 @@ function coverageReport(found, total) {
 }
 
 // adapters/capture-bin.ts
-import { mkdir, readFile, writeFile } from "node:fs/promises";
-import path2 from "node:path";
+import { mkdir as mkdir2, readFile as readFile2, writeFile as writeFile3 } from "node:fs/promises";
+import path4 from "node:path";
 
 // adapters/map-cli.ts
 import { execFileSync } from "node:child_process";
@@ -3118,14 +4280,14 @@ var ROUTE_GROUP = /^\((.+)\)$/;
 var DYNAMIC = /^\[{1,2}(\.{3})?(.+?)\]{1,2}$/;
 var PARALLEL = /^@/;
 var INTERCEPTING = /^\(\.+\)/;
-function classify(path3) {
-  if (path3 === "/api" || path3.startsWith("/api/")) {
+function classify(path5) {
+  if (path5 === "/api" || path5.startsWith("/api/")) {
     return { skipped: "not-html", note: "an API route, not a screen" };
   }
-  if (/(^|\/)(admin|internal|debug|_dev)(\/|$)/.test(path3)) {
+  if (/(^|\/)(admin|internal|debug|_dev)(\/|$)/.test(path5)) {
     return { skipped: "internal-tooling", note: "internal tooling" };
   }
-  if (/(^|\/)(login|logout|signin|sign-in|signup|sign-up|auth|verify|reset-password)(\/|$)/.test(path3)) {
+  if (/(^|\/)(login|logout|signin|sign-in|signup|sign-up|auth|verify|reset-password)(\/|$)/.test(path5)) {
     return { skipped: "unauthenticated-flow", note: "an authentication step" };
   }
   return void 0;
@@ -3229,8 +4391,8 @@ function enclosingLayouts(pageFile, layouts) {
   const dir = pageFile.slice(0, pageFile.lastIndexOf("/"));
   return layouts.filter((layout) => dir.startsWith(layout.slice(0, layout.lastIndexOf("/")))).sort((a, b) => a.length - b.length);
 }
-function depth(path3) {
-  return path3 === "/" ? 0 : path3.split("/").filter(Boolean).length;
+function depth(path5) {
+  return path5 === "/" ? 0 : path5.split("/").filter(Boolean).length;
 }
 
 // core/discovery/article-plan.ts
@@ -3267,8 +4429,8 @@ var ENTRY_POINT = /* @__PURE__ */ new Set([
   "integration",
   "integrations"
 ]);
-function hasSegment(path3, vocabulary) {
-  return path3.split("/").filter(Boolean).some((segment) => vocabulary.has(segment.toLowerCase()));
+function hasSegment(path5, vocabulary) {
+  return path5.split("/").filter(Boolean).some((segment) => vocabulary.has(segment.toLowerCase()));
 }
 function score(route, signals) {
   const because = [];
@@ -3307,8 +4469,8 @@ function tierFor(rank, count) {
   if (rank <= Math.max(16, Math.ceil(count * 0.6))) return "supporting";
   return "minor";
 }
-function slugFor(path3) {
-  const segments = path3.split("/").filter(Boolean).filter((segment) => !segment.startsWith("["));
+function slugFor(path5) {
+  const segments = path5.split("/").filter(Boolean).filter((segment) => !segment.startsWith("["));
   return segments.length ? segments.join("/") : "overview";
 }
 function titleFor(route) {
@@ -3367,7 +4529,7 @@ function buildArticlePlan(options) {
   let covered = 0;
   const needs = [...merged.entries()].map(([slug, group], index) => {
     const rank = index + 1;
-    const claimed = [group.entry.route.path, ...group.routes.slice(1) ?? []].map((path3) => options.documented?.[path3]).find(Boolean);
+    const claimed = [group.entry.route.path, ...group.routes.slice(1) ?? []].map((path5) => options.documented?.[path5]).find(Boolean);
     const already = existing.has(slug) || Boolean(claimed);
     if (already) covered += 1;
     return {
@@ -3389,6 +4551,8 @@ function buildArticlePlan(options) {
 function repositoryFiles(cwd) {
   return execFileSync("git", ["ls-files"], { cwd, encoding: "utf8", maxBuffer: 64 * 1024 * 1024 }).split("\n").filter(Boolean);
 }
+var CAPTURE_WORKFLOW = workflowNames().capture;
+var CI_WORKFLOW = workflowNames().change;
 var WORKFLOW_ACTIONS = {
   checkout: "actions/checkout@v7",
   setupNode: "actions/setup-node@v7"
@@ -3408,8 +4572,8 @@ function shotIdFor(route) {
 function describe(route, isEntry) {
   const segments = route.path.split("/").filter(Boolean);
   const last = segments[segments.length - 1] ?? "";
-  const readable = route.title ?? (last.startsWith("[") ? `a single ${(segments[segments.length - 2] ?? "record").replace(/s$/, "")}` : last.replace(/[-_]/g, " ") || "the home screen");
-  return isEntry ? `The ${readable} screen as someone arrives on it` : `The ${readable} screen, reached from ${segments.slice(0, -1).join("/") || "the top level"}`;
+  const screen = route.title ? `The ${route.title} screen` : last.startsWith("[") ? `The screen for a single ${(segments[segments.length - 2] ?? "record").replace(/s$/, "")}` : last ? `The ${last.replace(/[-_]/g, " ")} screen` : "The home screen";
+  return isEntry ? `${screen} as someone arrives on it` : `${screen}, reached from ${segments.slice(0, -1).join("/") || "the top level"}`;
 }
 function kindFor(_route, _isEntry) {
   return "still";
@@ -3421,7 +4585,7 @@ function buildStoryboard(options) {
   const beneath = options.routes.filter(
     (route) => !covered.has(route.path) && !route.skipped && [...covered].some((base) => base !== "/" && route.path.startsWith(`${base}/`))
   );
-  const own = [...covered].map((path3) => byPath.get(path3)).filter((route) => Boolean(route) && !route.skipped);
+  const own = [...covered].map((path5) => byPath.get(path5)).filter((route) => Boolean(route) && !route.skipped);
   const ordered = options.inOrder ? own : own.sort((a, b) => a.path.length - b.path.length).concat(beneath.sort((a, b) => a.path.length - b.path.length));
   const limit = options.maxSteps ?? 5;
   const steps = ordered.slice(0, limit).map((route, index) => ({
@@ -3448,7 +4612,9 @@ function parseArgs(argv) {
     brands: [],
     only: [],
     liveClock: false,
-    allowProduction: false
+    allowProduction: false,
+    phone: true,
+    clips: false
   };
   for (let index = 0; index < argv.length; index += 1) {
     const flag = argv[index];
@@ -3469,6 +4635,8 @@ function parseArgs(argv) {
     else if (flag === "--repo" && value) args.repo = value, index += 1;
     else if (flag === "--live-clock") args.liveClock = true;
     else if (flag === "--allow-production") args.allowProduction = true;
+    else if (flag === "--no-phone") args.phone = false;
+    else if (flag === "--clips") args.clips = true;
     else if (flag === "--rebaseline" || flag === "--force") {
       return '--rebaseline needs a reason: `--rebaseline "new brand colors shipped"`. Replacing every stored frame moves every checksum at once, and a re-baseline nobody wrote down is indistinguishable from the product changing.';
     }
@@ -3483,17 +4651,37 @@ function parseArgs(argv) {
   if (!args.to) return "Missing --to. That is the address of your help desk, or use --out <dir>.";
   return args;
 }
+function seenBefore(frame) {
+  if (!frame) return {};
+  return { ...frame.sha256 ? { sha256: frame.sha256 } : {}, ...frame.layout !== void 0 ? { layout: frame.layout } : {} };
+}
 function shotsFromRepo(repo, previous) {
   const files = repositoryFiles(repo);
   const routes = readNextAppRouter(files, detectRouterRoot(files)).routes;
-  return buildArticlePlan({ routes }).needs.flatMap((need) => buildStoryboard({ need, routes }).steps).filter((step) => step.kind === "still").map((step) => ({
-    id: step.shotId,
-    route: step.route,
-    depicts: step.depicts,
-    // Carried so a second run can recognise a frame it already has, which is
-    // what makes "nothing changed" a sentence this can say offline too.
-    ...previous.has(step.shotId) ? { sha256: previous.get(step.shotId) } : {}
-  }));
+  return onePerScreen(
+    buildArticlePlan({ routes }).needs.flatMap((need) => buildStoryboard({ need, routes }).steps).filter((step) => step.kind === "still").map((step) => ({
+      id: step.shotId,
+      route: step.route,
+      depicts: step.depicts,
+      // Carried so a second run can recognise a frame it already has, which is
+      // what makes "nothing changed" a sentence this can say offline too.
+      ...seenBefore(previous.get(step.shotId))
+    }))
+  );
+}
+function withPhoneShots(shots, previous) {
+  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 id = `${shot.id}${PHONE_SUFFIX}`;
+    return { id, route: shot.route, depicts: `${shot.depicts}, at phone width`, variant: "phone", ...seenBefore(previous.get(id)) };
+  });
+  return [...shots, ...phones];
+}
+function heldPhoneFrames(shots) {
+  return new Map(shots.flatMap((shot) => shot.phone ? [[`${shot.id}${PHONE_SUFFIX}`, { sha256: shot.phone.sha256, layout: shot.phone.layout }]] : []));
+}
+function onePerScreen(shots) {
+  return [...new Map(shots.map((shot) => [shot.id, shot])).values()];
 }
 function withExamples(shots, examples) {
   return shots.map((shot) => {
@@ -3502,10 +4690,178 @@ function withExamples(shots, examples) {
     return resolved.visit === shot.route ? shot : { ...shot, visit: resolved.visit };
   });
 }
+function seededLast(shots) {
+  return [...shots.filter((shot) => !shot.visit), ...shots.filter((shot) => shot.visit)];
+}
+async function writeLocalFrame(dir, frame) {
+  const file = `${frame.shot.id}.png`;
+  const layout = frame.layout ? `${frame.shot.id}.json` : void 0;
+  await writeFile3(path4.join(dir, file), frame.image);
+  if (layout) await writeFile3(path4.join(dir, layout), `${JSON.stringify(frame.layout, null, 2)}
+`, "utf8");
+  return {
+    id: frame.shot.id,
+    route: frame.shot.route,
+    depicts: frame.shot.depicts,
+    file,
+    sha256: frame.sha256,
+    settled: frame.settled,
+    ...frame.browser ? { browser: frame.browser } : {},
+    ...frame.width ? { width: frame.width } : {},
+    ...frame.height ? { height: frame.height } : {},
+    ...layout ? { layout } : {},
+    ...frame.shot.variant ? { variant: frame.shot.variant } : {}
+  };
+}
+async function writeLocalClip(dir, clip) {
+  const id = clip.recording.clipId;
+  const folder = path4.join(dir, "clips");
+  await mkdir2(folder, { recursive: true });
+  await writeFile3(path4.join(folder, `${id}.mp4`), clip.mp4);
+  if (clip.gif) await writeFile3(path4.join(folder, `${id}.gif`), clip.gif);
+  await writeFile3(path4.join(folder, `${id}.png`), clip.poster);
+  await writeFile3(path4.join(folder, `${id}.json`), `${JSON.stringify(clip.recording, null, 2)}
+`, "utf8");
+  return {
+    id,
+    title: clip.recording.title,
+    route: clip.recording.route,
+    mp4: `clips/${id}.mp4`,
+    ...clip.gif ? { gif: `clips/${id}.gif` } : {},
+    poster: `clips/${id}.png`,
+    recording: `clips/${id}.json`,
+    fingerprint: clip.recording.fingerprint,
+    durationMs: clip.recording.durationMs
+  };
+}
+function clipForm(clip) {
+  const id = clip.recording.clipId;
+  const form = new FormData();
+  form.set("meta", JSON.stringify({ ...clip.recording, sha256: clip.sha256 }));
+  form.set("mp4", new Blob([clip.mp4], { type: "video/mp4" }), `${id}.mp4`);
+  if (clip.gif) form.set("gif", new Blob([clip.gif], { type: "image/gif" }), `${id}.gif`);
+  form.set("poster", new Blob([clip.poster], { type: "image/png" }), `${id}.png`);
+  return form;
+}
+async function clipsOnDisk(dir) {
+  try {
+    const manifest = JSON.parse(await readFile2(path4.join(dir, "clips", "manifest.json"), "utf8"));
+    return new Map((manifest.clips ?? []).map((clip) => [clip.id, clip]));
+  } catch {
+    return /* @__PURE__ */ new Map();
+  }
+}
+async function recordSeededClips(args) {
+  if (!args.scripts.length) {
+    console.log("\n--clips was given, but the seed command named no clips, so none were recorded.");
+    return [];
+  }
+  if (!await ffmpegAvailable()) {
+    console.log("\nClips were not recorded: this machine has no ffmpeg to encode them with. Install ffmpeg, or set CAPTURE_FFMPEG.");
+    if (process.env["GITHUB_ACTIONS"] === "true") console.log("::warning title=Clips not recorded::This runner has no ffmpeg to encode clips with.");
+    return [];
+  }
+  const frames = new Map(
+    args.outcomes.filter((outcome) => !outcome.variant && outcome.sha256 && (outcome.status === "captured" || outcome.status === "unchanged")).map((outcome) => [outcome.route, { shotId: outcome.shotId, sha256: outcome.sha256 ?? null }])
+  );
+  const previous = args.local ? await clipsOnDisk(args.local) : /* @__PURE__ */ new Map();
+  const written = [];
+  console.log(`
+The seed command named ${args.scripts.length} clip(s). Each is recorded in the demo tenant it built when it is new or something it shows has changed.
+`);
+  const outcomes = await runClips({
+    baseUrl: args.baseUrl,
+    browser: args.browser,
+    encoder: ffmpegEncoder(),
+    workDir: path4.join(tmpdir2(), `helpdesk-clips-${process.pid}`),
+    clearance: args.clearance,
+    brands: args.brands,
+    build: await args.browser.build?.().catch(() => void 0),
+    scripts: args.scripts,
+    frames,
+    held: args.local ? new Map([...previous].map(([id, clip]) => [id, clip.fingerprint])) : args.held,
+    force: args.force,
+    async send(clip) {
+      if (args.local) {
+        written.push(await writeLocalClip(args.local, clip));
+        return { ok: true };
+      }
+      const response = await fetch(`${args.to}/api/helpdesk/clips`, { method: "POST", headers: args.headers, body: clipForm(clip) });
+      if (response.ok) return { ok: true };
+      const body = await response.json().catch(() => ({}));
+      return { ok: false, error: body.error ?? `the help desk answered ${response.status}`, ...response.status === 402 || body.limit ? { limit: true } : {} };
+    },
+    onProgress(outcome, index, total) {
+      const mark = { recorded: "\u2713", unchanged: "=", deferred: "\u2013", refused: "\u2717", failed: "!" }[outcome.status];
+      const kb = (bytes) => `${Math.round(bytes / 1024)} KB`;
+      const detail = outcome.status === "recorded" ? `${((outcome.durationMs ?? 0) / 1e3).toFixed(1)} s, ${kb(outcome.mp4Bytes ?? 0)} MP4, ${outcome.gifBytes ? `${kb(outcome.gifBytes)} GIF` : "no GIF"}` : outcome.reason ?? "";
+      console.log(`${mark} clip ${index}/${total} ${outcome.title}: ${detail}`);
+    }
+  });
+  if (args.local) {
+    const kept = [
+      ...written,
+      ...outcomes.filter((outcome) => outcome.status === "unchanged").flatMap((outcome) => previous.has(outcome.clipId) ? [previous.get(outcome.clipId)] : [])
+    ].sort((left, right) => left.id.localeCompare(right.id));
+    await mkdir2(path4.join(args.local, "clips"), { recursive: true });
+    await writeFile3(path4.join(args.local, "clips", "manifest.json"), `${JSON.stringify({ schema: "olomon.clip-manifest/1", clips: kept }, null, 2)}
+`, "utf8");
+  }
+  const count = (status) => outcomes.filter((outcome) => outcome.status === status).length;
+  console.log(`
+Clips: ${count("recorded")} recorded, ${count("unchanged")} unchanged, ${count("deferred")} deferred, ${count("refused")} refused, ${count("failed")} failed.`);
+  const missed = outcomes.filter((outcome) => outcome.status === "refused" || outcome.status === "failed");
+  if (missed.length && process.env["GITHUB_ACTIONS"] === "true") {
+    console.log(`::warning title=${missed.length} clip(s) not recorded::${missed.map((outcome) => `${outcome.clipId}: ${outcome.reason}`).join("; ")}`);
+  }
+  return outcomes;
+}
+function frameForm(frame) {
+  const form = new FormData();
+  form.set(
+    "meta",
+    JSON.stringify({
+      shotId: frame.shot.id,
+      route: frame.shot.route,
+      depicts: frame.shot.depicts,
+      pageText: frame.pageText,
+      capturedFrom: frame.capturedFrom,
+      settled: frame.settled,
+      // What this run read off the screen. Absent is a refusal at the
+      // other end rather than a default, which is the point of sending it.
+      ...frame.report ? { report: frame.report } : {},
+      ...frame.browser ? { browser: frame.browser } : {},
+      ...frame.width ? { width: frame.width } : {},
+      ...frame.height ? { height: frame.height } : {}
+    })
+  );
+  form.set("image", new Blob([frame.image], { type: "image/png" }), `${frame.shot.id}.png`);
+  if (frame.layout) form.set("layout", JSON.stringify(frame.layout));
+  return form;
+}
+function framesOnDisk(written, planned, outcomes, previous) {
+  const kept = new Map(written.map((frame) => [frame.id, frame]));
+  for (const shot of planned) {
+    if (kept.has(shot.id) || !shot.sha256) continue;
+    const unchanged = outcomes.find((outcome) => outcome.shotId === shot.id);
+    if (unchanged?.status !== "unchanged") continue;
+    kept.set(shot.id, {
+      id: shot.id,
+      route: shot.route,
+      depicts: shot.depicts,
+      file: `${shot.id}.png`,
+      sha256: shot.sha256,
+      settled: unchanged.settled !== false,
+      ...previous.get(shot.id)?.layout ? { layout: `${shot.id}.json` } : {},
+      ...shot.variant ? { variant: shot.variant } : {}
+    });
+  }
+  return [...kept.values()].sort((a, b) => a.id.localeCompare(b.id));
+}
 async function previousFrames(out) {
   try {
-    const manifest = JSON.parse(await readFile(path2.join(out, "manifest.json"), "utf8"));
-    return new Map((manifest.frames ?? []).map((frame) => [frame.id, frame.sha256]));
+    const manifest = JSON.parse(await readFile2(path4.join(out, "manifest.json"), "utf8"));
+    return new Map((manifest.frames ?? []).map((frame) => [frame.id, { sha256: frame.sha256, layout: Boolean(frame.layout) }]));
   } catch {
     return /* @__PURE__ */ new Map();
   }
@@ -3521,11 +4877,13 @@ async function main(argv) {
   const local = parsed.out;
   const frames = [];
   let orders;
+  let previous = /* @__PURE__ */ new Map();
   if (local) {
     const repo = parsed.repo ?? process.cwd();
-    await mkdir(local, { recursive: true });
+    await mkdir2(local, { recursive: true });
     try {
-      orders = { baseUrl: null, shots: shotsFromRepo(repo, await previousFrames(local)) };
+      previous = await previousFrames(local);
+      orders = { baseUrl: null, shots: shotsFromRepo(repo, previous) };
     } catch (error) {
       console.error(
         `Could not read a plan from ${repo}: ${error.message}
@@ -3542,6 +4900,7 @@ Run this from your repository, or pass --repo <dir>.`
       return 1;
     }
     orders = await listed.json();
+    previous = heldPhoneFrames(orders.shots);
     if (!orders.capture) {
       console.error(
         `This workspace has approved no capture subject, so the help desk will refuse every frame.
@@ -3563,14 +4922,16 @@ Approve one on the plan page, then run this again.`
   }
   let stage;
   let seeded;
+  const pinnedClock = parsed.liveClock ? {} : { pinnedClock: CAPTURE_CONTRACT.pinnedClock };
   if (parsed.seedCommand) {
     try {
       seeded = await stageSeeded({
         appUrl: baseUrl,
         seedCommand: parsed.seedCommand,
         ...parsed.appCommand ? { appCommand: parsed.appCommand } : {},
-        sessionOut: parsed.session ?? path2.join(process.cwd(), "helpdesk-demo-session.json"),
-        examplesOut: path2.join(process.cwd(), "helpdesk-examples.json"),
+        ...pinnedClock,
+        sessionOut: parsed.session ?? path4.join(process.cwd(), "helpdesk-demo-session.json"),
+        examplesOut: path4.join(process.cwd(), "helpdesk-examples.json"),
         onLog: (line) => console.log(line)
       });
       if (seeded.sessionPath) parsed.session = seeded.sessionPath;
@@ -3581,13 +4942,15 @@ Approve one on the plan page, then run this again.`
       return 1;
     }
   }
-  const planned = seeded?.examples ? withExamples(shots, seeded.examples) : shots;
+  const withRecords = seeded?.examples ? withExamples(shots, seeded.examples) : shots;
+  const planned = seededLast(parsed.phone ? withPhoneShots(withRecords, previous) : withRecords);
   if (parsed.cassette) {
     try {
       stage = await stageAgainstRecording({
-        cassette: parseCassette(await readFile(parsed.cassette, "utf8")),
+        cassette: parseCassette(await readFile2(parsed.cassette, "utf8")),
         appUrl: baseUrl,
         ...parsed.appCommand ? { appCommand: parsed.appCommand } : {},
+        ...pinnedClock,
         ...parsed.appEnv ? { appEnv: parsed.appEnv } : {},
         ...parsed.replayPort ? { replayPort: parsed.replayPort } : {},
         onLog: (line) => console.log(line)
@@ -3611,7 +4974,8 @@ Approve one on the plan page, then run this again.`
     session: Boolean(parsed.session),
     ...stage ? { replaying: parsed.cassette } : {},
     ...parsed.allowProduction ? { productionGranted: true } : {},
-    ...parsed.rebaseline ? { rebaselineReason: parsed.rebaseline } : {}
+    ...parsed.rebaseline ? { rebaselineReason: parsed.rebaseline } : {},
+    ...parsed.clips ? { clips: true } : {}
   });
   console.log(checks.lines.join("\n"));
   console.log("");
@@ -3629,9 +4993,10 @@ 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` : "";
   console.log(
-    stage ? `Photographing ${shots.length} screen(s) of ${baseUrl}, served from ${parsed.cassette}.
-` : `Photographing ${shots.length} screen(s) of ${baseUrl}.
+    stage ? `Photographing ${shots.length} screen(s) of ${baseUrl}${phones}, served from ${parsed.cassette}.
+` : `Photographing ${shots.length} screen(s) of ${baseUrl}${phones}.
 `
   );
   const runId = local ? void 0 : await openRun(parsed.to, headers, shots.length);
@@ -3639,26 +5004,25 @@ Approve one on the plan page, then run this again.`
   const tell = (body) => {
     told = told.then(() => tellHelpDesk(parsed.to, headers, body));
   };
+  const clearance = orders.capture ? {
+    subject: orders.capture.subject,
+    routes: orders.capture.routes,
+    regions: orders.capture.regions,
+    // A cover is where to put a rectangle; an approval is where not
+    // to. Both are read off the clearance the help desk holds, and
+    // the second is checked again against that same record when the
+    // frame arrives, so this run cannot approve anything by saying so.
+    covers: (orders.capture.surfaces ?? []).filter((surface) => surface.treatment?.treat === "cover").map((surface) => surface.where),
+    approved: (orders.capture.surfaces ?? []).filter((surface) => surface.treatment?.treat === "approve").map((surface) => surface.where),
+    coverUnnamed: orders.capture.coverUnnamed === true,
+    expectedBrands: orders.capture.expectedBrands ?? []
+  } : void 0;
   try {
     const report = await runCapture({
       baseUrl,
       shots: planned,
       browser,
-      ...orders.capture ? {
-        clearance: {
-          subject: orders.capture.subject,
-          routes: orders.capture.routes,
-          regions: orders.capture.regions,
-          // A cover is where to put a rectangle; an approval is where not
-          // to. Both are read off the clearance the help desk holds, and
-          // the second is checked again against that same record when the
-          // frame arrives, so this run cannot approve anything by saying so.
-          covers: (orders.capture.surfaces ?? []).filter((surface) => surface.treatment?.treat === "cover").map((surface) => surface.where),
-          approved: (orders.capture.surfaces ?? []).filter((surface) => surface.treatment?.treat === "approve").map((surface) => surface.where),
-          coverUnnamed: orders.capture.coverUnnamed === true,
-          expectedBrands: orders.capture.expectedBrands ?? []
-        }
-      } : {},
+      ...clearance ? { clearance } : {},
       brands: parsed.brands,
       force: Boolean(parsed.rebaseline),
       // The commit a workflow run checked out, so the screens' details say
@@ -3674,8 +5038,9 @@ Approve one on the plan page, then run this again.`
       role: parsed.session ? unknownRole() : noRole("this run was signed out"),
       onProgress: (outcome, index, total) => {
         const mark = { captured: "\u2713", unchanged: "=", skipped: "\u2013", refused: "\u2717", failed: "!" }[outcome.status];
-        console.log(`${mark} ${index}/${total} ${outcome.route}${outcome.reason ? `: ${outcome.reason}` : ""}`);
-        if (runId) {
+        const screen = outcome.variant ? `${outcome.route} at phone width` : outcome.route;
+        console.log(`${mark} ${index}/${total} ${screen}${outcome.reason ? `: ${outcome.reason}` : ""}`);
+        if (runId && !outcome.variant) {
           tell({
             action: "progress",
             jobId: runId,
@@ -3692,44 +5057,13 @@ Approve one on the plan page, then run this again.`
       },
       async send(frame) {
         if (local) {
-          const file = `${frame.shot.id}.png`;
-          await writeFile(path2.join(local, file), frame.image);
-          frames.push({
-            id: frame.shot.id,
-            route: frame.shot.route,
-            depicts: frame.shot.depicts,
-            file,
-            sha256: frame.sha256,
-            settled: frame.settled,
-            ...frame.browser ? { browser: frame.browser } : {},
-            ...frame.width ? { width: frame.width } : {},
-            ...frame.height ? { height: frame.height } : {}
-          });
+          frames.push(await writeLocalFrame(local, frame));
           return { ok: true };
         }
-        const form = new FormData();
-        form.set(
-          "meta",
-          JSON.stringify({
-            shotId: frame.shot.id,
-            route: frame.shot.route,
-            depicts: frame.shot.depicts,
-            pageText: frame.pageText,
-            capturedFrom: frame.capturedFrom,
-            settled: frame.settled,
-            // What this run read off the screen. Absent is a refusal at the
-            // other end rather than a default, which is the point of sending it.
-            ...frame.report ? { report: frame.report } : {},
-            ...frame.browser ? { browser: frame.browser } : {},
-            ...frame.width ? { width: frame.width } : {},
-            ...frame.height ? { height: frame.height } : {}
-          })
-        );
-        form.set("image", new Blob([frame.image], { type: "image/png" }), `${frame.shot.id}.png`);
         const response = await fetch(`${parsed.to}/api/helpdesk/frames`, {
           method: "POST",
           headers,
-          body: form
+          body: frameForm(frame)
         });
         if (response.ok) return { ok: true };
         const body = await response.json().catch(() => ({}));
@@ -3738,41 +5072,31 @@ Approve one on the plan page, then run this again.`
     });
     console.log(`
 ${runCounts(report)}.`);
+    if (report.phone) console.log(`At phone width: ${runCounts(report.phone)}.`);
     const read = Object.keys(report.readings).length;
     if (read && !local) {
       console.log(`Read what ${read} screen${read === 1 ? "" : "s"} say, as the help desk's screen details: headings, buttons, fields and messages.`);
     }
     const unclassified = unclassifiedLines(
       groupUnclassified(
-        report.outcomes.flatMap((outcome) => outcome.unaccounted?.length ? [{ route: outcome.route, values: outcome.unaccounted }] : [])
+        report.outcomes.flatMap(
+          (outcome) => outcome.unaccounted?.length && !outcome.variant ? [{ route: outcome.route, values: outcome.unaccounted }] : []
+        )
       )
     );
     if (unclassified.length) console.log(`
 ${unclassified.join("\n")}`);
     if (local) {
-      const kept = new Map(frames.map((frame) => [frame.id, frame]));
-      for (const shot of shots) {
-        if (kept.has(shot.id) || !shot.sha256) continue;
-        const unchanged = report.outcomes.find((outcome) => outcome.shotId === shot.id);
-        if (unchanged?.status !== "unchanged") continue;
-        kept.set(shot.id, {
-          id: shot.id,
-          route: shot.route,
-          depicts: shot.depicts,
-          file: `${shot.id}.png`,
-          sha256: shot.sha256,
-          settled: unchanged.settled !== false
-        });
-      }
-      await writeFile(
-        path2.join(local, "manifest.json"),
+      const kept = framesOnDisk(frames, planned, report.outcomes, previous);
+      await writeFile3(
+        path4.join(local, "manifest.json"),
         `${JSON.stringify(
           {
             schema: "olomon.capture-manifest/1",
             capturedFrom: baseUrl,
             capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
             ...parsed.cassette ? { recording: parsed.cassette } : {},
-            frames: [...kept.values()].sort((a, b) => a.id.localeCompare(b.id)),
+            frames: kept,
             survey: report.survey
           },
           null,
@@ -3782,7 +5106,22 @@ ${unclassified.join("\n")}`);
         "utf8"
       );
       console.log(`
-Written to ${local}: ${kept.size} frame(s) and manifest.json.`);
+Written to ${local}: ${kept.length} frame(s) and manifest.json.`);
+    }
+    if (parsed.clips) {
+      await recordSeededClips({
+        scripts: seeded?.clips ?? [],
+        browser,
+        baseUrl,
+        clearance,
+        brands: parsed.brands,
+        outcomes: report.outcomes,
+        local,
+        to: parsed.to,
+        headers,
+        held: new Map((orders.clips ?? []).map((clip) => [clip.id, clip.fingerprint])),
+        force: Boolean(parsed.rebaseline)
+      });
     }
     if (report.survey.length) {
       const survey = captureReport(report.survey);
@@ -3797,7 +5136,7 @@ ${surveyLine(report.survey)}
       if (unstable.length) {
         console.log(
           `
-${unstable.length} screen(s) never stopped moving: ${unstable.map((o) => o.route).join(", ")}.
+${unstable.length} screen(s) never stopped moving: ${unstable.map((o) => o.variant ? `${o.route} at phone width` : o.route).join(", ")}.
 Their frames were kept, but they will hash differently every run, so nothing can tell you
 whether they changed. Usually a spinner that never resolves or a looping animation.`
         );
@@ -3820,8 +5159,9 @@ not somebody's data. The session file stays on this machine and is sent nowhere.
     console.log(
       `
 ${attestation({
-        captured: report.captured,
-        unchanged: report.unchanged,
+        // Of frames, which the phone-width ones are as much as the screens' and were checked the same way.
+        captured: report.captured + (report.phone?.captured ?? 0),
+        unchanged: report.unchanged + (report.phone?.unchanged ?? 0),
         refused: report.refused,
         baseUrl,
         ...report.browser ? { browser: report.browser } : {},
@@ -3875,12 +5215,12 @@ ${verdict.sentence}`);
   }
 }
 async function openRun(to, headers, total) {
-  const run = runIdentityFromEnv(process.env);
+  const run2 = runIdentityFromEnv(process.env);
   try {
     const response = await fetch(`${to}/api/helpdesk/captures`, {
       method: "POST",
       headers: { ...headers, "content-type": "application/json" },
-      body: JSON.stringify({ action: "start", total, ...run ? { run } : {} })
+      body: JSON.stringify({ action: "start", total, ...run2 ? { run: run2 } : {} })
     });
     if (!response.ok) return void 0;
     const body = await response.json();
@@ -3934,6 +5274,15 @@ if (runningAsCommand(import.meta.url)) {
   );
 }
 export {
+  clipForm,
+  frameForm,
+  framesOnDisk,
   main,
-  withExamples
+  onePerScreen,
+  seededLast,
+  shotsFromRepo,
+  withExamples,
+  withPhoneShots,
+  writeLocalClip,
+  writeLocalFrame
 };