@reshotdev/screenshot 0.0.1-beta.7 → 0.0.1-beta.9

package/README.md

@@ -21,13 +21,28 @@ Requires Node.js >= 18. Playwright browsers are installed automatically on first
 # 1. Interactive setup wizard
 reshot setup
 
-# 2. Capture screenshots from your config
+# 2. Start your app with a production-like local server
+npm run build
+npm run start
+
+# 3. Capture screenshots from your config
 reshot run
 
-# 3. Review captures in the web UI
+# 4. Review captures in the web UI
 reshot studio
+
+# 5. Publish when you want hosted assets
+reshot publish
 ```
 
+For launch-grade reliability, do not treat `next dev` as the supported capture
+runtime. Use a production-like local server and see the
+[Supported Environments guide](https://reshot.dev/docs/cli/getting-started/supported-environments).
+
+## Certified Targets
+
+This release adds a **Certified Targets** contract for apps that need stronger guarantees than ad hoc capture. Certified targets declare their readiness selectors, auth mode, required routes, and expected published assets in `reshot.config.json`, then pass the full doctor/capture/publish/delivery pipeline before release.
+
 ## Configuration
 
 Create `reshot.config.json` in your project root:
@@ -35,6 +50,18 @@ Create `reshot.config.json` in your project root:
 ```json
 {
   "baseUrl": "http://localhost:3000",
+  "target": {
+    "key": "docs-app",
+    "displayName": "Docs App",
+    "tier": "certified",
+    "owner": "Docs Team",
+    "baseUrl": "http://localhost:3000",
+    "captureSafe": false,
+    "supportedLocalCommand": "npm run build && npm run start",
+    "defaultAuthMode": "fixture",
+    "requiredEnv": ["PROJECT_ID"],
+    "certificationScenarioKeys": ["dashboard"]
+  },
   "assetDir": ".reshot/output",
   "concurrency": 2,
   "viewport": { "width": 1280, "height": 720 },
@@ -55,6 +82,15 @@ Create `reshot.config.json` in your project root:
       "name": "Dashboard",
       "url": "/dashboard",
       "requiresAuth": true,
+      "captureClass": "fixture-auth",
+      "ready": {
+        "selector": "[data-loaded='true']",
+        "expression": "window.__APP_READY__ === true"
+      },
+      "requiredRoutes": ["/dashboard"],
+      "requiredSelectors": ["[data-testid='dashboard-content']"],
+      "expectedArtifacts": ["overview", "analytics"],
+      "publishPolicy": "required",
       "readySelector": "[data-loaded='true']",
       "steps": [
         { "action": "screenshot", "key": "overview", "description": "Dashboard overview" },
@@ -76,15 +112,30 @@ 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` |
+| `reshot doctor target` | Audit target routes, readiness, and auth contract | `--scenarios`, `--json` |
+| `reshot verify publish` | Validate publish, pull/export, and hosted delivery | `--scenarios`, `--tag`, `--json` |
+| `reshot certify` | Run the full certified-target pipeline | `--scenarios`, `--tag`, `--json` |
 | `reshot drifts` | Manage visual drift notifications | `approve`, `reject`, `ignore`, `approve-all` |
 | `reshot import-tests` | Import Playwright tests as scenarios | `--dry-run`, `--no-interactive` |
 | `reshot ci setup` | Generate CI/CD workflow files | — |
 | `reshot ci run` | Capture + publish in one step (CI) | `--tag`, `--no-publish`, `--dry-run` |
 
+## Certification Workflow
+
+Use these commands when a target app needs release-grade verification:
+
+```bash
+reshot doctor target
+reshot run --scenarios dashboard
+reshot verify publish --tag v1.0.0
+reshot certify --tag v1.0.0
+```
+
+Certification reports are written to `.reshot/reports/certification.json`.
+
 ## Step Types
 
 Steps define a sequence of browser actions within a scenario:
@@ -225,12 +276,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.7",
+  "version": "0.0.1-beta.9",
   "description": "CI/CD screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",

package/src/commands/auth.js

@@ -14,6 +14,7 @@ const pkg = require("../../package.json");
 
 const DEFAULT_CALLBACK_PORT = 3721;
 const POLL_INTERVAL_MS = 2000;
+const DEFAULT_AUTH_TIMEOUT_MS = 120000;
 
 const unwrapResponse = (payload) => {
   if (!payload) {
@@ -95,15 +96,27 @@ function startLocalStatusServer(requestedPort, options = {}) {
   });
 }
 
-async function waitForCompletion(apiBaseUrl, authToken, expiresAtIso) {
+async function waitForCompletion(
+  apiBaseUrl,
+  authToken,
+  expiresAtIso,
+  options = {},
+) {
+  const httpClient = options.httpClient || axios;
+  const spinnerFactory = options.spinnerFactory || ora;
   const expiresAt = expiresAtIso
     ? Date.parse(expiresAtIso)
     : Date.now() + 5 * 60 * 1000;
-  const statusSpinner = ora("Waiting for browser authentication…").start();
+  const timeoutMs = Math.max(
+    1,
+    Number(options.timeoutMs || DEFAULT_AUTH_TIMEOUT_MS),
+  );
+  const deadline = Math.min(expiresAt, Date.now() + timeoutMs);
+  const statusSpinner = spinnerFactory("Waiting for browser authentication…").start();
 
   try {
-    while (Date.now() < expiresAt) {
-      const statusResponse = await axios.get(`${apiBaseUrl}/auth/cli/status`, {
+    while (Date.now() < deadline) {
+      const statusResponse = await httpClient.get(`${apiBaseUrl}/auth/cli/status`, {
         params: { token: authToken },
       });
       const payload = unwrapResponse(statusResponse.data);
@@ -127,23 +140,56 @@ async function waitForCompletion(apiBaseUrl, authToken, expiresAtIso) {
       await wait(POLL_INTERVAL_MS);
     }
 
-    throw new Error("Authentication timed out before completion.");
+    throw new Error(
+      "Authentication timed out before completion. Re-run `reshot auth` and use the printed auth URL if the browser handoff stalls.",
+    );
   } catch (error) {
     statusSpinner.fail("Browser authentication failed");
     throw error;
   }
 }
 
-async function verifyApiKey(apiBaseUrl, apiKey) {
-  await axios.get(`${apiBaseUrl}/auth/cli/verify`, {
+async function verifyApiKey(apiBaseUrl, apiKey, httpClient = axios) {
+  await httpClient.get(`${apiBaseUrl}/auth/cli/verify`, {
     headers: {
       Authorization: `Bearer ${apiKey}`,
     },
   });
 }
 
-async function authCommand() {
-  const apiBaseUrl = getApiBaseUrl();
+async function authCommand(options = {}) {
+  // Support non-interactive auth via environment variables (for CI/CD)
+  const envApiKey = process.env.RESHOT_API_KEY;
+  const envProjectId = process.env.RESHOT_PROJECT_ID;
+  const httpClient = options.httpClient || axios;
+  const openFn = options.openFn || open;
+  const writeSettingsFn = options.writeSettingsFn || writeSettings;
+  const startLocalStatusServerFn =
+    options.startLocalStatusServerFn || startLocalStatusServer;
+  const waitForCompletionFn = options.waitForCompletionFn || waitForCompletion;
+  const verifyApiKeyFn = options.verifyApiKeyFn || verifyApiKey;
+  const spinnerFactory = options.spinnerFactory || ora;
+  const timeoutMs = Number(options.timeoutMs || DEFAULT_AUTH_TIMEOUT_MS);
+  if (envApiKey && envProjectId) {
+    const platformUrl = process.env.RESHOT_PLATFORM_URL || "https://reshot.dev";
+    writeSettingsFn({
+      projectId: envProjectId,
+      apiKey: envApiKey,
+      platformUrl,
+      linkedAt: new Date().toISOString(),
+      cliVersion: pkg.version,
+    });
+    console.log(chalk.green("✔ Authenticated via environment variables"));
+    console.log(chalk.gray(`  Project: ${envProjectId}`));
+    console.log(chalk.gray(`  Platform: ${platformUrl}`));
+    return {
+      mode: "cloud-connected",
+      projectId: envProjectId,
+      platformUrl,
+    };
+  }
+
+  const apiBaseUrl = options.apiBaseUrl || getApiBaseUrl();
   const explicitPortEnv =
     process.env.RESHOT_CLI_CALLBACK_PORT || "";
   const basePort = parseInt(explicitPortEnv || `${DEFAULT_CALLBACK_PORT}`, 10);
@@ -151,13 +197,13 @@ async function authCommand() {
 
   let localServer;
   let callbackPort;
-  const spinner = ora("Requesting authentication session…").start();
+  const spinner = spinnerFactory("Requesting authentication session…").start();
 
   try {
     if (hasExplicitPort) {
       // Respect an explicitly configured port and fail fast with a clear error
       // if it is not available.
-      const { server, port } = await startLocalStatusServer(basePort, {
+      const { server, port } = await startLocalStatusServerFn(basePort, {
         explicit: true,
       });
       localServer = server;
@@ -167,12 +213,12 @@ async function authCommand() {
       // but automatically fall back to any available port so users never have
       // to think about port conflicts.
       try {
-        const { server, port } = await startLocalStatusServer(basePort);
+        const { server, port } = await startLocalStatusServerFn(basePort);
         localServer = server;
         callbackPort = port;
       } catch (error) {
         if (error && error.code === "EADDRINUSE") {
-          const { server, port } = await startLocalStatusServer(0);
+          const { server, port } = await startLocalStatusServerFn(0);
           localServer = server;
           callbackPort = port;
           console.log(
@@ -186,7 +232,7 @@ async function authCommand() {
       }
     }
 
-    const initiateResponse = await axios.post(
+    const initiateResponse = await httpClient.post(
       `${apiBaseUrl}/auth/cli/initiate`,
       {
         callbackPort,
@@ -205,21 +251,47 @@ async function authCommand() {
     spinner.succeed("Authentication session created");
     console.log(chalk.gray(`Token expires at ${expiresAt || "unknown time"}`));
     console.log(chalk.gray(`Settings will be stored in ${SETTINGS_PATH}`));
-
-    await open(authUrl, { wait: false });
+    console.log(chalk.gray("Auth URL:"));
+    console.log(chalk.cyan(authUrl));
     console.log(
-      chalk.blue(
-        "A browser window has been opened. Complete the flow to continue."
-      )
+      chalk.gray(
+        "If the browser did not open, copy the URL above into a browser and complete the approval flow there.",
+      ),
     );
 
-    const status = await waitForCompletion(apiBaseUrl, authToken, expiresAt);
-    await verifyApiKey(apiBaseUrl, status.project.apiKey);
+    let browserOpened = false;
+    try {
+      await openFn(authUrl, { wait: false });
+      browserOpened = true;
+      console.log(
+        chalk.blue(
+          "A browser window has been opened. Approve the session there to continue.",
+        )
+      );
+    } catch (error) {
+      console.log(
+        chalk.yellow(
+          `Could not open a browser automatically: ${error.message}`,
+        ),
+      );
+      console.log(
+        chalk.gray(
+          "Continue by opening the auth URL manually. The CLI will keep waiting for approval.",
+        ),
+      );
+    }
+
+    const status = await waitForCompletionFn(apiBaseUrl, authToken, expiresAt, {
+      httpClient,
+      spinnerFactory,
+      timeoutMs,
+    });
+    await verifyApiKeyFn(apiBaseUrl, status.project.apiKey, httpClient);
 
     // Derive platformUrl from apiBaseUrl (remove /api suffix)
     const platformUrl = apiBaseUrl.replace(/\/api\/?$/, '') || 'https://reshot.dev';
 
-    writeSettings({
+    writeSettingsFn({
       projectId: status.project.id,
       projectName: status.project.name,
       apiKey: status.project.apiKey,
@@ -247,6 +319,15 @@ async function authCommand() {
       )
     );
     console.log(chalk.gray(`Settings saved to ${SETTINGS_PATH}`));
+    console.log(chalk.gray("Mode: cloud-connected"));
+    return {
+      mode: "cloud-connected",
+      browserOpened,
+      authUrl,
+      projectId: status.project.id,
+      projectName: status.project.name,
+      platformUrl,
+    };
   } finally {
     if (localServer) {
       localServer.close();
@@ -255,3 +336,6 @@ async function authCommand() {
 }
 
 module.exports = authCommand;
+module.exports.waitForCompletion = waitForCompletion;
+module.exports.verifyApiKey = verifyApiKey;
+module.exports.startLocalStatusServer = startLocalStatusServer;

package/src/commands/certify.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const chalk = require("chalk");
+const { runCertification } = require("../lib/certification");
+
+async function certifyCommand(options = {}) {
+  const scenarioKeys = options.scenarios
+    ? String(options.scenarios)
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean)
+    : null;
+
+  const report = await runCertification({
+    scenarioKeys,
+    tag: options.tag,
+    message: options.message,
+  });
+
+  if (options.json) {
+    console.log(JSON.stringify(report, null, 2));
+  } else {
+    console.log(chalk.cyan("\n🏅 Certified Target Verification\n"));
+    console.log(chalk.gray(`Target: ${report.target.displayName}`));
+    console.log(
+      report.ok
+        ? chalk.green(`  ✔ Final status: ${report.finalStatus}`)
+        : chalk.red(`  ✖ Final status: ${report.finalStatus}`),
+    );
+    console.log(
+      report.doctor.ok
+        ? chalk.green("  ✔ Doctor passed")
+        : chalk.red("  ✖ Doctor failed"),
+    );
+    console.log(
+      report.capture.success
+        ? chalk.green("  ✔ Capture passed")
+        : chalk.red("  ✖ Capture failed"),
+    );
+    console.log(
+      report.publishVerification.ok
+        ? chalk.green("  ✔ Publish verification passed")
+        : chalk.red("  ✖ Publish verification failed"),
+    );
+  }
+
+  if (!report.ok) {
+    process.exitCode = 1;
+  }
+
+  return report;
+}
+
+module.exports = certifyCommand;

package/src/commands/ci-setup.js

@@ -29,7 +29,7 @@ jobs:
         run: npm install
       
       - name: Install Reshot CLI
-        run: npm install -g @reshot/cli
+        run: npm install -g @reshotdev/screenshot
       
       - name: Install Playwright browsers
         run: npx playwright install chromium
@@ -85,7 +85,7 @@ jobs:
           name: Install dependencies
           command: |
             npm install
-            npm install -g @reshot/cli
+            npm install -g @reshotdev/screenshot
       
       - run:
           name: Install Playwright browsers
@@ -130,7 +130,7 @@ docs:
     - apt-get update && apt-get install -y ffmpeg
     - npm install
     - npx playwright install chromium
-    - npm install -g @reshot/cli
+    - npm install -g @reshotdev/screenshot
   
   script:
     - reshot run

package/src/commands/doctor-target.js

@@ -0,0 +1,42 @@
+"use strict";
+
+const chalk = require("chalk");
+const { runDoctorTarget } = require("../lib/certification");
+
+async function doctorTargetCommand(options = {}) {
+  const scenarioKeys = options.scenarios
+    ? String(options.scenarios)
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean)
+    : null;
+
+  const report = await runDoctorTarget({ scenarioKeys });
+
+  if (options.json) {
+    console.log(JSON.stringify(report, null, 2));
+  } else {
+    console.log(chalk.cyan("\n🩺 Certified Target Doctor\n"));
+    console.log(chalk.gray(`Target: ${report.target.displayName} (${report.target.tier})`));
+    console.log(
+      report.ok
+        ? chalk.green("  ✔ Target contract is healthy")
+        : chalk.red("  ✖ Target contract check failed"),
+    );
+    for (const audit of report.readinessAudits) {
+      console.log(
+        audit.ok
+          ? chalk.green(`  ✔ ${audit.scenario}`)
+          : chalk.red(`  ✖ ${audit.scenario}${audit.contractFailure ? ` — ${audit.contractFailure}` : ""}`),
+      );
+    }
+  }
+
+  if (!report.ok) {
+    process.exitCode = 1;
+  }
+
+  return report;
+}
+
+module.exports = doctorTargetCommand;

package/src/commands/publish.js

@@ -539,17 +539,20 @@ function buildScenarioDefinition(scenario) {
 function buildPublishMetadata({
   projectId,
   publishSessionId,
+  tag,
   scenarioKey,
   scenarioConfig,
   variationSlug,
   contextData,
   gitInfo,
+  autoApprove = false,
 }) {
   const scenarioDefinition = buildScenarioDefinition(scenarioConfig);
 
   return {
     projectId,
     publishSessionId, // Unique ID for this CLI publish run
+    tag: tag || undefined,
     scenarioName: scenarioConfig?.name || scenarioKey,
     scenario: scenarioDefinition,
     context: {
@@ -557,6 +560,9 @@ function buildPublishMetadata({
       data: contextData,
     },
     autoCreateVisuals: true,
+    publish: {
+      autoApprove,
+    },
     git: {
       commitHash: gitInfo.commitHash,
       commitMessage: gitInfo.commitMessage,
@@ -809,7 +815,8 @@ async function publishWithTransactionalFlow(
   }
 
   // Build all commits for batch request
-  const MAX_BATCH_SIZE = 200;
+  // 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()) {
@@ -820,11 +827,13 @@ async function publishWithTransactionalFlow(
     const metadata = buildPublishMetadata({
       projectId,
       publishSessionId: gitInfo.publishSessionId,
+      tag: gitInfo.tag,
       scenarioKey: group.scenarioKey,
       scenarioConfig,
       variationSlug: group.variationSlug,
       contextData: contextObj,
       gitInfo,
+      autoApprove,
     });
 
     if (metadata.cli) {
@@ -839,14 +848,21 @@ async function publishWithTransactionalFlow(
     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 batchResult = await apiClient.publishBatch(apiKey, {
+      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;
 
       for (const r of batchResult.results || []) {
         if (r.status === "ok") {
@@ -895,6 +911,7 @@ async function publishWithLegacyFlow(
   groupedAssets,
   docSyncConfig,
   gitInfo,
+  { autoApprove = false } = {},
 ) {
   let successCount = 0;
   let failCount = 0;
@@ -911,11 +928,13 @@ async function publishWithLegacyFlow(
     const metadata = buildPublishMetadata({
       projectId,
       publishSessionId: gitInfo.publishSessionId,
+      tag: gitInfo.tag,
       scenarioKey: group.scenarioKey,
       scenarioConfig,
       variationSlug: group.variationSlug,
       contextData: contextObj,
       gitInfo,
+      autoApprove,
     });
 
     if (metadata.cli) {
@@ -1228,7 +1247,16 @@ function parseFrontmatter(content) {
 }
 
 async function publishCommand(options = {}) {
-  const { tag, message, dryRun, force, video, outputJson, autoApprove } = options;
+  const {
+    tag,
+    message,
+    dryRun,
+    force,
+    video,
+    outputJson,
+    autoApprove,
+    noExit = false,
+  } = options;
 
   // Result tracking for --output-json and programmatic callers
   const publishResult = {
@@ -1288,7 +1316,8 @@ async function publishCommand(options = {}) {
       console.log(chalk.red(`  • ${error}`));
     }
     console.log(getStorageSetupHelp(storageConfig?.type || "reshot"));
-    process.exit(1);
+    if (!noExit) process.exit(1);
+    return { ...publishResult, success: false, error: "Invalid storage configuration" };
   }
 
   // Resolve project context based on storage mode
@@ -1307,7 +1336,8 @@ async function publishCommand(options = {}) {
       );
       console.log(getStorageSetupHelp("s3"));
     }
-    process.exit(1);
+    if (!noExit) process.exit(1);
+    return { ...publishResult, success: false, error: error.message };
   }
 
   const { apiKey, projectId, storageMode: resolvedMode } = projectContext;
@@ -1350,7 +1380,7 @@ async function publishCommand(options = {}) {
       });
       console.log(chalk.green(`  ✔ Version tag "${tag}" created`));
       console.log(
-        chalk.gray(`    Pinned URL: cdn.reshot.dev/assets/{key}?tag=${tag}\n`),
+        chalk.gray(`    Pinned URL: cdn.reshot.dev/v1/assets/{projectId}/{visualKey}?tag=${tag}\n`),
       );
     } catch (tagError) {
       console.log(
@@ -1439,7 +1469,7 @@ async function publishCommand(options = {}) {
               projectId,
               groupedAssets,
               docSyncConfig,
-              { commitHash, commitMessage, publishSessionId },
+              { commitHash, commitMessage, publishSessionId, tag },
               diffManifests,
               { autoApprove },
             );
@@ -1459,7 +1489,8 @@ async function publishCommand(options = {}) {
               projectId,
               groupedAssets,
               docSyncConfig,
-              { commitHash, commitMessage, publishSessionId },
+              { commitHash, commitMessage, publishSessionId, tag },
+              { autoApprove },
             );
             successCount = result.successCount;
             failCount = result.failCount;
@@ -1471,7 +1502,8 @@ async function publishCommand(options = {}) {
             projectId,
             groupedAssets,
             docSyncConfig,
-            { commitHash, commitMessage, publishSessionId },
+            { commitHash, commitMessage, publishSessionId, tag },
+            { autoApprove },
           );
           successCount = result.successCount;
           failCount = result.failCount;
@@ -1543,7 +1575,10 @@ async function publishCommand(options = {}) {
 
   console.log();
 
-  return publishResult;
+  return {
+    ...publishResult,
+    success: publishResult.assetsFailed === 0 && publishResult.assetsProcessed > 0,
+  };
 }
 
 module.exports = publishCommand;