@reshotdev/screenshot 0.0.1-beta.6 → 0.0.1-beta.8

package/README.md

@@ -76,7 +76,6 @@ Create `reshot.config.json` in your project root:
 | `reshot record [title]` | Interactive recording via Chrome DevTools | `--browser`, `--url`, `--port` |
 | `reshot sync` | Upload traces/docs to Reshot platform | `--trace-dir`, `--dry-run` |
 | `reshot studio` | Launch web management UI | `--port`, `--no-open` |
-| `reshot validate` | Check config and bindings | `--strict`, `--fix` |
 | `reshot status` | View project status and sync history | `--jobs`, `--drifts`, `--json` |
 | `reshot publish` | Upload assets with versioning | `--tag`, `--message`, `--dry-run` |
 | `reshot pull` | Generate asset map for builds | `--format json\|ts\|csv`, `--output`, `--status` |
@@ -225,12 +224,19 @@ The recorded scenario is appended to `reshot.config.json` automatically.
 
 ## Authentication
 
-### Storage State (from Playwright)
+### Storage State
+
+The CLI stores browser session state at `~/.reshot/session-state.json` (global).
+This is automatically captured when you run `reshot record`.
+
+To manually generate it:
 
 ```bash
-npx playwright codegen http://localhost:3000 --save-storage=.reshot/auth-state.json
+npx playwright codegen http://localhost:3000 --save-storage=$HOME/.reshot/session-state.json
 ```
 
+Or reference a project-local path in your config:
+
 ```json
 {
   "storageStatePath": ".reshot/auth-state.json"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "description": "CI/CD screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",

package/src/commands/auth.js

@@ -217,7 +217,7 @@ async function authCommand() {
     await verifyApiKey(apiBaseUrl, status.project.apiKey);
 
     // Derive platformUrl from apiBaseUrl (remove /api suffix)
-    const platformUrl = apiBaseUrl.replace(/\/api\/?$/, '') || 'http://localhost:3000';
+    const platformUrl = apiBaseUrl.replace(/\/api\/?$/, '') || 'https://reshot.dev';
 
     writeSettings({
       projectId: status.project.id,

package/src/commands/publish.js

@@ -578,6 +578,7 @@ async function publishWithTransactionalFlow(
   docSyncConfig,
   gitInfo,
   diffManifests = null,
+  { autoApprove = false } = {},
 ) {
   console.log(
     chalk.cyan("  🚀 Using transactional upload (direct to R2)...\n"),
@@ -807,7 +808,11 @@ async function publishWithTransactionalFlow(
     });
   }
 
-  // Commit each group
+  // Build all commits for batch request
+  // Vercel serverless functions have ~60s timeout; keep batches small enough to complete
+  const MAX_BATCH_SIZE = 25;
+  const commits = [];
+
   for (const { group, scenarioConfig, assets } of groupMap.values()) {
     const contextObj = buildContextForVariation(
       scenarioConfig,
@@ -824,38 +829,65 @@ async function publishWithTransactionalFlow(
     });
 
     if (metadata.cli) {
-      metadata.cli.features = ["steps", "transactional"];
+      metadata.cli.features = ["steps", "transactional", "batch"];
+    }
+
+    commits.push({ metadata, assets });
+  }
+
+  // Send in batches
+  console.log(
+    chalk.gray(`  Committing ${commits.length} scenario(s) to platform...`),
+  );
+
+  const totalBatches = Math.ceil(commits.length / MAX_BATCH_SIZE);
+  for (let i = 0; i < commits.length; i += MAX_BATCH_SIZE) {
+    const chunk = commits.slice(i, i + MAX_BATCH_SIZE);
+    const batchNum = Math.floor(i / MAX_BATCH_SIZE) + 1;
+    if (totalBatches > 1) {
+      console.log(chalk.gray(`  Batch ${batchNum}/${totalBatches}...`));
     }
 
     try {
-      const result = await apiClient.publishTransactional(apiKey, {
-        metadata,
-        assets,
+      const rawBatchResult = await apiClient.publishBatch(apiKey, {
+        commits: chunk,
+        autoApprove: autoApprove || false,
       });
+      // Unwrap API envelope: response may be { data: { results, ... } } or { results, ... }
+      const batchResult = rawBatchResult.data || rawBatchResult;
 
-      const processedCount = result?.assetsProcessed ?? assets.length;
-      console.log(
-        chalk.green(
-          `     ✔ Committed "${group.scenarioKey}" (${group.variationSlug}): ${processedCount} asset(s)`,
-        ),
-      );
-      successCount += processedCount;
+      for (const r of batchResult.results || []) {
+        if (r.status === "ok") {
+          const count = r.assetsProcessed || 0;
+          console.log(
+            chalk.green(
+              `     ✔ Committed "${r.scenario}" (${r.context}): ${count} asset(s)`,
+            ),
+          );
+          successCount += count;
 
-      // Handle skipped assets (visual limit)
-      if (result?.skippedAssets?.length > 0) {
-        for (const key of result.skippedAssets) {
-          console.log(chalk.yellow(`     ⚠ Skipped "${key}" (plan limit reached)`));
+          if (r.skippedAssets?.length > 0) {
+            for (const key of r.skippedAssets) {
+              console.log(chalk.yellow(`     ⚠ Skipped "${key}" (plan limit reached)`));
+            }
+            skippedCount += r.skippedAssets.length;
+          }
+        } else {
+          console.log(
+            chalk.red(
+              `     ✖ "${r.scenario}" (${r.context}): ${r.error || "Unknown error"}`,
+            ),
+          );
+          failCount++;
         }
-        skippedCount += result.skippedAssets.length;
       }
 
-      // Capture viewUrl from first successful response
-      if (!viewUrl && result?.viewUrl) {
-        viewUrl = result.viewUrl;
+      if (!viewUrl && batchResult.viewUrl) {
+        viewUrl = batchResult.viewUrl;
       }
     } catch (error) {
-      console.log(chalk.red(`     ✖ Commit failed: ${error.message}`));
-      failCount += assets.length;
+      console.log(chalk.red(`     ✖ Batch request failed: ${error.message}`));
+      failCount += chunk.length;
     }
   }
 
@@ -1204,7 +1236,7 @@ function parseFrontmatter(content) {
 }
 
 async function publishCommand(options = {}) {
-  const { tag, message, dryRun, force, video, outputJson } = options;
+  const { tag, message, dryRun, force, video, outputJson, autoApprove } = options;
 
   // Result tracking for --output-json and programmatic callers
   const publishResult = {
@@ -1230,6 +1262,10 @@ async function publishCommand(options = {}) {
     console.log(chalk.yellow("🔍 DRY RUN MODE - No assets will be uploaded\n"));
   }
 
+  if (autoApprove) {
+    console.log(chalk.cyan("  ✅ Auto-approve enabled: visuals will be approved immediately\n"));
+  }
+
   // Read config + settings (if available)
   const settings = readSettingsSafe();
   let docSyncConfig = null;
@@ -1413,6 +1449,7 @@ async function publishCommand(options = {}) {
               docSyncConfig,
               { commitHash, commitMessage, publishSessionId },
               diffManifests,
+              { autoApprove },
             );
             successCount = result.successCount;
             failCount = result.failCount;

package/src/commands/pull.js

@@ -142,6 +142,19 @@ async function pullCommand(options = {}) {
     process.exit(1);
   }
 
+  if (settings.projectId && projectId !== settings.projectId) {
+    console.warn(
+      chalk.yellow(
+        `  ⚠ Project ID mismatch: config uses ${projectId}, but authenticated project is ${settings.projectId}.`
+      )
+    );
+    console.warn(
+      chalk.yellow(
+        `    This will cause auth failures. Run 'reshot setup --force' to re-link.\n`
+      )
+    );
+  }
+
   try {
     // Fetch the asset map from the API
     console.log(chalk.gray(`  Fetching assets for project: ${projectId}`));
@@ -163,7 +176,18 @@ async function pullCommand(options = {}) {
       0
     );
 
-    console.log(chalk.green(`  ✓ Fetched ${assetCount} visuals\n`));
+    if (assetCount === 0) {
+      console.log(chalk.yellow(`  ⚠ Fetched 0 visuals.\n`));
+      console.log(chalk.gray(`  Possible reasons:`));
+      if (status === "approved") {
+        console.log(chalk.gray(`    • No visuals approved yet. Try: reshot pull --status all`));
+      }
+      console.log(chalk.gray(`    • No visuals published. Run: reshot publish`));
+      console.log(chalk.gray(`    • Wrong project. Config uses: ${projectId}`));
+      console.log(chalk.gray(`    • Check: ${settings.platformUrl || "https://reshot.dev"}\n`));
+    } else {
+      console.log(chalk.green(`  ✓ Fetched ${assetCount} visuals\n`));
+    }
 
     // Determine output path
     let outputPath = output;

package/src/commands/setup.js

@@ -2,6 +2,7 @@
 const chalk = require("chalk");
 const oraModule = require("ora");
 const ora = oraModule.default || oraModule;
+const { execSync } = require("child_process");
 
 const {
   writeSettings,
@@ -100,10 +101,14 @@ async function setupCommand(options = {}) {
   if (hasConfig && !force) {
     console.log(chalk.green("✔ Configuration found:"), chalk.cyan("reshot.config.json"));
   } else if (hasConfig && force) {
-    console.log(chalk.yellow("⚠ Overwriting existing reshot.config.json..."));
-    const newConfig = createDefaultConfig(existingSettings);
-    writeConfig(newConfig);
-    console.log(chalk.green("✔ Configuration updated"));
+    // Patch projectId in existing config instead of wiping scenarios
+    const fs = require("fs");
+    const path = require("path");
+    const configPath = path.join(process.cwd(), "reshot.config.json");
+    const existingConfig = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+    existingConfig.projectId = existingSettings.projectId;
+    fs.writeFileSync(configPath, JSON.stringify(existingConfig, null, 2) + "\n");
+    console.log(chalk.green("✔ Configuration updated (projectId synced)"));
   } else {
     // No config - create it
     console.log(chalk.gray("Creating reshot.config.json..."));
@@ -112,6 +117,29 @@ async function setupCommand(options = {}) {
     console.log(chalk.green("✔ Configuration created:"), chalk.cyan("reshot.config.json"));
   }
 
+  // Step 3.5: Ensure @reshotdev/screenshot is in devDependencies
+  const fs = require("fs");
+  const path = require("path");
+  const pkgJsonPath = path.join(process.cwd(), "package.json");
+  if (fs.existsSync(pkgJsonPath)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+    const hasDep =
+      pkgJson.devDependencies?.["@reshotdev/screenshot"] ||
+      pkgJson.dependencies?.["@reshotdev/screenshot"];
+    if (!hasDep) {
+      console.log(chalk.gray("  Adding @reshotdev/screenshot to devDependencies..."));
+      const usePnpm = fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml"));
+      const useYarn = fs.existsSync(path.join(process.cwd(), "yarn.lock"));
+      const cmd = usePnpm ? "pnpm add -D" : useYarn ? "yarn add -D" : "npm install -D";
+      try {
+        execSync(`${cmd} @reshotdev/screenshot`, { stdio: "inherit" });
+        console.log(chalk.green("  ✔ Added @reshotdev/screenshot to devDependencies"));
+      } catch {
+        console.log(chalk.yellow("  ⚠ Could not auto-install. Run manually: " + cmd + " @reshotdev/screenshot"));
+      }
+    }
+  }
+
   // Step 4: Success summary
   console.log(chalk.green("\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"));
   console.log(chalk.green.bold("✔ Project initialized successfully!"));

package/src/index.js

@@ -160,12 +160,28 @@ program
   .option("--browser", "Launch Chrome with remote debugging before recording")
   .option("-p, --port <port>", "Chrome debugging port (default: 9222)")
   .option("--url <url>", "URL to open when launching browser")
+  .option("--refresh-session", "Only refresh the auth session (no recording prompts)")
   .option("--debug", "Enable verbose debug logging")
   .action(async (title, options) => {
     if (options.debug) {
       process.env.RESHOT_DEBUG = "1";
     }
     try {
+      // If --refresh-session, just sync the session and exit
+      if (options.refreshSession) {
+        const { autoSyncSessionFromCDP, getDefaultSessionPath } = require("./lib/record-cdp");
+        const sessionPath = getDefaultSessionPath();
+        console.log(chalk.gray("  Syncing session from active browser..."));
+        const synced = await autoSyncSessionFromCDP(sessionPath);
+        if (synced) {
+          console.log(chalk.green("  ✔ Session refreshed at " + sessionPath));
+        } else {
+          console.log(chalk.yellow("  ⚠ No active CDP browser found. Launch Chrome with remote debugging first:"));
+          console.log(chalk.gray("    reshot record --browser --refresh-session"));
+        }
+        return;
+      }
+
       // If --browser flag, launch Chrome first
       if (options.browser) {
         const chromeCommand = require("./commands/chrome");
@@ -221,12 +237,14 @@ program
   .option("--dry-run", "Preview without uploading")
   .option("-f, --force", "Skip confirmation prompts")
   .option("--output-json", "Write structured result to .reshot/output/publish-result.json")
+  .option("--auto-approve", "Automatically approve published visuals (skip review queue)")
   .action(async (options) => {
     try {
       const publishCommand = require("./commands/publish");
       await publishCommand({
         ...options,
         outputJson: options.outputJson,
+        autoApprove: options.autoApprove,
       });
     } catch (error) {
       console.error(chalk.red("Error:"), error.message);

package/src/lib/api-client.js

@@ -3,15 +3,35 @@ const axios = require("axios");
 const FormData = require("form-data");
 const fs = require("fs");
 
-const baseUrl =
-  process.env.RESHOT_API_BASE_URL ||
-  process.env.RESHOT_API_BASE_URL ||
-  "http://localhost:3000/api";
+const PRODUCTION_API_URL = "https://reshot.dev/api";
 
 function getApiBaseUrl() {
-  return baseUrl;
+  // 1. Explicit env var override (for CI or local dev)
+  if (process.env.RESHOT_API_BASE_URL) {
+    return process.env.RESHOT_API_BASE_URL;
+  }
+
+  // 2. Read from settings.json (set during auth/setup)
+  try {
+    const path = require("path");
+    const settingsPath = path.join(process.cwd(), ".reshot", "settings.json");
+    if (fs.existsSync(settingsPath)) {
+      const settings = JSON.parse(fs.readFileSync(settingsPath, "utf8"));
+      if (settings.platformUrl) {
+        return settings.platformUrl.replace(/\/+$/, "") + "/api";
+      }
+    }
+  } catch {
+    // Settings don't exist yet (first auth) — fall through to default
+  }
+
+  // 3. Default to production
+  return PRODUCTION_API_URL;
 }
 
+// Resolved once at module load — all API calls use this
+const baseUrl = getApiBaseUrl();
+
 /**
  * Sleep helper for retry delays
  */
@@ -586,6 +606,30 @@ async function publishTransactional(apiKey, payload) {
   return response.data;
 }
 
+/**
+ * Batch publish metadata for multiple scenarios in one request
+ * @param {string} apiKey - API key for authentication
+ * @param {Object} payload - { commits: Array<{ metadata, assets }> }
+ * @returns {Promise<Object>}
+ */
+async function publishBatch(apiKey, payload) {
+  if (!apiKey) {
+    throw new Error("API key is required to publish");
+  }
+
+  const response = await axios.post(`${baseUrl}/v1/publish/batch`, payload, {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    timeout: 60000,
+    maxBodyLength: Infinity,
+    maxContentLength: Infinity,
+  });
+
+  return response.data;
+}
+
 /**
  * Check which hashes already exist in storage (for deduplication)
  * @param {string} apiKey - API key for authentication
@@ -800,6 +844,7 @@ module.exports = {
   signAssets,
   uploadToPresignedUrl,
   publishTransactional,
+  publishBatch,
   checkExistingHashes,
   // Diffing support
   getBaselines,

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

@@ -303,7 +303,18 @@ async function preflightAuthCheck(baseUrl, options = {}) {
       };
     }
 
-    console.log(chalk.green("  ✔ Auth pre-flight check passed"));
+    // Save refreshed session back so scenarios use fresh cookies
+    if (storageStatePath && engine.context) {
+      try {
+        const refreshedState = await engine.context.storageState();
+        fs.writeFileSync(storageStatePath, JSON.stringify(refreshedState, null, 2));
+        console.log(chalk.green("  ✔ Auth pre-flight check passed (session refreshed)"));
+      } catch (_saveErr) {
+        console.log(chalk.green("  ✔ Auth pre-flight check passed"));
+      }
+    } else {
+      console.log(chalk.green("  ✔ Auth pre-flight check passed"));
+    }
     return { ok: true };
   } catch (e) {
     // If the error is an auth redirect thrown by the engine, handle gracefully
@@ -1133,11 +1144,25 @@ async function runScenarioWithStepByStepCapture(scenario, options = {}) {
               `Page error detected: ${errMsg}. The page rendered an error UI instead of expected content.`
             );
           } else if (retryResult.status === "timeout") {
+            const currentUrl = engine.page.url();
             console.log(
               chalk.yellow(
-                `  ⚠ Ready selector not found after ${retryResult.attempts} attempt(s), proceeding with current state`
+                `  ⚠ Ready selector not found after ${retryResult.attempts} attempt(s): ${readySelector}`
+              )
+            );
+            console.log(
+              chalk.gray(`    URL: ${currentUrl}`)
+            );
+            console.log(
+              chalk.gray(
+                `    Hint: The page loaded but this selector does not exist. Check your readySelector in reshot.config.json.`
               )
             );
+            throw new Error(
+              `Scenario readySelector "${readySelector}" not found after ${retryResult.attempts} attempt(s). ` +
+              `The page loaded at ${currentUrl} but the selector does not exist. ` +
+              `Update readySelector in reshot.config.json or remove it to skip this check.`
+            );
           } else if (retryResult.attempts > 1) {
             console.log(
               chalk.green(
@@ -1296,6 +1321,12 @@ async function runScenarioWithStepByStepCapture(scenario, options = {}) {
                 `    Hint: If data isn't loading, run 'reshot record' to refresh your session`
               )
             );
+            failedSteps.push({
+              stepIndex: stepIndex + 1,
+              action: "waitFor",
+              target: params.target,
+              error: errMsg,
+            });
           }
         } else if (waitResult.status === "timeout") {
           if (!isOptional) {
@@ -1309,9 +1340,14 @@ async function runScenarioWithStepByStepCapture(scenario, options = {}) {
                 `    Hint: If content isn't loading, run 'reshot record' to refresh your session`
               )
             );
+            failedSteps.push({
+              stepIndex: stepIndex + 1,
+              action: "waitFor",
+              target: params.target,
+              error: `Element not found within ${waitTimeout}ms`,
+            });
           }
         }
-        // Continue with next steps - the scenario may still capture partial state
         continue;
       }
 
@@ -2185,8 +2221,16 @@ async function runScenarioWithVideoCapture(scenario, options = {}) {
           });
         } catch (e) {
           if (!isOptional) {
+            const currentUrl = page.url();
+            console.warn(
+              chalk.yellow(`    ⚠ Element not found: ${params.target}`)
+            );
+            console.warn(chalk.gray(`      URL: ${currentUrl}`));
+            console.warn(chalk.gray(`      Timeout: ${waitTimeout}ms`));
             console.warn(
-              chalk.yellow(`    ⚠ Wait for ${params.target} timed out`)
+              chalk.gray(
+                `      Hint: Verify the selector exists on the page. Run 'reshot record' to inspect.`
+              )
             );
           }
         }

package/src/lib/ui-api.js

@@ -43,17 +43,16 @@ const {
  * @returns {string} Platform URL
  */
 function getPlatformUrl(settings) {
-  // Priority: settings.platformUrl > env var > localhost default
+  // Priority: settings.platformUrl > env var > production default
   if (settings?.platformUrl) {
     return settings.platformUrl;
   }
-  const envUrl =
-    process.env.RESHOT_API_BASE_URL || process.env.RESHOT_API_BASE_URL;
+  const envUrl = process.env.RESHOT_API_BASE_URL;
   if (envUrl) {
     // Remove /api suffix if present to get platform URL
     return envUrl.replace(/\/api\/?$/, "");
   }
-  return "http://localhost:3000";
+  return "https://reshot.dev";
 }
 
 /**
@@ -2852,7 +2851,7 @@ function attachApiRoutes(app, context) {
         const apiBaseUrl = getApiBaseUrl();
         // Derive platformUrl from apiBaseUrl (remove /api suffix)
         const platformUrl =
-          apiBaseUrl.replace(/\/api\/?$/, "") || "http://localhost:3000";
+          apiBaseUrl.replace(/\/api\/?$/, "") || "https://reshot.dev";
 
         config.writeSettings({
           projectId: project.id,