@crvy/rprtr 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -5,6 +5,66 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.7] - 2026-06-05
+
+### Ci
+
+- Upgrade actions and node version for npm trusted publishing
+## [0.0.6] - 2026-06-05
+
+### Added
+
+- Add named screenshot baseline resolver
+- Resolve unnamed and duplicate screenshot baselines
+- Resolve passed screenshot baselines through Playwright rules
+- Persist approval resolver metadata in report state
+- Emit approval resolver metadata from reporter
+- Reuse resolver for approval routing
+- Report mixed approval routing outcomes
+
+### Changed
+
+- Separate resolver attachment and artifact names
+- Tighten screenshot declaration typing
+
+### Documentation
+
+- Add passed screenshot baseline resolution design
+- Add passed screenshot baseline resolution plan
+- Document passed screenshot baseline resolution options
+- Narrow approval path claims
+- Add template-aware approval routing design
+- Add template-aware approval routing plan
+- Align approval routing docs with resolver behavior
+- Clarify approval routing configuration scope
+
+### Fixed
+
+- Sanitize named screenshot resolver inputs
+- Preserve visual names in named baseline targets
+- Disambiguate named screenshot baseline resolution
+- Restore reporter declaration compatibility
+- Use safe artifact names for copied baselines
+- Encode copied baseline artifact paths safely
+- Neutralize traversal segments in baseline artifact paths
+- Encode saved attachment artifact paths safely
+- Use stable traversal-safe artifact path encoding
+- Preserve approval metadata through schemas
+- Preserve visual name fallback for older payloads
+- Use configured testDir for approval resolution
+- Use configured configDir for approval resolution
+- Require POST for approve-all routing
+- Require POST for approve routing
+- Report no-actual bulk approval outcomes
+- Honor approval api results in client state
+
+### Testing
+
+- Cover exact approval routing cases
+
+### Ci
+
+- Switch npm publish to OIDC trusted publishing
 ## [0.0.5] - 2026-05-14
 
 ### Added

package/README.md

@@ -50,12 +50,15 @@ npx crvy-rprtr ./artifacts
 
 ## Reporter Options
 
-| Option              | Type     | Default                        | Description                                        |
-| ------------------- | -------- | ------------------------------ | -------------------------------------------------- |
-| `serverUrl`         | `string` | `"ws://localhost:3000"`        | WebSocket URL of the Crvy Rprtr server             |
-| `screenshotDir`     | `string` | `"./screenshots"`              | Directory for saving screenshot artifacts          |
-| `offlineReportPath` | `string` | `"./crvy-rprtr-{worker}.json"` | Path for offline report when server is unavailable |
-| `reportHtmlPath`    | `string` | `"./crvy-rprtr.html"`          | Path for the browser-openable static report HTML   |
+| Option                                   | Type     | Default                        | Description                                                                                            |
+| ---------------------------------------- | -------- | ------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `serverUrl`                              | `string` | `"ws://localhost:3000"`        | WebSocket URL of the Crvy Rprtr server                                                                 |
+| `screenshotDir`                          | `string` | `"./screenshots"`              | Directory for saving screenshot artifacts                                                              |
+| `offlineReportPath`                      | `string` | `"./crvy-rprtr-{worker}.json"` | Path for offline report when server is unavailable                                                     |
+| `reportHtmlPath`                         | `string` | `"./crvy-rprtr.html"`          | Path for the browser-openable static report HTML                                                       |
+| `playwrightSnapshotDir`                  | `string` | `undefined`                    | Override the Playwright snapshot directory used for passed-baseline display lookup                     |
+| `playwrightSnapshotPathTemplate`         | `string` | `undefined`                    | Mirror Playwright `snapshotPathTemplate` for passed-baseline display resolution                        |
+| `playwrightToHaveScreenshotPathTemplate` | `string` | `undefined`                    | Mirror Playwright `expect.toHaveScreenshot.pathTemplate` for passed-baseline display; takes precedence |
 
 ## Server CLI Options
 
@@ -77,12 +80,14 @@ Explicit flags override the paths derived from `artifact-dir`.
 | `--screenshot-dir` | `-s`  | `./screenshots` | Screenshot directory path                                                                 |
 | `--report-path`    | `-r`  | `./report.json` | Report JSON file path or directory containing `report.json` and `crvy-rprtr-*.json` files |
 
+The CLI currently exposes only these flags. Approval-routing resolver overrides are available through the programmatic server API, not additional CLI flags.
+
 ## How It Works
 
 1. **During test runs:** The Playwright reporter sends test results to the server via WebSocket in real-time and records the same run for artifact export.
 2. **After tests complete:** A static `crvy-rprtr.html` artifact is written for direct browser viewing, and offline report JSON is also written if the server was unavailable.
 3. **In the browser:** The UI shows all screenshot tests with side-by-side, swap, slide, and blend diff views.
-4. **Approving changes:** Start the UI server and click "Approve" to accept a new screenshot as the baseline. The server copies the actual image to the expected snapshot location.
+4. **Approving changes:** Start the UI server and click "Approve" or "Approve All" to accept a new screenshot as the baseline. Approval uses the same exact Playwright-aware resolver as passed-baseline display, including default layouts, unnamed screenshots, duplicate names, and custom templates when the running server was started with matching resolver options. Those approval-routing options are read from the server startup path, not from reporter options. If the server starts without explicit resolver overrides, approval falls back to the server defaults instead. If Crvy Rprtr cannot determine exactly one target path, it leaves the image unresolved instead of guessing.
 
 ## Offline Mode
 
@@ -97,8 +102,14 @@ When the server isn't running during tests, the reporter automatically falls bac
 
 Crvy Rprtr keeps passed Playwright screenshot assertions visible in two fallback modes when Playwright does not emit a full passing comparison payload:
 
-- `baseline-only`: Crvy Rprtr copied the expected snapshot into the screenshot directory, so the UI can still show the stored baseline.
-- `declared-only`: the screenshot assertion was detected, but Playwright did not emit a passed artifact and no snapshot file could be resolved.
+- `baseline-only`: Crvy Rprtr resolved the exact expected snapshot path and copied that baseline into the screenshot directory, so the UI can show the stored baseline.
+- `declared-only`: the screenshot assertion was detected, but Crvy Rprtr could not resolve one exact snapshot file and therefore keeps the honest text-only fallback.
+
+Exact resolution mirrors Playwright's screenshot naming and template rules for default layouts, unnamed screenshots, and explicitly configured custom templates. For slash-containing named screenshot titles, Crvy Rprtr may check both Playwright-equivalent variants and only uses a baseline when exactly one candidate wins.
+
+Crvy Rprtr does not auto-read Playwright config for snapshot template discovery. If your suite uses a custom snapshot layout, pass the matching `playwrightSnapshotDir`, `playwrightSnapshotPathTemplate`, or `playwrightToHaveScreenshotPathTemplate` reporter options explicitly for passed-baseline display.
+
+Approval routing uses the same resolver, but it reads its resolver settings from the server startup path today. The current user-facing place to pass those overrides is `startServer({...})`, via options such as `configDir`, `playwrightTestDir`, `playwrightSnapshotDir`, `playwrightSnapshotPathTemplate`, and `playwrightToHaveScreenshotPathTemplate`. The CLI does not expose flags for those overrides, so `npx crvy-rprtr` uses the server defaults when they are omitted. For slash-containing named screenshot titles, Crvy Rprtr only updates the baseline when one exact Playwright-equivalent target can be determined.
 
 When the server is running, Crvy Rprtr also refreshes the UI after report JSON or screenshot artifacts change on disk.
 
@@ -122,6 +133,20 @@ await startServer({
 })
 ```
 
+If you need approval routing to follow a custom Playwright snapshot layout, pass the resolver options when starting the server programmatically:
+
+```ts
+await startServer({
+  port: 3000,
+  screenshotDir: './screenshots',
+  reportPath: './artifacts',
+  configDir: process.cwd(),
+  playwrightTestDir: './tests',
+  playwrightSnapshotDir: './tests/__screenshots__',
+  playwrightToHaveScreenshotPathTemplate: '{snapshotDir}/{testFilePath}/{arg}{ext}',
+})
+```
+
 The programmatic server API works in both Node 22+ and Bun.
 
 ## Development

package/dist/{chunk-MWLM3HWS.js → chunk-JGS2VWQP.js}

@@ -1,3 +1,159 @@
+// src/snapshot-path-resolver.ts
+import { createHash } from "crypto";
+import { basename, dirname, extname, join, parse, relative, resolve } from "path";
+var DEFAULT_SCREENSHOT_TEMPLATE = "{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}{-snapshotSuffix}{ext}";
+var WINDOWS_FILESYSTEM_FRIENDLY_LENGTH = 60;
+function isUnsafeFilePathCharacter(character) {
+  const codePoint = character.codePointAt(0);
+  return codePoint !== void 0 && (codePoint <= 44 || codePoint >= 46 && codePoint <= 47 || codePoint >= 58 && codePoint <= 64 || codePoint >= 91 && codePoint <= 96 || codePoint >= 123 && codePoint <= 127);
+}
+function sanitizeForFilePath(value) {
+  return Array.from(value).reduce(
+    (state, character) => {
+      const unsafeCharacter = isUnsafeFilePathCharacter(character);
+      return unsafeCharacter ? state.previousCharacterWasUnsafe ? state : {
+        value: `${state.value}-`,
+        previousCharacterWasUnsafe: true
+      } : {
+        value: `${state.value}${character}`,
+        previousCharacterWasUnsafe: false
+      };
+    },
+    {
+      value: "",
+      previousCharacterWasUnsafe: false
+    }
+  ).value;
+}
+function trimLongString(value, length = WINDOWS_FILESYSTEM_FRIENDLY_LENGTH) {
+  if (value.length <= length) {
+    return value;
+  }
+  const hash = createHash("sha1").update(value).digest("hex");
+  const middle = `-${hash.slice(0, 5)}-`;
+  const start = Math.floor((length - middle.length) / 2);
+  const end = length - middle.length - start;
+  return value.slice(0, start) + middle + value.slice(-end);
+}
+function sanitizeFilePathBeforeExtension(filePath, extension = extname(filePath)) {
+  const base = filePath.slice(0, filePath.length - extension.length);
+  return sanitizeForFilePath(base) + extension;
+}
+function addSuffixToFilePath(filePath, suffix) {
+  const extension = extname(filePath);
+  return filePath.slice(0, filePath.length - extension.length) + suffix + extension;
+}
+function normalizedSnapshotDir(config) {
+  return resolve(config.configDir, config.snapshotDir);
+}
+function templateValue(template, token, value) {
+  return template.replace(
+    new RegExp(`\\{(.)?${token}\\}`, "g"),
+    (_, prefix) => value === "" ? "" : `${prefix ?? ""}${value}`
+  );
+}
+function applyTemplate(input, nameArgument, extension) {
+  const template = input.config.toHaveScreenshotPathTemplate ?? input.config.snapshotPathTemplate ?? DEFAULT_SCREENSHOT_TEMPLATE;
+  const relativeTestFilePath = relative(input.config.testDir, input.testFile);
+  const parsed = parse(relativeTestFilePath);
+  const tokens = [
+    ["testDir", input.config.testDir],
+    ["snapshotDir", normalizedSnapshotDir(input.config)],
+    ["snapshotSuffix", input.config.snapshotSuffix],
+    ["testFileDir", parsed.dir],
+    ["platform", process.platform],
+    ["projectName", sanitizeForFilePath(input.config.projectName)],
+    ["testName", ""],
+    ["testFileName", parsed.base],
+    ["testFilePath", relativeTestFilePath],
+    ["arg", nameArgument],
+    ["ext", extension]
+  ];
+  const snapshotPath = tokens.reduce(
+    (currentTemplate, [token, value]) => templateValue(currentTemplate, token, value),
+    template
+  );
+  return resolve(input.config.configDir, snapshotPath);
+}
+function removeExtension(filePath, extension = extname(filePath)) {
+  return filePath.slice(0, filePath.length - extension.length);
+}
+function snapshotNameParts(declaredName) {
+  const extension = extname(declaredName) || ".png";
+  return {
+    extension,
+    filePath: extname(declaredName) === "" ? `${declaredName}${extension}` : declaredName
+  };
+}
+function filePathForOccurrence(filePath, occurrenceIndex) {
+  return occurrenceIndex === 1 ? filePath : addSuffixToFilePath(filePath, `-${occurrenceIndex - 1}`);
+}
+function createResolvedBaselineTarget(input, declaration, nameArgument, extension) {
+  return {
+    visualName: declaration.visualName,
+    attachmentBaseName: declaration.visualName,
+    artifactBaseName: sanitizeForFilePath(declaration.visualName),
+    snapshotPath: applyTemplate(input, nameArgument, extension)
+  };
+}
+function resolveStringCallTarget(input, declaration) {
+  const { extension, filePath } = snapshotNameParts(declaration.declaredName);
+  const occurrenceFilePath = filePathForOccurrence(filePath, declaration.occurrenceIndex);
+  const sanitizedNameWithExtension = sanitizeFilePathBeforeExtension(occurrenceFilePath, extension);
+  const nameArgument = removeExtension(sanitizedNameWithExtension, extension);
+  return createResolvedBaselineTarget(input, declaration, nameArgument, extension);
+}
+function resolveArrayCallTarget(input, declaration) {
+  const { extension, filePath } = snapshotNameParts(declaration.declaredName);
+  const occurrenceFilePath = filePathForOccurrence(filePath, declaration.occurrenceIndex);
+  const nameArgument = join(dirname(occurrenceFilePath), basename(occurrenceFilePath, extension));
+  return createResolvedBaselineTarget(input, declaration, nameArgument, extension);
+}
+function resolveNamedTarget(input, declaration) {
+  if (!declaration.declaredName.includes("/")) {
+    return resolveStringCallTarget(input, declaration);
+  }
+  const stringCallTarget = resolveStringCallTarget(input, declaration);
+  const arrayCallTarget = resolveArrayCallTarget(input, declaration);
+  if (stringCallTarget.snapshotPath === arrayCallTarget.snapshotPath) {
+    return stringCallTarget;
+  }
+  if (input.snapshotPathExists === void 0) {
+    return void 0;
+  }
+  const stringCallTargetExists = input.snapshotPathExists(stringCallTarget.snapshotPath);
+  const arrayCallTargetExists = input.snapshotPathExists(arrayCallTarget.snapshotPath);
+  if (stringCallTargetExists === arrayCallTargetExists) {
+    return void 0;
+  }
+  return stringCallTargetExists ? stringCallTarget : arrayCallTarget;
+}
+function reporterTitlesWithoutProjectAndFile(reporterTitlePath) {
+  return reporterTitlePath.slice(3).filter((part) => part !== "");
+}
+function anonymousName(reporterTitlePath, occurrenceIndex) {
+  const rawAnonymousName = `${reporterTitlesWithoutProjectAndFile(reporterTitlePath).join(" ")} ${occurrenceIndex}.png`;
+  return sanitizeFilePathBeforeExtension(trimLongString(rawAnonymousName), ".png");
+}
+function resolveTarget(input, declaration) {
+  switch (declaration.kind) {
+    case "named":
+      return typeof declaration.declaredName === "string" && declaration.declaredName !== "" ? resolveNamedTarget(input, declaration) : void 0;
+    case "unnamed": {
+      const anonymousFileName = anonymousName(input.reporterTitlePath, declaration.occurrenceIndex);
+      const extension = ".png";
+      const nameArgument = join(dirname(anonymousFileName), basename(anonymousFileName, extension));
+      return createResolvedBaselineTarget(input, declaration, nameArgument, extension);
+    }
+  }
+}
+function resolveBaselineTargets(input) {
+  return input.declarations.flatMap((declaration) => {
+    const resolvedTarget = resolveTarget(input, declaration);
+    return resolvedTarget === void 0 ? [] : [resolvedTarget];
+  });
+}
+
 // src/report-utils.ts
 function normalizeScreenshotsBaseUrl(baseUrl) {
   return baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
@@ -17,6 +173,12 @@ function withImageSource(image) {
     source: classifyImage(image)
   };
 }
+function getDeclaredVisualNames(visualNames, visualDeclarations) {
+  return visualDeclarations?.map(({ visualName }) => visualName) ?? visualNames;
+}
+function copyVisualDeclarations(visualDeclarations) {
+  return visualDeclarations?.map((visualDeclaration) => ({ ...visualDeclaration }));
+}
 function mergeDeclaredImages(images, visualNames) {
   const names = /* @__PURE__ */ new Set([...Object.keys(images), ...visualNames]);
   return Object.fromEntries(
@@ -136,10 +298,14 @@ function applyTestEndEvent(state, data, options = {}) {
   }
   test.status = mapStatus(data.status);
   const resultStatus = data.status === "passed" ? "success" : data.status === "failed" ? "failed" : "pending";
+  const visualDeclarations = copyVisualDeclarations(data.visualDeclarations);
   const images = preservePreviousPassingImages(
     test,
     data.status,
-    mergeDeclaredImages(attachmentsToImages(data.attachments, options.screenshotsBaseUrl), data.visualNames)
+    mergeDeclaredImages(
+      attachmentsToImages(data.attachments, options.screenshotsBaseUrl),
+      getDeclaredVisualNames(data.visualNames, visualDeclarations)
+    )
   );
   const diffCount = countDiffImages(images);
   const hasDiffs = diffCount > 0;
@@ -151,6 +317,7 @@ function applyTestEndEvent(state, data, options = {}) {
       status: resultStatus,
       retries: 0,
       images,
+      visualDeclarations,
       error: data.error,
       duration: data.duration
     }
@@ -188,6 +355,20 @@ var ImagesSchema = z.object({
   error: z.string().optional(),
   source: VisualSourceSchema.optional()
 });
+var ScreenshotDeclarationSchema = z.discriminatedUnion("kind", [
+  z.object({
+    visualName: z.string(),
+    kind: z.literal("named"),
+    declaredName: z.string(),
+    snapshotBaseName: z.string(),
+    occurrenceIndex: z.number()
+  }),
+  z.object({
+    visualName: z.string(),
+    kind: z.literal("unnamed"),
+    occurrenceIndex: z.number()
+  })
+]);
 var AttachmentSchema = z.object({
   name: z.string(),
   path: z.string(),
@@ -199,6 +380,7 @@ var TestResultSchema = z.object({
   status: TestResultStatusSchema,
   retries: z.number(),
   images: z.record(z.string(), ImagesSchema).optional(),
+  visualDeclarations: z.array(ScreenshotDeclarationSchema).optional(),
   error: z.string().optional(),
   duration: z.number().optional()
 });
@@ -245,6 +427,10 @@ var TestEndDataSchema = z.object({
   status: z.enum(["passed", "failed", "skipped"]),
   attachments: z.array(AttachmentSchema),
   visualNames: z.array(z.string()).default([]),
+  visualDeclarations: z.preprocess(
+    (value) => value === null ? void 0 : value,
+    z.array(ScreenshotDeclarationSchema).optional()
+  ),
   error: z.string().optional(),
   duration: z.number().optional()
 });
@@ -309,5 +495,6 @@ export {
   OfflineReportSchema,
   ApproveRequestBodySchema,
   ClientBootstrapDataSchema,
-  safeParse
+  safeParse,
+  resolveBaselineTargets
 };

package/dist/{chunk-IH44LYNM.js → chunk-OMDYTNWY.js}

@@ -9,11 +9,12 @@ import {
   applyTestEndEvent,
   createMutableReportState,
   finalizeRunEvent,
+  resolveBaselineTargets,
   safeParse
-} from "./chunk-MWLM3HWS.js";
+} from "./chunk-JGS2VWQP.js";
 
 // src/server/app.ts
-import { dirname as dirname2, join as join4 } from "path";
+import { dirname as dirname3, join as join4 } from "path";
 import { fileURLToPath } from "url";
 import pLimit from "p-limit";
 
@@ -316,7 +317,8 @@ async function watchReportArtifacts(options) {
 }
 
 // src/server/routes.ts
-import { join as join3 } from "path";
+import { existsSync } from "fs";
+import { dirname as dirname2, join as join3 } from "path";
 var LIVE_UPDATES_WEBSOCKET_PATH = "/";
 function isWebSocketUpgradeRequest(req) {
   return new URL(req.url).pathname === LIVE_UPDATES_WEBSOCKET_PATH && req.headers.get("upgrade")?.toLowerCase() === "websocket";
@@ -339,6 +341,37 @@ async function handleSrcFiles(req) {
 function handleApiReport(ctx) {
   return Response.json(ctx.reportData);
 }
+var APPROVAL_TARGET_ERROR = "Could not resolve approval target";
+function actualPathFromUrl(ctx, actualUrl) {
+  return actualUrl.startsWith("/screenshots/") ? join3(ctx.reportData.screenshotDir, actualUrl.slice("/screenshots/".length)) : actualUrl;
+}
+function reporterTitlePath(test) {
+  const testFile = test.location?.file;
+  return ["", test.browser, testFile ?? "", ...test.titlePath, test.title];
+}
+function resolveApprovalTarget(ctx, test, retry, imageName) {
+  const testFile = test.location?.file;
+  const declaration = test.results?.[retry]?.visualDeclarations?.find((candidate) => candidate.visualName === imageName);
+  if (ctx.approvalRouting === void 0 || testFile === void 0 || declaration === void 0) {
+    return null;
+  }
+  const targets = resolveBaselineTargets({
+    testFile,
+    reporterTitlePath: reporterTitlePath(test),
+    declarations: [declaration],
+    config: {
+      configDir: ctx.approvalRouting.configDir,
+      testDir: ctx.approvalRouting.playwrightTestDir ?? dirname2(testFile),
+      snapshotDir: ctx.approvalRouting.playwrightSnapshotDir ?? dirname2(testFile),
+      projectName: test.browser,
+      snapshotSuffix: process.platform,
+      snapshotPathTemplate: ctx.approvalRouting.playwrightSnapshotPathTemplate,
+      toHaveScreenshotPathTemplate: ctx.approvalRouting.playwrightToHaveScreenshotPathTemplate
+    },
+    snapshotPathExists: existsSync
+  });
+  return targets.length === 1 ? targets[0]?.snapshotPath ?? null : null;
+}
 async function handleApiApprove(ctx, req) {
   try {
     const rawBody = await req.json();
@@ -349,61 +382,96 @@ async function handleApiApprove(ctx, req) {
     }
     const { id, retry, image } = parsed;
     const test = ctx.reportData.tests[id];
-    if (test !== null && test !== void 0) {
-      test.approved ??= {};
-      test.approved[image] = retry;
+    if (test === void 0) {
+      return Response.json({ success: false, error: "Test not found" }, { status: 404 });
+    }
+    const actualUrl = test.results?.[retry]?.images?.[image]?.actual;
+    if (actualUrl === void 0) {
+      return Response.json({ success: false, error: "Actual image not found" }, { status: 409 });
+    }
+    const snapshotPath = resolveApprovalTarget(ctx, test, retry, image);
+    if (snapshotPath === null) {
+      return Response.json({ success: false, error: APPROVAL_TARGET_ERROR }, { status: 409 });
+    }
+    try {
+      await copyFilePortable(actualPathFromUrl(ctx, actualUrl), snapshotPath);
+      test.approved = { ...test.approved ?? {}, [image]: retry };
       await ctx.saveReport();
-      const actualUrl = test.results?.[retry]?.images?.[image]?.actual;
-      if (actualUrl !== null && actualUrl !== void 0 && test.location?.file !== null && test.location?.file !== void 0) {
-        const actualPath = actualUrl.replace("/screenshots/", `${ctx.reportData.screenshotDir}/`);
-        const snapshotPath = `${test.location.file}-snapshots/${image}-${test.browser}-${process.platform}.png`;
-        try {
-          await copyFilePortable(actualPath, snapshotPath);
-          console.log(`  \u2714 Updated baseline: ${snapshotPath}`);
-        } catch (err) {
-          const errorMsg = err instanceof Error ? err.message : String(err);
-          console.error(`  \u2717 Failed to update baseline: ${errorMsg}`);
-        }
-      }
+      console.log(`  \u2714 Updated baseline: ${snapshotPath}`);
       console.log(`  \u2714 Approved [${test.browser}] ${test.title} \u2014 ${image}`);
+      return Response.json({ success: true });
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error(`  \u2717 Failed to update baseline: ${errorMsg}`);
+      return Response.json({ success: false, error: "Failed to update baseline" }, { status: 500 });
     }
-    return Response.json({ success: true });
   } catch {
     return Response.json({ success: false, error: "Invalid request" }, { status: 400 });
   }
 }
-async function handleApiApproveAll(ctx) {
-  let approvedCount = 0;
-  const baselineUpdates = [];
-  Object.values(ctx.reportData.tests).forEach((test) => {
-    if (!test?.results) return;
-    const approved = {};
+function createBulkApprovalUpdates(ctx) {
+  return Object.values(ctx.reportData.tests).flatMap((test) => {
+    if (!test.results || test.results.length === 0) {
+      return [];
+    }
     const lastRetry = test.results.length - 1;
     const lastResult = test.results[lastRetry];
-    if (!lastResult?.images) return;
-    Object.keys(lastResult.images).forEach((imageName) => {
-      approved[imageName] = lastRetry;
-      approvedCount++;
+    if (!lastResult?.images) {
+      return [];
+    }
+    return Object.keys(lastResult.images).flatMap((imageName) => {
       const actualUrl = lastResult.images?.[imageName]?.actual;
-      if (actualUrl !== null && actualUrl !== void 0 && test.location?.file !== null && test.location?.file !== void 0) {
-        const actualPath = actualUrl.replace("/screenshots/", `${ctx.reportData.screenshotDir}/`);
-        const snapshotPath = `${test.location.file}-snapshots/${imageName}-${test.browser}-${process.platform}.png`;
-        baselineUpdates.push(
-          copyFilePortable(actualPath, snapshotPath).then(() => {
-            console.log(`  \u2714 Updated baseline: ${snapshotPath}`);
-          }).catch((err) => {
-            const errorMsg = err instanceof Error ? err.message : String(err);
-            console.error(`  \u2717 Failed to update baseline: ${errorMsg}`);
-          })
-        );
+      if (actualUrl === void 0) {
+        return [Promise.resolve({ kind: "unresolved" })];
+      }
+      const snapshotPath = resolveApprovalTarget(ctx, test, lastRetry, imageName);
+      if (snapshotPath === null) {
+        return [Promise.resolve({ kind: "unresolved" })];
       }
+      return [
+        copyFilePortable(actualPathFromUrl(ctx, actualUrl), snapshotPath).then(
+          () => ({
+            kind: "approved",
+            imageName,
+            retry: lastRetry,
+            snapshotPath,
+            test
+          })
+        ).catch((err) => {
+          const errorMsg = err instanceof Error ? err.message : String(err);
+          console.error(`  \u2717 Failed to update baseline: ${errorMsg}`);
+          return { kind: "failed" };
+        })
+      ];
     });
-    test.approved = approved;
   });
+}
+function summarizeBulkApprovalOutcomes(outcomes) {
+  return outcomes.reduce(
+    (summary, outcome) => {
+      switch (outcome.kind) {
+        case "approved": {
+          outcome.test.approved = { ...outcome.test.approved ?? {}, [outcome.imageName]: outcome.retry };
+          console.log(`  \u2714 Updated baseline: ${outcome.snapshotPath}`);
+          return { ...summary, approved: summary.approved + 1 };
+        }
+        case "unresolved":
+          return { ...summary, unresolved: summary.unresolved + 1 };
+        case "failed":
+          return { ...summary, failed: summary.failed + 1 };
+      }
+    },
+    { approved: 0, unresolved: 0, failed: 0 }
+  );
+}
+async function handleApiApproveAll(ctx) {
+  const outcomes = await Promise.all(createBulkApprovalUpdates(ctx));
+  const counts = summarizeBulkApprovalOutcomes(outcomes);
   await ctx.saveReport();
-  await Promise.all(baselineUpdates);
-  console.log(`  \u2714 Approved all \u2014 ${approvedCount} image(s)`);
-  return Response.json({ success: true });
+  console.log(
+    `  \u2714 Approved all \u2014 approved: ${counts.approved}, unresolved: ${counts.unresolved}, failed: ${counts.failed}`
+  );
+  return Response.json({ success: counts.failed === 0, ...counts });
 }
 async function handleApiImages(req) {
   const path = new URL(req.url).pathname.slice("/api/images/".length);
@@ -438,10 +506,10 @@ function handleHttpRequest(ctx, req) {
   if (pathname === "/api/report") {
     return Promise.resolve(handleApiReport(ctx));
   }
-  if (pathname === "/api/approve") {
+  if (pathname === "/api/approve" && req.method === "POST") {
     return handleApiApprove(ctx, req);
   }
-  if (pathname === "/api/approve-all") {
+  if (pathname === "/api/approve-all" && req.method === "POST") {
     return handleApiApproveAll(ctx);
   }
   if (pathname.startsWith("/api/images/")) {
@@ -574,7 +642,7 @@ function createWebSocketMessageHandler(getHandlerContext) {
   };
 }
 async function resolveStaticDir(staticDir) {
-  const currentDir = dirname2(fileURLToPath(import.meta.url));
+  const currentDir = dirname3(fileURLToPath(import.meta.url));
   const candidates = staticDir === void 0 ? [
     currentDir,
     join4(currentDir, "dist"),
@@ -599,7 +667,21 @@ async function resolveReportPath(reportPath) {
   if (await isDirectory(reportPath)) {
     return { reportFile: join4(reportPath, "report.json"), offlineReportDir: reportPath };
   }
-  return { reportFile: reportPath, offlineReportDir: dirname2(reportPath) };
+  return { reportFile: reportPath, offlineReportDir: dirname3(reportPath) };
+}
+function createRoutesContext(reportData, staticDir, saveReport, options) {
+  return {
+    reportData,
+    staticDir,
+    saveReport,
+    approvalRouting: {
+      configDir: options.configDir ?? process.cwd(),
+      playwrightTestDir: options.playwrightTestDir,
+      playwrightSnapshotDir: options.playwrightSnapshotDir,
+      playwrightSnapshotPathTemplate: options.playwrightSnapshotPathTemplate,
+      playwrightToHaveScreenshotPathTemplate: options.playwrightToHaveScreenshotPathTemplate
+    }
+  };
 }
 async function createServerApp(options = {}) {
   const port = options.port ?? 3e3;
@@ -612,11 +694,7 @@ async function createServerApp(options = {}) {
   async function saveReport() {
     await writeJsonFile(reportFile, reportData);
   }
-  const routesContext = {
-    reportData,
-    staticDir,
-    saveReport
-  };
+  const routesContext = createRoutesContext(reportData, staticDir, saveReport, options);
   const getHandlerContext = () => createHandlerContext(reportData, wsClients, currentRunIds, saveReport);
   const handleRequest = (req) => handleHttpRequest(routesContext, req);
   const handleWebSocketMessage = createWebSocketMessageHandler(getHandlerContext);

package/dist/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import {
   startServer
-} from "./chunk-IH44LYNM.js";
-import "./chunk-MWLM3HWS.js";
+} from "./chunk-OMDYTNWY.js";
+import "./chunk-JGS2VWQP.js";
 
 // src/cli.ts
 import { join } from "path";

package/dist/index.css

@@ -324,6 +324,9 @@
   .inline-block {
     display: inline-block;
   }
+  .table {
+    display: table;
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);