@sentinelqa/playwright-reporter 0.1.53 → 0.1.56

package/dist/localReport.js

@@ -9,6 +9,7 @@ const path_1 = __importDefault(require("path"));
 const crypto_1 = __importDefault(require("crypto"));
 const child_process_1 = require("child_process");
 const quickDiagnosis_1 = require("./quickDiagnosis");
+const runHistory_1 = require("./runHistory");
 const DEFAULT_REPORT_DIR = "sentinel-report";
 const DEFAULT_REPORT_FILE = "index.html";
 const DEFAULT_REDIRECT_FILE = "sentinel-debug.html";
@@ -100,6 +101,10 @@ const cleanTitleParts = (parts) => {
     const withoutUnnamed = normalized.filter((part) => part !== "Unnamed test");
     return withoutUnnamed.length ? withoutUnnamed : normalized;
 };
+const shortenTitle = (title) => {
+    const parts = cleanTitleParts(title.split(" > "));
+    return parts[parts.length - 1] || title;
+};
 const buildTitlePath = (baseTitles, test) => {
     const title = typeof test?.title === "string" ? test.title : null;
     const next = !title || baseTitles[baseTitles.length - 1] === title
@@ -239,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")
@@ -256,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),
@@ -452,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 {
@@ -555,7 +593,7 @@ const renderArtifactGroups = (artifacts) => {
       `)
         .join("\n");
 };
-const renderTestCard = (test) => {
+const renderTestCard = (test, groupedIssue) => {
     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
@@ -582,8 +620,47 @@ const renderTestCard = (test) => {
         : `<pre>No error message was attached to this result.</pre>`;
     const artifactMarkup = renderArtifactGroups(test.artifacts);
     const diagnosis = test.diagnosis;
-    const diagnosisMarkup = diagnosis
+    const diagnosisMarkup = groupedIssue
         ? `
+        <div class="diagnosis-shell">
+          <div>
+            <span class="artifact-kind">Grouped root cause</span>
+            <p class="diagnosis-copy"><strong>${escapeHtml(groupedIssue.title)}</strong></p>
+            <p class="diagnosis-copy">${escapeHtml(groupedIssue.cause)}</p>
+          </div>
+          <button
+            type="button"
+            class="copy-button"
+            data-copy-summary="${escapeHtml([
+            `Test: ${test.title}`,
+            `Issue: ${groupedIssue.title}`,
+            `Cause: ${groupedIssue.cause}`,
+            groupedIssue.where ? `Where: ${groupedIssue.where}` : null,
+            groupedIssue.failingStep ? `Failing step: ${groupedIssue.failingStep}` : null,
+            groupedIssue.expected ? `Expected: ${groupedIssue.expected}` : null,
+            groupedIssue.received ? `Received: ${groupedIssue.received}` : null,
+            `Likely fix: ${groupedIssue.next}`
+        ]
+            .filter(Boolean)
+            .join("\n"))}"
+            aria-label="Copy grouped diagnosis"
+          >
+            Copy diagnosis
+          </button>
+        </div>
+        <div class="fact-row">
+          ${groupedIssue.where ? `<span class="fact-chip">Where: ${escapeHtml(groupedIssue.where)}</span>` : ""}
+          ${groupedIssue.failingStep ? `<span class="fact-chip">Failing step: ${escapeHtml(groupedIssue.failingStep)}</span>` : ""}
+          ${groupedIssue.selector ? `<span class="fact-chip">Selector: ${escapeHtml(groupedIssue.selector)}</span>` : ""}
+          ${groupedIssue.blocker ? `<span class="fact-chip">Blocker: ${escapeHtml(groupedIssue.blocker)}</span>` : ""}
+          ${groupedIssue.targetState ? `<span class="fact-chip">Target state: ${escapeHtml(groupedIssue.targetState)}</span>` : ""}
+          ${groupedIssue.expected ? `<span class="fact-chip">Expected: ${escapeHtml(groupedIssue.expected)}</span>` : ""}
+          ${groupedIssue.received ? `<span class="fact-chip">Received: ${escapeHtml(groupedIssue.received)}</span>` : ""}
+        </div>
+        <p class="diagnosis-copy"><strong>Likely fix:</strong> ${escapeHtml(groupedIssue.next)}</p>
+      `
+        : diagnosis
+            ? `
         <div class="diagnosis-shell">
           <div>
             <span class="artifact-kind">Quick diagnosis</span>
@@ -605,9 +682,9 @@ const renderTestCard = (test) => {
           ${diagnosis.timeoutMs ? `<span class="fact-chip">Timeout: ${diagnosis.timeoutMs}ms</span>` : ""}
         </div>
       `
-        : "";
+            : "";
     return `
-    <details class="test-card">
+    <details class="test-card" id="test-${safeSlug(test.id)}">
       <summary class="test-summary">
         <div>
           <div class="status-pill ${statusClass}">${escapeHtml(test.status)}</div>
@@ -693,6 +770,237 @@ const renderFailureDigest = (tests) => {
     </div>
   `;
 };
+const renderDiagnosisOverview = (summary) => {
+    if (!summary) {
+        return `<div class="empty-state">No structured diagnosis was available for this run.</div>`;
+    }
+    const copyText = escapeHtml([
+        summary.headline || "",
+        summary.failureCountLine,
+        summary.collapseLine || "",
+        ...summary.issues.flatMap((issue, index) => {
+            const lines = [
+                `Issue ${index + 1}: ${issue.title}`,
+                `Cause: ${issue.cause}`
+            ];
+            if (issue.where)
+                lines.push(`Where: ${issue.where}`);
+            if (issue.failingStep)
+                lines.push(`Failing step: ${issue.failingStep}`);
+            if (issue.blocker)
+                lines.push(`Blocker: ${issue.blocker}`);
+            if (issue.targetState)
+                lines.push(`Target state: ${issue.targetState}`);
+            if (issue.expected)
+                lines.push(`Expected: ${issue.expected}`);
+            if (issue.received)
+                lines.push(`Received: ${issue.received}`);
+            if (issue.whatChanged)
+                lines.push(`What changed: ${issue.whatChanged}`);
+            if (issue.reason)
+                lines.push(`Reason: ${issue.reason}`);
+            lines.push(`Next: ${issue.next}`);
+            lines.push(`Impact: ${issue.impact}`);
+            return lines;
+        }),
+        ...summary.footer
+    ].filter(Boolean).join("\n"));
+    return `
+    <div class="diagnosis-overview">
+      <div class="diagnosis-shell">
+        <div>
+          <span class="artifact-kind">Sentinel diagnosis</span>
+          ${summary.headline ? `<h2 class="diagnosis-headline">${escapeHtml(summary.headline)}</h2>` : ""}
+          <p class="diagnosis-kicker">${escapeHtml(summary.failureCountLine)}</p>
+          ${summary.collapseLine ? `<p class="diagnosis-kicker diagnosis-kicker-secondary">${escapeHtml(summary.collapseLine)}</p>` : ""}
+        </div>
+        <button
+          type="button"
+          class="copy-button"
+          data-copy-summary="${copyText}"
+          aria-label="Copy diagnosis"
+        >
+          Copy diagnosis
+        </button>
+      </div>
+      ${summary.footer.length ? `<p class="diagnosis-copy">${escapeHtml(summary.footer.join(" · "))}</p>` : ""}
+    </div>
+  `;
+};
+const renderRecurringInsight = (historySummary) => {
+    if (!historySummary?.isDominantRecurringIssue || !historySummary.dominantRecurringIssueTitle)
+        return "";
+    return `
+    <p class="diagnosis-copy">
+      <strong>Recurring signal:</strong>
+      Seen in ${escapeHtml(String(historySummary.dominantRecurringIssueCount))} recorded failed runs.
+      This is the most common recent failure in local history.
+    </p>
+  `;
+};
+const renderDiagnosisIssueCards = (summary) => {
+    if (!summary || !summary.issues.length) {
+        return `<div class="empty-state">No grouped diagnosis issues were available for this run.</div>`;
+    }
+    return `
+    <div class="digest-grid">
+      ${summary.issues.map((issue, index) => `
+        <article class="digest-card">
+          <div class="digest-head">
+            <div>
+              <span class="artifact-kind">Issue ${index + 1}</span>
+              <h3>${escapeHtml(issue.title)}</h3>
+            </div>
+          </div>
+          <p class="diagnosis-copy">${escapeHtml(issue.cause)}</p>
+          <div class="fact-row">
+            ${issue.where ? `<span class="fact-chip">Where: ${escapeHtml(issue.where)}</span>` : ""}
+            ${issue.selector ? `<span class="fact-chip">Selector: ${escapeHtml(issue.selector)}</span>` : ""}
+            ${issue.targetState ? `<span class="fact-chip">Target state: ${escapeHtml(issue.targetState)}</span>` : ""}
+            ${issue.blocker ? `<span class="fact-chip">Blocker: ${escapeHtml(issue.blocker)}</span>` : ""}
+          </div>
+          <div class="fact-row">
+            ${issue.expected ? `<span class="fact-chip">Expected: ${escapeHtml(issue.expected)}</span>` : ""}
+            ${issue.received ? `<span class="fact-chip">Received: ${escapeHtml(issue.received)}</span>` : ""}
+          </div>
+          ${issue.failingCode ? `<pre>${escapeHtml(issue.failingCode)}</pre>` : ""}
+          ${issue.failingStep ? `<p class="diagnosis-copy"><strong>Failing step:</strong> ${escapeHtml(issue.failingStep)}</p>` : ""}
+          ${issue.whatChanged ? `<p class="diagnosis-copy"><strong>What changed:</strong> ${escapeHtml(issue.whatChanged)}</p>` : ""}
+          ${issue.reason ? `<p class="diagnosis-copy"><strong>Reason:</strong> ${escapeHtml(issue.reason)}</p>` : ""}
+          <p class="diagnosis-copy"><strong>Next:</strong> ${escapeHtml(issue.next)}</p>
+          <p class="diagnosis-copy"><strong>Clears:</strong> ${escapeHtml(issue.clears)}</p>
+          <p class="diagnosis-copy"><strong>Impact:</strong> ${escapeHtml(issue.impact)}</p>
+        </article>
+      `).join("\n")}
+    </div>
+  `;
+};
+const renderDiagnosisIssueCardsForTests = (summary, tests) => {
+    if (!summary || !summary.issues.length) {
+        return `<div class="empty-state">No grouped diagnosis issues were available for this run.</div>`;
+    }
+    return `
+    <div class="digest-grid">
+      ${summary.issues.map((issue, index) => {
+        const representative = pickRepresentativeTestForIssue(tests, issue);
+        return `
+        <article class="digest-card ${index === 0 ? "digest-card-primary" : ""}">
+          <div class="digest-head">
+            <div>
+              <span class="artifact-kind">${index === 0 ? "Top issue" : `Issue ${index + 1}`}</span>
+              <h3>${escapeHtml(issue.title)}</h3>
+            </div>
+          </div>
+          <p class="diagnosis-copy">${escapeHtml(issue.cause)}</p>
+          <div class="fact-row">
+            ${issue.where ? `<span class="fact-chip">Where: ${escapeHtml(issue.where)}</span>` : ""}
+            ${issue.failingStep ? `<span class="fact-chip">Failing step: ${escapeHtml(issue.failingStep)}</span>` : ""}
+            ${issue.targetState ? `<span class="fact-chip">Target state: ${escapeHtml(issue.targetState)}</span>` : ""}
+            ${issue.blocker ? `<span class="fact-chip">Blocker: ${escapeHtml(issue.blocker)}</span>` : ""}
+          </div>
+          <div class="fact-row">
+            ${issue.selector ? `<span class="fact-chip">Selector: ${escapeHtml(issue.selector)}</span>` : ""}
+            ${issue.expected ? `<span class="fact-chip">Expected: ${escapeHtml(issue.expected)}</span>` : ""}
+            ${issue.received ? `<span class="fact-chip">Received: ${escapeHtml(issue.received)}</span>` : ""}
+          </div>
+          ${issue.whatChanged ? `<p class="diagnosis-copy"><strong>What changed:</strong> ${escapeHtml(issue.whatChanged)}</p>` : ""}
+          ${issue.reason ? `<p class="diagnosis-copy"><strong>Reason:</strong> ${escapeHtml(issue.reason)}</p>` : ""}
+          <p class="diagnosis-copy"><strong>Likely fix:</strong> ${escapeHtml(issue.next)}</p>
+          <p class="diagnosis-copy"><strong>Impact:</strong> ${escapeHtml(issue.impact)}</p>
+          ${issue.affectedTitles.length > 1
+            ? `<ul class="group-list">${issue.affectedTitles
+                .slice(0, 6)
+                .map((title) => `<li>${escapeHtml(shortenTitle(title))}</li>`)
+                .join("\n")}</ul>`
+            : ""}
+          ${representative ? `<p class="diagnosis-copy"><strong>Representative test:</strong> ${escapeHtml(representative.title)}</p>` : ""}
+          ${renderIssueArtifactActions(representative)}
+        </article>
+      `;
+    }).join("\n")}
+    </div>
+  `;
+};
+const reportTestDisplayTitle = (test) => cleanTitleParts(test.titlePath).join(" > ") || test.title;
+const findIssueForTest = (summary, test) => {
+    if (!summary?.issues.length)
+        return null;
+    const title = reportTestDisplayTitle(test);
+    return (summary.issues.find((issue) => issue.affectedTitles.some((affectedTitle) => cleanTitleParts(affectedTitle.split(" > ")).join(" > ") === title)) || null);
+};
+const extractLineHints = (value) => Array.from(new Set(Array.from((value || "").matchAll(/:([0-9]+)(?::[0-9]+)?/g))
+    .map((match) => Number.parseInt(match[1] || "", 10))
+    .filter((line) => Number.isFinite(line))));
+const pickRepresentativeTestForIssue = (tests, issue) => {
+    const failedTests = getFailureTests(tests);
+    const affected = new Set(issue.affectedTitles.map((title) => cleanTitleParts(title.split(" > ")).join(" > ")));
+    const matches = failedTests.filter((test) => affected.has(reportTestDisplayTitle(test)));
+    if (!matches.length)
+        return null;
+    const issueFile = (issue.where || "").split(":")[0]?.trim().toLowerCase();
+    const issueLines = extractLineHints(issue.where);
+    const issueSelector = (issue.selector || "").trim().toLowerCase();
+    const issueBlocker = (issue.blocker || "").trim().toLowerCase();
+    const issueFailingCode = (issue.failingCode || "").trim();
+    const issueTargetState = (issue.targetState || "").trim().toLowerCase();
+    const score = (test) => {
+        const diagnosis = test.diagnosis;
+        const diagnosisFile = (diagnosis?.likelyFile || diagnosis?.file || "").trim().toLowerCase();
+        const diagnosisSelector = (diagnosis?.locator || "").trim().toLowerCase();
+        const diagnosisLine = diagnosis?.codeContext?.line || null;
+        const diagnosisFocusLine = (diagnosis?.codeContext?.focusLine || "").trim();
+        const diagnosisMessage = (diagnosis?.message || "").toLowerCase();
+        const traceScore = test.artifacts.some((artifact) => artifact.kind === "trace") ? 50 : 0;
+        const screenshotScore = test.artifacts.some((artifact) => artifact.kind === "screenshot") ? 30 : 0;
+        const videoScore = test.artifacts.some((artifact) => artifact.kind === "video") ? 20 : 0;
+        const selectorScore = issueSelector && diagnosisSelector && issueSelector === diagnosisSelector ? 40 : 0;
+        const fileScore = issueFile && diagnosisFile && diagnosisFile.endsWith(issueFile) ? 20 : 0;
+        const lineScore = diagnosisLine && issueLines.includes(diagnosisLine) ? 35 : 0;
+        const focusScore = issueFailingCode && diagnosisFocusLine && issueFailingCode === diagnosisFocusLine ? 35 : 0;
+        const blockerScore = issueBlocker && diagnosisMessage.includes(issueBlocker) ? 25 : 0;
+        const targetStateScore = issueTargetState && diagnosis?.domCapture
+            ? (() => {
+                const dom = diagnosis.domCapture;
+                const targetState = dom.targetFound === false || dom.matchedCount === 0
+                    ? "missing"
+                    : dom.visible === false
+                        ? "hidden"
+                        : dom.enabled === false
+                            ? "disabled"
+                            : dom.targetFound === true && dom.visible === true
+                                ? "visible_blocked"
+                                : "";
+                return targetState === issueTargetState ? 15 : 0;
+            })()
+            : 0;
+        const lineAwareScore = diagnosisLine ? 10 : 0;
+        return traceScore + screenshotScore + videoScore + selectorScore + fileScore + lineScore + focusScore + blockerScore + targetStateScore + lineAwareScore;
+    };
+    return matches.sort((a, b) => score(b) - score(a))[0] || matches[0];
+};
+const renderIssueArtifactActions = (test) => {
+    if (!test)
+        return "";
+    const trace = test.artifacts.find((artifact) => artifact.kind === "trace");
+    const screenshot = test.artifacts.find((artifact) => artifact.kind === "screenshot");
+    const video = test.artifacts.find((artifact) => artifact.kind === "video");
+    const jumpTarget = `#test-${safeSlug(test.id)}`;
+    const actions = [
+        trace
+            ? `<a class="trace-button" href="${escapeHtml(trace.relativePath)}" data-trace-path="${escapeHtml(trace.relativePath)}" target="_blank" rel="noreferrer">Best trace</a>`
+            : "",
+        screenshot
+            ? `<a class="trace-button" href="${escapeHtml(screenshot.relativePath)}" target="_blank" rel="noreferrer">Open screenshot</a>`
+            : "",
+        video
+            ? `<a class="trace-button" href="${escapeHtml(video.relativePath)}" target="_blank" rel="noreferrer">Open video</a>`
+            : "",
+        `<a class="trace-button" href="${escapeHtml(jumpTarget)}">Jump to test</a>`
+    ].filter(Boolean);
+    if (!actions.length)
+        return "";
+    return `<div class="issue-actions">${actions.join("\n")}</div>`;
+};
 const renderSimilarFailureGroups = (groups) => {
     if (!groups.length) {
         return `<div class="empty-state">No repeated failure fingerprint was detected in this run.</div>`;
@@ -762,6 +1070,33 @@ const renderRunDiff = (runDiff) => {
     </div>
   `;
 };
+const renderHistoryOverview = (historySummary, runDiff) => {
+    if (!historySummary && !runDiff) {
+        return `<div class="empty-state">No prior run history was available for this failure yet.</div>`;
+    }
+    return `
+    ${renderRecurringInsight(historySummary)}
+    ${runDiff
+        ? `
+          <div class="summary-grid">
+            <div class="summary-card">
+              <span class="summary-label">New failures</span>
+              <span class="summary-value">${runDiff.newFailures.length}</span>
+            </div>
+            <div class="summary-card">
+              <span class="summary-label">Still failing</span>
+              <span class="summary-value">${runDiff.stillFailing.length}</span>
+            </div>
+            <div class="summary-card">
+              <span class="summary-label">Fixed since last run</span>
+              <span class="summary-value">${runDiff.fixedTests.length}</span>
+            </div>
+          </div>
+          <p class="diagnosis-copy">Compared with the latest saved run on the same branch: ${escapeHtml(runDiff.label)}</p>
+        `
+        : ""}
+  `;
+};
 const renderAdditionalArtifacts = (artifacts) => {
     if (artifacts.length === 0) {
         return "";
@@ -789,7 +1124,7 @@ const tryMapRemainingArtifactsToTests = (tests, artifactPaths, reportDir, usedRe
         }
     }
 };
-const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
+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();
@@ -1116,6 +1451,11 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
         background: rgba(9, 13, 20, 0.72);
         padding: 16px;
       }
+      .digest-card-primary {
+        border-color: rgba(125, 211, 252, 0.38);
+        box-shadow: 0 12px 36px rgba(4, 14, 26, 0.26);
+        background: linear-gradient(180deg, rgba(14, 22, 34, 0.92), rgba(9, 13, 20, 0.78));
+      }
       .digest-head, .diagnosis-shell {
         display: flex;
         justify-content: space-between;
@@ -1130,12 +1470,42 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
         color: var(--muted);
         line-height: 1.6;
       }
+      .diagnosis-overview {
+        display: grid;
+        gap: 12px;
+        margin-top: 18px;
+      }
+      .diagnosis-headline {
+        margin-top: 10px;
+        font-size: 28px;
+        line-height: 1.1;
+      }
+      .diagnosis-kicker {
+        margin: 12px 0 0;
+        color: var(--text);
+        font-size: 20px;
+        font-weight: 700;
+      }
+      .diagnosis-kicker-secondary {
+        color: var(--accent);
+        font-size: 16px;
+        font-weight: 600;
+      }
       .fact-row {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 14px;
       }
+      .issue-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 14px;
+      }
+      .section-shell-secondary {
+        opacity: 0.9;
+      }
       .fact-chip {
         display: inline-flex;
         align-items: center;
@@ -1264,37 +1634,39 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
 
       <section class="section-shell">
         <div class="failed-list-head">
-          <h2>Run-to-Run Diff</h2>
+          <h2>Why It Failed</h2>
         </div>
-        <p>Compare this run with the latest saved snapshot from the same branch.</p>
-        ${renderRunDiff(runDiff)}
+        <p>The same grouped explanation shown in the CLI, with the most useful evidence first.</p>
+        ${renderDiagnosisOverview(diagnosisSummary)}
       </section>
 
       <section class="section-shell">
         <div class="failed-list-head">
-          <h2>Failure Digest</h2>
+          <h2>Explanation</h2>
           <div class="failed-count">${failedTests.length} failed</div>
         </div>
-        <p>Deterministic summaries built from the Playwright error, locator, assertion text, and timeout.</p>
-        ${renderFailureDigest(tests)}
+        <p>Grouped root causes, likely fixes, and direct links to the best artifacts for each issue.</p>
+        ${renderDiagnosisIssueCardsForTests(diagnosisSummary, tests)}
       </section>
 
-      <section class="section-shell">
+      <section class="section-shell section-shell-secondary">
         <div class="failed-list-head">
-          <h2>Similar Failures</h2>
-          <div class="failed-count">${similarGroups.length} groups</div>
+          <h2>History</h2>
         </div>
-        <p>Failures are grouped only when they share the same fingerprint, so one repeated issue is easier to spot.</p>
-        ${renderSimilarFailureGroups(similarGroups)}
+        <p>Recent failure history and how this run changed from the previous saved run.</p>
+        ${renderHistoryOverview(failedRunHistory, runDiff)}
       </section>
 
       <section class="section-shell">
         <div class="failed-list-head">
-          <h2>Failed Tests</h2>
+          <h2>Artifacts</h2>
           <div class="failed-count">${failedTests.length} failed</div>
         </div>
+        <p>Failed tests with trace, screenshot, video, logs, and raw error details.</p>
         ${failedTests.length > 0
-        ? failedTests.map((test) => renderTestCard(test)).join("\n")
+        ? failedTests
+            .map((test) => renderTestCard(test, findIssueForTest(diagnosisSummary, 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>
 
@@ -1306,19 +1678,6 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
         : `<div class="empty-state">All detected artifacts were mapped onto failed tests.</div>`}
       </section>
 
-      <section class="section-shell">
-        <h2>Optional: Sentinel Cloud</h2>
-        <p>Upload runs to Sentinel Cloud for:</p>
-        <ul>
-          <li>CI history</li>
-          <li>shareable run links</li>
-          <li>AI failure summaries</li>
-        </ul>
-        <p>
-          <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">More on sentinelqa.com</a>
-        </p>
-      </section>
-
       <footer>
         Generated by <a href="${SENTINEL_URL}" target="_blank" rel="noreferrer">Sentinel Playwright Reporter</a>.
       </footer>
@@ -1440,6 +1799,423 @@ const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
   </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;
@@ -1508,8 +2284,10 @@ function generateLocalDebugReport(options) {
     const summary = summarizeTests(tests);
     const snapshot = buildRunSnapshot(tests, summary);
     const runDiff = buildRunDiff(tests, snapshot);
+    const diagnosisSummary = (0, quickDiagnosis_1.buildQuickDiagnosisStructured)(options.playwrightJsonPath);
+    const failedRunHistory = summary.failed > 0 ? (0, runHistory_1.buildFailedRunHistorySummary)(options.playwrightJsonPath) : null;
     writeRunHistory(snapshot);
-    const html = buildHtml(tests, summary, extraArtifacts, runDiff);
+    const html = buildHtml(tests, summary, extraArtifacts, runDiff, diagnosisSummary, failedRunHistory);
     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 {