@sentinelqa/playwright-reporter 0.1.53 → 0.1.54

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
@@ -555,7 +560,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 +587,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 +649,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 +737,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 +1037,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 +1091,7 @@ const tryMapRemainingArtifactsToTests = (tests, artifactPaths, reportDir, usedRe
         }
     }
 };
-const buildHtml = (tests, summary, extraArtifacts, runDiff) => {
+const buildHtml = (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 +1418,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 +1437,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 +1601,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 +1645,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>
@@ -1508,8 +1834,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 {

package/dist/quickDiagnosis.d.ts

@@ -1,8 +1,34 @@
-type DiagnosisSignal = "timeout" | "assertion_mismatch" | "locator_not_found" | "actionability" | "network" | "runtime" | "infra" | "unknown";
+type DiagnosisSignal = "setup" | "timeout" | "assertion_mismatch" | "locator_not_found" | "actionability" | "network" | "runtime" | "infra" | "unknown";
 export type QuickDiagnosis = {
     lines: string[];
     footer?: string[];
 };
+export type DiagnosisIssue = {
+    title: string;
+    cause: string;
+    affectedTitles: string[];
+    where: string | null;
+    failingCode: string | null;
+    failingStep: string | null;
+    selector: string | null;
+    blocker: string | null;
+    targetState: string | null;
+    expected: string | null;
+    received: string | null;
+    whatChanged: string | null;
+    reason: string | null;
+    next: string;
+    impact: string;
+    clears: string;
+};
+export type DiagnosisSummary = {
+    mode: "new_failure" | "recurring_failure" | "failure";
+    headline: string | null;
+    failureCountLine: string;
+    collapseLine: string | null;
+    issues: DiagnosisIssue[];
+    footer: string[];
+};
 type CodeContextCapture = {
     file?: string | null;
     line?: number | null;
@@ -20,6 +46,7 @@ type CodeContextCapture = {
 };
 type DomCapture = {
     locator?: string | null;
+    normalizedLocator?: string | null;
     expectedText?: string | null;
     observedText?: string | null;
     captureSource?: "live_page" | "error_fallback";
@@ -37,6 +64,7 @@ type DomCapture = {
     placeholder?: string | null;
     ariaLabel?: string | null;
     textAlternatives?: string[] | null;
+    ariaSnapshot?: string | null;
     matchedElements?: Array<{
         index: number;
         role: string | null;
@@ -45,6 +73,17 @@ type DomCapture = {
         enabled: boolean | null;
         text: string | null;
     }> | null;
+    recentConsoleErrors?: Array<{
+        type: string;
+        text: string;
+    }> | null;
+    recentPageErrors?: string[] | null;
+    recentRequests?: Array<{
+        method: string | null;
+        url: string | null;
+        status: number | null;
+        failure: string | null;
+    }> | null;
 };
 export type FailureFacts = {
     title: string;
@@ -83,6 +122,7 @@ export declare const parseFailureFacts: (title: string, titlePath: string[], mes
 export declare const collectFailureFacts: (playwrightJsonPath: string) => FailureFacts[];
 export declare const buildDebugSummary: (failure: FailureFacts) => string;
 export declare const buildSimilarityKey: (failure: FailureFacts) => string;
-export declare const summarizeSignal: (signal: DiagnosisSignal) => "timeout while waiting for UI or network conditions" | "assertion mismatch between expected and rendered UI state" | "missing or changed locator" | "target element was not actionable" | "network or API failure" | "runtime error thrown before the flow completed" | "browser or CI infrastructure failure" | "failure signal could not be classified cleanly";
+export declare const summarizeSignal: (signal: DiagnosisSignal) => "Playwright setup or bootstrap error" | "timeout while waiting for UI or network conditions" | "assertion mismatch between expected and rendered UI state" | "missing or changed locator" | "target element was not actionable" | "network or API failure" | "runtime error thrown before the flow completed" | "browser or CI infrastructure failure" | "failure signal could not be classified cleanly";
+export declare const buildQuickDiagnosisStructured: (playwrightJsonPath: string) => DiagnosisSummary | null;
 export declare const buildQuickDiagnosis: (playwrightJsonPath: string) => QuickDiagnosis | null;
 export {};