@crvy/rprtr 0.0.4 → 0.0.7

package/dist/server.cjs

@@ -35,7 +35,7 @@ __export(server_exports, {
 module.exports = __toCommonJS(server_exports);
 
 // src/server/app.ts
-var import_path4 = require("path");
+var import_path6 = require("path");
 var import_url = require("url");
 var import_p_limit = __toESM(require("p-limit"), 1);
 
@@ -47,6 +47,36 @@ var import_path = require("path");
 function normalizeScreenshotsBaseUrl(baseUrl) {
   return baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
 }
+function classifyImage(image) {
+  if (image.actual !== void 0 || image.diff !== void 0) {
+    return "comparison";
+  }
+  if (image.expect !== void 0) {
+    return "baseline-only";
+  }
+  return "declared-only";
+}
+function withImageSource(image) {
+  return {
+    ...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(
+    Array.from(names, (name) => {
+      const current = images[name] ?? {};
+      return [name, withImageSource(current)];
+    })
+  );
+}
 function attachmentsToImages(attachments, screenshotsBaseUrl = "/screenshots/") {
   const images = {};
   const baseUrl = normalizeScreenshotsBaseUrl(screenshotsBaseUrl);
@@ -57,7 +87,7 @@ function attachmentsToImages(attachments, screenshotsBaseUrl = "/screenshots/")
     const baseName = match[1];
     const role = match[2];
     if (baseName === null || baseName === void 0 || role === null || role === void 0) continue;
-    images[baseName] ??= { actual: "" };
+    images[baseName] ??= {};
     const url = `${baseUrl}${attachment.path}`;
     const img = images[baseName];
     if (img !== null && img !== void 0) {
@@ -68,10 +98,11 @@ function attachmentsToImages(attachments, screenshotsBaseUrl = "/screenshots/")
   }
   for (const key of Object.keys(images)) {
     const img = images[key];
-    if (img?.actual !== null && img?.actual !== void 0 && img?.expect !== null && img?.expect !== void 0 && img?.diff === void 0)
+    if (img?.actual !== void 0 && img?.expect !== void 0 && img?.diff === void 0) {
       delete img.expect;
+    }
   }
-  return images;
+  return mergeDeclaredImages(images, []);
 }
 function mapStatus(status) {
   switch (status) {
@@ -87,17 +118,39 @@ function mapStatus(status) {
 }
 
 // src/report-state.ts
-function hasReviewablePassingImages(images) {
-  return Object.values(images).some(
-    (img) => img !== null && img !== void 0 && img.actual !== null && img.actual !== void 0 && img.diff === void 0
-  );
+function isCurrentArtifact(image) {
+  return image?.actual !== void 0 || image?.expect !== void 0 || image?.diff !== void 0;
+}
+function isReusablePassingImage(image) {
+  const source = image.source ?? classifyImage(image);
+  if (source === "comparison") {
+    return image.actual !== void 0 && image.diff === void 0;
+  }
+  return source === "baseline-only";
+}
+function hasReusablePassingImages(images) {
+  return Object.values(images).some((img) => img !== null && img !== void 0 && isReusablePassingImage(img));
 }
 function preservePreviousPassingImages(test, status, images) {
-  if (status !== "passed" || Object.keys(images).length > 0) {
+  if (status !== "passed") {
     return images;
   }
   const previousImages = test.results?.[0]?.images ?? {};
-  return hasReviewablePassingImages(previousImages) ? previousImages : images;
+  if (!hasReusablePassingImages(previousImages)) {
+    return images;
+  }
+  return Object.entries(previousImages).reduce((currentImages, [name, previousImage]) => {
+    if (!Object.hasOwn(currentImages, name) || previousImage === void 0 || !isReusablePassingImage(previousImage) || isCurrentArtifact(currentImages[name])) {
+      return currentImages;
+    }
+    return {
+      ...currentImages,
+      [name]: {
+        ...previousImage,
+        source: previousImage.source ?? classifyImage(previousImage)
+      }
+    };
+  }, images);
 }
 function countDiffImages(images) {
   return Object.values(images).filter((img) => img?.diff !== null && img?.diff !== void 0).length;
@@ -133,10 +186,15 @@ function applyTestEndEvent(state, data, options = {}) {
     return null;
   }
   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,
-    attachmentsToImages(data.attachments, options.screenshotsBaseUrl)
+    mergeDeclaredImages(
+      attachmentsToImages(data.attachments, options.screenshotsBaseUrl),
+      getDeclaredVisualNames(data.visualNames, visualDeclarations)
+    )
   );
   const diffCount = countDiffImages(images);
   const hasDiffs = diffCount > 0;
@@ -145,9 +203,10 @@ function applyTestEndEvent(state, data, options = {}) {
   }
   test.results = [
     {
-      status: data.status === "passed" ? "success" : "failed",
+      status: resultStatus,
       retries: 0,
       images,
+      visualDeclarations,
       error: data.error,
       duration: data.duration
     }
@@ -177,23 +236,40 @@ var LocationSchema = import_zod.z.object({
   file: import_zod.z.string(),
   line: import_zod.z.number()
 });
+var VisualSourceSchema = import_zod.z.enum(["comparison", "baseline-only", "declared-only"]);
 var ImagesSchema = import_zod.z.object({
-  actual: import_zod.z.string(),
+  actual: import_zod.z.string().optional(),
   expect: import_zod.z.string().optional(),
   diff: import_zod.z.string().optional(),
-  error: import_zod.z.string().optional()
+  error: import_zod.z.string().optional(),
+  source: VisualSourceSchema.optional()
 });
+var ScreenshotDeclarationSchema = import_zod.z.discriminatedUnion("kind", [
+  import_zod.z.object({
+    visualName: import_zod.z.string(),
+    kind: import_zod.z.literal("named"),
+    declaredName: import_zod.z.string(),
+    snapshotBaseName: import_zod.z.string(),
+    occurrenceIndex: import_zod.z.number()
+  }),
+  import_zod.z.object({
+    visualName: import_zod.z.string(),
+    kind: import_zod.z.literal("unnamed"),
+    occurrenceIndex: import_zod.z.number()
+  })
+]);
 var AttachmentSchema = import_zod.z.object({
   name: import_zod.z.string(),
   path: import_zod.z.string(),
   contentType: import_zod.z.string()
 });
 var TestStatusSchema = import_zod.z.enum(["unknown", "pending", "running", "failed", "approved", "success", "retrying"]);
+var TestResultStatusSchema = import_zod.z.enum(["failed", "success", "pending"]);
 var TestResultSchema = import_zod.z.object({
-  status: import_zod.z.enum(["failed", "success"]),
+  status: TestResultStatusSchema,
   retries: import_zod.z.number(),
-  // eslint-disable-next-line typescript/no-unsafe-type-assertion
   images: import_zod.z.record(import_zod.z.string(), ImagesSchema).optional(),
+  visualDeclarations: import_zod.z.array(ScreenshotDeclarationSchema).optional(),
   error: import_zod.z.string().optional(),
   duration: import_zod.z.number().optional()
 });
@@ -221,7 +297,6 @@ var CrvyRprtrSuiteSchema = import_zod.z.lazy(
     opened: import_zod.z.boolean(),
     checked: import_zod.z.boolean(),
     indeterminate: import_zod.z.boolean(),
-    // eslint-disable-next-line typescript/no-unsafe-type-assertion
     children: import_zod.z.record(import_zod.z.string(), import_zod.z.union([CrvyRprtrSuiteSchema, CrvyRprtrTestSchema])).optional()
   })
 );
@@ -240,6 +315,11 @@ var TestEndDataSchema = import_zod.z.object({
   id: import_zod.z.string(),
   status: import_zod.z.enum(["passed", "failed", "skipped"]),
   attachments: import_zod.z.array(AttachmentSchema),
+  visualNames: import_zod.z.array(import_zod.z.string()).default([]),
+  visualDeclarations: import_zod.z.preprocess(
+    (value) => value === null ? void 0 : value,
+    import_zod.z.array(ScreenshotDeclarationSchema).optional()
+  ),
   error: import_zod.z.string().optional(),
   duration: import_zod.z.number().optional()
 });
@@ -480,14 +560,281 @@ function handleSync(ctx) {
   broadcastToBrowsers(ctx.wsClients, { type: "sync", data: ctx.reportData });
 }
 
-// src/server/routes.ts
+// src/server/report-watch.ts
+var import_promises3 = require("fs/promises");
 var import_path3 = require("path");
+var OFFLINE_REPORT_FILE_PATTERN2 = /^crvy-rprtr(?:-\d+)?\.json$/;
+function createDebouncedRefresh(reload, delayMs = 50) {
+  let timer = null;
+  return () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      void reload();
+    }, delayMs);
+  };
+}
+function isFileNotFound2(error) {
+  return typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT";
+}
+async function describeFile(filePath, label) {
+  try {
+    const fileStats = await (0, import_promises3.stat)(filePath);
+    return `${label}:${fileStats.size}:${fileStats.mtimeMs}`;
+  } catch (error) {
+    if (isFileNotFound2(error)) {
+      return null;
+    }
+    throw error;
+  }
+}
+async function createOfflineFingerprint(offlineReportDir) {
+  if (!await isDirectory(offlineReportDir)) {
+    return "offline:missing";
+  }
+  try {
+    const entries = await (0, import_promises3.readdir)(offlineReportDir, { withFileTypes: true });
+    const relevantEntries = entries.filter(
+      (entry) => entry.isFile() && (entry.name === "report.json" || OFFLINE_REPORT_FILE_PATTERN2.test(entry.name))
+    ).sort((left, right) => left.name.localeCompare(right.name));
+    const parts = await Promise.all(
+      relevantEntries.map((entry) => describeFile((0, import_path3.join)(offlineReportDir, entry.name), entry.name))
+    );
+    return `offline:${parts.filter((part) => part !== null).join("|")}`;
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    console.warn(`[Server] Unable to scan ${offlineReportDir}: ${errorMsg}`);
+    return "offline:error";
+  }
+}
+async function createScreenshotFingerprint(screenshotDir, relativePath = "") {
+  const directoryPath = relativePath === "" ? screenshotDir : (0, import_path3.join)(screenshotDir, relativePath);
+  if (!await isDirectory(directoryPath)) {
+    return relativePath === "" ? ["screenshots:missing"] : [];
+  }
+  try {
+    const entries = await (0, import_promises3.readdir)(directoryPath, { withFileTypes: true });
+    const parts = await Promise.all(
+      entries.sort((left, right) => left.name.localeCompare(right.name)).map((entry) => {
+        const entryRelativePath = relativePath === "" ? entry.name : (0, import_path3.join)(relativePath, entry.name);
+        if (entry.isDirectory()) {
+          return createScreenshotFingerprint(screenshotDir, entryRelativePath);
+        }
+        return describeFile((0, import_path3.join)(screenshotDir, entryRelativePath), entryRelativePath);
+      })
+    );
+    return parts.flat().filter((part) => part !== null);
+  } catch (error) {
+    if (isFileNotFound2(error)) {
+      return relativePath === "" ? ["screenshots:missing"] : [];
+    }
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    console.warn(`[Server] Unable to scan ${directoryPath}: ${errorMsg}`);
+    return relativePath === "" ? ["screenshots:error"] : [];
+  }
+}
+async function createArtifactsFingerprint(options) {
+  const [offlineFingerprint, screenshotFingerprint] = await Promise.all([
+    createOfflineFingerprint(options.offlineReportDir),
+    createScreenshotFingerprint(options.screenshotDir)
+  ]);
+  return `${offlineFingerprint}::${screenshotFingerprint.join("|")}`;
+}
+async function watchReportArtifacts(options) {
+  let fingerprint = await createArtifactsFingerprint(options);
+  let isPolling = false;
+  const interval = setInterval(() => {
+    if (isPolling) {
+      return;
+    }
+    isPolling = true;
+    void createArtifactsFingerprint(options).then((nextFingerprint) => {
+      if (nextFingerprint === fingerprint) {
+        return;
+      }
+      fingerprint = nextFingerprint;
+      options.scheduleRefresh();
+    }).catch((error) => {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      console.warn(`[Server] Artifact refresh poll failed: ${errorMsg}`);
+    }).finally(() => {
+      isPolling = false;
+    });
+  }, 100);
+  return () => {
+    clearInterval(interval);
+  };
+}
+
+// src/server/routes.ts
+var import_fs = require("fs");
+var import_path5 = require("path");
+
+// src/snapshot-path-resolver.ts
+var import_crypto = require("crypto");
+var import_path4 = require("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 = (0, import_crypto.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 = (0, import_path4.extname)(filePath)) {
+  const base = filePath.slice(0, filePath.length - extension.length);
+  return sanitizeForFilePath(base) + extension;
+}
+function addSuffixToFilePath(filePath, suffix) {
+  const extension = (0, import_path4.extname)(filePath);
+  return filePath.slice(0, filePath.length - extension.length) + suffix + extension;
+}
+function normalizedSnapshotDir(config) {
+  return (0, import_path4.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 = (0, import_path4.relative)(input.config.testDir, input.testFile);
+  const parsed = (0, import_path4.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 (0, import_path4.resolve)(input.config.configDir, snapshotPath);
+}
+function removeExtension(filePath, extension = (0, import_path4.extname)(filePath)) {
+  return filePath.slice(0, filePath.length - extension.length);
+}
+function snapshotNameParts(declaredName) {
+  const extension = (0, import_path4.extname)(declaredName) || ".png";
+  return {
+    extension,
+    filePath: (0, import_path4.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 = (0, import_path4.join)((0, import_path4.dirname)(occurrenceFilePath), (0, import_path4.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(reporterTitlePath2) {
+  return reporterTitlePath2.slice(3).filter((part) => part !== "");
+}
+function anonymousName(reporterTitlePath2, occurrenceIndex) {
+  const rawAnonymousName = `${reporterTitlesWithoutProjectAndFile(reporterTitlePath2).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 = (0, import_path4.join)((0, import_path4.dirname)(anonymousFileName), (0, import_path4.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/server/routes.ts
 var LIVE_UPDATES_WEBSOCKET_PATH = "/";
 function isWebSocketUpgradeRequest(req) {
   return new URL(req.url).pathname === LIVE_UPDATES_WEBSOCKET_PATH && req.headers.get("upgrade")?.toLowerCase() === "websocket";
 }
 async function handleRoot(ctx) {
-  const html = await respondWithFile((0, import_path3.join)(ctx.staticDir, "index.html"), "text/html");
+  const html = await respondWithFile((0, import_path5.join)(ctx.staticDir, "index.html"), "text/html");
   return html ?? new Response("Not Found", { status: 404 });
 }
 async function handleAppCss() {
@@ -504,6 +851,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/") ? (0, import_path5.join)(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 ?? (0, import_path5.dirname)(testFile),
+      snapshotDir: ctx.approvalRouting.playwrightSnapshotDir ?? (0, import_path5.dirname)(testFile),
+      projectName: test.browser,
+      snapshotSuffix: process.platform,
+      snapshotPathTemplate: ctx.approvalRouting.playwrightSnapshotPathTemplate,
+      toHaveScreenshotPathTemplate: ctx.approvalRouting.playwrightToHaveScreenshotPathTemplate
+    },
+    snapshotPathExists: import_fs.existsSync
+  });
+  return targets.length === 1 ? targets[0]?.snapshotPath ?? null : null;
+}
 async function handleApiApprove(ctx, req) {
   try {
     const rawBody = await req.json();
@@ -514,61 +892,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);
@@ -584,7 +997,7 @@ async function handleScreenshots(ctx, req) {
 }
 async function handleDist(ctx, req) {
   const path = new URL(req.url).pathname.slice("/dist/".length);
-  const filePath = (0, import_path3.join)(ctx.staticDir, path);
+  const filePath = (0, import_path5.join)(ctx.staticDir, path);
   const contentType = filePath.endsWith(".css") ? "text/css" : filePath.endsWith(".js") ? "application/javascript" : filePath.endsWith(".svelte") ? "text/plain" : "application/octet-stream";
   const file = await respondWithFile(filePath, contentType);
   return file ?? new Response("Not Found", { status: 404 });
@@ -603,10 +1016,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/")) {
@@ -688,6 +1101,10 @@ async function loadOfflineReports(offlineReportDir, reportData) {
     screenshotsBaseUrl: "/screenshots/"
   });
 }
+function resetReloadableReportData(reportData) {
+  reportData.tests = {};
+  reportData.isUpdateMode = false;
+}
 async function handleParsedWebSocketMessage(ctx, msg) {
   switch (msg.type) {
     case "test-begin": {
@@ -736,19 +1153,19 @@ function createWebSocketMessageHandler(getHandlerContext) {
   };
 }
 async function resolveStaticDir(staticDir) {
-  const currentDir = (0, import_path4.dirname)((0, import_url.fileURLToPath)(import_meta.url));
+  const currentDir = (0, import_path6.dirname)((0, import_url.fileURLToPath)(import_meta.url));
   const candidates = staticDir === void 0 ? [
     currentDir,
-    (0, import_path4.join)(currentDir, "dist"),
-    (0, import_path4.join)(currentDir, "..", "dist"),
-    (0, import_path4.join)(currentDir, "..", "..", "dist"),
-    (0, import_path4.join)(currentDir, ".."),
-    (0, import_path4.join)(currentDir, "..", "..")
-  ] : [staticDir, (0, import_path4.join)(staticDir, "dist")];
+    (0, import_path6.join)(currentDir, "dist"),
+    (0, import_path6.join)(currentDir, "..", "dist"),
+    (0, import_path6.join)(currentDir, "..", "..", "dist"),
+    (0, import_path6.join)(currentDir, ".."),
+    (0, import_path6.join)(currentDir, "..", "..")
+  ] : [staticDir, (0, import_path6.join)(staticDir, "dist")];
   const resolvedCandidates = await Promise.all(
     candidates.map(async (candidate) => ({
       candidate,
-      exists: await fileExists((0, import_path4.join)(candidate, "index.html"))
+      exists: await fileExists((0, import_path6.join)(candidate, "index.html"))
     }))
   );
   const resolved = resolvedCandidates.find(({ exists }) => exists);
@@ -759,9 +1176,23 @@ async function resolveStaticDir(staticDir) {
 }
 async function resolveReportPath(reportPath) {
   if (await isDirectory(reportPath)) {
-    return { reportFile: (0, import_path4.join)(reportPath, "report.json"), offlineReportDir: reportPath };
+    return { reportFile: (0, import_path6.join)(reportPath, "report.json"), offlineReportDir: reportPath };
   }
-  return { reportFile: reportPath, offlineReportDir: (0, import_path4.dirname)(reportPath) };
+  return { reportFile: reportPath, offlineReportDir: (0, import_path6.dirname)(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;
@@ -774,19 +1205,26 @@ 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);
-  await loadReport(reportFile, reportData);
-  await loadOfflineReports(offlineReportDir, reportData);
+  const reloadFromDisk = async () => {
+    resetReloadableReportData(reportData);
+    await loadReport(reportFile, reportData);
+    await loadOfflineReports(offlineReportDir, reportData);
+    broadcastToBrowsers(wsClients, { type: "sync", data: reportData });
+  };
+  await reloadFromDisk();
+  const close = await watchReportArtifacts({
+    offlineReportDir,
+    screenshotDir: reportData.screenshotDir,
+    scheduleRefresh: createDebouncedRefresh(reloadFromDisk)
+  });
   return {
     port,
     wsClients,
+    close,
     handleRequest,
     handleWebSocketMessage
   };
@@ -967,7 +1405,7 @@ function attachWebSocketServer(server, app) {
   });
 }
 async function listen(server, port) {
-  await new Promise((resolve, reject) => {
+  await new Promise((resolve2, reject) => {
     const onError = (error) => {
       server.off("error", onError);
       reject(error);
@@ -975,7 +1413,7 @@ async function listen(server, port) {
     server.on("error", onError);
     server.listen(port, () => {
       server.off("error", onError);
-      resolve();
+      resolve2();
     });
   });
 }