@cleartrip/frontguard 0.2.3 → 0.2.4

package/dist/cli.js

@@ -6,7 +6,7 @@ import * as tty from 'tty';
 import { WriteStream } from 'tty';
 import path5, { sep, normalize, delimiter, resolve, dirname } from 'path';
 import fs from 'fs/promises';
-import { fileURLToPath, pathToFileURL } from 'url';
+import { pathToFileURL, fileURLToPath } from 'url';
 import { execFileSync, spawn } from 'child_process';
 import { createRequire } from 'module';
 import fs2 from 'fs';
@@ -2498,6 +2498,11 @@ async function initFrontGuard(cwd) {
 }
 
 // src/ci/bitbucket-pr-snippet.ts
+function checksImageMarkdown() {
+  const u4 = process.env.FRONTGUARD_CHECKS_IMAGE_URL?.trim();
+  if (!u4) return null;
+  return `![FrontGuard \u2014 checks summary](${u4})`;
+}
 function bitbucketPipelineResultsUrl() {
   const full = process.env.BITBUCKET_REPO_FULL_NAME?.trim();
   const bn = process.env.BITBUCKET_BUILD_NUMBER?.trim();
@@ -2522,8 +2527,12 @@ function bitbucketDownloadsPageUrl() {
 function formatBitbucketPrSnippet(report) {
   const publicReport = process.env.FRONTGUARD_PUBLIC_REPORT_URL?.trim();
   const linkOnly = process.env.FRONTGUARD_BITBUCKET_COMMENT_LINK_ONLY === "1";
+  const imgMd = checksImageMarkdown();
   if (linkOnly && publicReport) {
-    return publicReport.endsWith("\n") ? publicReport : `${publicReport}
+    const parts = [];
+    if (imgMd) parts.push(imgMd, "");
+    parts.push(publicReport.endsWith("\n") ? publicReport.slice(0, -1) : publicReport);
+    return `${parts.join("\n")}
 `;
   }
   const downloadsName = process.env.FRONTGUARD_REPORT_DOWNLOAD_NAME?.trim();
@@ -2538,16 +2547,27 @@ function formatBitbucketPrSnippet(report) {
     (n3, r4) => n3 + r4.findings.filter((f4) => f4.severity === "warn").length,
     0
   );
-  const out = [
+  const out = [];
+  if (imgMd) {
+    out.push(imgMd);
+    out.push("");
+  }
+  out.push(
     "FrontGuard report (short summary)",
     "",
     `Risk: ${riskScore}  |  Blocking: ${blocks}  |  Warnings: ${warns}`,
     ""
-  ];
+  );
   if (publicReport) {
     out.push("Full interactive report (open in browser):");
     out.push(publicReport);
     out.push("");
+    if (imgMd) {
+      out.push(
+        "The image above is a quick checks overview. Use the link for file-level findings, hints, and suggested fixes."
+      );
+      out.push("");
+    }
   } else if (downloadsName && downloadsPage) {
     out.push("HTML report is in Repository \u2192 Downloads. Open this page while logged in:");
     out.push(downloadsPage);
@@ -5578,6 +5598,205 @@ function statusDot(r4) {
     return '<span class="dot dot-block" title="Blocking"></span>';
   return '<span class="dot dot-warn" title="Issues"></span>';
 }
+var CHECKS_TABLE_STYLES = `
+    table.results {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+      background: var(--surface);
+      border-radius: var(--radius);
+      overflow: hidden;
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow);
+    }
+    table.results th, table.results td {
+      padding: 0.55rem 0.85rem;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    table.results tr:last-child td { border-bottom: none; }
+    table.results thead th {
+      background: #f1f5f9;
+      color: var(--muted);
+      font-weight: 600;
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .td-icon { width: 2rem; vertical-align: middle; }
+    .td-check { vertical-align: middle; }
+    .td-num, .td-time { color: var(--muted); font-variant-numeric: tabular-nums; }
+    .check-title-cell {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      flex-wrap: nowrap;
+    }
+    .check-name { font-weight: 600; }
+    .check-info-wrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .check-info {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.125rem;
+      height: 1.125rem;
+      padding: 0;
+      margin: 0;
+      border: 1px solid var(--border);
+      border-radius: 50%;
+      background: #f1f5f9;
+      color: var(--muted);
+      font-size: 0.62rem;
+      font-weight: 700;
+      font-style: normal;
+      line-height: 1;
+      cursor: help;
+      flex-shrink: 0;
+    }
+    .check-info:hover,
+    .check-info:focus-visible {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: var(--accent-soft);
+      outline: none;
+    }
+    .check-tooltip {
+      position: absolute;
+      left: 50%;
+      bottom: calc(100% + 8px);
+      transform: translateX(-50%);
+      min-width: 12rem;
+      max-width: min(22rem, 86vw);
+      padding: 0.55rem 0.65rem;
+      background: var(--text);
+      color: #f8fafc;
+      font-size: 0.78rem;
+      font-weight: 400;
+      line-height: 1.45;
+      border-radius: 6px;
+      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
+      z-index: 50;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition: opacity 0.12s ease, visibility 0.12s ease;
+      text-align: left;
+    }
+    .check-info-wrap:hover .check-tooltip,
+    .check-info-wrap:focus-within .check-tooltip {
+      opacity: 1;
+      visibility: visible;
+    }
+    .check-tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -6px;
+      border: 6px solid transparent;
+      border-top-color: var(--text);
+    }
+    .dot {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    .dot-ok { background: var(--ok); }
+    .dot-warn { background: var(--warn); }
+    .dot-block { background: var(--block); }
+    .dot-skip { background: #cbd5e1; }
+`;
+function renderCheckTableRows(results) {
+  return results.map((r4) => {
+    const status = r4.skipped ? `Skipped \u2014 ${escapeHtml(r4.skipped)}` : r4.findings.length === 0 ? "Pass" : `${r4.findings.length} issue(s)`;
+    const help = escapeHtml(getCheckDescription(r4.checkId));
+    const ariaWhat = escapeHtml(`What does the ${r4.checkId} check do?`);
+    const checkTitle = `<span class="check-title-cell"><strong class="check-name">${escapeHtml(r4.checkId)}</strong><span class="check-info-wrap"><button type="button" class="check-info" title="${help}" aria-label="${ariaWhat}">i</button><span class="check-tooltip" role="tooltip">${help}</span></span></span>`;
+    return `<tr><td class="td-icon">${statusDot(r4)}</td><td class="td-check">${checkTitle}</td><td class="td-status">${status}</td><td class="td-num">${r4.skipped ? "\u2014" : r4.findings.length}</td><td class="td-time">${formatDuration(r4.durationMs)}</td></tr>`;
+  }).join("\n");
+}
+function buildChecksSnapshotHtml(p2) {
+  const { riskScore, mode, results, warns, infos, blocks } = p2;
+  const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
+  const riskClass = riskScore === "LOW" ? "risk-low" : riskScore === "MEDIUM" ? "risk-med" : "risk-high";
+  const checkRows = renderCheckTableRows(results);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>FrontGuard \u2014 Checks</title>
+  <style>
+    :root {
+      --bg: #f8fafc;
+      --surface: #ffffff;
+      --text: #0f172a;
+      --muted: #64748b;
+      --border: #e2e8f0;
+      --accent: #4f46e5;
+      --accent-soft: #eef2ff;
+      --block: #dc2626;
+      --warn: #d97706;
+      --info: #0284c7;
+      --ok: #16a34a;
+      --radius: 10px;
+      --shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      padding: 1.25rem 1.5rem 1.5rem;
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.55;
+      font-size: 15px;
+      max-width: 920px;
+    }
+    .brand {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--muted);
+      margin-bottom: 0.35rem;
+    }
+    .h2 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin: 0 0 0.5rem;
+      color: var(--text);
+      letter-spacing: -0.02em;
+    }
+    .snap-meta {
+      font-size: 0.8rem;
+      color: var(--muted);
+      margin: 0 0 0.85rem;
+    }
+    .snap-meta strong { color: var(--text); font-weight: 600; }
+    .risk-low { color: var(--ok); }
+    .risk-med { color: var(--warn); }
+    .risk-high { color: var(--block); }
+    ${CHECKS_TABLE_STYLES}
+  </style>
+</head>
+<body>
+  <div class="brand">FrontGuard</div>
+  <h2 class="h2">Checks</h2>
+  <p class="snap-meta">Risk <strong class="${riskClass}">${riskScore}</strong> \xB7 ${escapeHtml(modeLabel)} \xB7 Blocking <strong>${blocks}</strong> \xB7 Warnings <strong>${warns}</strong> \xB7 Info <strong>${infos}</strong></p>
+  <table class="results">
+    <thead><tr><th></th><th>Check</th><th>Status</th><th>#</th><th>Time</th></tr></thead>
+    <tbody>${checkRows}</tbody>
+  </table>
+</body>
+</html>`;
+}
 function renderFindingCard(cwd, r4, f4) {
   const d3 = normalizeFinding(cwd, f4);
   const sevClass = f4.severity === "block" ? "sev-block" : f4.severity === "warn" ? "sev-warn" : "sev-info";
@@ -5602,13 +5821,7 @@ function buildHtmlReport(p2) {
   } = p2;
   const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
   const riskClass = riskScore === "LOW" ? "risk-low" : riskScore === "MEDIUM" ? "risk-med" : "risk-high";
-  const checkRows = results.map((r4) => {
-    const status = r4.skipped ? `Skipped \u2014 ${escapeHtml(r4.skipped)}` : r4.findings.length === 0 ? "Pass" : `${r4.findings.length} issue(s)`;
-    const help = escapeHtml(getCheckDescription(r4.checkId));
-    const ariaWhat = escapeHtml(`What does the ${r4.checkId} check do?`);
-    const checkTitle = `<span class="check-title-cell"><strong class="check-name">${escapeHtml(r4.checkId)}</strong><span class="check-info-wrap"><button type="button" class="check-info" title="${help}" aria-label="${ariaWhat}">i</button><span class="check-tooltip" role="tooltip">${help}</span></span></span>`;
-    return `<tr><td class="td-icon">${statusDot(r4)}</td><td class="td-check">${checkTitle}</td><td class="td-status">${status}</td><td class="td-num">${r4.skipped ? "\u2014" : r4.findings.length}</td><td class="td-time">${formatDuration(r4.durationMs)}</td></tr>`;
-  }).join("\n");
+  const checkRows = renderCheckTableRows(results);
   const blockItems = sortFindings(
     cwd,
     results.flatMap(
@@ -5752,118 +5965,7 @@ function buildHtmlReport(p2) {
       font-weight: 500;
       background: #f1f5f9;
     }
-    table.results {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.875rem;
-      background: var(--surface);
-      border-radius: var(--radius);
-      overflow: hidden;
-      border: 1px solid var(--border);
-      box-shadow: var(--shadow);
-    }
-    table.results th, table.results td {
-      padding: 0.55rem 0.85rem;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-    table.results tr:last-child td { border-bottom: none; }
-    table.results thead th {
-      background: #f1f5f9;
-      color: var(--muted);
-      font-weight: 600;
-      font-size: 0.72rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-    .td-icon { width: 2rem; vertical-align: middle; }
-    .td-check { vertical-align: middle; }
-    .td-num, .td-time { color: var(--muted); font-variant-numeric: tabular-nums; }
-    .check-title-cell {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.35rem;
-      flex-wrap: nowrap;
-    }
-    .check-name { font-weight: 600; }
-    .check-info-wrap {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      flex-shrink: 0;
-    }
-    .check-info {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.125rem;
-      height: 1.125rem;
-      padding: 0;
-      margin: 0;
-      border: 1px solid var(--border);
-      border-radius: 50%;
-      background: #f1f5f9;
-      color: var(--muted);
-      font-size: 0.62rem;
-      font-weight: 700;
-      font-style: normal;
-      line-height: 1;
-      cursor: help;
-      flex-shrink: 0;
-    }
-    .check-info:hover,
-    .check-info:focus-visible {
-      border-color: var(--accent);
-      color: var(--accent);
-      background: var(--accent-soft);
-      outline: none;
-    }
-    .check-tooltip {
-      position: absolute;
-      left: 50%;
-      bottom: calc(100% + 8px);
-      transform: translateX(-50%);
-      min-width: 12rem;
-      max-width: min(22rem, 86vw);
-      padding: 0.55rem 0.65rem;
-      background: var(--text);
-      color: #f8fafc;
-      font-size: 0.78rem;
-      font-weight: 400;
-      line-height: 1.45;
-      border-radius: 6px;
-      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
-      z-index: 50;
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-      transition: opacity 0.12s ease, visibility 0.12s ease;
-      text-align: left;
-    }
-    .check-info-wrap:hover .check-tooltip,
-    .check-info-wrap:focus-within .check-tooltip {
-      opacity: 1;
-      visibility: visible;
-    }
-    .check-tooltip::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -6px;
-      border: 6px solid transparent;
-      border-top-color: var(--text);
-    }
-    .dot {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-    .dot-ok { background: var(--ok); }
-    .dot-warn { background: var(--warn); }
-    .dot-block { background: var(--block); }
-    .dot-skip { background: #cbd5e1; }
+    ${CHECKS_TABLE_STYLES}
     .panel {
       background: var(--surface);
       border: 1px solid var(--border);
@@ -6042,7 +6144,14 @@ function buildReport(stack, pr, results, options) {
     lines,
     llmAppendix: options?.llmAppendix ?? null
   }) : null;
-  return { riskScore, stack, pr, results, markdown, consoleText, html };
+  const checksSnapshotHtml = options?.emitChecksSnapshot === true ? buildChecksSnapshotHtml({
+    riskScore,
+    mode,
+    results,
+    warns,
+    infos,
+    blocks}) : null;
+  return { riskScore, stack, pr, results, markdown, consoleText, html, checksSnapshotHtml };
 }
 function scoreRisk(blocks, warns, lines, files) {
   let score = 0;
@@ -6803,11 +6912,25 @@ async function runFrontGuard(opts) {
     mode,
     llmAppendix,
     cwd: opts.cwd,
-    emitHtml: Boolean(opts.htmlOut)
+    emitHtml: Boolean(opts.htmlOut),
+    emitChecksSnapshot: Boolean(opts.checksSnapshotOut)
   });
   if (opts.htmlOut && report.html) {
     await fs.writeFile(opts.htmlOut, report.html, "utf8");
   }
+  if (opts.checksSnapshotOut && report.checksSnapshotHtml) {
+    const snapPath = path5.isAbsolute(opts.checksSnapshotOut) ? opts.checksSnapshotOut : path5.join(opts.cwd, opts.checksSnapshotOut);
+    await fs.writeFile(snapPath, report.checksSnapshotHtml, "utf8");
+    const fileUrl = pathToFileURL(snapPath).href;
+    g.stderr.write(
+      `
+FrontGuard: wrote checks snapshot HTML to ${snapPath} (screenshot this file for PR comments).
+  Example: npx playwright screenshot "${fileUrl}" frontguard-checks.png
+  Host the PNG at an HTTPS URL, then set FRONTGUARD_CHECKS_IMAGE_URL before generating the PR comment.
+
+`
+    );
+  }
   if (opts.prCommentOut) {
     const snippet = formatBitbucketPrSnippet(report);
     const abs = path5.isAbsolute(opts.prCommentOut) ? opts.prCommentOut : path5.join(opts.cwd, opts.prCommentOut);
@@ -6817,6 +6940,7 @@ async function runFrontGuard(opts) {
 FrontGuard: wrote Bitbucket PR comment text to ${abs} (${snippet.length} bytes).
   Use ONLY this file in your POST \u2026/pullrequests/{id}/comments payload (content.raw).
   Do not post frontguard-report.md or captured stdout \u2014 that is the long markdown log.
+  Optional: set FRONTGUARD_CHECKS_IMAGE_URL so the comment includes a checks summary image.
 
 `
     );
@@ -6869,6 +6993,10 @@ var run = defineCommand({
       type: "string",
       description: "Write interactive HTML report (use with CI artifacts; PR comment links to download)"
     },
+    checksSnapshotOut: {
+      type: "string",
+      description: "Write HTML with only the Checks table (screenshot \u2192 PNG \u2192 FRONTGUARD_CHECKS_IMAGE_URL in PR comment)"
+    },
     prCommentOut: {
       type: "string",
       description: "Write short Markdown for Bitbucket PR comment (summary + pipeline link for HTML artifact)"
@@ -6881,6 +7009,7 @@ var run = defineCommand({
       enforce: Boolean(args.enforce),
       append: typeof args.append === "string" ? args.append : null,
       htmlOut: typeof args.htmlOut === "string" ? args.htmlOut : null,
+      checksSnapshotOut: typeof args.checksSnapshotOut === "string" ? args.checksSnapshotOut : null,
       prCommentOut: typeof args.prCommentOut === "string" ? args.prCommentOut : null
     });
   }