@cleartrip/frontguard 0.2.5 → 0.2.7

package/dist/cli.js

@@ -5,15 +5,16 @@ import f from 'readline';
 import * as tty from 'tty';
 import { WriteStream } from 'tty';
 import path5, { sep, normalize, delimiter, resolve, dirname } from 'path';
-import fs from 'fs/promises';
-import { pathToFileURL, fileURLToPath } from 'url';
+import fs, { writeFile } from 'fs/promises';
+import { fileURLToPath, pathToFileURL } from 'url';
+import fs2, { existsSync, statSync, readFileSync } from 'fs';
 import { execFileSync, spawn } from 'child_process';
 import { createRequire } from 'module';
-import fs2 from 'fs';
 import { pipeline } from 'stream/promises';
 import { PassThrough } from 'stream';
 import fg from 'fast-glob';
 import * as ts from 'typescript';
+import { Resvg } from '@resvg/resvg-js';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -2496,12 +2497,52 @@ async function initFrontGuard(cwd) {
     await fs.writeFile(tplPr, PR_TEMPLATE, "utf8");
   }
 }
+var BITBUCKET_CHECKS_IMAGE_MARKDOWN_ALT = "FrontGuard checks summary";
+var MAX_BITBUCKET_INLINE_IMAGE_MARKDOWN_LINE_LENGTH = 3e5;
+var MAX_PNG_BYTES_BITBUCKET_INLINE = 21e4;
+var MARKDOWN_LINE_PREFIX = `![${BITBUCKET_CHECKS_IMAGE_MARKDOWN_ALT}](data:image/png;base64,`;
+function isPngBuffer(buf) {
+  return buf.length >= 8 && buf[0] === 137 && buf[1] === 80 && buf[2] === 78 && buf[3] === 71 && buf[4] === 13 && buf[5] === 10 && buf[6] === 26 && buf[7] === 10;
+}
+function pngBufferToBitbucketImageMarkdownLine(png) {
+  if (!isPngBuffer(png)) {
+    throw new TypeError("Buffer is not a PNG (missing IHDR signature)");
+  }
+  if (png.length > MAX_PNG_BYTES_BITBUCKET_INLINE) {
+    throw new RangeError(
+      `PNG too large for Bitbucket inline markdown (${png.length} bytes; max ${MAX_PNG_BYTES_BITBUCKET_INLINE}). Host the image and use an HTTPS URL instead.`
+    );
+  }
+  const b64 = png.toString("base64");
+  const line = `${MARKDOWN_LINE_PREFIX}${b64})`;
+  if (line.length > MAX_BITBUCKET_INLINE_IMAGE_MARKDOWN_LINE_LENGTH) {
+    throw new RangeError(
+      `Inline markdown line too long (${line.length} chars; max ${MAX_BITBUCKET_INLINE_IMAGE_MARKDOWN_LINE_LENGTH})`
+    );
+  }
+  return line;
+}
+function tryPngFileToBitbucketImageMarkdownLine(filePath) {
+  try {
+    if (!existsSync(filePath)) return null;
+    const st = statSync(filePath);
+    if (!st.isFile() || st.size > MAX_PNG_BYTES_BITBUCKET_INLINE) return null;
+    const buf = readFileSync(filePath);
+    return pngBufferToBitbucketImageMarkdownLine(buf);
+  } catch {
+    return null;
+  }
+}
 
 // src/ci/bitbucket-pr-snippet.ts
 function checksImageMarkdown() {
+  const embedPath = process.env.FRONTGUARD_EMBED_CHECKS_PNG_PATH?.trim();
+  if (embedPath) {
+    return tryPngFileToBitbucketImageMarkdownLine(embedPath);
+  }
   const u4 = process.env.FRONTGUARD_CHECKS_IMAGE_URL?.trim();
   if (!u4) return null;
-  return `![FrontGuard \u2014 checks summary](${u4})`;
+  return `![${BITBUCKET_CHECKS_IMAGE_MARKDOWN_ALT}](${u4})`;
 }
 function bitbucketPipelineResultsUrl() {
   const full = process.env.BITBUCKET_REPO_FULL_NAME?.trim();
@@ -5532,6 +5573,132 @@ function applyAiAssistedEscalation(results, pr, config) {
     }
   }
 }
+var W3 = 920;
+var PAD_X = 24;
+var TABLE_X = 20;
+var TABLE_W = 880;
+var HEADER_H = 34;
+var ROW_H = 34;
+var COL_CHECK = 56;
+var COL_STATUS = 508;
+var COL_NUM = 748;
+var COL_TIME = 888;
+function escapeXml(s3) {
+  return s3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function truncate5(s3, max) {
+  const t3 = s3.replace(/\s+/g, " ").trim();
+  if (t3.length <= max) return t3;
+  return `${t3.slice(0, max - 1)}\u2026`;
+}
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms} ms`;
+  const s3 = Math.round(ms / 1e3);
+  if (s3 < 60) return `${s3}s`;
+  const m3 = Math.floor(s3 / 60);
+  const r4 = s3 % 60;
+  return r4 ? `${m3}m ${r4}s` : `${m3}m`;
+}
+function statusText(r4) {
+  if (r4.skipped) return `Skipped \u2014 ${truncate5(r4.skipped, 36)}`;
+  if (r4.findings.length === 0) return "Pass";
+  return `${r4.findings.length} issue(s)`;
+}
+function dotFill(r4) {
+  if (r4.skipped) return "#cbd5e1";
+  if (r4.findings.length === 0) return "#16a34a";
+  if (r4.findings.some((x3) => x3.severity === "block")) return "#dc2626";
+  return "#d97706";
+}
+function riskFill(risk) {
+  if (risk === "LOW") return "#16a34a";
+  if (risk === "MEDIUM") return "#d97706";
+  return "#dc2626";
+}
+function buildChecksSnapshotSvg(p2) {
+  const { riskScore, mode, results, warns, infos, blocks } = p2;
+  const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
+  const brandY = 20;
+  const titleY = 42;
+  const metaY = 66;
+  const tableTop = 88;
+  const bodyRows = results.length;
+  const cardH = HEADER_H + bodyRows * ROW_H;
+  const totalH = tableTop + cardH + 28;
+  const headerMid = tableTop + HEADER_H / 2 + 5;
+  const rowTextY = (i3) => tableTop + HEADER_H + i3 * ROW_H + ROW_H / 2 + 5;
+  const headerCells = [
+    { x: COL_CHECK, label: "CHECK", anchor: "start" },
+    { x: COL_STATUS, label: "STATUS", anchor: "start" },
+    { x: COL_NUM, label: "#", anchor: "end" },
+    { x: COL_TIME, label: "TIME", anchor: "end" }
+  ];
+  const rowLines = [];
+  for (let i3 = 0; i3 < bodyRows; i3++) {
+    const y4 = tableTop + HEADER_H + i3 * ROW_H;
+    const fill = i3 % 2 === 1 ? "#f8fafc" : "#ffffff";
+    rowLines.push(
+      `<rect x="${TABLE_X}" y="${y4}" width="${TABLE_W}" height="${ROW_H}" fill="${fill}" stroke="none"/>`
+    );
+  }
+  const bodyCells = [];
+  for (let i3 = 0; i3 < bodyRows; i3++) {
+    const r4 = results[i3];
+    const cy = rowTextY(i3);
+    const cx = 36;
+    bodyCells.push(
+      `<circle cx="${cx}" cy="${cy - 4}" r="4.5" fill="${dotFill(r4)}"/>`,
+      `<text x="${COL_CHECK}" y="${cy}" font-size="13" font-weight="600" fill="#0f172a" font-family="system-ui, -apple-system, Segoe UI, sans-serif">${escapeXml(truncate5(r4.checkId, 46))}</text>`,
+      `<text x="${COL_STATUS}" y="${cy}" font-size="13" fill="#0f172a" font-family="system-ui, -apple-system, Segoe UI, sans-serif">${escapeXml(statusText(r4))}</text>`,
+      `<text x="${COL_NUM}" y="${cy}" font-size="13" fill="#64748b" font-family="ui-monospace, monospace" text-anchor="end">${escapeXml(r4.skipped ? "\u2014" : String(r4.findings.length))}</text>`,
+      `<text x="${COL_TIME}" y="${cy}" font-size="13" fill="#64748b" font-family="ui-monospace, monospace" text-anchor="end">${escapeXml(formatDuration(r4.durationMs))}</text>`
+    );
+  }
+  const gridLines = [];
+  for (let i3 = 0; i3 <= bodyRows; i3++) {
+    const y4 = tableTop + HEADER_H + i3 * ROW_H;
+    gridLines.push(
+      `<line x1="${TABLE_X}" y1="${y4}" x2="${TABLE_X + TABLE_W}" y2="${y4}" stroke="#e2e8f0" stroke-width="1"/>`
+    );
+  }
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${W3}" height="${totalH}" viewBox="0 0 ${W3} ${totalH}">
+  <rect width="${W3}" height="${totalH}" fill="#f8fafc"/>
+  <text x="${PAD_X}" y="${brandY}" font-size="11" font-weight="600" fill="#64748b" letter-spacing="0.12em" font-family="system-ui, -apple-system, Segoe UI, sans-serif">FRONTGUARD</text>
+  <text x="${PAD_X}" y="${titleY}" font-size="17" font-weight="600" fill="#0f172a" font-family="system-ui, -apple-system, Segoe UI, sans-serif">Checks</text>
+  <text x="${PAD_X}" y="${metaY}" font-size="13" fill="#64748b" font-family="system-ui, -apple-system, Segoe UI, sans-serif">
+    <tspan>Risk </tspan><tspan fill="${riskFill(riskScore)}" font-weight="600">${escapeXml(riskScore)}</tspan>
+    <tspan> \xB7 ${escapeXml(modeLabel)} \xB7 Blocking </tspan><tspan fill="#0f172a" font-weight="600">${blocks}</tspan>
+    <tspan> \xB7 Warnings </tspan><tspan fill="#0f172a" font-weight="600">${warns}</tspan>
+    <tspan> \xB7 Info </tspan><tspan fill="#0f172a" font-weight="600">${infos}</tspan>
+  </text>
+  <defs>
+    <clipPath id="fg-card">
+      <rect x="${TABLE_X}" y="${tableTop}" width="${TABLE_W}" height="${cardH}" rx="10" ry="10"/>
+    </clipPath>
+  </defs>
+  <rect x="${TABLE_X}" y="${tableTop}" width="${TABLE_W}" height="${cardH}" rx="10" ry="10" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
+  <g clip-path="url(#fg-card)">
+    <rect x="${TABLE_X}" y="${tableTop}" width="${TABLE_W}" height="${HEADER_H}" fill="#f1f5f9"/>
+    ${headerCells.map(
+    (c4) => `<text x="${c4.x}" y="${headerMid}" font-size="11" font-weight="600" fill="#64748b" letter-spacing="0.04em" font-family="system-ui, -apple-system, Segoe UI, sans-serif" text-anchor="${c4.anchor}">${c4.label}</text>`
+  ).join("\n    ")}
+    ${rowLines.join("\n    ")}
+    ${gridLines.join("\n    ")}
+    ${bodyCells.join("\n    ")}
+  </g>
+</svg>`;
+}
+async function renderChecksSnapshotPng(pngPath, input) {
+  const svg = buildChecksSnapshotSvg(input);
+  const resvg = new Resvg(svg, {
+    background: "#f8fafc",
+    fitTo: { mode: "width", value: W3 },
+    font: { loadSystemFonts: true }
+  });
+  const img = resvg.render();
+  await writeFile(pngPath, img.asPng());
+}
 
 // src/report/builder.ts
 var import_picocolors = __toESM(require_picocolors());
@@ -5585,7 +5752,7 @@ function sortFindings(cwd, items) {
     return a3.f.message.localeCompare(b3.f.message);
   });
 }
-function formatDuration(ms) {
+function formatDuration2(ms) {
   if (ms < 1e3) return `${ms} ms`;
   const s3 = Math.round(ms / 1e3);
   if (s3 < 60) return `${s3}s`;
@@ -5720,7 +5887,7 @@ function renderCheckTableRows(results) {
     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>`;
+    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">${formatDuration2(r4.durationMs)}</td></tr>`;
   }).join("\n");
 }
 function buildChecksSnapshotHtml(p2) {
@@ -6146,14 +6313,32 @@ function buildReport(stack, pr, results, options) {
     lines,
     llmAppendix: options?.llmAppendix ?? null
   }) : null;
-  const checksSnapshotHtml = options?.emitChecksSnapshot === true ? buildChecksSnapshotHtml({
+  const llmAppendix = options?.llmAppendix ?? null;
+  const checksSnapshotInput = options?.emitChecksSnapshot === true ? {
+    cwd,
     riskScore,
     mode,
+    stack,
+    pr,
     results,
     warns,
     infos,
-    blocks}) : null;
-  return { riskScore, stack, pr, results, markdown, consoleText, html, checksSnapshotHtml };
+    blocks,
+    lines,
+    llmAppendix
+  } : null;
+  const checksSnapshotHtml = checksSnapshotInput != null ? buildChecksSnapshotHtml(checksSnapshotInput) : null;
+  return {
+    riskScore,
+    stack,
+    pr,
+    results,
+    markdown,
+    consoleText,
+    html,
+    checksSnapshotHtml,
+    checksSnapshotInput
+  };
 }
 function scoreRisk(blocks, warns, lines, files) {
   let score = 0;
@@ -6201,7 +6386,7 @@ function countShieldColor(kind, n3) {
   if (n3 <= 10) return "yellow";
   return "orange";
 }
-function formatDuration2(ms) {
+function formatDuration3(ms) {
   if (ms < 1e3) return `${ms} ms`;
   const s3 = Math.round(ms / 1e3);
   if (s3 < 60) return `${s3}s`;
@@ -6356,7 +6541,7 @@ function formatMarkdown(p2) {
     }
     const nFind = r4.skipped ? "\u2014" : String(r4.findings.length);
     sb.push(
-      `| ${he2} | **${r4.checkId}** | ${status} | **${nFind}** | ${formatDuration2(r4.durationMs)} |`
+      `| ${he2} | **${r4.checkId}** | ${status} | **${nFind}** | ${formatDuration3(r4.durationMs)} |`
     );
   }
   sb.push("");
@@ -6915,26 +7100,41 @@ async function runFrontGuard(opts) {
     llmAppendix,
     cwd: opts.cwd,
     emitHtml: Boolean(opts.htmlOut),
-    emitChecksSnapshot: Boolean(opts.checksSnapshotOut)
+    emitChecksSnapshot: Boolean(opts.checksSnapshotOut || opts.checksPngOut)
   });
   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.
+  let embedPngPath = null;
+  if ((opts.checksSnapshotOut || opts.checksPngOut) && report.checksSnapshotHtml && report.checksSnapshotInput) {
+    if (opts.checksSnapshotOut) {
+      const snapPath = path5.isAbsolute(opts.checksSnapshotOut) ? opts.checksSnapshotOut : path5.join(opts.cwd, opts.checksSnapshotOut);
+      await fs.writeFile(snapPath, report.checksSnapshotHtml, "utf8");
+      g.stderr.write(`
+FrontGuard: wrote checks snapshot HTML to ${snapPath}
+`);
+    }
+    if (opts.checksPngOut) {
+      const pngAbs = path5.isAbsolute(opts.checksPngOut) ? opts.checksPngOut : path5.join(opts.cwd, opts.checksPngOut);
+      await renderChecksSnapshotPng(pngAbs, report.checksSnapshotInput);
+      embedPngPath = pngAbs;
+      g.stderr.write(`FrontGuard: wrote checks PNG to ${pngAbs}.
+
+`);
+    } else if (opts.checksSnapshotOut) {
+      g.stderr.write(
+        `  Tip: add --checksPngOut checks.png to render the checks table to a PNG (no browser).
 
 `
-    );
+      );
+    }
   }
   if (opts.prCommentOut) {
+    if (embedPngPath) {
+      g.env.FRONTGUARD_EMBED_CHECKS_PNG_PATH = embedPngPath;
+    }
     const snippet = formatBitbucketPrSnippet(report);
+    delete g.env.FRONTGUARD_EMBED_CHECKS_PNG_PATH;
     const abs = path5.isAbsolute(opts.prCommentOut) ? opts.prCommentOut : path5.join(opts.cwd, opts.prCommentOut);
     await fs.writeFile(abs, snippet, "utf8");
     g.stderr.write(
@@ -6942,7 +7142,7 @@ FrontGuard: wrote checks snapshot HTML to ${snapPath} (screenshot this file for
 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.
+  With --checksPngOut, the PNG is inlined (small files only) or set FRONTGUARD_CHECKS_IMAGE_URL.
 
 `
     );
@@ -6997,7 +7197,11 @@ var run = defineCommand({
     },
     checksSnapshotOut: {
       type: "string",
-      description: "Write HTML with only the Checks table (screenshot \u2192 PNG \u2192 FRONTGUARD_CHECKS_IMAGE_URL in PR comment)"
+      description: "Write HTML with only the Checks table (for screenshots / PR comments)"
+    },
+    checksPngOut: {
+      type: "string",
+      description: "Write PNG of the checks table (SVG raster; @resvg/resvg-js, no browser). Pair with --checksSnapshotOut or use alone"
     },
     prCommentOut: {
       type: "string",
@@ -7012,6 +7216,7 @@ var run = defineCommand({
       append: typeof args.append === "string" ? args.append : null,
       htmlOut: typeof args.htmlOut === "string" ? args.htmlOut : null,
       checksSnapshotOut: typeof args.checksSnapshotOut === "string" ? args.checksSnapshotOut : null,
+      checksPngOut: typeof args.checksPngOut === "string" ? args.checksPngOut : null,
       prCommentOut: typeof args.prCommentOut === "string" ? args.prCommentOut : null
     });
   }