@sentinelqa/playwright-reporter 0.1.54 → 0.1.56

package/dist/localReport.js

@@ -244,6 +244,23 @@ const readAttachmentJson = (attachments, name, baseDirs) => {
         return null;
     }
 };
+const stripInternalInstructionsFromErrorContextMarkdown = (value) => {
+    // Playwright generates `error-context.md`. Any internal guidance must not appear in user-visible reports.
+    const start = value.match(/^# Instructions[ \t]*\r?\n/m);
+    if (!start)
+        return value;
+    const startIndex = start.index ?? -1;
+    if (startIndex < 0)
+        return value;
+    const rest = value.slice(startIndex);
+    const nextHeading = rest.match(/^# (?!Instructions\b).*$/m);
+    const endIndex = nextHeading && typeof nextHeading.index === "number"
+        ? startIndex + nextHeading.index
+        : value.length;
+    const before = value.slice(0, startIndex);
+    const after = value.slice(endIndex);
+    return `${before.trimEnd()}\n\n${after.trimStart()}`.trim() + "\n";
+};
 const copyArtifact = (sourcePath, kind, reportDir, usedRelativePaths, testId) => {
     const hash = crypto_1.default
         .createHash("sha1")
@@ -261,7 +278,20 @@ const copyArtifact = (sourcePath, kind, reportDir, usedRelativePaths, testId) =>
     usedRelativePaths.add(relativePath);
     const destination = path_1.default.join(reportDir, relativePath);
     ensureDir(path_1.default.dirname(destination));
-    fs_1.default.copyFileSync(sourcePath, destination);
+    const baseName = path_1.default.basename(sourcePath).toLowerCase();
+    if (baseName === "error-context.md") {
+        try {
+            const raw = fs_1.default.readFileSync(sourcePath, "utf8");
+            const cleaned = stripInternalInstructionsFromErrorContextMarkdown(raw);
+            fs_1.default.writeFileSync(destination, cleaned, "utf8");
+        }
+        catch {
+            fs_1.default.copyFileSync(sourcePath, destination);
+        }
+    }
+    else {
+        fs_1.default.copyFileSync(sourcePath, destination);
+    }
     return {
         sourcePath,
         fileName: path_1.default.basename(destination),
@@ -457,7 +487,10 @@ const buildRunDiff = (tests, snapshot) => {
     const currentById = new Map(tests.map((test) => [test.id, test]));
     const currentByMatchKey = new Map(tests.map((test) => [test.matchKey, test]));
     const currentFailures = getFailureTests(tests);
-    const previousFailures = previous.tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    const previousTests = Array.isArray(previous.tests) ? previous.tests : [];
+    if (previousTests.length === 0)
+        return null;
+    const previousFailures = previousTests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test?.status));
     const previousFailureIds = new Set(previousFailures.map((test) => test.id));
     const previousFailureMatchKeys = new Set(previousFailures.map((test) => (typeof test.matchKey === "string" ? test.matchKey : test.id)));
     return {
@@ -1091,7 +1124,7 @@ const tryMapRemainingArtifactsToTests = (tests, artifactPaths, reportDir, usedRe
         }
     }
 };
-const buildHtml = (tests, summary, extraArtifacts, runDiff, diagnosisSummary, failedRunHistory) => {
+const buildLegacyHtml = (tests, summary, extraArtifacts, runDiff, diagnosisSummary, failedRunHistory) => {
     const failedTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
     const similarGroups = groupSimilarFailures(tests);
     const generatedAt = new Date().toLocaleString();
@@ -1766,6 +1799,423 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff, diagnosisSummary, fa
   </body>
 </html>`;
 };
+const buildHtml = (tests, summary, extraArtifacts, _runDiff, diagnosisSummary, _failedRunHistory) => {
+    // New default local report renderer: match the hosted public share report "Root Causes" UI.
+    // Keep legacy renderer in the file as a fallback (and to avoid big diffs).
+    const failedTests = tests.filter((test) => ["failed", "timedOut", "interrupted"].includes(test.status));
+    // Hosted share reports prefer the reporter diagnosis summary (issues[]) for root-cause grouping.
+    // Local reports must match the same canonical evidence and grouping, not re-cluster ad-hoc.
+    const issueGroups = (() => {
+        const issues = (diagnosisSummary?.issues || []).slice(0, 3);
+        if (!issues.length)
+            return [];
+        const failures = getFailureTests(tests);
+        return issues
+            .map((issue) => {
+            const affected = failures.filter((t) => {
+                const matched = findIssueForTest(diagnosisSummary, t);
+                return matched === issue;
+            });
+            return { issue, tests: affected };
+        })
+            .filter((group) => group.tests.length > 0);
+    })();
+    // Fallback: if diagnosis is missing, do a best-effort grouping based on quick per-test signals.
+    const similarGroups = issueGroups.length > 0
+        ? []
+        : groupSimilarFailures(tests)
+            .filter((group) => group.tests.some((t) => ["failed", "timedOut", "interrupted"].includes(t.status)))
+            .map((group) => ({
+            ...group,
+            tests: group.tests.filter((t) => ["failed", "timedOut", "interrupted"].includes(t.status))
+        }))
+            .filter((group) => group.tests.length > 0);
+    const formatDurationMs = (value) => {
+        if (!Number.isFinite(value))
+            return "-";
+        if (value < 1000)
+            return `${Math.round(value)} ms`;
+        const seconds = Math.round(value / 1000);
+        return `${seconds}s`;
+    };
+    const artifactCountByKind = (test) => {
+        const by = {};
+        for (const a of test.artifacts || [])
+            by[a.kind] = (by[a.kind] || 0) + 1;
+        return by;
+    };
+    const renderLocalArtifacts = (test) => {
+        if (!test.artifacts?.length)
+            return `<div class="muted">No artifacts captured.</div>`;
+        return `<div class="artifact-grid">${test.artifacts.map((a) => renderArtifact(a)).join("\n")}</div>`;
+    };
+    const rootCauseTabs = issueGroups.length
+        ? issueGroups
+            .map((group) => {
+            const count = group.tests.length;
+            const label = escapeHtml(group.issue.title || "Root cause");
+            return `<span class="pill pill-muted">${label}<span class="pill-sub">${count} tests</span></span>`;
+        })
+            .join("\n")
+        : similarGroups.length
+            ? similarGroups
+                .map((group) => {
+                const count = group.tests.length;
+                const label = escapeHtml(group.signal || "Root cause");
+                return `<span class="pill pill-muted">${label}<span class="pill-sub">${count} tests</span></span>`;
+            })
+                .join("\n")
+            : `<span class="pill pill-muted">No failures</span>`;
+    const renderIssueGroup = (group) => {
+        const issue = group.issue;
+        const title = escapeHtml(issue.title || "Root cause");
+        const summaryText = escapeHtml(issue.cause || "Inspect failing artifacts and trace.");
+        const evidenceFiles = issue.where ? escapeHtml(issue.where) : "";
+        const evidenceBlocker = issue.blocker ? escapeHtml(issue.blocker) : null;
+        const evidenceTargetState = issue.targetState ? escapeHtml(issue.targetState) : null;
+        const evidenceExpected = issue.expected ? escapeHtml(issue.expected) : null;
+        const evidenceReceived = issue.received ? escapeHtml(issue.received) : null;
+        const evidenceFailingStep = issue.failingStep ? escapeHtml(issue.failingStep) : null;
+        const rows = group.tests
+            .map((test) => {
+            const counts = artifactCountByKind(test);
+            const videoCount = counts.video || 0;
+            const screenshotCount = counts.screenshot || 0;
+            const rowId = escapeHtml(test.id);
+            const title = escapeHtml(test.title);
+            const file = escapeHtml(test.file || "-");
+            const duration = escapeHtml(formatDurationMs(test.duration));
+            const desc = escapeHtml(test.errors?.[0] || "");
+            return `
+          <tr class="row" data-row="${rowId}">
+            <td class="cell cell-test">
+              <button class="chev" type="button" aria-label="Toggle details" data-toggle="${rowId}">›</button>
+              <a class="test-link" href="#${rowId}" data-anchor="${rowId}">${title}</a>
+              ${desc ? `<div class="muted tiny mt-6">${desc}</div>` : ""}
+              <div class="muted tiny">${escapeHtml(test.projectName || "")}</div>
+            </td>
+            <td class="cell cell-file mono muted">${file}</td>
+            <td class="cell">${duration}</td>
+            <td class="cell">
+              <div class="pill-row">
+                ${videoCount > 0 ? `<span class="pill pill-muted">Video ${videoCount}</span>` : ""}
+                ${screenshotCount > 0 ? `<span class="pill pill-muted">Screenshot ${screenshotCount}</span>` : ""}
+              </div>
+            </td>
+            <td class="cell">
+              <button class="btn btn-outline" type="button" data-copy="${rowId}">Copy link</button>
+            </td>
+          </tr>
+          <tr class="row-details" data-details="${rowId}" hidden>
+            <td class="cell details" colspan="5">
+              <div class="details-inner">
+                ${renderLocalArtifacts(test)}
+              </div>
+            </td>
+          </tr>
+        `;
+        })
+            .join("\n");
+        return `
+      <div class="group">
+        <div class="group-head">
+          <div class="kicker">${group.tests.length === 1 ? "1 test shares this root cause" : `${group.tests.length} tests share this root cause`}</div>
+          <div class="group-title">${title}</div>
+          <div class="group-summary">${summaryText}</div>
+          <div class="group-meta muted tiny">
+            <span>Impact: ${group.tests.length} tests affected</span>
+            <span class="dot">·</span>
+            <span>Inspect first: trace</span>
+          </div>
+          ${issue.next
+            ? `<div class="group-meta muted tiny" style="margin-top:6px"><span>Likely fix: <span class="fg">${escapeHtml(issue.next)}</span></span></div>`
+            : ""}
+          <div class="evidence">
+            <div class="ev-col">
+              <div class="ev-title">Evidence</div>
+              <div class="ev-lines muted tiny">
+                ${evidenceFiles ? `<div>Where: <span class="fg">${evidenceFiles}</span></div>` : ""}
+                ${evidenceFailingStep ? `<div>Failing step: <span class="fg">${evidenceFailingStep}</span></div>` : ""}
+                ${evidenceBlocker ? `<div>Blocker: <span class="fg">${evidenceBlocker}</span></div>` : ""}
+                ${evidenceTargetState ? `<div>Target state: <span class="fg">${evidenceTargetState}</span></div>` : ""}
+                ${evidenceExpected ? `<div>Expected: <span class="fg">${evidenceExpected}</span></div>` : ""}
+                ${evidenceReceived ? `<div>Received: <span class="fg">${evidenceReceived}</span></div>` : ""}
+              </div>
+            </div>
+            <div class="ev-col">
+              <div class="ev-title">Check first</div>
+              <div class="ev-lines fg">
+                <div>- Open trace at the failing step</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Test</th>
+                <th>File</th>
+                <th>Duration</th>
+                <th>Artifacts</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${rows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+    };
+    const groupTitle = (group) => {
+        const headline = group.signal || "Root cause";
+        const count = group.tests.length;
+        return `${headline} (${count} ${count === 1 ? "test" : "tests"})`;
+    };
+    const groupSummary = (group) => {
+        if (group.summary)
+            return group.summary;
+        const top = group.tests[0];
+        const err = top?.errors?.[0];
+        return err ? err : "Inspect failing artifacts and trace.";
+    };
+    const renderGroup = (group) => {
+        const title = escapeHtml(groupTitle(group));
+        const summaryText = escapeHtml(groupSummary(group));
+        const evidenceFiles = group.tests
+            .map((t) => t.file)
+            .filter(Boolean)
+            .slice(0, 3)
+            .join("; ");
+        const evidenceBlocker = group.locator ? escapeHtml(group.locator) : null;
+        const rows = group.tests
+            .map((test) => {
+            const counts = artifactCountByKind(test);
+            const videoCount = counts.video || 0;
+            const screenshotCount = counts.screenshot || 0;
+            const rowId = escapeHtml(test.id);
+            const title = escapeHtml(test.title);
+            const file = escapeHtml(test.file || "-");
+            const duration = escapeHtml(formatDurationMs(test.duration));
+            const desc = escapeHtml(test.errors?.[0] || "");
+            return `
+          <tr class="row" data-row="${rowId}">
+            <td class="cell cell-test">
+              <button class="chev" type="button" aria-label="Toggle details" data-toggle="${rowId}">›</button>
+              <a class="test-link" href="#${rowId}" data-anchor="${rowId}">${title}</a>
+              ${desc ? `<div class="muted tiny mt-6">${desc}</div>` : ""}
+              <div class="muted tiny">${escapeHtml(test.projectName || "")}</div>
+            </td>
+            <td class="cell cell-file mono muted">${file}</td>
+            <td class="cell">${duration}</td>
+            <td class="cell">
+              <div class="pill-row">
+                ${videoCount > 0 ? `<span class="pill pill-muted">Video ${videoCount}</span>` : ""}
+                ${screenshotCount > 0 ? `<span class="pill pill-muted">Screenshot ${screenshotCount}</span>` : ""}
+              </div>
+            </td>
+            <td class="cell">
+              <button class="btn btn-outline" type="button" data-copy="${rowId}">Copy link</button>
+            </td>
+          </tr>
+          <tr class="row-details" data-details="${rowId}" hidden>
+            <td class="cell details" colspan="5">
+              <div class="details-inner">
+                ${renderLocalArtifacts(test)}
+              </div>
+            </td>
+          </tr>
+        `;
+        })
+            .join("\n");
+        return `
+      <div class="group">
+        <div class="group-head">
+          <div class="kicker">${group.tests.length === 1 ? "Root cause" : `${group.tests.length} tests share this root cause`}</div>
+          <div class="group-title">${title}</div>
+          <div class="group-summary">${summaryText}</div>
+          <div class="group-meta muted tiny">
+            <span>Impact: ${group.tests.length} tests affected</span>
+            <span class="dot">·</span>
+            <span>Inspect first: trace</span>
+          </div>
+          <div class="evidence">
+            <div class="ev-col">
+              <div class="ev-title">Evidence</div>
+              <div class="ev-lines muted tiny">
+                ${evidenceFiles ? `<div>File: <span class="fg">${escapeHtml(evidenceFiles)}</span></div>` : ""}
+                ${evidenceBlocker ? `<div>Blocker: <span class="fg">${evidenceBlocker}</span></div>` : ""}
+              </div>
+            </div>
+            <div class="ev-col">
+              <div class="ev-title">Check first</div>
+              <div class="ev-lines fg">
+                <div>- Open trace at the failing step</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Test</th>
+                <th>File</th>
+                <th>Duration</th>
+                <th>Artifacts</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${rows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+    };
+    const groupsHtml = issueGroups.length
+        ? issueGroups.map((g) => renderIssueGroup(g)).join("\n")
+        : similarGroups.length
+            ? similarGroups.map((g) => renderGroup(g)).join("\n")
+            : `<p class="muted">No failed tests.</p>`;
+    const generatedAt = escapeHtml(new Date().toISOString());
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sentinel Report (Local)</title>
+    <style>
+      :root{
+        color-scheme: dark;
+        --bg:#08090A;
+        --fg:#F7F8F8;
+        --muted:#8A8F98;
+        --border:rgba(255,255,255,.10);
+        --surface:rgba(255,255,255,.02);
+        --surface-2:rgba(255,255,255,.03);
+        --hover:#1a1a1a;
+        --primary:#5E6AD2;
+      }
+      *{box-sizing:border-box}
+      body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+      a{color:inherit;text-decoration:none}
+      a:hover{text-decoration:underline}
+      .page{max-width:1100px;margin:0 auto;padding:28px 20px 80px}
+      .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
+      h1{font-size:22px;margin:0;font-weight:650;letter-spacing:-.02em}
+      .sub{color:var(--muted);font-size:13px;margin-top:6px}
+      .pill-row{display:flex;flex-wrap:wrap;gap:8px}
+      .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);padding:4px 10px;border-radius:999px;font-size:10px;font-weight:650;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
+      .pill-sub{margin-left:8px;color:var(--muted);font-weight:600}
+      .wrap{border-top:1px solid var(--border);padding-top:18px}
+      .card{background:var(--surface);border-radius:16px;padding:18px}
+      .title{font-size:14px;font-weight:650}
+      .groups{margin-top:14px;display:flex;flex-direction:column;gap:18px}
+      .group{border-top:1px solid var(--border);padding-top:18px}
+      .group:first-child{border-top:none;padding-top:0}
+      .group-head{padding:0 0 14px}
+      .kicker{font-size:11px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
+      .group-title{margin-top:8px;font-size:18px;font-weight:650;color:var(--fg)}
+      .group-summary{margin-top:6px;font-size:13px;color:var(--fg)}
+      .group-meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:10px}
+      .dot{opacity:.6}
+      .evidence{margin-top:14px;display:grid;grid-template-columns:1fr;gap:14px}
+      @media(min-width:900px){.evidence{grid-template-columns:1fr 1fr}}
+      .ev-col{border-left:1px solid var(--border);padding-left:14px}
+      .ev-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
+      .ev-lines{margin-top:8px}
+      .fg{color:var(--fg)}
+      .muted{color:var(--muted)}
+      .tiny{font-size:12px}
+      .mt-6{margin-top:6px}
+      .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+      .table-wrap{overflow:auto;border-top:1px solid var(--border)}
+      .table{width:100%;border-collapse:collapse}
+      th{padding:12px 14px;text-align:left;font-size:11px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
+      td{padding:12px 14px;vertical-align:top;font-size:13px;color:var(--fg)}
+      tbody tr.row:hover{background:var(--hover)}
+      tbody tr.row-details td{padding-top:0}
+      tbody{border-top:1px solid rgba(255,255,255,.06)}
+      tbody tr+tr{border-top:1px solid rgba(255,255,255,.06)}
+      .cell-test{min-width:420px}
+      .test-link{font-weight:650}
+      .chev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;margin-right:8px}
+      .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:650;cursor:pointer}
+      .btn-outline{border:1px solid var(--border);background:transparent;color:var(--fg)}
+      .btn-outline:hover{background:var(--surface-2)}
+      .details{padding:0 14px 14px}
+      .details-inner{border-left:1px solid var(--border);padding-left:14px}
+      .artifact-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:12px}
+      .artifact-card,.artifact-link{border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.01);padding:12px}
+      .artifact-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
+      .artifact-kind{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);border-radius:999px;padding:3px 8px;font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+      .artifact-card img,.artifact-card video{width:100%;border-radius:10px;margin-top:10px;background:#05070b}
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <div class="top">
+        <div>
+          <h1>Root Causes</h1>
+          <div class="sub">Generated locally · ${generatedAt}</div>
+        </div>
+        <div class="pill-row">
+          <span class="pill">Failed tests<span class="pill-sub">${failedTests.length}</span></span>
+        </div>
+      </div>
+
+      <div class="wrap">
+        <div class="card">
+          <div class="title">Root Causes</div>
+          <div class="groups">
+            <div class="pill-row">
+              ${rootCauseTabs}
+            </div>
+            ${groupsHtml}
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      (function() {
+        function baseUrl() {
+          try { return window.location.href.split('#')[0]; } catch { return ''; }
+        }
+        document.querySelectorAll('[data-toggle]').forEach(function(btn) {
+          btn.addEventListener('click', function(ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            var id = btn.getAttribute('data-toggle');
+            if (!id) return;
+            var details = document.querySelector('[data-details=\"' + id + '\"]');
+            if (!details) return;
+            var isHidden = details.hasAttribute('hidden');
+            if (isHidden) details.removeAttribute('hidden');
+            else details.setAttribute('hidden', '');
+            btn.textContent = isHidden ? '⌄' : '›';
+          });
+        });
+        document.querySelectorAll('[data-copy]').forEach(function(btn) {
+          btn.addEventListener('click', function(ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            var id = btn.getAttribute('data-copy');
+            if (!id) return;
+            var link = baseUrl() + '#' + id;
+            navigator.clipboard.writeText(link).catch(function(){});
+            btn.textContent = 'Copied';
+            setTimeout(function(){ btn.textContent = 'Copy link'; }, 1200);
+          });
+        });
+      })();
+    </script>
+  </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;

package/dist/mode.d.ts

@@ -0,0 +1,2 @@
+export type SentinelMode = "hosted" | "offline";
+export declare const readSentinelMode: (env?: NodeJS.ProcessEnv) => SentinelMode;

package/dist/mode.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readSentinelMode = void 0;
+const readSentinelMode = (env = process.env) => {
+    const raw = env.SENTINEL_MODE?.trim();
+    if (!raw)
+        return "hosted";
+    if (raw === "hosted" || raw === "offline")
+        return raw;
+    throw new Error([
+        `Invalid SENTINEL_MODE value: "${raw}".`,
+        "Allowed values: hosted, offline.",
+        "Tip: remove SENTINEL_MODE to use the default hosted flow."
+    ].join(" "));
+};
+exports.readSentinelMode = readSentinelMode;