@sentinelqa/playwright-reporter 0.1.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) SentinelQA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# Sentinel Playwright Reporter
+
+A Playwright reporter that collects traces, screenshots, videos, and logs into a single debugging report.
+
+Designed to make CI failures easier to diagnose.
+
+![Sentinel Playwright Reporter preview](https://raw.githubusercontent.com/sentinelqa/sentinel/main/public/landing/run_list.png)
+
+## Installation
+
+```bash
+npm install -D @sentinelqa/playwright-reporter
+```
+
+## What you get
+
+✔ Collects traces  
+✔ Captures screenshots on failure  
+✔ Captures videos  
+✔ Aggregates logs  
+✔ Creates a debugging report  
+
+## Usage
+
+```ts
+import { defineConfig } from "@playwright/test";
+import { withSentinel } from "@sentinelqa/playwright-reporter";
+
+export default withSentinel(
+  defineConfig({
+    reporter: [["line"]],
+    outputDir: "test-results",
+    use: {
+      trace: "retain-on-failure",
+      screenshot: "only-on-failure",
+      video: "retain-on-failure"
+    }
+  }),
+  {
+    project: "my-app"
+  }
+);
+```
+
+Then run your normal command:
+
+```bash
+npx playwright test
+```
+
+The reporter generates:
+
+- `./sentinel-report/index.html`
+- `./sentinel-debug.html` as a convenience redirect
+
+## Modes
+
+### Local Mode
+
+Generates debugging reports locally.
+
+No Sentinel key is required. The reporter still collects Playwright artifacts and builds the local debug page.
+
+### Cloud Mode
+
+Uploads CI runs to Sentinel for team debugging and AI analysis.
+
+If `SENTINEL_TOKEN` is set, the reporter uploads to Sentinel instead of generating the local HTML report.
+
+```bash
+SENTINEL_TOKEN=your_project_ingest_token
+```
+
+## Flow
+
+```text
+Playwright CI
+      ↓
+Sentinel Reporter
+      ↓
+Artifacts Collected
+      ↓
+Local Debug Page OR Sentinel Cloud
+```
+
+## Terminal output
+
+Local mode prints one summary per run:
+
+```text
+✔ Artifacts collected
+✔ Sentinel debugging report generated
+
+Report location:
+./sentinel-report/index.html
+
+Optional:
+Upload runs to Sentinel Cloud for:
+• CI history
+• shareable run links
+• AI failure summaries
+
+Learn more: https://sentinelqa.com
+```
+
+## Optional: Sentinel Cloud
+
+If you want to persist CI runs and share debugging links with your team,
+you can connect the reporter to Sentinel Cloud.
+
+Sentinel provides:
+
+- Hosted debugging dashboards
+- CI run history
+- AI-generated failure summaries
+- Flaky test detection
+- Shareable run links
+
+Create a free account at [sentinelqa.com](https://sentinelqa.com).
+
+Free plan includes:
+
+- 100 CI runs per month
+- 50 AI failure summaries
+
+For larger teams, Sentinel also offers Pro and Business plans with higher run limits, longer retention, and advanced collaboration controls.
+
+## Notes
+
+- Existing Playwright JSON and HTML reporter paths are preserved when already configured.
+- The reporter injects JSON and HTML reporters only when they are missing.
+- The local report footer links back to Sentinel Playwright Reporter.

package/dist/env.d.ts

@@ -0,0 +1 @@
+export declare const loadSentinelEnv: () => void;

package/dist/env.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadSentinelEnv = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const parseLine = (line) => {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#"))
+        return null;
+    const eqIndex = trimmed.indexOf("=");
+    if (eqIndex === -1)
+        return null;
+    const key = trimmed.slice(0, eqIndex).trim();
+    if (!key)
+        return null;
+    let value = trimmed.slice(eqIndex + 1).trim();
+    if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.slice(1, -1);
+    }
+    return { key, value };
+};
+const loadSentinelEnv = () => {
+    const candidates = [".env", ".env.local"];
+    for (const candidate of candidates) {
+        const fullPath = path_1.default.resolve(process.cwd(), candidate);
+        if (!fs_1.default.existsSync(fullPath))
+            continue;
+        if (!fs_1.default.statSync(fullPath).isFile())
+            continue;
+        const raw = fs_1.default.readFileSync(fullPath, "utf8");
+        for (const line of raw.split(/\r?\n/)) {
+            const parsed = parseLine(line);
+            if (!parsed)
+                continue;
+            if (typeof process.env[parsed.key] === "undefined") {
+                process.env[parsed.key] = parsed.value;
+            }
+        }
+    }
+};
+exports.loadSentinelEnv = loadSentinelEnv;

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+type ReporterEntry = string | [string] | [string, Record<string, unknown>];
+type PlaywrightUseOptions = {
+    trace?: string;
+    screenshot?: string;
+    video?: string;
+};
+type PlaywrightConfig = {
+    reporter?: ReporterEntry | ReporterEntry[];
+    outputDir?: string;
+    use?: PlaywrightUseOptions;
+    [key: string]: unknown;
+};
+export type SentinelResolvedPaths = {
+    playwrightJsonPath: string;
+    playwrightReportDir: string;
+    testResultsDir: string;
+    artifactDirs: string[];
+};
+export type SentinelPlaywrightOptions = {
+    project?: string;
+    playwrightJsonPath?: string;
+    playwrightReportDir?: string;
+    testResultsDir?: string;
+    artifactDirs?: string[];
+    verbose?: boolean;
+    localReportDir?: string;
+    localReportFileName?: string;
+    localRedirectFileName?: string;
+};
+export declare function withSentinel(config: PlaywrightConfig, options?: SentinelPlaywrightOptions): PlaywrightConfig;
+export declare function resolveSentinelPaths(config: PlaywrightConfig, options?: SentinelPlaywrightOptions): SentinelResolvedPaths;
+export {};

package/dist/index.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSentinel = withSentinel;
+exports.resolveSentinelPaths = resolveSentinelPaths;
+const path_1 = __importDefault(require("path"));
+const DEFAULT_REPORT_DIR = "playwright-report";
+const DEFAULT_TEST_RESULTS_DIR = "test-results";
+const cloneEntry = (entry) => {
+    if (!Array.isArray(entry))
+        return entry;
+    const [name, options] = entry;
+    return options ? [name, { ...options }] : [name];
+};
+const normalizeReporter = (reporter) => {
+    if (!reporter)
+        return [];
+    if (!Array.isArray(reporter))
+        return [cloneEntry(reporter)];
+    if (reporter.length === 0)
+        return [];
+    const maybeTuple = typeof reporter[0] === "string" &&
+        (reporter.length === 1 ||
+            (reporter.length === 2 &&
+                !Array.isArray(reporter[1]) &&
+                typeof reporter[1] === "object"));
+    if (maybeTuple) {
+        return [cloneEntry(reporter)];
+    }
+    return reporter.map(cloneEntry);
+};
+const getReporterName = (entry) => {
+    return Array.isArray(entry) ? entry[0] : entry;
+};
+const getReporterOptions = (entry) => {
+    if (!entry || !Array.isArray(entry))
+        return {};
+    return entry[1] || {};
+};
+const normalizePath = (value) => {
+    return value.replace(/\\/g, "/");
+};
+const setReporterOptions = (reporters, name, options) => {
+    const index = reporters.findIndex((entry) => getReporterName(entry) === name);
+    if (index === -1) {
+        reporters.push([name, options]);
+        return;
+    }
+    const existing = reporters[index];
+    if (Array.isArray(existing)) {
+        reporters[index] = [name, { ...(existing[1] || {}), ...options }];
+        return;
+    }
+    reporters[index] = [name, options];
+};
+function withSentinel(config, options = {}) {
+    const nextConfig = {
+        ...config,
+        use: {
+            ...config.use,
+            trace: config.use?.trace || "retain-on-failure",
+            screenshot: config.use?.screenshot || "only-on-failure",
+            video: config.use?.video || "retain-on-failure"
+        }
+    };
+    const reporters = normalizeReporter(config.reporter);
+    const existingJsonReporter = reporters.find((entry) => getReporterName(entry) === "json");
+    const existingHtmlReporter = reporters.find((entry) => getReporterName(entry) === "html");
+    const existingJsonOutputFile = getReporterOptions(existingJsonReporter).outputFile;
+    const existingHtmlOutputFolder = getReporterOptions(existingHtmlReporter).outputFolder;
+    const testResultsDir = options.testResultsDir || config.outputDir || DEFAULT_TEST_RESULTS_DIR;
+    const playwrightReportDir = options.playwrightReportDir ||
+        (typeof existingHtmlOutputFolder === "string"
+            ? existingHtmlOutputFolder
+            : DEFAULT_REPORT_DIR);
+    const playwrightJsonPath = options.playwrightJsonPath ||
+        (typeof existingJsonOutputFile === "string"
+            ? existingJsonOutputFile
+            : path_1.default.join(playwrightReportDir, "report.json"));
+    const artifactDirs = Array.from(new Set((options.artifactDirs || [])
+        .filter(Boolean)
+        .map((entry) => normalizePath(entry))));
+    nextConfig.outputDir = testResultsDir;
+    setReporterOptions(reporters, "json", { outputFile: playwrightJsonPath });
+    setReporterOptions(reporters, "html", {
+        outputFolder: playwrightReportDir,
+        open: "never"
+    });
+    const sentinelReporterPath = require.resolve("./reporter");
+    const sentinelReporterOptions = {
+        project: options.project || null,
+        playwrightJsonPath,
+        playwrightReportDir,
+        testResultsDir,
+        artifactDirs,
+        verbose: options.verbose ?? false,
+        localReportDir: options.localReportDir,
+        localReportFileName: options.localReportFileName,
+        localRedirectFileName: options.localRedirectFileName
+    };
+    const sentinelIndex = reporters.findIndex((entry) => getReporterName(entry) === sentinelReporterPath);
+    if (sentinelIndex !== -1) {
+        reporters.splice(sentinelIndex, 1);
+    }
+    reporters.push([sentinelReporterPath, sentinelReporterOptions]);
+    nextConfig.reporter = reporters;
+    return nextConfig;
+}
+function resolveSentinelPaths(config, options = {}) {
+    const reporters = normalizeReporter(config.reporter);
+    const existingJsonReporter = reporters.find((entry) => getReporterName(entry) === "json");
+    const existingHtmlReporter = reporters.find((entry) => getReporterName(entry) === "html");
+    const existingJsonOutputFile = getReporterOptions(existingJsonReporter).outputFile;
+    const existingHtmlOutputFolder = getReporterOptions(existingHtmlReporter).outputFolder;
+    const testResultsDir = options.testResultsDir || config.outputDir || DEFAULT_TEST_RESULTS_DIR;
+    const playwrightReportDir = options.playwrightReportDir ||
+        (typeof existingHtmlOutputFolder === "string"
+            ? existingHtmlOutputFolder
+            : DEFAULT_REPORT_DIR);
+    const playwrightJsonPath = options.playwrightJsonPath ||
+        (typeof existingJsonOutputFile === "string"
+            ? existingJsonOutputFile
+            : path_1.default.join(playwrightReportDir, "report.json"));
+    const artifactDirs = Array.from(new Set((options.artifactDirs || [])
+        .filter(Boolean)
+        .map((entry) => normalizePath(entry))));
+    return {
+        playwrightJsonPath: normalizePath(playwrightJsonPath),
+        playwrightReportDir: normalizePath(playwrightReportDir),
+        testResultsDir: normalizePath(testResultsDir),
+        artifactDirs
+    };
+}

package/dist/localReport.d.ts

@@ -0,0 +1,25 @@
+type ReporterSourcePaths = {
+    playwrightJsonPath: string;
+    playwrightReportDir: string;
+    testResultsDir: string;
+    artifactDirs: string[];
+};
+type LocalReportOptions = ReporterSourcePaths & {
+    reportDir?: string;
+    reportFileName?: string;
+    redirectFileName?: string;
+};
+type LocalReportSummary = {
+    total: number;
+    failed: number;
+    passed: number;
+    skipped: number;
+};
+type LocalReportResult = {
+    htmlPath: string;
+    redirectPath: string;
+    artifactCount: number;
+    summary: LocalReportSummary;
+};
+export declare function generateLocalDebugReport(options: LocalReportOptions): LocalReportResult;
+export {};

package/dist/localReport.js

@@ -0,0 +1,652 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateLocalDebugReport = generateLocalDebugReport;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const crypto_1 = __importDefault(require("crypto"));
+const DEFAULT_REPORT_DIR = "sentinel-report";
+const DEFAULT_REPORT_FILE = "index.html";
+const DEFAULT_REDIRECT_FILE = "sentinel-debug.html";
+const SENTINEL_URL = "https://sentinelqa.com";
+const ARTIFACT_EXTENSIONS = {
+    trace: [".zip"],
+    screenshot: [".png", ".jpg", ".jpeg", ".webp", ".gif"],
+    video: [".webm", ".mp4", ".mov"],
+    log: [".log", ".txt", ".jsonl"],
+    network: [".har"],
+    report: [".html", ".json"],
+    attachment: []
+};
+const escapeHtml = (value) => value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+const ensureDir = (dirPath) => {
+    fs_1.default.mkdirSync(dirPath, { recursive: true });
+};
+const safeSlug = (value) => {
+    return (value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64) || "artifact");
+};
+const formatDuration = (durationMs) => {
+    if (!Number.isFinite(durationMs) || durationMs <= 0)
+        return "0 ms";
+    if (durationMs < 1000)
+        return `${Math.round(durationMs)} ms`;
+    return `${(durationMs / 1000).toFixed(durationMs >= 10000 ? 0 : 1)} s`;
+};
+const relativeFromCwd = (targetPath) => {
+    const relative = path_1.default.relative(process.cwd(), targetPath).replace(/\\/g, "/");
+    if (!relative || relative === "")
+        return ".";
+    return relative.startsWith(".") ? relative : `./${relative}`;
+};
+const isRelevantArtifact = (filePath) => {
+    const lower = path_1.default.basename(filePath).toLowerCase();
+    if (lower === "index.html" || lower === "report.json")
+        return true;
+    return Object.values(ARTIFACT_EXTENSIONS)
+        .flat()
+        .some((ext) => lower.endsWith(ext));
+};
+const classifyArtifact = (filePath) => {
+    const lower = path_1.default.basename(filePath).toLowerCase();
+    if (lower.includes("trace") && lower.endsWith(".zip"))
+        return "trace";
+    if (ARTIFACT_EXTENSIONS.screenshot.some((ext) => lower.endsWith(ext))) {
+        return "screenshot";
+    }
+    if (ARTIFACT_EXTENSIONS.video.some((ext) => lower.endsWith(ext))) {
+        return "video";
+    }
+    if (ARTIFACT_EXTENSIONS.log.some((ext) => lower.endsWith(ext))) {
+        return "log";
+    }
+    if (ARTIFACT_EXTENSIONS.network.some((ext) => lower.endsWith(ext))) {
+        return "network";
+    }
+    if (ARTIFACT_EXTENSIONS.report.some((ext) => lower.endsWith(ext))) {
+        return "report";
+    }
+    if (lower.endsWith(".zip"))
+        return "trace";
+    return "attachment";
+};
+const listFilesRecursive = (dirPath) => {
+    if (!fs_1.default.existsSync(dirPath) || !fs_1.default.statSync(dirPath).isDirectory())
+        return [];
+    const results = [];
+    for (const entry of fs_1.default.readdirSync(dirPath, { withFileTypes: true })) {
+        const fullPath = path_1.default.join(dirPath, entry.name);
+        if (entry.isDirectory()) {
+            results.push(...listFilesRecursive(fullPath));
+            continue;
+        }
+        if (entry.isFile() && isRelevantArtifact(fullPath)) {
+            results.push(fullPath);
+        }
+    }
+    return results;
+};
+const dedupePaths = (paths) => {
+    return Array.from(new Set(paths.map((entry) => path_1.default.resolve(entry))));
+};
+const resolveExistingFile = (candidate, baseDirs) => {
+    if (!candidate)
+        return null;
+    const attempts = path_1.default.isAbsolute(candidate)
+        ? [candidate]
+        : baseDirs.map((baseDir) => path_1.default.resolve(baseDir, candidate));
+    for (const attempt of attempts) {
+        if (!fs_1.default.existsSync(attempt))
+            continue;
+        const stat = fs_1.default.statSync(attempt);
+        if (stat.isFile())
+            return attempt;
+    }
+    return null;
+};
+const copyArtifact = (sourcePath, kind, reportDir, usedRelativePaths, testId) => {
+    const hash = crypto_1.default
+        .createHash("sha1")
+        .update(sourcePath)
+        .digest("hex")
+        .slice(0, 10);
+    const sourceName = path_1.default.basename(sourcePath);
+    const candidateName = `${safeSlug(path_1.default.parse(sourceName).name)}-${hash}${path_1.default.extname(sourceName)}`;
+    let relativePath = path_1.default.join("artifacts", candidateName).replace(/\\/g, "/");
+    if (usedRelativePaths.has(relativePath)) {
+        relativePath = path_1.default
+            .join("artifacts", `${safeSlug(path_1.default.parse(sourceName).name)}-${hash}-1${path_1.default.extname(sourceName)}`)
+            .replace(/\\/g, "/");
+    }
+    usedRelativePaths.add(relativePath);
+    const destination = path_1.default.join(reportDir, relativePath);
+    ensureDir(path_1.default.dirname(destination));
+    fs_1.default.copyFileSync(sourcePath, destination);
+    return {
+        sourcePath,
+        fileName: path_1.default.basename(destination),
+        relativePath,
+        kind,
+        label: sourceName,
+        testId
+    };
+};
+const flattenTests = (node, parentTitles = []) => {
+    const nextTitles = node?.title ? [...parentTitles, node.title] : parentTitles;
+    const currentTests = Array.isArray(node?.tests)
+        ? node.tests.map((test) => {
+            const titlePath = [...nextTitles, test.title].filter(Boolean);
+            const results = Array.isArray(test.results) ? test.results : [];
+            const lastResult = results.length > 0 ? results[results.length - 1] : null;
+            const errors = results.flatMap((result) => Array.isArray(result?.errors)
+                ? result.errors
+                    .map((error) => error?.message || error?.stack || String(error || ""))
+                    .filter(Boolean)
+                : []);
+            const duration = results.reduce((total, result) => total + (Number(result?.duration) || 0), 0);
+            const id = [
+                test.location?.file || "unknown",
+                test.projectName || "default",
+                titlePath.join(" > ")
+            ].join("::");
+            return {
+                id,
+                title: test.title || "Untitled test",
+                titlePath,
+                file: test.location?.file || null,
+                projectName: test.projectName || null,
+                status: test.status || lastResult?.status || "unknown",
+                duration,
+                errors,
+                artifacts: []
+            };
+        })
+        : [];
+    const childTests = Array.isArray(node?.suites)
+        ? node.suites.flatMap((suite) => flattenTests(suite, nextTitles))
+        : [];
+    return [...currentTests, ...childTests];
+};
+const summarizeTests = (tests) => {
+    return tests.reduce((summary, test) => {
+        summary.total += 1;
+        if (test.status === "passed")
+            summary.passed += 1;
+        else if (test.status === "skipped")
+            summary.skipped += 1;
+        else if (["failed", "timedOut", "interrupted"].includes(test.status)) {
+            summary.failed += 1;
+        }
+        return summary;
+    }, { total: 0, failed: 0, passed: 0, skipped: 0 });
+};
+const renderArtifact = (artifact) => {
+    const href = escapeHtml(artifact.relativePath);
+    const label = escapeHtml(artifact.label);
+    if (artifact.kind === "screenshot") {
+        return `
+      <div class="artifact-card">
+        <div class="artifact-meta">
+          <span class="artifact-kind">Screenshot</span>
+          <a href="${href}" target="_blank" rel="noreferrer">${label}</a>
+        </div>
+        <img src="${href}" alt="${label}" loading="lazy" />
+      </div>
+    `;
+    }
+    if (artifact.kind === "video") {
+        return `
+      <div class="artifact-card">
+        <div class="artifact-meta">
+          <span class="artifact-kind">Video</span>
+          <a href="${href}" target="_blank" rel="noreferrer">${label}</a>
+        </div>
+        <video controls preload="metadata" src="${href}"></video>
+      </div>
+    `;
+    }
+    return `
+    <div class="artifact-link">
+      <span class="artifact-kind">${escapeHtml(artifact.kind)}</span>
+      <a href="${href}" target="_blank" rel="noreferrer">${label}</a>
+    </div>
+  `;
+};
+const renderTestCard = (test) => {
+    const statusClass = test.status === "passed" ? "status-passed" : "status-failed";
+    const fileLine = test.file ? `<div class="meta-item">${escapeHtml(test.file)}</div>` : "";
+    const projectLine = test.projectName
+        ? `<div class="meta-item">Project: ${escapeHtml(test.projectName)}</div>`
+        : "";
+    const errorBlock = test.errors.length > 0
+        ? `<pre>${escapeHtml(test.errors.join("\n\n"))}</pre>`
+        : `<pre>No error message was attached to this result.</pre>`;
+    const artifactMarkup = test.artifacts.length > 0
+        ? test.artifacts.map((artifact) => renderArtifact(artifact)).join("\n")
+        : `<div class="empty-state">No test-linked artifacts were detected for this result.</div>`;
+    return `
+    <section class="test-card">
+      <div class="test-head">
+        <div>
+          <div class="status-pill ${statusClass}">${escapeHtml(test.status)}</div>
+          <h3>${escapeHtml(test.titlePath.join(" > ") || test.title)}</h3>
+        </div>
+        <div class="meta-stack">
+          ${fileLine}
+          ${projectLine}
+          <div class="meta-item">Duration: ${escapeHtml(formatDuration(test.duration))}</div>
+        </div>
+      </div>
+      <div class="panel">
+        <h4>Error</h4>
+        ${errorBlock}
+      </div>
+      <div class="panel">
+        <h4>Artifacts</h4>
+        <div class="artifact-grid">
+          ${artifactMarkup}
+        </div>
+      </div>
+    </section>
+  `;
+};
+const renderAdditionalArtifacts = (artifacts) => {
+    if (artifacts.length === 0) {
+        return `<div class="empty-state">No additional Playwright artifacts were detected.</div>`;
+    }
+    return `
+    <div class="artifact-list">
+      ${artifacts
+        .map((artifact) => `
+            <div class="artifact-link">
+              <span class="artifact-kind">${escapeHtml(artifact.kind)}</span>
+              <a href="${escapeHtml(artifact.relativePath)}" target="_blank" rel="noreferrer">
+                ${escapeHtml(artifact.label)}
+              </a>
+            </div>
+          `)
+        .join("\n")}
+    </div>
+  `;
+};
+const buildHtml = (tests, summary, extraArtifacts) => {
+    const failedTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    const generatedAt = new Date().toLocaleString();
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sentinel Playwright Reporter</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0d1117;
+        --panel: #161b22;
+        --panel-border: #273042;
+        --text: #f5f7fb;
+        --muted: #98a2b3;
+        --accent: #7dd3fc;
+        --accent-soft: rgba(125, 211, 252, 0.14);
+        --danger: #fb7185;
+        --success: #4ade80;
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(125, 211, 252, 0.12), transparent 30%),
+          linear-gradient(180deg, #0b1020 0%, var(--bg) 42%, #090d14 100%);
+        color: var(--text);
+      }
+      a { color: var(--accent); text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      .page {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 40px 20px 80px;
+      }
+      .hero {
+        padding: 28px;
+        border: 1px solid var(--panel-border);
+        border-radius: 24px;
+        background: rgba(13, 17, 23, 0.88);
+        backdrop-filter: blur(12px);
+      }
+      .eyebrow {
+        color: var(--accent);
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 12px;
+        margin-bottom: 12px;
+      }
+      h1, h2, h3, h4 { margin: 0; }
+      h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1; }
+      .hero p {
+        margin: 14px 0 0;
+        color: var(--muted);
+        max-width: 760px;
+        font-size: 16px;
+        line-height: 1.6;
+      }
+      .summary-grid, .mode-grid {
+        display: grid;
+        gap: 16px;
+        margin-top: 24px;
+      }
+      .summary-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+      .mode-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+      .summary-card, .mode-card, .section-shell, .test-card {
+        border: 1px solid var(--panel-border);
+        border-radius: 20px;
+        background: var(--panel);
+      }
+      .summary-card, .mode-card {
+        padding: 18px;
+      }
+      .summary-label {
+        display: block;
+        color: var(--muted);
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+      }
+      .summary-value {
+        display: block;
+        margin-top: 10px;
+        font-size: 34px;
+        font-weight: 700;
+      }
+      .section-shell {
+        padding: 24px;
+        margin-top: 24px;
+      }
+      .section-shell p {
+        margin: 8px 0 0;
+        color: var(--muted);
+        line-height: 1.6;
+      }
+      .diagram {
+        margin-top: 18px;
+        padding: 18px;
+        border-radius: 16px;
+        background: rgba(125, 211, 252, 0.06);
+        border: 1px dashed rgba(125, 211, 252, 0.3);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        white-space: pre-line;
+        color: #d7e2f0;
+      }
+      .mode-card h3 { font-size: 18px; }
+      .mode-card p { color: var(--muted); line-height: 1.6; }
+      .test-card {
+        padding: 20px;
+        margin-top: 18px;
+      }
+      .test-head {
+        display: flex;
+        justify-content: space-between;
+        gap: 20px;
+        align-items: flex-start;
+      }
+      .status-pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 6px 10px;
+        border-radius: 999px;
+        font-size: 12px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+      }
+      .status-passed { background: rgba(74, 222, 128, 0.12); color: var(--success); }
+      .status-failed { background: rgba(251, 113, 133, 0.12); color: var(--danger); }
+      .meta-stack {
+        min-width: 220px;
+        display: grid;
+        gap: 6px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .panel {
+        margin-top: 18px;
+        padding: 16px;
+        background: rgba(13, 17, 23, 0.74);
+        border: 1px solid rgba(39, 48, 66, 0.9);
+        border-radius: 16px;
+      }
+      pre {
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        margin: 12px 0 0;
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 13px;
+        color: #d5dde8;
+      }
+      .artifact-grid {
+        display: grid;
+        gap: 14px;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        margin-top: 12px;
+      }
+      .artifact-card, .artifact-link {
+        border: 1px solid rgba(39, 48, 66, 0.9);
+        border-radius: 14px;
+        background: rgba(9, 13, 20, 0.9);
+        padding: 12px;
+      }
+      .artifact-card img, .artifact-card video {
+        width: 100%;
+        border-radius: 10px;
+        margin-top: 12px;
+        background: #05070b;
+      }
+      .artifact-meta {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+      }
+      .artifact-kind {
+        display: inline-flex;
+        align-items: center;
+        width: fit-content;
+        padding: 4px 8px;
+        border-radius: 999px;
+        background: var(--accent-soft);
+        color: var(--accent);
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .artifact-list {
+        display: grid;
+        gap: 12px;
+        margin-top: 16px;
+      }
+      .empty-state {
+        color: var(--muted);
+        border: 1px dashed rgba(39, 48, 66, 0.9);
+        border-radius: 14px;
+        padding: 16px;
+      }
+      footer {
+        margin-top: 28px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      @media (max-width: 720px) {
+        .test-head { flex-direction: column; }
+        .meta-stack { min-width: 0; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <header class="hero">
+        <div class="eyebrow">Playwright Reporter for CI Debugging</div>
+        <h1>Sentinel Playwright Reporter</h1>
+        <p>
+          A Playwright reporter that collects traces, screenshots, videos, and logs into
+          a single debugging report. Designed to make CI failures easier to diagnose.
+        </p>
+        <div class="summary-grid">
+          <div class="summary-card">
+            <span class="summary-label">Tests</span>
+            <span class="summary-value">${summary.total}</span>
+          </div>
+          <div class="summary-card">
+            <span class="summary-label">Failed</span>
+            <span class="summary-value">${summary.failed}</span>
+          </div>
+          <div class="summary-card">
+            <span class="summary-label">Passed</span>
+            <span class="summary-value">${summary.passed}</span>
+          </div>
+          <div class="summary-card">
+            <span class="summary-label">Generated</span>
+            <span class="summary-value" style="font-size: 22px;">${escapeHtml(generatedAt)}</span>
+          </div>
+        </div>
+      </header>
+
+      <section class="section-shell">
+        <h2>Modes</h2>
+        <div class="mode-grid">
+          <div class="mode-card">
+            <h3>Local Mode</h3>
+            <p>Generates debugging reports locally with traces, screenshots, videos, and logs copied into this report folder.</p>
+          </div>
+          <div class="mode-card">
+            <h3>Cloud Mode</h3>
+            <p>Uploads CI runs to Sentinel for team debugging, CI history, shareable links, and AI-generated failure summaries.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section-shell">
+        <h2>Flow</h2>
+        <p>This reporter keeps the setup local-first and only adds Sentinel Cloud when a token is configured.</p>
+        <div class="diagram">Playwright CI
+  ↓
+Sentinel Reporter
+  ↓
+Artifacts Collected
+  ↓
+Local Debug Page OR Sentinel Cloud</div>
+      </section>
+
+      <section class="section-shell">
+        <h2>Failed Tests</h2>
+        ${failedTests.length > 0
+        ? failedTests.map((test) => renderTestCard(test)).join("\n")
+        : `<div class="empty-state">No failed tests were found in this run. The local report still includes collected artifacts below.</div>`}
+      </section>
+
+      <section class="section-shell">
+        <h2>Additional Artifacts</h2>
+        <p>Artifacts collected from Playwright output folders that were not directly attached to a single test.</p>
+        ${renderAdditionalArtifacts(extraArtifacts)}
+      </section>
+
+      <footer>
+        Generated by <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">Sentinel Playwright Reporter</a>.
+      </footer>
+    </div>
+  </body>
+</html>`;
+};
+function generateLocalDebugReport(options) {
+    const reportDir = path_1.default.resolve(process.cwd(), options.reportDir || DEFAULT_REPORT_DIR);
+    const reportFileName = options.reportFileName || DEFAULT_REPORT_FILE;
+    const redirectFileName = options.redirectFileName || DEFAULT_REDIRECT_FILE;
+    const reportHtmlPath = path_1.default.join(reportDir, reportFileName);
+    const redirectPath = path_1.default.resolve(process.cwd(), redirectFileName);
+    const usedRelativePaths = new Set();
+    ensureDir(reportDir);
+    const sourceDirs = dedupePaths([
+        options.testResultsDir,
+        options.playwrightReportDir,
+        ...(options.artifactDirs || [])
+    ].filter(Boolean));
+    const baseDirs = dedupePaths([
+        process.cwd(),
+        path_1.default.dirname(options.playwrightJsonPath),
+        ...sourceDirs
+    ]);
+    const reportJsonRaw = fs_1.default.readFileSync(options.playwrightJsonPath, "utf8");
+    const reportJson = JSON.parse(reportJsonRaw);
+    const tests = flattenTests({ suites: reportJson?.suites || [] });
+    const testsById = new Map(tests.map((test) => [test.id, test]));
+    const claimedSourcePaths = new Set();
+    const attachArtifactToTest = (sourcePath, testId) => {
+        const resolved = path_1.default.resolve(sourcePath);
+        if (claimedSourcePaths.has(resolved))
+            return;
+        const artifact = copyArtifact(resolved, classifyArtifact(resolved), reportDir, usedRelativePaths, testId);
+        claimedSourcePaths.add(resolved);
+        if (testId && testsById.has(testId)) {
+            testsById.get(testId).artifacts.push(artifact);
+            return;
+        }
+    };
+    const walkSuites = (node, parentTitles = []) => {
+        const nextTitles = node?.title ? [...parentTitles, node.title] : parentTitles;
+        if (Array.isArray(node?.tests)) {
+            for (const test of node.tests) {
+                const titlePath = [...nextTitles, test.title].filter(Boolean);
+                const testId = [
+                    test.location?.file || "unknown",
+                    test.projectName || "default",
+                    titlePath.join(" > ")
+                ].join("::");
+                const resultList = Array.isArray(test.results) ? test.results : [];
+                for (const result of resultList) {
+                    const attachments = Array.isArray(result?.attachments) ? result.attachments : [];
+                    for (const attachment of attachments) {
+                        const resolvedPath = resolveExistingFile(attachment?.path, baseDirs);
+                        if (!resolvedPath)
+                            continue;
+                        attachArtifactToTest(resolvedPath, testId);
+                    }
+                }
+            }
+        }
+        if (Array.isArray(node?.suites)) {
+            for (const suite of node.suites)
+                walkSuites(suite, nextTitles);
+        }
+    };
+    walkSuites({ suites: reportJson?.suites || [] });
+    const extraArtifacts = [];
+    for (const sourceDir of sourceDirs) {
+        for (const filePath of listFilesRecursive(sourceDir)) {
+            const resolved = path_1.default.resolve(filePath);
+            if (claimedSourcePaths.has(resolved))
+                continue;
+            const artifact = copyArtifact(resolved, classifyArtifact(resolved), reportDir, usedRelativePaths, null);
+            claimedSourcePaths.add(resolved);
+            extraArtifacts.push(artifact);
+        }
+    }
+    const summary = summarizeTests(tests);
+    const html = buildHtml(tests, summary, extraArtifacts);
+    fs_1.default.writeFileSync(reportHtmlPath, html, "utf8");
+    fs_1.default.writeFileSync(redirectPath, `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta http-equiv="refresh" content="0; url=${relativeFromCwd(reportHtmlPath)}" /><title>Sentinel Playwright Reporter</title></head><body><p>Open <a href="${relativeFromCwd(reportHtmlPath)}">${relativeFromCwd(reportHtmlPath)}</a>.</p></body></html>`, "utf8");
+    return {
+        htmlPath: reportHtmlPath,
+        redirectPath,
+        artifactCount: claimedSourcePaths.size,
+        summary
+    };
+}

package/dist/reporter.d.ts

@@ -0,0 +1,21 @@
+type ReporterOptions = {
+    project?: string | null;
+    playwrightJsonPath: string;
+    playwrightReportDir: string;
+    testResultsDir: string;
+    artifactDirs?: string[];
+    verbose?: boolean;
+    localReportDir?: string;
+    localReportFileName?: string;
+    localRedirectFileName?: string;
+};
+declare class SentinelReporter {
+    private failedCount;
+    private totalCount;
+    private options;
+    constructor(options: ReporterOptions);
+    onBegin(config: any, suite: any): void;
+    onTestEnd(_test: any, result: any): void;
+    onEnd(): Promise<void>;
+}
+export = SentinelReporter;

package/dist/reporter.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const path_1 = __importDefault(require("path"));
+const node_1 = require("@sentinelqa/uploader/node");
+const env_1 = require("./env");
+const localReport_1 = require("./localReport");
+const pluralize = (count, singular, plural) => {
+    return count === 1 ? singular : plural;
+};
+class SentinelReporter {
+    constructor(options) {
+        this.failedCount = 0;
+        this.totalCount = 0;
+        (0, env_1.loadSentinelEnv)();
+        this.options = options;
+    }
+    onBegin(config, suite) {
+        this.totalCount = typeof suite?.allTests === "function" ? suite.allTests().length : 0;
+        if (config?.projects?.length && !this.options.project) {
+            this.options.project = config.projects[0]?.name || null;
+        }
+        if (this.options.verbose === true) {
+            console.log("Sentinel detected Playwright artifact paths:");
+            console.log(`- JSON report: ${this.options.playwrightJsonPath}`);
+            console.log(`- HTML report: ${this.options.playwrightReportDir}`);
+            console.log(`- Test results: ${this.options.testResultsDir}`);
+            for (const dir of this.options.artifactDirs || []) {
+                console.log(`- Extra artifacts: ${dir}`);
+            }
+            console.log("");
+        }
+    }
+    onTestEnd(_test, result) {
+        if (!result)
+            return;
+        if (["failed", "timedOut", "interrupted"].includes(result.status)) {
+            this.failedCount += 1;
+        }
+    }
+    async onEnd() {
+        if (!process.env.SENTINEL_TOKEN) {
+            const localReport = (0, localReport_1.generateLocalDebugReport)({
+                playwrightJsonPath: this.options.playwrightJsonPath,
+                playwrightReportDir: this.options.playwrightReportDir,
+                testResultsDir: this.options.testResultsDir,
+                artifactDirs: this.options.artifactDirs || [],
+                reportDir: this.options.localReportDir,
+                reportFileName: this.options.localReportFileName,
+                redirectFileName: this.options.localRedirectFileName
+            });
+            console.log("");
+            console.log("✔ Artifacts collected");
+            console.log("✔ Sentinel debugging report generated");
+            console.log("");
+            console.log("Report location:");
+            const relativeReportPath = path_1.default
+                .relative(process.cwd(), localReport.htmlPath)
+                .replace(/\\/g, "/");
+            console.log(relativeReportPath.startsWith(".") ? relativeReportPath : `./${relativeReportPath}`);
+            console.log("");
+            console.log("Optional:");
+            console.log("Upload runs to Sentinel Cloud for:");
+            console.log("• CI history");
+            console.log("• shareable run links");
+            console.log("• AI failure summaries");
+            console.log("");
+            console.log("Learn more: https://sentinelqa.com");
+            return;
+        }
+        console.log("");
+        console.log("Uploading failure artifacts to Sentinel...");
+        console.log("");
+        const exitCode = await (0, node_1.runSentinelUpload)({
+            playwrightJsonPath: this.options.playwrightJsonPath,
+            playwrightReportDir: this.options.playwrightReportDir,
+            testResultsDir: this.options.testResultsDir,
+            artifactDirs: this.options.artifactDirs || [],
+            suppressSummaryJson: true,
+            env: {
+                SENTINEL_REPORTER_PROJECT: this.options.project || undefined
+            }
+        });
+        if (exitCode !== 0) {
+            throw new Error(`Sentinel upload failed with exit code ${exitCode}`);
+        }
+        console.log("");
+        console.log("✔ Uploaded run to Sentinel");
+    }
+}
+module.exports = SentinelReporter;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sentinelqa/playwright-reporter",
+  "version": "0.1.7",
+  "private": false,
+  "description": "Playwright reporter for CI debugging with optional Sentinel cloud dashboards",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sentinelqa/sentinel"
+  },
+  "keywords": [
+    "sentinelqa",
+    "playwright",
+    "ci",
+    "debugging",
+    "reporter"
+  ],
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./reporter": "./dist/reporter.js"
+  },
+  "peerDependencies": {
+    "@playwright/test": ">=1.40.0"
+  },
+  "dependencies": {
+    "@sentinelqa/uploader": "^0.1.23"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "publish:dry": "npm run build && npm pack --dry-run"
+  }
+}