@reshotdev/screenshot 0.0.1-beta.13 → 0.0.1-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.15",
   "description": "Screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "playwright"
   ],
   "bin": {
-    "reshot": "./src/index.js"
+    "reshot": "src/index.js"
   },
   "files": [
     "src/",
@@ -72,4 +72,4 @@
     "build": "pnpm run ui:build",
     "pack:check": "npm pack --dry-run"
   }
-}
+}

package/src/commands/doctor-release.js

@@ -52,6 +52,13 @@ async function doctorReleaseCommand(options = {}) {
       }
     }
 
+    const advisories = report.summary?.advisories || [];
+    if (advisories.length > 0) {
+      for (const advisory of advisories.slice(0, 10)) {
+        console.log(chalk.yellow(`  ⚠ ${advisory.scope}: ${advisory.message}`));
+      }
+    }
+
     if (report.reportPath) {
       console.log(chalk.gray(`\n  Report: ${report.reportPath}`));
     }

package/src/commands/publish.js

@@ -595,6 +595,11 @@ function buildPublishMetadata({
 }) {
   const scenarioDefinition = buildScenarioDefinition(scenarioConfig);
 
+  // Only attach git metadata when a real commit hash is available. Sending
+  // empty git values when the repo has no HEAD causes the platform to reject
+  // the batch with an opaque 400.
+  const hasGit = !!(gitInfo && gitInfo.commitHash);
+
   return {
     projectId,
     publishSessionId, // Unique ID for this CLI publish run
@@ -609,10 +614,14 @@ function buildPublishMetadata({
     publish: {
       autoApprove,
     },
-    git: {
-      commitHash: gitInfo.commitHash,
-      commitMessage: gitInfo.commitMessage,
-    },
+    ...(hasGit
+      ? {
+          git: {
+            commitHash: gitInfo.commitHash,
+            commitMessage: gitInfo.commitMessage,
+          },
+        }
+      : {}),
     cli: {
       version: pkg.version,
       captureTimestamp: new Date().toISOString(),
@@ -620,6 +629,24 @@ function buildPublishMetadata({
   };
 }
 
+/**
+ * Read pixel dimensions from a captured image so the platform can store and
+ * expose them (used by `reshot pull` for CLS-safe `<img width height>`
+ * embedding). Returns nulls for non-images or on any error — never throws.
+ */
+async function getImageDimensions(filePath, contentType) {
+  if (!filePath || !(contentType || "").startsWith("image/")) {
+    return { width: null, height: null };
+  }
+  try {
+    const sharp = require("sharp");
+    const meta = await sharp(filePath).metadata();
+    return { width: meta.width ?? null, height: meta.height ?? null };
+  } catch {
+    return { width: null, height: null };
+  }
+}
+
 /**
  * Publish using transactional flow (direct R2 upload with presigned URLs)
  */
@@ -906,12 +933,18 @@ async function publishWithTransactionalFlow(
         assets: [],
       });
     }
+    const dimensions = await getImageDimensions(
+      result.file.path,
+      result.file.contentType,
+    );
     groupMap.get(groupKey).assets.push({
       key: result.file.key,
       s3Path: result.s3Path,
       hash: result.file.hash,
       visualKey: result.file.visualKey,
       size: result.file.size,
+      width: dimensions.width,
+      height: dimensions.height,
       contentType: result.file.contentType,
       // Include diff data from CLI analysis
       diffPercentage: result.file.diffData?.diffPercentage ?? null,
@@ -1005,7 +1038,15 @@ async function publishWithTransactionalFlow(
         viewUrl = batchResult.viewUrl;
       }
     } catch (error) {
-      console.log(chalk.red(`     ✖ Batch request failed: ${error.message}`));
+      // Surface the server's descriptive error body (e.g. a validation
+      // message) instead of just axios's opaque "Request failed with status
+      // code 400" — otherwise a 1-line fix turns into a support ticket.
+      const serverMsg =
+        error.response?.data?.error || error.response?.data?.message;
+      const detail = serverMsg
+        ? `${error.message} — ${serverMsg}`
+        : error.message;
+      console.log(chalk.red(`     ✖ Batch request failed: ${detail}`));
       failCount += chunk.length;
     }
   }
@@ -1285,14 +1326,28 @@ function getGitInfo() {
   try {
     const commitHash = execSync("git rev-parse HEAD", {
       encoding: "utf-8",
+      stdio: ["ignore", "pipe", "ignore"],
     }).trim();
     const commitMessage = execSync("git log -1 --pretty=%B", {
       encoding: "utf-8",
+      stdio: ["ignore", "pipe", "ignore"],
     }).trim();
-    return { commitHash, commitMessage };
+    return { commitHash, commitMessage, hasCommit: !!commitHash };
   } catch (error) {
-    console.warn(chalk.yellow("  ⚠ Could not read git information"));
-    return { commitHash: "", commitMessage: "" };
+    // No git HEAD — either not a git repo or a brand-new repo with no commits.
+    // Proceed WITHOUT git metadata rather than sending empty values that the
+    // platform rejects with an opaque 400 "Batch request failed".
+    console.log(
+      chalk.yellow(
+        "  ⚠ No git commit found — publishing without commit metadata.",
+      ),
+    );
+    console.log(
+      chalk.gray(
+        "    Tip: run `git commit` first to attach commit info to this publish.",
+      ),
+    );
+    return { commitHash: "", commitMessage: "", hasCommit: false };
   }
 }
 
@@ -1427,9 +1482,23 @@ async function publishCommand(options = {}) {
     };
 
     if (!releaseDoctor.ok) {
-      console.log(chalk.red("  ✖ Release doctor failed. Fix the reported issues before publishing."));
+      console.log(chalk.red("  ✖ Release doctor failed. Fix the issues below before publishing:\n"));
+      const blockingIssues = releaseDoctor.summary?.blockingIssues || [];
+      if (blockingIssues.length > 0) {
+        for (const issue of blockingIssues) {
+          const scope = issue.scope ? `${issue.scope}: ` : "";
+          console.log(chalk.red(`    ✖ ${scope}${issue.message}`));
+        }
+      } else {
+        console.log(chalk.red("    ✖ Release gate checks failed (see report for details)."));
+      }
+      const advisories = releaseDoctor.summary?.advisories || [];
+      for (const advisory of advisories) {
+        const scope = advisory.scope ? `${advisory.scope}: ` : "";
+        console.log(chalk.yellow(`    ⚠ ${scope}${advisory.message}`));
+      }
       if (releaseDoctor.reportPath) {
-        console.log(chalk.gray(`    Report: ${releaseDoctor.reportPath}`));
+        console.log(chalk.gray(`\n    Full report: ${releaseDoctor.reportPath}`));
       }
       if (!noExit) process.exit(1);
       return {

package/src/commands/setup-wizard.js

@@ -7,6 +7,16 @@ const fs = require("fs-extra");
 const path = require("path");
 const config = require("../lib/config");
 const { normalizeConfigContract } = require("../lib/target-contract");
+const { detectCI } = require("../lib/ci-detect");
+
+/**
+ * Whether the current process can prompt the user interactively.
+ * False in CI or when stdin is not a TTY (piped / redirected), where an
+ * inquirer prompt would throw `ERR_USE_AFTER_CLOSE: readline`.
+ */
+function isInteractive() {
+  return !!process.stdin.isTTY && !detectCI().isCI;
+}
 
 /**
  * Detect if this is a Git repository and if it's GitHub
@@ -545,7 +555,18 @@ async function setupWizard(options = {}) {
     return;
   }
 
-  // Offer to launch studio
+  // Offer to launch studio. In non-interactive environments (CI, piped stdin)
+  // an inquirer prompt throws `ERR_USE_AFTER_CLOSE: readline`, so skip the
+  // prompt and auto-answer the safe default (do NOT launch Studio).
+  if (!isInteractive()) {
+    console.log(
+      chalk.gray(
+        "Non-interactive environment detected — skipping Studio launch. Run `reshot studio` when you want the local UI.\n",
+      ),
+    );
+    return;
+  }
+
   const { launchStudio } = await inquirer.prompt([
     {
       type: "confirm",

package/src/index.js

@@ -35,7 +35,9 @@ program
   .action(async (options) => {
     try {
       const setupWizard = require("./commands/setup-wizard");
-      await setupWizard(options);
+      // Commander stores `--no-studio` as `options.studio === false`, not
+      // `options.noStudio`. Normalize it so the flag is honored end-to-end.
+      await setupWizard({ ...options, noStudio: options.studio === false });
     } catch (error) {
       console.error(chalk.red("Error:"), error.message);
       process.exit(1);

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,
@@ -299,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();
 

package/src/lib/capture-script-runner.js

@@ -1106,8 +1106,10 @@ async function runScenarioWithStepByStepCapture(scenario, options = {}) {
         // Malformed JSON — fall through and treat as non-empty so the warning still fires.
       }
     }
-    if (hasSession && !sessionIsEmpty) {
-      // Validate session freshness with graduated warnings
+    if (hasSession && !sessionIsEmpty && scenario.requiresAuth) {
+      // Validate session freshness with graduated warnings.
+      // Only relevant when this scenario actually requires auth — a leftover
+      // session file should not trigger staleness warnings for public scenarios.
       const sessionStats = fs.statSync(sessionPath);
       const sessionAgeHours =
         (Date.now() - sessionStats.mtimeMs) / (1000 * 60 * 60);
@@ -1938,8 +1940,10 @@ async function runScenarioWithVideoCapture(scenario, options = {}) {
   // Check for saved session state (auth cookies) - CRITICAL for authenticated scenarios
   const sessionPath = getDefaultSessionPath();
   const hasSession = fs.existsSync(sessionPath);
-  if (hasSession) {
-    // Validate session freshness
+  if (hasSession && scenario.requiresAuth) {
+    // Validate session freshness. Only relevant when this scenario actually
+    // requires auth — a leftover session file should not trigger staleness
+    // warnings for public scenarios.
     const sessionStats = fs.statSync(sessionPath);
     const sessionAgeHours = (Date.now() - sessionStats.mtimeMs) / (1000 * 60 * 60);
     if (sessionAgeHours > 24) {
@@ -1952,6 +1956,7 @@ async function runScenarioWithVideoCapture(scenario, options = {}) {
   }
 
   const { chromium } = require("playwright");
+  const { launchChromium } = require("./ensure-browser");
   // Use a unique temp directory for this recording to avoid conflicts
   const recordingId = `recording-${Date.now()}-${Math.random()
     .toString(36)
@@ -1978,7 +1983,7 @@ async function runScenarioWithVideoCapture(scenario, options = {}) {
     debug("Launching browser...");
 
     // Launch browser with video recording
-    browser = await chromium.launch(buildLaunchOptions({ headless }));
+    browser = await launchChromium(chromium, buildLaunchOptions({ headless }));
     debug("Browser launched successfully");
 
     // Build context options with variant support using universal injector

package/src/lib/ensure-browser.js

@@ -0,0 +1,147 @@
+// ensure-browser.js - Guarantees the correct Playwright browser build is present
+//
+// The CLI bundles a specific version of Playwright, which is pinned to an exact
+// browser build. Telling users to run a bare `npx playwright install` can resolve
+// a DIFFERENT Playwright version (and therefore a different browser build),
+// leaving the bundled launcher unable to find its executable. To make the build
+// match 1:1, we drive the BUNDLED Playwright's own installer.
+
+const path = require("path");
+const fs = require("fs");
+const { spawnSync } = require("child_process");
+
+// Matches Playwright's "missing executable" launch error.
+const MISSING_EXECUTABLE_RE = /Executable doesn't exist|please run the following command to download new browsers|browserType\.launch.*Executable/i;
+
+let installAttempted = false;
+
+/**
+ * Resolve the bundled Playwright's CLI entrypoint and version.
+ * We resolve relative to the package.json so the path matches whatever
+ * Playwright build this CLI actually depends on.
+ * @returns {{ cliPath: string|null, version: string|null }}
+ */
+function resolveBundledPlaywright() {
+  for (const pkg of ["playwright", "playwright-core"]) {
+    try {
+      const pkgJsonPath = require.resolve(`${pkg}/package.json`);
+      const cliPath = path.join(path.dirname(pkgJsonPath), "cli.js");
+      if (fs.existsSync(cliPath)) {
+        let version = null;
+        try {
+          version = require(pkgJsonPath).version;
+        } catch (_) {
+          /* ignore */
+        }
+        return { cliPath, version, pkg };
+      }
+    } catch (_) {
+      // try next package name
+    }
+  }
+  return { cliPath: null, version: null, pkg: null };
+}
+
+/**
+ * Build the EXACT install command that matches the bundled Playwright build.
+ * Used both to run the install and as the fallback message shown to the user.
+ * @returns {string}
+ */
+function getInstallCommandString() {
+  const { cliPath } = resolveBundledPlaywright();
+  if (cliPath) {
+    return `node "${cliPath}" install chromium`;
+  }
+  return "npx playwright install chromium";
+}
+
+/**
+ * Install the chromium browser using the BUNDLED Playwright's own installer,
+ * so the browser build can never mismatch the bundled Playwright version.
+ * @param {(msg: string) => void} logger
+ * @returns {boolean} whether the install command ran successfully
+ */
+function installBundledChromium(logger = console.log) {
+  const { cliPath, version } = resolveBundledPlaywright();
+  if (!cliPath) {
+    return false;
+  }
+
+  logger(
+    `\n⬇️  Installing the Chromium build for Playwright${
+      version ? ` ${version}` : ""
+    } (one-time setup)...`
+  );
+
+  // Install both the headless shell and full chromium so any launch path works.
+  const result = spawnSync(
+    process.execPath,
+    [cliPath, "install", "chromium", "chromium-headless-shell"],
+    { stdio: "inherit" }
+  );
+
+  if (result.error || result.status !== 0) {
+    logger(
+      `\n⚠ Automatic browser install failed. Please run this command manually:\n    ${getInstallCommandString()}\n`
+    );
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Determine whether an error is Playwright's "missing browser executable" error.
+ * @param {Error} err
+ * @returns {boolean}
+ */
+function isMissingExecutableError(err) {
+  return !!err && MISSING_EXECUTABLE_RE.test(err.message || "");
+}
+
+/**
+ * Launch chromium, auto-installing the matching browser build on first run if
+ * the executable is missing. Retries the launch exactly once after installing.
+ *
+ * @param {import('playwright').BrowserType} chromium - the bundled chromium type
+ * @param {Object} launchOptions - options passed to chromium.launch()
+ * @param {(msg: string) => void} [logger]
+ * @returns {Promise<import('playwright').Browser>}
+ */
+async function launchChromium(chromium, launchOptions = {}, logger = console.log) {
+  try {
+    return await chromium.launch(launchOptions);
+  } catch (err) {
+    if (!isMissingExecutableError(err)) {
+      throw err;
+    }
+
+    // Only attempt the auto-install once per process to avoid loops.
+    if (installAttempted) {
+      const e = new Error(
+        `${err.message}\n\nThe Chromium build for this CLI is missing. Run:\n    ${getInstallCommandString()}`
+      );
+      throw e;
+    }
+    installAttempted = true;
+
+    const installed = installBundledChromium(logger);
+    if (!installed) {
+      const e = new Error(
+        `${err.message}\n\nThe Chromium build for this CLI is missing. Run:\n    ${getInstallCommandString()}`
+      );
+      throw e;
+    }
+
+    // Retry once now that the matching browser build is installed.
+    return await chromium.launch(launchOptions);
+  }
+}
+
+module.exports = {
+  launchChromium,
+  installBundledChromium,
+  isMissingExecutableError,
+  getInstallCommandString,
+  resolveBundledPlaywright,
+};

package/src/lib/release-doctor.js

@@ -275,13 +275,21 @@ async function runReleaseDoctor(options = {}) {
   for (const issue of targetDoctor.summary?.advisories || []) {
     advisories.push({ scope: "target-doctor", ...issue });
   }
-  if (!docsAssetMap.skipped) {
+  // A stale/mismatched docs asset map (e.g. src/data/reshot-assets.json left
+  // behind by an earlier `reshot pull`) describes a generated artifact, not the
+  // config being published. It must NOT hard-block a publish of the current
+  // config — surface it as an advisory with a concrete remedy instead.
+  if (!docsAssetMap.skipped && !docsAssetMap.ok) {
+    const remedy =
+      docsAssetMap.path
+        ? `Re-run \`reshot pull\` to regenerate it, or delete ${docsAssetMap.path}.`
+        : "Re-run `reshot pull` to regenerate it, or delete the stale src/data/reshot-assets.json.";
     for (const issue of docsAssetMap.issues) {
-      blockingIssues.push({ scope: "docs-asset-map", message: issue });
+      advisories.push({ scope: "docs-asset-map", message: `${issue} ${remedy}` });
     }
   }
 
-  const ok = preflight.ok && targetDoctor.ok && (docsAssetMap.skipped || docsAssetMap.ok);
+  const ok = preflight.ok && targetDoctor.ok;
   const report = {
     type: "ReleaseDoctorReport",
     stage: "doctor-release",