@reshotdev/screenshot 0.0.1-beta.2 → 0.0.1-beta.20

package/src/lib/auto-update/spec.js

@@ -0,0 +1,89 @@
+// Phase 5 auto-update — local per-composition state ("the stored spec").
+//
+// A composition's source screen (URL + viewport), the accepted baseline's
+// structure signature + reference frame, and any outstanding flagged candidate
+// live on disk so a CI `reshot refresh` is reproducible and idempotent. The
+// reference frame is the prior ACCEPTED render's recapture; it advances only when
+// a refresh publishes, so a flagged redesign leaves the old baseline (and the old
+// live clip) untouched.
+
+const fs = require("fs-extra");
+const path = require("path");
+
+function baseDir() {
+  return (
+    process.env.RESHOT_AUTO_UPDATE_DIR ||
+    path.join(process.cwd(), ".reshot", "auto-update")
+  );
+}
+
+function specDir(compositionId) {
+  return path.join(baseDir(), compositionId);
+}
+
+function specPath(compositionId) {
+  return path.join(specDir(compositionId), "spec.json");
+}
+
+function referencePngPath(compositionId) {
+  return path.join(specDir(compositionId), "reference.png");
+}
+
+async function writeSpec(spec) {
+  if (!spec || !spec.compositionId) {
+    throw new Error("writeSpec requires spec.compositionId");
+  }
+  await fs.ensureDir(specDir(spec.compositionId));
+  await fs.writeJson(specPath(spec.compositionId), spec, { spaces: 2 });
+  return spec;
+}
+
+async function readSpec(compositionId) {
+  const file = specPath(compositionId);
+  if (!(await fs.pathExists(file))) {
+    throw new Error(
+      `No auto-update spec for composition ${compositionId} at ${file}. ` +
+        "Register it with `reshot refresh --register` (or seed it) first.",
+    );
+  }
+  return fs.readJson(file);
+}
+
+async function listSpecs(projectId) {
+  const dir = baseDir();
+  if (!(await fs.pathExists(dir))) return [];
+  const entries = await fs.readdir(dir);
+  const specs = [];
+  for (const entry of entries) {
+    const file = specPath(entry);
+    if (!(await fs.pathExists(file))) continue;
+    const spec = await fs.readJson(file);
+    if (projectId && spec.projectId !== projectId) continue;
+    specs.push(spec);
+  }
+  // Stable order so CI summaries and idempotence checks are deterministic.
+  return specs.sort((a, b) => String(a.slug).localeCompare(String(b.slug)));
+}
+
+async function readReferencePng(compositionId) {
+  const file = referencePngPath(compositionId);
+  if (!(await fs.pathExists(file))) return null;
+  return fs.readFile(file);
+}
+
+async function writeReferencePng(compositionId, buffer) {
+  await fs.ensureDir(specDir(compositionId));
+  await fs.writeFile(referencePngPath(compositionId), buffer);
+}
+
+module.exports = {
+  baseDir,
+  specDir,
+  specPath,
+  referencePngPath,
+  writeSpec,
+  readSpec,
+  listSpecs,
+  readReferencePng,
+  writeReferencePng,
+};

package/src/lib/capture-engine.js

@@ -6,6 +6,7 @@ const path = require("path");
 const fs = require("fs-extra");
 const chalk = require("chalk");
 const { buildLaunchOptions } = require("./ci-detect");
+const { launchChromium } = require("./ensure-browser");
 const {
   applyVariantToPage,
   applyStorageAndReload,
@@ -20,7 +21,7 @@ const {
   scaleRegionByDPR,
   isSharpAvailable,
 } = require("./image-crop");
-const { sanitizeStorageState } = require("./record-cdp");
+const { sanitizeStorageState, assessSessionHealth } = require("./record-cdp");
 const {
   injectPrivacyMasking,
   removePrivacyMasking,
@@ -98,6 +99,9 @@ class CaptureEngine {
     this.capturedAssets = [];
     this.logger = options.logger || console.log;
     this.headless = options.headless !== false; // Default to headless
+    this.injectWorkspaceStore = options.injectWorkspaceStore !== false;
+    this.diagnostics = [];
+    this.sessionHealth = null;
 
     // Storage state path for authenticated sessions
     // If provided, loads cookies/localStorage from file to preserve auth state
@@ -142,6 +146,13 @@ class CaptureEngine {
     // Style configuration (image beautification post-capture)
     this.styleConfig = options.styleConfig || null;
 
+    // DOM scene (MHTML) capture toggle — emits a self-contained Chromium
+    // MHTML bundle alongside each PNG so variations can be rendered from
+    // the captured DOM without re-running the live app. Defaults to ON;
+    // opt out via reshot.config.json -> { domScene: false } or per-scenario
+    // -> { domScene: false }.
+    this.domSceneEnabled = options.domScene !== false;
+
     // Legacy support for old variant format
     if (!this.variantConfig && options.variant) {
       this.variantConfig = this._convertLegacyVariant(options.variant);
@@ -226,6 +237,36 @@ class CaptureEngine {
       }
       this.logger(chalk.gray(`  → Using pre-loaded auth session`));
     } else if (this.storageStatePath && fs.existsSync(this.storageStatePath)) {
+      this.sessionHealth = assessSessionHealth(
+        this.storageStatePath,
+        this.baseUrl,
+      );
+
+      if (!this.sessionHealth.compatible) {
+        this.logger(
+          chalk.yellow(
+            `  ⚠ Skipping cached auth session because it does not match ${this.baseUrl || "the current target"}`,
+          ),
+        );
+        for (const issue of this.sessionHealth.issues) {
+          this.logger(chalk.gray(`    ${issue}`));
+        }
+        this.diagnostics.push({
+          type: "auth-session-mismatch",
+          sessionPath: this.storageStatePath,
+          issues: [...this.sessionHealth.issues],
+        });
+        return contextOptions;
+      }
+
+      if (this.sessionHealth.stale) {
+        this.logger(
+          chalk.yellow(
+            `  ⚠ Cached auth session is ${this.sessionHealth.ageMinutes}m old; validating it during startup.`,
+          ),
+        );
+      }
+
       // Read and sanitize instead of passing raw file path (Playwright would read it unsanitized)
       try {
         const rawState = JSON.parse(fs.readFileSync(this.storageStatePath, "utf-8"));
@@ -245,6 +286,10 @@ class CaptureEngine {
           )}`
         )
       );
+
+      for (const warning of this.sessionHealth.warnings) {
+        this.logger(chalk.gray(`    ${warning}`));
+      }
     }
 
     return contextOptions;
@@ -255,9 +300,9 @@ class CaptureEngine {
 
     const contextOptions = this._buildContextOptions();
 
-    this.browser = await chromium.launch(buildLaunchOptions({
+    this.browser = await launchChromium(chromium, buildLaunchOptions({
       headless: this.headless,
-    }));
+    }), this.logger);
     this.context = await this.browser.newContext(contextOptions);
     this.page = await this.context.newPage();
 
@@ -289,7 +334,9 @@ class CaptureEngine {
       logVariantSummary(this.variantConfig, this.logger);
     }
 
-    await this._injectWorkspaceStore();
+    if (this.injectWorkspaceStore) {
+      await this._injectWorkspaceStore();
+    }
 
     // Inject privacy masking CSS (after variant injection, before captures)
     this._privacyInjectionOk = true;
@@ -306,24 +353,76 @@ class CaptureEngine {
     this._authResponseDetected = false;
     this.page.on("response", (response) => {
       const status = response.status();
+      const url = response.url();
       if (
         (status === 401 || status === 403) &&
         response.request().resourceType() === "document"
       ) {
         this._authResponseDetected = true;
       }
+
+      if (status >= 400 && response.request().resourceType() === "document") {
+        this._recordDiagnostic("response_error", "error", {
+          url,
+          status,
+          resourceType: response.request().resourceType(),
+        });
+      }
     });
 
     // Set up error handling
     this.page.on("pageerror", (err) => {
       const firstLine = (err.message || '').split('\n')[0].slice(0, 200);
+      this._recordDiagnostic("pageerror", "error", {
+        message: err.message || String(err),
+      });
       this.logger(chalk.yellow(`  [Page Error] ${firstLine}`));
     });
+    this.page.on("console", (message) => {
+      const type = message.type();
+      const text = message.text();
+      const severity =
+        type === "error"
+          ? "error"
+          : type === "warning"
+            ? "warning"
+            : "info";
+
+      if (severity === "error" || severity === "warning") {
+        this._recordDiagnostic("console", severity, {
+          message: text,
+          consoleType: type,
+          cspViolation: /content security policy|csp/i.test(text),
+        });
+      }
+    });
+    this.page.on("requestfailed", (request) => {
+      this._recordDiagnostic("requestfailed", "error", {
+        url: request.url(),
+        method: request.method(),
+        resourceType: request.resourceType(),
+        message: request.failure()?.errorText || "Request failed",
+      });
+    });
 
     this.logger(chalk.green("  ✔ Browser initialized"));
     return this;
   }
 
+  _recordDiagnostic(kind, severity, details = {}) {
+    this.diagnostics.push({
+      id: `${Date.now()}-${this.diagnostics.length + 1}`,
+      kind,
+      severity,
+      ...details,
+      capturedAt: new Date().toISOString(),
+    });
+  }
+
+  getDiagnostics() {
+    return [...this.diagnostics];
+  }
+
   /**
    * Hide development overlays (Next.js devtools, Vercel toolbar, etc.)
    * Injects CSS to hide common development UI elements before each navigation
@@ -412,11 +511,11 @@ class CaptureEngine {
       projectId = settings.urlVariables?.PROJECT_ID;
       // 2. Check settings projectId
       if (!projectId) projectId = settings.projectId;
-      // 3. Check docsync.config.json urlVariables
+      // 3. Check reshot.config.json urlVariables
       if (!projectId) {
         try {
-          const docsyncConfig = config.readConfig() || {};
-          projectId = docsyncConfig.urlVariables?.PROJECT_ID;
+          const reshotConfig = config.readConfig() || {};
+          projectId = reshotConfig.urlVariables?.PROJECT_ID;
         } catch (_e) {
           // Config may not exist
         }
@@ -512,10 +611,15 @@ class CaptureEngine {
     }
 
     // Check for auth redirect after navigation (URL patterns + HTTP 401/403)
+    // Skip the check if the scenario explicitly targeted this URL (e.g. capturing /login)
     const currentUrl = this.page.url();
+    const targetPath = url.startsWith("http") ? new URL(url).pathname : url;
+    const currentPath = (() => { try { return new URL(currentUrl).pathname; } catch { return currentUrl; } })();
+    const isIntentionalTarget = currentPath === targetPath;
     const isAuthRedirect =
-      isAuthRedirectUrl(currentUrl, this._customAuthPatterns) ||
-      this._authResponseDetected;
+      !isIntentionalTarget &&
+      (isAuthRedirectUrl(currentUrl, this._customAuthPatterns) ||
+      this._authResponseDetected);
     if (isAuthRedirect) {
       const errorMsg = `Auth redirect detected: navigated to ${currentUrl}. Session may be expired. Re-run \`reshot record\` to refresh session, or export a fresh Playwright storage state to .reshot/auth-state.json.`;
       this.logger(chalk.red(`  ✖ ${errorMsg}`));
@@ -527,6 +631,32 @@ class CaptureEngine {
     // Wait for network to settle
     await this._waitForStability();
 
+    // Post-stability auth redirect check: catches SPA redirects that happen
+    // after client-side JS has executed (the pre-stability check at domcontentloaded
+    // may miss these since JS hasn't finished routing yet)
+    if (!isIntentionalTarget) {
+      const postStabilityUrl = this.page.url();
+      const postStabilityRedirect =
+        isAuthRedirectUrl(postStabilityUrl, this._customAuthPatterns) ||
+        this._authResponseDetected;
+      if (postStabilityRedirect) {
+        const errorMsg = `Auth redirect detected after page load: navigated to ${postStabilityUrl}. Session may be expired. Re-run \`reshot record\` to refresh session.`;
+        this.logger(chalk.red(`  ✖ ${errorMsg}`));
+        throw new Error(errorMsg);
+      }
+      // Also check DOM for login forms (SPA may render login UI without changing URL)
+      const hasLoginForm = await this.page.evaluate(() => {
+        const h = document.querySelector("h1, h2");
+        return h && /sign\s*in|log\s*in/i.test(h.textContent);
+      }).catch(() => false);
+      if (hasLoginForm) {
+        const errorMsg = `Login form detected after page load at ${postStabilityUrl}. Session may be expired. Re-run \`reshot record\` to refresh session.`;
+        this.logger(chalk.red(`  ✖ ${errorMsg}`));
+        throw new Error(errorMsg);
+      }
+      this._authResponseDetected = false;
+    }
+
     // Additional wait for theme/variants to fully apply
     // This handles CSS transitions and async re-renders
     if (this.variantConfig && this.variantConfig.injections?.length > 0) {
@@ -1011,10 +1141,50 @@ class CaptureEngine {
     // Write the final buffer to file
     await fs.writeFile(outputPath, finalBuffer);
 
+    // ── DOM scene capture (sidecar MHTML) ──────────────────────────────
+    // Capture a self-contained MHTML bundle of the page at the same moment
+    // as the PNG. The bundle re-renders in any Chromium browser without
+    // network access and is the source of truth for variations: marketing
+    // can mutate the captured DOM (swap copy, hide chrome, recrop, rebrand
+    // tenant names) and render new outputs without re-running Playwright
+    // against the live app. Opt out per-scenario or globally via
+    // reshot.config.json -> { domScene: false }.
+    //
+    // The MHTML capture is best-effort — failures are logged but do not
+    // fail the scenario, since the primary PNG already succeeded.
+    let domScenePath = null;
+    let domSceneBytes = null;
+    if (this.domSceneEnabled) {
+      try {
+        const cdp = await this.page.context().newCDPSession(this.page);
+        const { data: mhtml } = await cdp.send("Page.captureSnapshot", {
+          format: "mhtml",
+        });
+        domScenePath = outputPath.replace(/\.png$/i, ".mhtml");
+        await fs.writeFile(domScenePath, mhtml);
+        domSceneBytes = Buffer.byteLength(mhtml, "utf8");
+        this.logger(
+          chalk.gray(
+            `  ✓ DOM scene: ${path.basename(domScenePath)} (${(domSceneBytes / 1024).toFixed(0)} KB)`,
+          ),
+        );
+      } catch (err) {
+        this.logger(
+          chalk.yellow(
+            `  ⚠ DOM scene capture skipped: ${err.message || err}`,
+          ),
+        );
+        domScenePath = null;
+        domSceneBytes = null;
+      }
+    }
+
     // Record asset metadata
     this.capturedAssets.push({
       name,
       path: outputPath,
+      domScenePath,
+      domSceneBytes,
       description,
       capturedAt: new Date().toISOString(),
       viewport: this.viewport,