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

package/README.md

@@ -31,16 +31,31 @@ reshot run
 # 4. Review captures in the web UI
 reshot studio
 
-# 5. Publish when you want hosted assets
-reshot publish
+# 5. Publish when you want hosted assets — pass --auto-approve on first run
+reshot publish --auto-approve
 ```
 
 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).
 
+> **First-time setup tip:** pass `--auto-approve` to your first `reshot
+> publish` so newly-captured visuals skip the review queue and become
+> immediately available via `reshot pull`. Without it, every new visual
+> lands in PENDING and is only visible in the studio.
+
+> **OAuth / magic-link / Supabase apps:** skip `auth.loginSteps` and use
+> `playwright codegen $YOUR_APP --save-storage=.reshot/auth-state.json`
+> once, then set `"storageStatePath": ".reshot/auth-state.json"` in your
+> config. See [Authentication](#authentication) below for details.
+
 ## Certified Targets
 
+> **Most integrations should omit `target` entirely.** Certified targets
+> are an opt-in contract for production-grade flows once basic capture is
+> working — start without them and add `target` later if you need the
+> stronger guarantees.
+
 This release adds a **Certified Targets** contract for apps that need stronger guarantees than ad hoc capture. Certified targets declare their readiness selectors, localhost runtime, required routes, and expected published assets in `reshot.config.json`, then pass the full doctor/capture/publish/delivery pipeline before release.
 
 ## Configuration
@@ -274,18 +289,17 @@ The recorded scenario is appended to `reshot.config.json` automatically.
 
 ## Authentication
 
-### Storage State
-
-The CLI stores browser session state at `~/.reshot/session-state.json` (global).
-This is automatically captured when you run `reshot record`.
+### Storage State (recommended)
 
-To manually generate it:
+For OAuth, magic-link, Supabase Auth, Clerk, Auth.js, and any other modern
+auth flow that can't be scripted with form fields, capture a Playwright
+storage state once and let reshot reuse it for every scenario:
 
 ```bash
-npx playwright codegen http://localhost:3000 --save-storage=$HOME/.reshot/session-state.json
+npx playwright codegen http://localhost:3000 --save-storage=.reshot/auth-state.json
 ```
 
-Or reference a project-local path in your config:
+Then point your config at it:
 
 ```json
 {
@@ -293,7 +307,22 @@ Or reference a project-local path in your config:
 }
 ```
 
-### Login Steps
+`reshot record` does the same thing interactively and writes to
+`~/.reshot/session-state.json` by default.
+
+### Test backdoors
+
+If your app has a dev/test backdoor that bypasses auth at the server layer
+(for example a `/api/devtools` fixture endpoint, a header-based
+impersonation hook, or a localhost-only cookie), you can point reshot at it
+via `baseUrl` and skip storage state entirely. This is often the cleanest
+option for first-party apps that already maintain such an endpoint for
+testing.
+
+### Login Steps (password forms only)
+
+If your app still uses a traditional username/password form, you can
+script the login directly:
 
 ```json
 {
@@ -310,6 +339,8 @@ Or reference a project-local path in your config:
 ```
 
 Environment variables (`${EMAIL}`, `${PASSWORD}`) are interpolated at runtime.
+`loginSteps` cannot drive OAuth, magic-link, or any redirect-based flow —
+use **Storage State** above for those.
 
 ## Output Formats
 
@@ -368,26 +399,40 @@ For headless execution, ensure:
 Generate a manifest of captured assets for use in documentation sites or marketing pages:
 
 ```bash
-reshot pull --format json --output assets.json --status approved
+reshot pull --format json --output assets.json
 ```
 
+The output is keyed by scenario, visual, and context (variant). `meta` mirrors
+the API response; `assets` is a 3-level nested object — `scenarioKey →
+visualKey → context`:
+
 ```json
 {
-  "assets": [
-    {
-      "key": "dashboard-overview",
-      "variant": "theme-light",
-      "url": "https://cdn.reshot.dev/abc123/dashboard-overview.png",
-      "format": "png",
-      "width": 1280,
-      "height": 720,
-      "version": "v1.2.0"
+  "meta": {
+    "projectId": "...",
+    "exportedAt": "2026-04-30T12:00:00.000Z",
+    "totalVisuals": 12
+  },
+  "assets": {
+    "dashboard": {
+      "overview": {
+        "themeLight": {
+          "type": "image/png",
+          "alt": "Dashboard overview, light theme",
+          "steps": [
+            { "src": "https://cdn.reshot.dev/abc123/overview.png", "step": "overview" }
+          ]
+        },
+        "themeDark": { "...": "..." }
+      }
     }
-  ]
+  }
 }
 ```
 
-Also supports `--format ts` (TypeScript with full metadata) and `--format csv`.
+By default `pull` returns visuals in all states (approved + pending). Pass
+`--status approved` to filter to released visuals only. Also supports
+`--format ts` (TypeScript with full metadata) and `--format csv`.
 
 ## Drift Management
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.13",
   "description": "Screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",
@@ -26,6 +26,7 @@
   },
   "files": [
     "src/",
+    "vendor/compose/dist/",
     "web/manager/dist/",
     "web/cropper/",
     "web/subtitle-editor/",
@@ -35,24 +36,13 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "scripts": {
-    "test": "node scripts/test.js",
-    "test:unit": "node --test tests/unit/*.test.js",
-    "test:integration": "node --test tests/integration/*.test.js",
-    "test:all": "node --test tests/unit/*.test.js tests/integration/*.test.js",
-    "test:dry-run": "node src/index.js --help && node src/index.js --version",
-    "prepublishOnly": "cd web/manager && npm install && npm run build",
-    "ui:build": "cd web/manager && npm install && npm run build",
-    "ui:dev": "cd web/manager && npm install && npm run dev",
-    "lint": "echo 'No linting configured yet'",
-    "pack:check": "npm pack --dry-run"
-  },
   "dependencies": {
     "axios": "^1.6.2",
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
+    "esbuild": "^0.27.2",
     "express": "^4.18.2",
     "form-data": "^4.0.0",
     "fs-extra": "^11.2.0",
@@ -62,10 +52,24 @@
     "ora": "^7.0.1",
     "pixelmatch": "^5.3.0",
     "playwright": "^1.40.0",
+    "playwright-core": "^1.57.0",
     "pngjs": "^7.0.0",
     "sharp": "^0.33.2",
     "socket.io": "^4.7.2",
     "uuid": "^9.0.1",
     "@aws-sdk/client-s3": "^3.650.0"
+  },
+  "scripts": {
+    "test": "node scripts/test.js",
+    "test:unit": "node --test tests/unit/*.test.js",
+    "test:integration": "node --test tests/integration/*.test.js",
+    "test:all": "node --test tests/unit/*.test.js tests/integration/*.test.js",
+    "test:dry-run": "node src/index.js --help && node src/index.js --version",
+    "test:source": "node src/index.js",
+    "ui:build": "cd web/manager && npm install && npm run build",
+    "ui:dev": "cd web/manager && npm install && npm run dev",
+    "lint": "echo 'No linting configured yet'",
+    "build": "pnpm run ui:build",
+    "pack:check": "npm pack --dry-run"
   }
-}
+}

package/src/commands/auth.js

@@ -14,7 +14,7 @@ const pkg = require("../../package.json");
 
 const DEFAULT_CALLBACK_PORT = 3721;
 const POLL_INTERVAL_MS = 2000;
-const DEFAULT_AUTH_TIMEOUT_MS = 120000;
+const DEFAULT_AUTH_TIMEOUT_MS = 15 * 60 * 1000;
 
 const unwrapResponse = (payload) => {
   if (!payload) {
@@ -159,8 +159,8 @@ async function verifyApiKey(apiBaseUrl, apiKey, httpClient = axios) {
 
 async function authCommand(options = {}) {
   // Support non-interactive auth via environment variables
-  const envApiKey = process.env.RESHOT_API_KEY;
-  const envProjectId = process.env.RESHOT_PROJECT_ID;
+  const envApiKey = options.apiKey || process.env.RESHOT_API_KEY;
+  const envProjectId = options.projectId || process.env.RESHOT_PROJECT_ID;
   const httpClient = options.httpClient || axios;
   const openFn = options.openFn || open;
   const writeSettingsFn = options.writeSettingsFn || writeSettings;
@@ -189,6 +189,33 @@ async function authCommand(options = {}) {
     };
   }
 
+  // The browser approval flow requires an interactive session (a human approves
+  // in the browser while the CLI polls). With no TTY and no env credentials we
+  // would otherwise open a browser nobody sees and poll for up to 15 minutes —
+  // i.e. hang. Detect that and exit promptly with actionable guidance.
+  const stdinIsInteractive =
+    typeof options.isInteractive === "boolean"
+      ? options.isInteractive
+      : Boolean(process.stdin && process.stdin.isTTY);
+  if (!stdinIsInteractive) {
+    console.error(
+      chalk.red("✖ `reshot auth` needs an interactive terminal."),
+    );
+    console.error(
+      chalk.gray(
+        "  Run it in an interactive shell to approve in the browser, or set",
+      ),
+    );
+    console.error(
+      chalk.gray(
+        "  RESHOT_API_KEY and RESHOT_PROJECT_ID for non-interactive (CI) auth.",
+      ),
+    );
+    const err = new Error("Interactive terminal required for browser auth");
+    err.code = "ENOTTY";
+    throw err;
+  }
+
   const apiBaseUrl = options.apiBaseUrl || getApiBaseUrl();
   const explicitPortEnv =
     process.env.RESHOT_CLI_CALLBACK_PORT || "";
@@ -232,12 +259,15 @@ async function authCommand(options = {}) {
       }
     }
 
+    const initiatePayload = {
+      callbackPort,
+      clientVersion: pkg.version,
+      ...(options.projectId ? { projectId: options.projectId } : {}),
+    };
+
     const initiateResponse = await httpClient.post(
       `${apiBaseUrl}/auth/cli/initiate`,
-      {
-        callbackPort,
-        clientVersion: pkg.version,
-      },
+      initiatePayload,
       { headers: { "Content-Type": "application/json" } }
     );
 

package/src/commands/capture-dom.js

@@ -0,0 +1,50 @@
+// capture-dom.js - Capture a self-contained DOM reconstruction artifact from a
+// live URL (Tier-3 Phase 2). Emits <slug>.dom.html (+ sidecars), remounted.png,
+// and live.png so the calibrated quality gate can diff them:
+//
+//   reshot capture-dom <url> --out /tmp/cap
+//   pnpm --dir packages/compose verify diff /tmp/cap/remounted.png /tmp/cap/live.png
+
+const chalk = require("chalk");
+const path = require("path");
+const { captureDomFromUrl } = require("../lib/dom-capture");
+
+function registerCaptureDom(program) {
+  program
+    .command("capture-dom <url>")
+    .description("Capture a self-contained DOM reconstruction artifact from a live URL")
+    .option("-o, --out <dir>", "Output directory", "./.reshot/capture-dom")
+    .option("-s, --slug <slug>", "Artifact slug", "capture")
+    .option("--width <px>", "Viewport width", (v) => parseInt(v, 10))
+    .option("--height <px>", "Viewport height", (v) => parseInt(v, 10))
+    .option("--dpr <n>", "Device scale factor", (v) => parseInt(v, 10))
+    .action(async (url, options) => {
+      const outDir = path.resolve(options.out);
+      const settings =
+        options.width || options.height || options.dpr
+          ? {
+              width: options.width || 1000,
+              height: options.height || 800,
+              deviceScaleFactor: options.dpr || 2,
+            }
+          : undefined;
+
+      console.log(chalk.cyan(`\n  Capturing DOM from ${url} ...\n`));
+      const result = await captureDomFromUrl({ url, outDir, slug: options.slug, settings });
+
+      console.log(chalk.green(`  ✔ method: ${result.method}`));
+      console.log(`  artifact:  ${result.artifact}`);
+      console.log(`  remounted: ${result.remounted}`);
+      console.log(`  live:      ${result.live}`);
+      if (result.sidecars.length) {
+        console.log(`  sidecars:  ${result.sidecars.map((s) => `${s.kind}(rasterized=${s.rasterized})`).join(", ")}`);
+      }
+      console.log(
+        chalk.gray(
+          `\n  Verify: pnpm --dir packages/compose verify diff ${result.remounted} ${result.live}\n`,
+        ),
+      );
+    });
+}
+
+module.exports = { registerCaptureDom };

package/src/commands/compose.js

@@ -0,0 +1,220 @@
+// compose.js - Render a local @reshot/compose file into a video pack
+const path = require("path");
+const fs = require("fs-extra");
+const chalk = require("chalk");
+const { composeDistDir } = require("../lib/compose-runtime");
+const {
+  DEFAULT_FORMATS,
+  assertCaptureExists,
+  deriveSlug,
+  parseFormats,
+  parseSize,
+  resolveCapturePath,
+  resolveComposeContext,
+  resolveMetadataPath,
+  resolveOutBase,
+} = require("../lib/compose-context");
+const {
+  assertUploadPackExists,
+  packFromExistingOutputs,
+} = require("../lib/compose-pack");
+const {
+  buildDashboardUrl,
+  getComposeApiBaseUrl,
+  humanizeName,
+  resolveComposeProjectContext,
+  uploadComposition,
+} = require("../lib/compose-upload");
+
+async function runCompose(file, options = {}, deps = {}) {
+  const context = await resolveComposeContext(file, options);
+
+  const size = parseSize(options.size || "1440x900");
+  const formats = parseFormats(options.formats, options.gif);
+  const outBase = resolveOutBase(context.compositionPath, options.out);
+
+  const { render } = deps.renderModule || loadComposeRender();
+
+  console.log(chalk.cyan(`\n-> Rendering ${chalk.bold(context.slug)} (${size.width}x${size.height})`));
+  console.log(chalk.gray(`  composition ${relativePath(context.compositionPath)}`));
+  console.log(chalk.gray(`  metadata    ${relativePath(context.metadataPath)}`));
+  console.log(chalk.gray(`  capture     ${relativePath(context.capturePath)}`));
+  console.log(chalk.gray(`  out         ${relativePath(outBase)}`));
+
+  const result = await withComposeEnvironment(
+    {
+      RESHOT_COMPOSE_SLUG: context.slug,
+      RESHOT_COMPOSE_METADATA_PATH: context.metadataPath,
+      RESHOT_COMPOSE_CAPTURE_PATH: context.capturePath,
+    },
+    () =>
+      render(context.compositionPath, {
+        slug: context.slug,
+        out: outBase,
+        size,
+        formats,
+        metadataPath: context.metadataPath,
+        capturePath: context.capturePath,
+      }),
+  );
+
+  console.log(chalk.green(`\nRendered ${context.slug}`));
+  printPack(result.pack || {});
+  return result;
+}
+
+async function runComposePush(file, options = {}, deps = {}) {
+  const context = await resolveComposeContext(file, options);
+  const outBase = resolveOutBase(context.compositionPath, options.out);
+  const pack = options.skipRender
+    ? await packFromExistingOutputs(outBase)
+    : (await runCompose(file, options, deps)).pack || {};
+
+  await assertUploadPackExists(pack, Boolean(options.skipRender));
+
+  const projectContext = resolveComposeProjectContext({
+    projectOption: options.project,
+    settings: deps.settings,
+  });
+  const apiBaseUrl = getComposeApiBaseUrl(deps.apiBaseUrl);
+  const name = options.name || humanizeName(context.slug);
+  const upload = deps.uploadComposition || uploadComposition;
+
+  console.log(chalk.cyan(`\n-> Uploading ${chalk.bold(name)} to project ${projectContext.projectId}`));
+  const response = await upload({
+    apiBaseUrl,
+    apiKey: projectContext.apiKey,
+    projectId: projectContext.projectId,
+    name,
+    slug: context.slug,
+    sourceTsx: await fs.readFile(context.compositionPath, "utf8"),
+    metadataJson: await fs.readFile(context.metadataPath, "utf8"),
+    pack,
+    autoApprove: Boolean(options.autoApprove),
+    httpClient: deps.httpClient,
+  });
+  const dashboardUrl = buildDashboardUrl(response, apiBaseUrl, projectContext.projectId);
+
+  console.log(chalk.green(`\nUploaded ${context.slug}`));
+  console.log(chalk.gray(`  Dashboard: ${dashboardUrl}`));
+  printPublicUrls(response?.publicUrls);
+  if (response?.attributionWarning === "legacy-key-no-user-attribution") {
+    console.log(
+      chalk.yellow(
+        "  Attribution: re-issue your API key to enable per-engineer render attribution.",
+      ),
+    );
+  }
+
+  return { response, dashboardUrl, projectId: projectContext.projectId };
+}
+
+function registerCompose(program) {
+  const compose = program
+    .command("compose")
+    .description("Render and upload local JSX compositions")
+    .argument("<file>", "Composition file to render")
+    .option("--slug <slug>", "Matrix variant slug; defaults to the composition filename")
+    .option("--out <path>", "Output base path; defaults to <file-stem>.composed")
+    .option("--size <size>", "Viewport size as WIDTHxHEIGHT", "1440x900")
+    .option("--formats <formats>", "Comma-separated output formats", DEFAULT_FORMATS.join(","))
+    .option("--gif", "Also emit a gif")
+    .action(async (file, options) => {
+      try {
+        await runCompose(file, normalizeCommandOptions(options));
+      } catch (error) {
+        console.error(chalk.red("Error:"), error.message);
+        process.exit(1);
+      }
+    });
+
+  compose
+    .command("push <file>")
+    .description("Render and upload a local JSX composition to the dashboard")
+    .option("--name <name>", "Composition display name")
+    .option("--project <projectId>", "Project id; defaults to local Reshot settings")
+    .option("--out <path>", "Output base path to upload when --skip-render is used")
+    .option("--skip-render", "Upload existing local outputs without re-rendering")
+    .option("--auto-approve", "Immediately approve this composition render and update live embed URLs")
+    .action(async (file, options) => {
+      try {
+        await runComposePush(file, normalizeCommandOptions(options));
+      } catch (error) {
+        console.error(chalk.red("Error:"), error.message);
+        process.exit(1);
+      }
+    });
+}
+
+function normalizeCommandOptions(options) {
+  return typeof options?.opts === "function" ? options.opts() : options || {};
+}
+
+function loadComposeRender() {
+  return require(path.join(composeDistDir(), "render.cjs"));
+}
+
+async function withComposeEnvironment(env, callback) {
+  const previous = {};
+  for (const [key, value] of Object.entries(env)) {
+    previous[key] = process.env[key];
+    process.env[key] = value;
+  }
+
+  try {
+    return await callback();
+  } finally {
+    for (const [key, value] of Object.entries(previous)) {
+      if (value === undefined) {
+        delete process.env[key];
+      } else {
+        process.env[key] = value;
+      }
+    }
+  }
+}
+
+function printPack(pack) {
+  for (const format of ["mp4", "webm", "poster", "gif"]) {
+    if (pack[format]) {
+      console.log(chalk.gray(`  ${format.padEnd(6)} ${relativePath(pack[format])}`));
+    }
+  }
+}
+
+function printPublicUrls(publicUrls) {
+  if (!publicUrls || typeof publicUrls !== "object") return;
+  if (publicUrls.embed) {
+    console.log(chalk.gray(`  Live embed: ${publicUrls.embed}`));
+  }
+  if (publicUrls.live?.mp4) {
+    console.log(chalk.gray(`  Live MP4:   ${publicUrls.live.mp4}`));
+  }
+  if (publicUrls.pinned?.mp4) {
+    console.log(chalk.gray(`  Pinned MP4: ${publicUrls.pinned.mp4}`));
+  }
+}
+
+function relativePath(filePath) {
+  const relative = path.relative(process.cwd(), filePath);
+  return relative && !relative.startsWith("..") ? relative : filePath;
+}
+
+module.exports = {
+  DEFAULT_FORMATS,
+  assertCaptureExists,
+  deriveSlug,
+  normalizeCommandOptions,
+  parseFormats,
+  parseSize,
+  printPublicUrls,
+  registerCompose,
+  resolveComposeContext,
+  resolveComposeProjectContext,
+  resolveCapturePath,
+  resolveMetadataPath,
+  resolveOutBase,
+  runCompose,
+  runComposePush,
+  uploadComposition,
+};

package/src/commands/doctor-target.js

@@ -11,14 +11,46 @@ async function doctorTargetCommand(options = {}) {
         .filter(Boolean)
     : null;
 
+  // Emit an immediate banner BEFORE any async work so the command is never
+  // silent — previously it produced zero output while preparing fixtures and
+  // launching a browser, which read as a hang.
+  if (!options.json) {
+    console.log(chalk.cyan("🩺 Running target doctor…"));
+    console.log(
+      chalk.gray(
+        scenarioKeys
+          ? `  scenarios: ${scenarioKeys.join(", ")}`
+          : "  scenarios: all certified",
+      ),
+    );
+  }
+
   const progressLogger = options.json
     ? null
     : (message) => console.log(chalk.gray(`  → ${message}`));
 
-  const report = await runDoctorTarget({
-    scenarioKeys,
-    onProgress: progressLogger,
-  });
+  let report;
+  try {
+    report = await runDoctorTarget({
+      scenarioKeys,
+      onProgress: progressLogger,
+      timeoutMs: options.timeout ? Number(options.timeout) : undefined,
+    });
+  } catch (error) {
+    // Fail fast with an actionable message + report path rather than hanging.
+    if (!options.json) {
+      console.error(chalk.red(`\n  ✖ Target doctor aborted: ${error.message}`));
+      console.error(
+        chalk.gray(
+          "  Confirm the dev server is reachable and the target is configured (see .reshot/reports).",
+        ),
+      );
+    } else {
+      console.log(JSON.stringify({ ok: false, error: error.message }, null, 2));
+    }
+    process.exitCode = 1;
+    return { ok: false, error: error.message };
+  }
 
   if (options.json) {
     console.log(JSON.stringify(report, null, 2));

package/src/commands/drifts.js

@@ -234,7 +234,7 @@ async function batchDriftAction(apiKey, projectId, action, options = {}) {
 
   try {
     // Fetch all pending drifts
-    const response = await apiClient.getDrifts(apiKey, projectId, { status: "PENDING" });
+    const response = await apiClient.getDrifts(apiKey, projectId, { status: "pending" });
     const drifts = response.drifts || [];
 
     if (drifts.length === 0) {
@@ -268,6 +268,18 @@ async function batchDriftAction(apiKey, projectId, action, options = {}) {
       console.log(chalk.red(`  ${failed} drift(s) failed`));
     }
   } catch (error) {
+    const status = error.reshot?.status ?? error.response?.status;
+    if (status === 400 || status === 404) {
+      console.log(chalk.green("  ✓ No pending drifts to approve."));
+      console.log(
+        chalk.gray(
+          "    Drifts only exist when a capture differs from a baseline. New captures\n" +
+          "    with no prior version go to the review queue — use `reshot publish\n" +
+          "    --auto-approve` or approve them in the studio."
+        )
+      );
+      return;
+    }
     console.error(chalk.red("Error:"), error.message);
     process.exit(1);
   }