@crvy/rprtr 0.0.3 → 0.0.5

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.5] - 2026-05-14
+
+### Added
+
+- Classify passed visual assertions in report state
+- Emit declared visual names for screenshot steps
+- Refresh report state from disk changes
+- Label passed visual fallback states in ui
+
+### Documentation
+
+- Describe passed screenshot fallback modes
+
+### Fixed
+
+- **ci:** Checkout hooks submodule
+
+### Miscellaneous
+
+- Add you-lint-not-pass hook integration
+- Exclude hooks repo from root checks
+## [0.0.4] - 2026-04-23
+
+### Added
+
+- Add CJS build for reporter and server entry points
+- Add require export conditions for CJS resolution
+
+### Documentation
+
+- Add publint integration design spec
+- Add publint integration plan
+
+### Fixed
+
+- Add @playwright/test to knip ignoreDependencies
+
+### Miscellaneous
+
+- Remove local smoke-test project
+
+### Testing
+
+- Approve screenshot baselines for darwin and linux
+- Add smoke test for CJS/ESM dual resolution
+
+### Ci
+
+- Run Playwright tests inside Playwright Docker container
+- Add unzip for setup-bun in Playwright container
+- Add publint as non-blocking check in check.sh
+
+### Deps
+
+- Add publint for package.json validation
+- Add publint for package.json validation
+
+### Pub
+
+- Chain publint after build in prepublishOnly
 ## [0.0.3] - 2026-04-10
 
 ### Fixed

package/README.md

@@ -93,6 +93,15 @@ When the server isn't running during tests, the reporter automatically falls bac
 - On test completion, a self-contained `crvy-rprtr.html` is written for direct browser review
 - When the server starts, it loads and merges all `crvy-rprtr-*.json` files from the offline report directory
 
+## Passed Screenshot Modes
+
+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.
+
+When the server is running, Crvy Rprtr also refreshes the UI after report JSON or screenshot artifacts change on disk.
+
 ## Programmatic API
 
 ```ts

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

@@ -10,10 +10,10 @@ import {
   createMutableReportState,
   finalizeRunEvent,
   safeParse
-} from "./chunk-IEYNAB6M.js";
+} from "./chunk-MWLM3HWS.js";
 
 // src/server/app.ts
-import { dirname as dirname2, join as join3 } from "path";
+import { dirname as dirname2, join as join4 } from "path";
 import { fileURLToPath } from "url";
 import pLimit from "p-limit";
 
@@ -207,14 +207,122 @@ function handleSync(ctx) {
   broadcastToBrowsers(ctx.wsClients, { type: "sync", data: ctx.reportData });
 }
 
-// src/server/routes.ts
+// src/server/report-watch.ts
+import { readdir as readdir2, stat as stat2 } from "fs/promises";
 import { join as join2 } from "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 stat2(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 readdir2(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(join2(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 : join2(screenshotDir, relativePath);
+  if (!await isDirectory(directoryPath)) {
+    return relativePath === "" ? ["screenshots:missing"] : [];
+  }
+  try {
+    const entries = await readdir2(directoryPath, { withFileTypes: true });
+    const parts = await Promise.all(
+      entries.sort((left, right) => left.name.localeCompare(right.name)).map((entry) => {
+        const entryRelativePath = relativePath === "" ? entry.name : join2(relativePath, entry.name);
+        if (entry.isDirectory()) {
+          return createScreenshotFingerprint(screenshotDir, entryRelativePath);
+        }
+        return describeFile(join2(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
+import { 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";
 }
 async function handleRoot(ctx) {
-  const html = await respondWithFile(join2(ctx.staticDir, "index.html"), "text/html");
+  const html = await respondWithFile(join3(ctx.staticDir, "index.html"), "text/html");
   return html ?? new Response("Not Found", { status: 404 });
 }
 async function handleAppCss() {
@@ -311,7 +419,7 @@ async function handleScreenshots(ctx, req) {
 }
 async function handleDist(ctx, req) {
   const path = new URL(req.url).pathname.slice("/dist/".length);
-  const filePath = join2(ctx.staticDir, path);
+  const filePath = join3(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 });
@@ -414,6 +522,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": {
@@ -465,16 +577,16 @@ async function resolveStaticDir(staticDir) {
   const currentDir = dirname2(fileURLToPath(import.meta.url));
   const candidates = staticDir === void 0 ? [
     currentDir,
-    join3(currentDir, "dist"),
-    join3(currentDir, "..", "dist"),
-    join3(currentDir, "..", "..", "dist"),
-    join3(currentDir, ".."),
-    join3(currentDir, "..", "..")
-  ] : [staticDir, join3(staticDir, "dist")];
+    join4(currentDir, "dist"),
+    join4(currentDir, "..", "dist"),
+    join4(currentDir, "..", "..", "dist"),
+    join4(currentDir, ".."),
+    join4(currentDir, "..", "..")
+  ] : [staticDir, join4(staticDir, "dist")];
   const resolvedCandidates = await Promise.all(
     candidates.map(async (candidate) => ({
       candidate,
-      exists: await fileExists(join3(candidate, "index.html"))
+      exists: await fileExists(join4(candidate, "index.html"))
     }))
   );
   const resolved = resolvedCandidates.find(({ exists }) => exists);
@@ -485,7 +597,7 @@ async function resolveStaticDir(staticDir) {
 }
 async function resolveReportPath(reportPath) {
   if (await isDirectory(reportPath)) {
-    return { reportFile: join3(reportPath, "report.json"), offlineReportDir: reportPath };
+    return { reportFile: join4(reportPath, "report.json"), offlineReportDir: reportPath };
   }
   return { reportFile: reportPath, offlineReportDir: dirname2(reportPath) };
 }
@@ -508,11 +620,22 @@ async function createServerApp(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
   };

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

@@ -2,6 +2,30 @@
 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 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);
@@ -12,7 +36,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) {
@@ -23,10 +47,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) {
@@ -42,17 +67,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;
@@ -88,10 +135,11 @@ function applyTestEndEvent(state, data, options = {}) {
     return null;
   }
   test.status = mapStatus(data.status);
+  const resultStatus = data.status === "passed" ? "success" : data.status === "failed" ? "failed" : "pending";
   const images = preservePreviousPassingImages(
     test,
     data.status,
-    attachmentsToImages(data.attachments, options.screenshotsBaseUrl)
+    mergeDeclaredImages(attachmentsToImages(data.attachments, options.screenshotsBaseUrl), data.visualNames)
   );
   const diffCount = countDiffImages(images);
   const hasDiffs = diffCount > 0;
@@ -100,7 +148,7 @@ function applyTestEndEvent(state, data, options = {}) {
   }
   test.results = [
     {
-      status: data.status === "passed" ? "success" : "failed",
+      status: resultStatus,
       retries: 0,
       images,
       error: data.error,
@@ -132,11 +180,13 @@ var LocationSchema = z.object({
   file: z.string(),
   line: z.number()
 });
+var VisualSourceSchema = z.enum(["comparison", "baseline-only", "declared-only"]);
 var ImagesSchema = z.object({
-  actual: z.string(),
+  actual: z.string().optional(),
   expect: z.string().optional(),
   diff: z.string().optional(),
-  error: z.string().optional()
+  error: z.string().optional(),
+  source: VisualSourceSchema.optional()
 });
 var AttachmentSchema = z.object({
   name: z.string(),
@@ -144,10 +194,10 @@ var AttachmentSchema = z.object({
   contentType: z.string()
 });
 var TestStatusSchema = z.enum(["unknown", "pending", "running", "failed", "approved", "success", "retrying"]);
+var TestResultStatusSchema = z.enum(["failed", "success", "pending"]);
 var TestResultSchema = z.object({
-  status: z.enum(["failed", "success"]),
+  status: TestResultStatusSchema,
   retries: z.number(),
-  // eslint-disable-next-line typescript/no-unsafe-type-assertion
   images: z.record(z.string(), ImagesSchema).optional(),
   error: z.string().optional(),
   duration: z.number().optional()
@@ -176,7 +226,6 @@ var CrvyRprtrSuiteSchema = z.lazy(
     opened: z.boolean(),
     checked: z.boolean(),
     indeterminate: z.boolean(),
-    // eslint-disable-next-line typescript/no-unsafe-type-assertion
     children: z.record(z.string(), z.union([CrvyRprtrSuiteSchema, CrvyRprtrTestSchema])).optional()
   })
 );
@@ -195,6 +244,7 @@ var TestEndDataSchema = z.object({
   id: z.string(),
   status: z.enum(["passed", "failed", "skipped"]),
   attachments: z.array(AttachmentSchema),
+  visualNames: z.array(z.string()).default([]),
   error: z.string().optional(),
   duration: z.number().optional()
 });

package/dist/cli.js

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

package/dist/index.css

@@ -23,6 +23,8 @@
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -33,6 +35,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -213,6 +216,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -285,6 +291,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
@@ -306,6 +315,12 @@
   .grid {
     display: grid;
   }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -373,9 +388,15 @@
   .w-full {
     width: 100%;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -517,6 +538,12 @@
   .border-edge {
     border-color: var(--color-edge);
   }
+  .border-edge\/70 {
+    border-color: var(--color-edge);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-edge) 70%, transparent);
+    }
+  }
   .border-error {
     border-color: var(--color-error);
   }
@@ -529,6 +556,12 @@
       border-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);
     }
   }
+  .border-info\/40 {
+    border-color: var(--color-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-info) 40%, transparent);
+    }
+  }
   .border-purple-500\/60 {
     border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -583,6 +616,12 @@
   .bg-info {
     background-color: var(--color-info);
   }
+  .bg-info\/10 {
+    background-color: var(--color-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
+    }
+  }
   .bg-purple-500\/25 {
     background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -698,6 +737,10 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -714,6 +757,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -1128,6 +1175,10 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1295,6 +1346,7 @@
       --tw-translate-y: 0;
       --tw-translate-z: 0;
       --tw-border-style: solid;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-ordinal: initial;