@cleartrip/frontguard 0.2.6 → 0.2.7

package/dist/cli.js

@@ -5,16 +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 { tmpdir } from 'os';
+import fs, { writeFile } from 'fs/promises';
+import { fileURLToPath, pathToFileURL } from 'url';
 import fs2, { existsSync, statSync, readFileSync } from 'fs';
-import { spawn, execFileSync } from 'child_process';
+import { execFileSync, spawn } from 'child_process';
 import { createRequire } from 'module';
 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;
@@ -2497,26 +2497,52 @@ async function initFrontGuard(cwd) {
     await fs.writeFile(tplPr, PR_TEMPLATE, "utf8");
   }
 }
-var MAX_PNG_BYTES_FOR_EMBED = 22e4;
+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) {
-    try {
-      if (!existsSync(embedPath)) return null;
-      const st = statSync(embedPath);
-      if (!st.isFile() || st.size > MAX_PNG_BYTES_FOR_EMBED) return null;
-      const buf = readFileSync(embedPath);
-      const b64 = buf.toString("base64");
-      const md = `![FrontGuard \u2014 checks summary](data:image/png;base64,${b64})`;
-      if (md.length > 45e4) return null;
-      return md;
-    } catch {
-      return null;
-    }
+    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();
@@ -5547,29 +5573,131 @@ function applyAiAssistedEscalation(results, pr, config) {
     }
   }
 }
-var PLAYWRIGHT = "playwright@1.49.1";
-function runCmd(command, args) {
-  return new Promise((resolve, reject) => {
-    const p2 = spawn(command, args, { stdio: "inherit", env: process.env });
-    p2.on("error", reject);
-    p2.on("close", (code) => {
-      if (code === 0) resolve();
-      else reject(new Error(`${command} exited with code ${code}`));
-    });
-  });
+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;");
 }
-async function runChecksHtmlToPng(htmlPath, pngPath) {
-  const fileUrl = pathToFileURL(htmlPath).href;
-  const npx = process.platform === "win32" ? "npx.cmd" : "npx";
-  await runCmd(npx, ["-y", PLAYWRIGHT, "install", "chromium"]);
-  await runCmd(npx, [
-    "-y",
-    PLAYWRIGHT,
-    "screenshot",
-    fileUrl,
-    pngPath,
-    "--viewport-size=920,1000"
-  ]);
+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
@@ -5624,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`;
@@ -5759,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) {
@@ -6185,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;
@@ -6240,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`;
@@ -6395,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("");
@@ -6960,36 +7106,24 @@ async function runFrontGuard(opts) {
     await fs.writeFile(opts.htmlOut, report.html, "utf8");
   }
   let embedPngPath = null;
-  let tmpDir = null;
-  let htmlForPng;
-  if ((opts.checksSnapshotOut || opts.checksPngOut) && report.checksSnapshotHtml) {
+  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");
-      htmlForPng = snapPath;
       g.stderr.write(`
 FrontGuard: wrote checks snapshot HTML to ${snapPath}
 `);
     }
     if (opts.checksPngOut) {
-      if (!htmlForPng) {
-        tmpDir = await fs.mkdtemp(path5.join(tmpdir(), "fg-checks-"));
-        htmlForPng = path5.join(tmpDir, "checks.html");
-        await fs.writeFile(htmlForPng, report.checksSnapshotHtml, "utf8");
-      }
       const pngAbs = path5.isAbsolute(opts.checksPngOut) ? opts.checksPngOut : path5.join(opts.cwd, opts.checksPngOut);
-      await runChecksHtmlToPng(htmlForPng, pngAbs);
+      await renderChecksSnapshotPng(pngAbs, report.checksSnapshotInput);
       embedPngPath = pngAbs;
-      g.stderr.write(`FrontGuard: wrote checks PNG to ${pngAbs} (Playwright via npx).
+      g.stderr.write(`FrontGuard: wrote checks PNG to ${pngAbs}.
 
 `);
-      if (tmpDir) {
-        await fs.rm(tmpDir, { recursive: true, force: true });
-        tmpDir = null;
-      }
-    } else if (opts.checksSnapshotOut && htmlForPng) {
+    } else if (opts.checksSnapshotOut) {
       g.stderr.write(
-        `  Tip: add --checksPngOut checks.png to render this HTML to PNG with Playwright (npx).
+        `  Tip: add --checksPngOut checks.png to render the checks table to a PNG (no browser).
 
 `
       );
@@ -7067,7 +7201,7 @@ var run = defineCommand({
     },
     checksPngOut: {
       type: "string",
-      description: "Write PNG of the checks table via Playwright (npx). Pair with --checksSnapshotOut or use alone"
+      description: "Write PNG of the checks table (SVG raster; @resvg/resvg-js, no browser). Pair with --checksSnapshotOut or use alone"
     },
     prCommentOut: {
       type: "string",