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

package/src/commands/sync.js

@@ -1,6 +1,4 @@
-// sync.js - Upload Playwright traces and documentation for processing
-// This is the renamed/enhanced version of ingest.js
-// Implements the "Smart Handoff" protocol from the DocSync specification
+// sync.js - Upload Playwright traces to Reshot platform
 
 const chalk = require("chalk");
 const crypto = require("crypto");
@@ -9,127 +7,12 @@ const path = require("path");
 const { execSync } = require("child_process");
 const config = require("../lib/config");
 const apiClient = require("../lib/api-client");
-const { hashFile } = require("../lib/hash");
 const pkg = require("../../package.json");
 
 // File extension allowlists
 const TRACE_EXTENSIONS = [".zip"];
-const DOC_EXTENSIONS = [".md", ".mdx"];
-const MAX_DOC_SIZE = 5 * 1024 * 1024; // 5MB per doc file
 const MAX_TRACE_SIZE = 100 * 1024 * 1024; // 100MB per trace
 
-/**
- * Parse frontmatter from a markdown file
- */
-function parseFrontmatter(content) {
-  const frontmatterRegex = /^---\n([\s\S]*?)\n---/;
-  const match = content.match(frontmatterRegex);
-
-  if (!match) return { frontmatter: {}, content };
-
-  const frontmatter = {};
-  const lines = match[1].split("\n");
-
-  for (const line of lines) {
-    const colonIndex = line.indexOf(":");
-    if (colonIndex > 0) {
-      const key = line.slice(0, colonIndex).trim();
-      let value = line.slice(colonIndex + 1).trim();
-      if (
-        (value.startsWith('"') && value.endsWith('"')) ||
-        (value.startsWith("'") && value.endsWith("'"))
-      ) {
-        value = value.slice(1, -1);
-      }
-      frontmatter[key] = value;
-    }
-  }
-
-  return {
-    frontmatter,
-    content: content.slice(match[0].length).trim(),
-  };
-}
-
-/**
- * Discover documentation files based on config
- */
-async function discoverDocumentation(docConfig, projectRoot) {
-  const files = [];
-  const root = path.resolve(projectRoot, docConfig.root || "./docs");
-
-  if (!fs.existsSync(root)) {
-    return files;
-  }
-
-  const include = docConfig.include || ["**/*.md", "**/*.mdx"];
-  const exclude = docConfig.exclude || ["**/_*.mdx", "node_modules"];
-  const mappings = docConfig.mappings || {};
-
-  function walkDir(dir, relativePath = "") {
-    const items = fs.readdirSync(dir);
-
-    for (const item of items) {
-      const fullPath = path.join(dir, item);
-      const relPath = path.join(relativePath, item);
-      const stat = fs.statSync(fullPath);
-
-      const shouldExclude = exclude.some((pattern) => {
-        if (pattern.includes("*")) {
-          const regex = new RegExp(
-            pattern.replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*"),
-          );
-          return regex.test(relPath);
-        }
-        return relPath.includes(pattern) || item === pattern;
-      });
-
-      if (shouldExclude) continue;
-
-      if (stat.isDirectory()) {
-        walkDir(fullPath, relPath);
-      } else {
-        const ext = path.extname(item).toLowerCase();
-        if (DOC_EXTENSIONS.includes(ext)) {
-          const content = fs.readFileSync(fullPath, "utf-8");
-          const { frontmatter } = parseFrontmatter(content);
-
-          const journeyKey =
-            frontmatter.reshot_journey ||
-            mappings[relPath] ||
-            mappings[fullPath];
-
-          if (journeyKey) {
-            const fileSize = stat.size;
-
-            if (fileSize > MAX_DOC_SIZE) {
-              console.log(
-                chalk.yellow(`  ⚠ Skipping ${relPath}: exceeds size limit`),
-              );
-              continue;
-            }
-
-            files.push({
-              path: fullPath,
-              relativePath: relPath,
-              journeyKey,
-              contentHash: crypto
-                .createHash("sha256")
-                .update(content)
-                .digest("hex"),
-              size: fileSize,
-              frontmatter,
-            });
-          }
-        }
-      }
-    }
-  }
-
-  walkDir(root);
-  return files;
-}
-
 /**
  * Extract journey key from Playwright test-results directory name
  * Playwright creates directories like: "test-name-chromium" or "describe-test-name-chromium"
@@ -191,11 +74,6 @@ function extractJourneyKey(dirName, journeyMappings = {}) {
     }
 
     // Check if the key parts of the test name appear in both
-    // Match "student-login-successfully" to pattern "should-complete-student-login-successfully"
-    const patternStr = pattern.toLowerCase();
-    const normalizedStr = normalized;
-
-    // Extract meaningful words (4+ chars) and check overlap
     const meaningfulFromPattern = patternParts.filter((p) => p.length >= 4);
     const meaningfulFromDir = normalizedParts.filter((p) => p.length >= 4);
 
@@ -323,28 +201,24 @@ function getGitMetadata() {
  * Main sync command
  * @param {Object} options - Command options
  * @param {string} options.traceDir - Override trace directory
- * @param {boolean} options.traces - Sync traces only
- * @param {boolean} options.docs - Sync documentation only
  * @param {boolean} options.dryRun - Preview without uploading
  * @param {boolean} options.verbose - Show detailed output
  */
 async function syncCommand(options = {}) {
   const {
     traceDir: traceDirOverride,
-    traces: tracesOnly = false,
-    docs: docsOnly = false,
     dryRun = false,
     verbose = false,
   } = options;
 
   console.log(chalk.cyan.bold("\n🔄 Reshot Sync\n"));
 
-  // Load configuration (use readDocSyncConfig which is less strict about scenarios)
-  let docSyncConfig;
+  // Load configuration
+  let reshotConfig;
   try {
-    docSyncConfig = config.readDocSyncConfig();
+    reshotConfig = config.readConfigLenient();
   } catch (error) {
-    console.error(chalk.red("✖ No docsync.config.json found."));
+    console.error(chalk.red("✖ No reshot.config.json found."));
     console.log(
       chalk.gray("  Run"),
       chalk.cyan("reshot setup"),
@@ -361,7 +235,7 @@ async function syncCommand(options = {}) {
     settings = null;
   }
 
-  const projectId = docSyncConfig.projectId || settings?.projectId;
+  const projectId = reshotConfig.projectId || settings?.projectId;
   const apiKey = settings?.apiKey;
 
   if (!projectId || !apiKey) {
@@ -374,99 +248,55 @@ async function syncCommand(options = {}) {
     process.exit(1);
   }
 
-  const features = docSyncConfig._metadata?.features || {
-    visuals: true,
-    docsync: true,
-  };
   const projectRoot = process.cwd();
 
-  // Determine what to sync
-  const syncTraces = !docsOnly && features.visuals !== false;
-  const syncDocs =
-    !tracesOnly && features.docsync !== false && docSyncConfig.documentation;
-
   if (dryRun) {
     console.log(chalk.yellow("DRY RUN - No files will be uploaded\n"));
   }
 
-  let traceFiles = [];
-  let docFiles = [];
-
   // ========================================
   // PHASE 1: Discover Traces
   // ========================================
-  if (syncTraces) {
-    const traceDir =
-      traceDirOverride || docSyncConfig.visuals?.traceDir || "./test-results";
-    const resolvedTraceDir = path.resolve(projectRoot, traceDir);
-    const journeyMappings = docSyncConfig.visuals?.journeyMappings || {};
-
-    console.log(chalk.gray(`Scanning traces: ${traceDir}`));
-    traceFiles = await discoverTraces(resolvedTraceDir, journeyMappings);
-
-    if (traceFiles.length === 0) {
-      console.log(chalk.yellow("  No trace files found"));
-      if (!fs.existsSync(resolvedTraceDir)) {
-        console.log(
-          chalk.gray("  Run your Playwright tests first: npx playwright test"),
-        );
-      }
-    } else {
-      console.log(chalk.green(`  Found ${traceFiles.length} trace file(s)`));
-      if (verbose) {
-        for (const trace of traceFiles) {
-          console.log(
-            chalk.gray(`    → ${trace.parentDir || trace.relativePath}`),
-          );
-          console.log(chalk.gray(`      journey: ${trace.journeyKey}`));
-        }
-      }
-    }
-    console.log();
-  }
+  const traceDir =
+    traceDirOverride || reshotConfig.visuals?.traceDir || "./test-results";
+  const resolvedTraceDir = path.resolve(projectRoot, traceDir);
+  const journeyMappings = reshotConfig.visuals?.journeyMappings || {};
 
-  // ========================================
-  // PHASE 2: Discover Documentation
-  // ========================================
-  if (syncDocs) {
-    console.log(
-      chalk.gray(`Scanning docs: ${docSyncConfig.documentation.root}`),
-    );
-    docFiles = await discoverDocumentation(
-      docSyncConfig.documentation,
-      projectRoot,
-    );
+  console.log(chalk.gray(`Scanning traces: ${traceDir}`));
+  const traceFiles = await discoverTraces(resolvedTraceDir, journeyMappings);
 
-    if (docFiles.length === 0) {
-      console.log(chalk.yellow("  No bound documentation files found"));
+  if (traceFiles.length === 0) {
+    console.log(chalk.yellow("  No trace files found"));
+    if (!fs.existsSync(resolvedTraceDir)) {
       console.log(
-        chalk.gray("  Add reshot_journey frontmatter to your markdown files"),
+        chalk.gray("  Run your Playwright tests first: npx playwright test"),
       );
-    } else {
-      console.log(chalk.green(`  Found ${docFiles.length} bound doc file(s)`));
-      if (verbose) {
-        for (const doc of docFiles) {
-          console.log(
-            chalk.gray(`    → ${doc.relativePath} → ${doc.journeyKey}`),
-          );
-        }
+    }
+    console.log();
+  } else {
+    console.log(chalk.green(`  Found ${traceFiles.length} trace file(s)`));
+    if (verbose) {
+      for (const trace of traceFiles) {
+        console.log(
+          chalk.gray(`    → ${trace.parentDir || trace.relativePath}`),
+        );
+        console.log(chalk.gray(`      journey: ${trace.journeyKey}`));
       }
     }
     console.log();
   }
 
   // ========================================
-  // PHASE 3: Upload to Platform
+  // PHASE 2: Upload to Platform
   // ========================================
   if (dryRun) {
     console.log(chalk.cyan("━━━ Dry Run Summary ━━━\n"));
     console.log(chalk.gray(`  Traces: ${traceFiles.length} files`));
-    console.log(chalk.gray(`  Docs: ${docFiles.length} files`));
     console.log(chalk.yellow("\nNo files uploaded (dry run).\n"));
     return;
   }
 
-  if (traceFiles.length === 0 && docFiles.length === 0) {
+  if (traceFiles.length === 0) {
     console.log(chalk.yellow("Nothing to sync.\n"));
     return;
   }
@@ -476,12 +306,6 @@ async function syncCommand(options = {}) {
   try {
     // Initialize sync job with manifest
     const manifest = {
-      docs: docFiles.map((d) => ({
-        relativePath: d.relativePath,
-        journeyKey: d.journeyKey,
-        contentHash: d.contentHash,
-        size: d.size,
-      })),
       traces: traceFiles.map((t) => ({
         filename: t.filename,
         journeyKey: t.journeyKey,
@@ -545,31 +369,6 @@ async function syncCommand(options = {}) {
       }
     }
 
-    // Upload docs to presigned URLs
-    let docsUploaded = 0;
-    for (const doc of docFiles) {
-      if (skippedFiles.includes(doc.contentHash)) {
-        if (verbose) {
-          console.log(chalk.gray(`    ⊘ ${doc.relativePath} (cached)`));
-        }
-        docsUploaded++;
-        continue;
-      }
-
-      const presigned = presignedUrls[doc.contentHash];
-      if (presigned) {
-        const content = fs.readFileSync(doc.path, "utf-8");
-        await apiClient.uploadToPresignedUrl(presigned.url, content, {
-          contentType: presigned.contentType || "text/markdown",
-          headers: { Authorization: `Bearer ${apiKey}` },
-        });
-        docsUploaded++;
-        if (verbose) {
-          console.log(chalk.gray(`    ✔ ${doc.relativePath}`));
-        }
-      }
-    }
-
     // Get git metadata
     const git = getGitMetadata();
 
@@ -579,12 +378,6 @@ async function syncCommand(options = {}) {
       {
         projectId,
         uploadResults: {
-          docs: docFiles.map((d) => ({
-            relativePath: d.relativePath,
-            journeyKey: d.journeyKey,
-            storageKey:
-              presignedUrls[d.contentHash]?.storageKey || d.contentHash,
-          })),
           traces: traceFiles.map((t) => ({
             filename: t.filename,
             journeyKey: t.journeyKey,
@@ -605,7 +398,6 @@ async function syncCommand(options = {}) {
 
     console.log(chalk.green(`\n✔ Sync complete!`));
     console.log(chalk.gray(`  Traces: ${tracesUploaded} uploaded`));
-    console.log(chalk.gray(`  Docs: ${docsUploaded} uploaded`));
     console.log();
     console.log(chalk.gray("  View status:"), chalk.cyan("reshot status"));
     console.log(chalk.gray("  Check drifts:"), chalk.cyan("reshot drifts\n"));

package/src/commands/ui.js

@@ -127,7 +127,7 @@ module.exports = async function uiCommand(options = {}) {
   } else {
     console.log(
       chalk.yellow("Info:"),
-      "No docsync.config.json found. Use the UI to pull config from platform or create a new one."
+      "No reshot.config.json found. Use the UI to pull config from platform or create a new one."
     );
   }
 

package/src/commands/variation.js

@@ -0,0 +1,194 @@
+// variation.js - Render variations from a captured DOM scene.
+//
+// Workflow:
+//   1. Resolve the source MHTML — either from the local .reshot/output tree
+//      or by downloading from the platform CDN (R2 public URL stored on
+//      the VisualVersion as domSceneS3Path).
+//   2. Open the MHTML in a fresh headless Chromium.
+//   3. Apply the variation manifest (JS mutations + viewport).
+//   4. Screenshot.
+//
+// This is the v1 marketing-operator entry point. The dashboard UI on top
+// of it is the next deliverable; the CLI exists so the loop is usable
+// the moment Phase 1 ships.
+//
+// Manifest format (JSON):
+//
+//   {
+//     "viewport": { "width": 1440, "height": 900, "deviceScaleFactor": 2 },
+//     "colorScheme": "light" | "dark",
+//     "mutations": [
+//       { "remove": "aside, nav" },                          // delete elements
+//       { "replaceText": [
+//           { "find": "ari@tempo.example", "with": "alice@acme.com" }
+//       ]},
+//       { "limit": { "selector": "tbody tr", "count": 5 } }, // keep first N
+//       { "setText": { "selector": "[data-author]", "text": "alice@acme.com" } },
+//       { "setAttr": { "selector": "img.logo", "name": "src", "value": "..." } },
+//       { "evaluate": "/* arbitrary page.evaluate script */" }
+//     ]
+//   }
+
+const fs = require("fs-extra");
+const path = require("node:path");
+const chalk = require("chalk");
+const { chromium } = require("playwright");
+
+/**
+ * Runs in the browser context. Pure function — no closures over Node
+ * state. `manifestJson` is the only input. Keep this synchronous; if
+ * the page has React rehydration scripts, give them time before calling
+ * by waiting in the caller, then apply mutations as the *last* DOM
+ * write so they aren't immediately overwritten.
+ */
+function applyMutationsInBrowser(manifestJson) {
+  const m = JSON.parse(manifestJson);
+  for (const mut of m.mutations || []) {
+    if (mut.remove) {
+      document.querySelectorAll(mut.remove).forEach((el) => el.remove());
+    }
+    if (mut.replaceText) {
+      for (const r of mut.replaceText) {
+        document.body.innerHTML = document.body.innerHTML
+          .split(r.find)
+          .join(r.with);
+      }
+    }
+    if (mut.limit) {
+      const els = document.querySelectorAll(mut.limit.selector);
+      els.forEach((el, i) => {
+        if (i >= mut.limit.count) el.remove();
+      });
+    }
+    if (mut.setText) {
+      document.querySelectorAll(mut.setText.selector).forEach((el) => {
+        el.textContent = mut.setText.text;
+      });
+    }
+    if (mut.setAttr) {
+      document.querySelectorAll(mut.setAttr.selector).forEach((el) => {
+        el.setAttribute(mut.setAttr.name, mut.setAttr.value);
+      });
+    }
+    if (mut.evaluate) {
+      // eslint-disable-next-line no-new-func
+      new Function(mut.evaluate)();
+    }
+  }
+}
+
+async function resolveSourceMhtml({ source, scenarioKey, captureKey, theme }) {
+  // 1) Explicit HTTPS URL → download to tmp, return local path. The local
+  // file MUST end in .mhtml — Chromium detects MHTML by extension, not by
+  // sniffing magic bytes, and our CDN serves under .related (the extension
+  // derived from multipart/related contentType).
+  if (source && /^https?:\/\//.test(source)) {
+    const tmpDir = path.join(require("os").tmpdir(), "reshot-variation");
+    fs.ensureDirSync(tmpDir);
+    const localPath = path.join(tmpDir, `${Date.now()}-variation.mhtml`);
+    const res = await fetch(source);
+    if (!res.ok) {
+      throw new Error(`Failed to fetch source MHTML: ${res.status} ${res.statusText}`);
+    }
+    const buf = Buffer.from(await res.arrayBuffer());
+    await fs.writeFile(localPath, buf);
+    return { kind: "remote", path: localPath };
+  }
+
+  // 2) Explicit local path
+  if (source && fs.existsSync(source)) {
+    return { kind: "local", path: source };
+  }
+
+  // 3) Look in .reshot/output tree
+  if (scenarioKey && captureKey) {
+    const root = path.join(process.cwd(), ".reshot", "output", scenarioKey);
+    if (fs.existsSync(root)) {
+      const runs = fs.readdirSync(root)
+        .filter((d) => /^\d{4}-\d{2}-\d{2}/.test(d))
+        .sort()
+        .reverse();
+      for (const run of runs) {
+        const candidate = path.join(
+          root,
+          run,
+          theme ? `theme-${theme}` : "default",
+          `${captureKey}.mhtml`,
+        );
+        if (fs.existsSync(candidate)) {
+          return { kind: "local", path: candidate };
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+async function variationCommand(options) {
+  const {
+    source,
+    scenario,
+    capture,
+    theme = "light",
+    manifest: manifestPath,
+    output,
+    headless = true,
+  } = options;
+
+  if (!manifestPath || !fs.existsSync(manifestPath)) {
+    throw new Error(`Manifest not found: ${manifestPath}`);
+  }
+  if (!output) {
+    throw new Error("--output <path.png> is required");
+  }
+
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+  const viewport = manifest.viewport || {
+    width: 1440,
+    height: 900,
+    deviceScaleFactor: 2,
+  };
+
+  console.log(chalk.cyan("🎨 Variation render"));
+  console.log(chalk.gray(`   manifest: ${manifestPath}`));
+
+  const sourceRef = await resolveSourceMhtml({
+    source,
+    scenarioKey: scenario,
+    captureKey: capture,
+    theme,
+  });
+  if (!sourceRef) {
+    throw new Error(
+      "Could not resolve source MHTML. Provide --source <path> or --scenario <key> --capture <key>.",
+    );
+  }
+  console.log(chalk.gray(`   source: ${sourceRef.path}`));
+
+  const browser = await chromium.launch({ headless });
+  const ctx = await browser.newContext({
+    viewport: { width: viewport.width, height: viewport.height },
+    deviceScaleFactor: viewport.deviceScaleFactor || 2,
+    colorScheme: manifest.colorScheme === "dark" ? "dark" : "light",
+    javaScriptEnabled: true,
+  });
+  const page = await ctx.newPage();
+
+  const fileUrl = `file://${path.resolve(sourceRef.path)}`;
+  await page.goto(fileUrl, { waitUntil: "domcontentloaded" });
+  await page.waitForLoadState("load");
+  await page.waitForTimeout(400);
+
+  if (manifest.mutations?.length) {
+    await page.evaluate(applyMutationsInBrowser, JSON.stringify(manifest));
+    await page.waitForTimeout(200);
+  }
+
+  fs.ensureDirSync(path.dirname(output));
+  await page.screenshot({ path: output });
+  console.log(chalk.green(`✔ Rendered: ${output}`));
+  await browser.close();
+}
+
+module.exports = variationCommand;

package/src/commands/verify-publish.js

@@ -0,0 +1,46 @@
+"use strict";
+
+const chalk = require("chalk");
+const { runVerifyPublish } = require("../lib/certification");
+
+async function verifyPublishCommand(options = {}) {
+  const scenarioKeys = options.scenarios
+    ? String(options.scenarios)
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean)
+    : null;
+
+  const report = await runVerifyPublish({
+    scenarioKeys,
+    tag: options.tag,
+    message: options.message,
+  });
+
+  if (options.json) {
+    console.log(JSON.stringify(report, null, 2));
+  } else {
+    console.log(chalk.cyan("\n📦 Publish Verification\n"));
+    console.log(
+      report.ok
+        ? chalk.green("  ✔ Publish, pull, and hosted delivery verified")
+        : chalk.red("  ✖ Publish verification failed"),
+    );
+    console.log(chalk.gray(`  Published: ${report.publishResult.assetsProcessed || 0}`));
+    console.log(chalk.gray(`  Pull repairs: ${report.pullResult.normalizationRepairs || 0}`));
+    const failedChecks = (report.deliveryChecks || []).filter((check) => !check.ok);
+    if (failedChecks.length > 0) {
+      for (const check of failedChecks.slice(0, 10)) {
+        console.log(chalk.red(`  ✖ ${check.scenario}/${check.assetKey}: ${check.reason}`));
+      }
+    }
+  }
+
+  if (!report.ok) {
+    process.exitCode = 1;
+  }
+
+  return report;
+}
+
+module.exports = verifyPublishCommand;