@legionworks/facet 1.10.0 → 1.10.2

package/src/validation/tier1/runner.ts

@@ -31,6 +31,7 @@ import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { Buffer } from "node:buffer";
+import sharp from "sharp";
 
 import {
   Tier1ResultSchema,
@@ -73,6 +74,7 @@ import {
   TIER1_SCREENSHOT_MAX_AXIS_PX,
   TIER1_SCREENSHOT_MAX_PIXELS,
   TIER1_SCREENSHOT_WEBP_QUALITY,
+  TIER1_TILED_CAPTURE_DEADLINE_MS,
   TIER1_VIEWPORT_HEIGHT,
   TIER1_VIEWPORT_WIDTH,
   TSX_STABILITY_WINDOW_MS,
@@ -327,7 +329,7 @@ async function runTier1Attempt(
       artifactFrame,
       isolated.executionContextId,
       interactiveTsx ? runtimeExceptions!.errorsForFrame(artifactFrame.frameId) : [],
-      input.artifactType === "tsx",
+      input.artifactType === "tsx" || input.artifactType === "markdown",
     );
     const secondObservation = interactiveTsx
       ? await waitForStabilityObservation(
@@ -353,6 +355,7 @@ async function runTier1Attempt(
         renderComplete: shim.renderComplete,
         interactive: interactiveTsx,
         tsx: input.artifactType === "tsx",
+        markdown: input.artifactType === "markdown",
         channelDivergence,
         structureChanged:
           interactiveTsx && countsDiffer(firstObservation.protocol, secondObservation.protocol),
@@ -976,6 +979,165 @@ export async function captureEvidenceScreenshot(
   return captureScreenshotWithRetry(session, { bounds: options.bounds });
 }
 
+async function captureTiledScreenshot(
+  session: VerifierCdpSession,
+  executionContextId: number,
+  options: {
+    readonly tileTimeoutMs?: number;
+    readonly tileAttempts?: number;
+    readonly tiledDeadlineMs?: number;
+  } = {},
+): Promise<CapturedEvidenceImage> {
+  const deadlineAt =
+    performance.now() + (options.tiledDeadlineMs ?? TIER1_TILED_CAPTURE_DEADLINE_MS);
+  const assertDeadline = () => {
+    if (performance.now() >= deadlineAt) throw new Error("tiled-capture deadline exceeded");
+  };
+  await configureTier1Viewport(session);
+  await session.send("Runtime.evaluate", {
+    contextId: executionContextId,
+    expression: "new Promise(requestAnimationFrame)",
+    awaitPromise: true,
+  });
+  const source = await measureArtifactCaptureSize(session, executionContextId);
+  const bounds = boundCaptureSize(source);
+  const viewport = (await session.send("Runtime.evaluate", {
+    contextId: executionContextId,
+    returnByValue: true,
+    expression:
+      "(function(){var element=document.getElementById('artifact');" +
+      "if(!element)return null;return {width:element.clientWidth,height:element.clientHeight}})()",
+  })) as { result: { value?: { width: number; height: number } | null } };
+  const visible = viewport.result.value;
+  if (!visible || visible.width <= 0 || visible.height <= 0)
+    throw new Error("artifact tile viewport unavailable");
+  const owner = (await session.send("Runtime.evaluate", {
+    returnByValue: true,
+    expression:
+      "(function(){var frame=document.querySelector('#host-root iframe');" +
+      "if(!frame)return null;var rect=frame.getBoundingClientRect();" +
+      "return {x:rect.left,y:rect.top,width:rect.width,height:rect.height}})()",
+  })) as { result: { value?: { x: number; y: number; width: number; height: number } | null } };
+  const frame = owner.result.value;
+  if (!frame || frame.x < 0 || frame.y < 0)
+    throw new Error("artifact frame capture box unavailable");
+  const tileWidth = Math.min(Math.max(1, Math.floor(visible.width)), Math.floor(frame.width));
+  const tileHeight = Math.min(Math.max(1, Math.floor(visible.height)), Math.floor(frame.height));
+  if (tileWidth <= 0 || tileHeight <= 0) throw new Error("artifact tile bounds unavailable");
+  const columns = Math.ceil(source.width / tileWidth);
+  const rows = Math.ceil(source.height / tileHeight);
+  if (columns * rows > 256) throw new Error("artifact requires too many screenshot tiles");
+  const layers: { input: Buffer; left: number; top: number }[] = [];
+  for (let row = 0; row < rows; row += 1) {
+    for (let column = 0; column < columns; column += 1) {
+      assertDeadline();
+      const x = column * tileWidth;
+      const y = row * tileHeight;
+      const scrolled = (await session.send("Runtime.evaluate", {
+        contextId: executionContextId,
+        returnByValue: true,
+        expression:
+          "(function(){var element=document.getElementById('artifact');" +
+          "element.style.scrollBehavior='auto';element.scrollLeft=" +
+          x +
+          ";element.scrollTop=" +
+          y +
+          ";return new Promise(function(resolve){requestAnimationFrame(function(){resolve({left:element.scrollLeft,top:element.scrollTop})})})})()",
+        awaitPromise: true,
+      })) as { result: { value?: { left: number; top: number } } };
+      const offset = scrolled.result.value;
+      if (!offset || offset.left > x || offset.top > y)
+        throw new Error("artifact tile scroll position unavailable");
+      const tile = await captureScreenshotWithRetry(session, {
+        attempts: options.tileAttempts ?? TIER1_SCREENSHOT_CAPTURE_ATTEMPTS,
+        timeoutMs: options.tileTimeoutMs ?? TIER1_SCREENSHOT_CAPTURE_TIMEOUT_MS,
+        capture: async (cdpSession) => {
+          const shot = (await cdpSession.send("Page.captureScreenshot", {
+            format: "png",
+            captureBeyondViewport: false,
+            clip: {
+              x: Math.floor(frame.x),
+              y: Math.floor(frame.y),
+              width: tileWidth,
+              height: tileHeight,
+              scale: 1,
+            },
+          })) as { data?: string };
+          return shot.data ? { bytes: Buffer.from(shot.data, "base64"), format: "png" } : null;
+        },
+      });
+      if (tile.screenshot === null)
+        throw new Error(`tiled screenshot capture failed: ${tile.screenshotError?.message}`);
+      const outputLeft = Math.floor(x * bounds.scale);
+      const outputTop = Math.floor(y * bounds.scale);
+      const outputWidth =
+        Math.min(bounds.width, Math.floor(Math.min(x + tileWidth, source.width) * bounds.scale)) -
+        outputLeft;
+      const outputHeight =
+        Math.min(
+          bounds.height,
+          Math.floor(Math.min(y + tileHeight, source.height) * bounds.scale),
+        ) - outputTop;
+      if (outputWidth <= 0 || outputHeight <= 0) continue;
+      const input = await sharp(tile.screenshot.bytes)
+        .extract({
+          left: x - offset.left,
+          top: y - offset.top,
+          width: Math.min(tileWidth, source.width - x),
+          height: Math.min(tileHeight, source.height - y),
+        })
+        .resize(outputWidth, outputHeight, { fit: "fill" })
+        .png()
+        .toBuffer();
+      layers.push({ input, left: outputLeft, top: outputTop });
+    }
+  }
+  assertDeadline();
+  const finalSize = await measureArtifactCaptureSize(session, executionContextId);
+  await session.send("Runtime.evaluate", {
+    contextId: executionContextId,
+    expression:
+      "(function(){var element=document.getElementById('artifact');element.scrollLeft=0;element.scrollTop=0})()",
+  });
+  if (finalSize.width > source.width || finalSize.height > source.height)
+    throw new Error("artifact grew during tiled screenshot capture");
+  const bytes = await sharp({
+    create: { width: bounds.width, height: bounds.height, channels: 3, background: "#151823" },
+  })
+    .composite(layers)
+    .webp({ quality: TIER1_SCREENSHOT_WEBP_QUALITY })
+    .toBuffer();
+  if (bytes.byteLength > TIER1_SCREENSHOT_CAP_BYTES)
+    throw new Error("tiled screenshot exceeds encoded-size cap");
+  assertDeadline();
+  return { bytes, format: "webp" };
+}
+
+export async function captureTiledEvidenceScreenshot(
+  session: VerifierCdpSession,
+  executionContextId: number,
+  options: {
+    readonly tileTimeoutMs?: number;
+    readonly tileAttempts?: number;
+    readonly tiledDeadlineMs?: number;
+  } = {},
+): Promise<{
+  readonly screenshot: CapturedEvidenceImage | null;
+  readonly screenshotError: ScreenshotError | null;
+}> {
+  try {
+    return {
+      screenshot: await captureTiledScreenshot(session, executionContextId, options),
+      screenshotError: null,
+    };
+  } catch (error) {
+    return {
+      screenshot: null,
+      screenshotError: { code: "screenshot_unavailable", message: screenshotFailureMessage(error) },
+    };
+  }
+}
+
 interface ScreenshotRetryOptions {
   readonly attempts?: number;
   readonly timeoutMs?: number;
@@ -1092,15 +1254,16 @@ async function captureEvidence(
       returnByValue: true,
     });
     const finalSize = await measureArtifactCaptureSize(target.session, options.executionContextId);
-    if (finalSize.width > initialSize.width || finalSize.height > initialSize.height)
-      throw new Error("artifact grew after viewport resize");
-    const bounds = boundCaptureSize(finalSize);
-    const captureOptions = { bounds: { bounds, source: finalSize } };
-    const capture = await captureEvidenceScreenshot(target.session, {
-      animated,
-      bounds: captureOptions.bounds,
-      ...(captureScreenshot === undefined ? {} : { captureStatic: captureScreenshot }),
-    });
+    // The host iframe clips beyond its own 800px viewport; a larger iframe would
+    // resize 100vh descendants and never converge. Tiles preserve that viewport.
+    const grew = finalSize.width > initialSize.width || finalSize.height > initialSize.height;
+    const capture = grew
+      ? await captureTiledEvidenceScreenshot(target.session, options.executionContextId)
+      : await captureEvidenceScreenshot(target.session, {
+          animated,
+          bounds: { bounds: boundCaptureSize(finalSize), source: finalSize },
+          ...(captureScreenshot === undefined ? {} : { captureStatic: captureScreenshot }),
+        });
     screenshotError = capture.screenshotError;
     const screenshot = capture.screenshot;
     if (screenshot !== null) {

package/src/validation/tier1/verdict.ts

@@ -88,6 +88,8 @@ export interface LifecycleSummary {
   readonly channelDivergence?: boolean;
   /** Interactive TSX has no lexical HTML prediction and no trusted outer shim. */
   readonly interactive?: boolean;
+  /** Markdown can have no layout-bearing roots while still containing readable prose. */
+  readonly markdown?: boolean;
   /** Only TSX has a renderer-root emptiness claim from Tier 1. */
   readonly tsx?: boolean;
 }
@@ -166,6 +168,13 @@ export function deriveVerdict(
   if (
     !lifecycle.interactive &&
     expected.html === undefined &&
+    !(
+      lifecycle.markdown === true &&
+      expected.rendererRootSvgCount === 0 &&
+      expected.opaqueRegionCount === 0 &&
+      protocolObservation.emptyRendererRoot === false &&
+      isolatedObservation?.emptyRendererRoot === false
+    ) &&
     !layoutObservable(protocolObservation)
   ) {
     return "partial:layout_unverified";

package/templates/capacity-report.tsx

@@ -16,7 +16,7 @@ export default function CapacityReport() {
   const capacityPercent = Math.round((readyWorkers / workerCapacity) * 100);
 
   return (
-    <main className="max-w-2xl p-6 gap-6 flex flex-col bg-legion-paper text-legion-ink">
+    <main className="max-w-2xl mx-auto p-6 gap-6 flex flex-col bg-legion-paper text-legion-ink">
       <header className="flex flex-col gap-2">
         <div className="flex flex-wrap gap-2">
           <span className="badge">capacity report</span>

package/templates/fleet-dashboard.html

@@ -4,7 +4,7 @@
     <title>Fleet dashboard</title>
   </head>
   <body class="bg-legion-paper text-legion-ink leading-relaxed">
-    <main class="max-w-2xl p-6 gap-6 flex flex-col">
+    <main class="max-w-2xl mx-auto p-6 gap-6 flex flex-col">
       <header class="flex flex-col gap-2">
         <div class="flex flex-wrap gap-2 items-center">
           <span class="badge">operations</span>

package/templates/html-release-ledger.html

@@ -4,7 +4,7 @@
     <title>Release ledger</title>
   </head>
   <body class="bg-legion-paper text-legion-ink leading-relaxed">
-    <main class="max-w-2xl p-6 gap-6 flex flex-col">
+    <main class="max-w-2xl mx-auto p-6 gap-6 flex flex-col">
       <header class="flex flex-col gap-2">
         <div class="flex flex-wrap items-center justify-between gap-2">
           <span class="badge">release ledger</span>

package/templates/html-status-report.html

@@ -20,7 +20,7 @@
     <title>Status report</title>
   </head>
   <body class="bg-legion-paper text-legion-ink leading-relaxed">
-    <main class="max-w-2xl p-6 gap-4 flex flex-col">
+    <main class="max-w-2xl mx-auto p-6 gap-4 flex flex-col">
       <header class="flex flex-col gap-2">
         <h1 class="text-2xl font-bold">Status report</h1>
         <p class="text-legion-muted text-sm">

package/templates/incident-console.tsx

@@ -44,7 +44,7 @@ export default function IncidentConsole() {
   const criticalCount = incidents.filter((incident) => incident.severity === "critical").length;
 
   return (
-    <main className="max-w-2xl p-6 gap-6 flex flex-col bg-legion-paper text-legion-ink">
+    <main className="max-w-2xl mx-auto p-6 gap-6 flex flex-col bg-legion-paper text-legion-ink">
       <header className="flex flex-col gap-2">
         <div className="flex flex-wrap gap-2 items-center">
           <span className="badge">incident console</span>

package/templates/tsx-interactive-counter.tsx

@@ -4,7 +4,7 @@ export default function InteractiveCounter() {
   const [count, setCount] = useState(0);
 
   return (
-    <section className="card bg-legion-paper p-6 w-full max-w-prose">
+    <section className="card bg-legion-paper p-6 w-full max-w-prose mx-auto">
       <h1 className="text-2xl font-semibold text-legion-ink">Interactive counter</h1>
       <p className="text-legion-muted mt-2">Button presses: {count}</p>
       <button

package/templates/tsx-status-report.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export default function StatusReport() {
   return (
-    <section className="card bg-legion-paper p-6 w-full max-w-prose">
+    <section className="card bg-legion-paper p-6 w-full max-w-prose mx-auto">
       <h1 className="text-2xl font-semibold text-legion-ink">Status report</h1>
       <p className="text-legion-muted mt-2">Verification state for the current release.</p>
       <section className="mt-4">