@cleartrip/frontguard 0.2.6 → 0.2.8

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, readFile } 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,203 @@ 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 = 52;
+var ICON_X = 268;
+var COL_STATUS = 400;
+var COL_NUM = 700;
+var COL_TIME = 820;
+var OVER_LABEL_W = 132;
+var OVER_ROW_H = 36;
+var clipSeq = 0;
+function nextClipId() {
+  clipSeq += 1;
+  return `fgc${clipSeq}_${Math.random().toString(36).slice(2, 8)}`;
+}
+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, 42)}`;
+  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 resvgFontOptions() {
+  const base = { loadSystemFonts: true };
+  if (process.platform === "linux") {
+    return {
+      ...base,
+      fontDirs: [
+        "/usr/share/fonts/truetype/dejavu",
+        "/usr/share/fonts/truetype/liberation",
+        "/usr/share/fonts/opentype/noto",
+        "/usr/share/fonts"
+      ]
+    };
+  }
+  return base;
+}
+function buildChecksSnapshotSvg(p2) {
+  const { riskScore, mode, stack, pr, results, lines } = p2;
+  const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
+  const stackLine = truncate5(formatStackOneLiner(stack), 96);
+  const prLine = pr && lines != null ? truncate5(
+    `${lines} lines changed (+${pr.additions} / \u2212${pr.deletions}) \xB7 ${pr.changedFiles} files`,
+    96
+  ) : null;
+  const nOverview = 3 + (prLine ? 1 : 0);
+  const overviewH = nOverview * OVER_ROW_H;
+  const overviewY0 = 44;
+  const overviewClip = nextClipId();
+  const checksTitleY = overviewY0 + overviewH + 22;
+  const tableTop = checksTitleY + 22;
+  const bodyRows = results.length;
+  const cardH = HEADER_H + bodyRows * ROW_H;
+  const totalH = tableTop + cardH + 36;
+  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 overviewRows = [];
+  const ov = [
+    { label: "Risk score", kind: "risk" },
+    { label: "Mode", kind: "text", text: modeLabel },
+    { label: "Stack", kind: "text", text: stackLine }
+  ];
+  if (prLine) ov.push({ label: "Pull request", kind: "text", text: prLine });
+  for (let i3 = 0; i3 < nOverview; i3++) {
+    const row = ov[i3];
+    const y4 = overviewY0 + i3 * OVER_ROW_H;
+    const mid = y4 + OVER_ROW_H / 2 + 4;
+    overviewRows.push(
+      `<rect x="${TABLE_X}" y="${y4}" width="${OVER_LABEL_W}" height="${OVER_ROW_H}" fill="#f1f5f9" stroke="none"/>`,
+      `<line x1="${TABLE_X}" y1="${y4 + OVER_ROW_H}" x2="${TABLE_X + TABLE_W}" y2="${y4 + OVER_ROW_H}" stroke="#e2e8f0" stroke-width="1"/>`,
+      `<text x="${TABLE_X + 10}" y="${mid}" font-size="12" fill="#64748b" font-weight="500" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">${escapeXml(row.label)}</text>`
+    );
+    if (row.kind === "risk") {
+      const rs = riskScore;
+      overviewRows.push(
+        `<text x="${TABLE_X + OVER_LABEL_W + 10}" y="${mid}" font-size="13" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif"><tspan fill="${riskFill(riskScore)}" font-weight="600">${escapeXml(rs)}</tspan><tspan fill="#64748b"> \u2014 heuristic</tspan></text>`
+      );
+    } else {
+      overviewRows.push(
+        `<text x="${TABLE_X + OVER_LABEL_W + 10}" y="${mid}" font-size="13" fill="#0f172a" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">${escapeXml(row.text)}</text>`
+      );
+    }
+  }
+  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);
+    bodyCells.push(
+      `<circle cx="34" 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="DejaVu Sans, Liberation Sans, system-ui, sans-serif">${escapeXml(truncate5(r4.checkId, 22))}</text>`,
+      `<circle cx="${ICON_X}" cy="${cy - 3}" r="8" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1"/>`,
+      `<text x="${ICON_X}" y="${cy}" font-size="9" font-weight="700" fill="#64748b" text-anchor="middle" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">i</text>`,
+      `<text x="${COL_STATUS}" y="${cy}" font-size="13" fill="#0f172a" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">${escapeXml(statusText(r4))}</text>`,
+      `<text x="${COL_NUM}" y="${cy}" font-size="13" fill="#64748b" font-family="Liberation Mono, DejaVu Sans Mono, 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="Liberation Mono, DejaVu Sans Mono, 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"/>`
+    );
+  }
+  const checksClip = nextClipId();
+  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="18" font-size="11" font-weight="600" fill="#64748b" letter-spacing="0.12em" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">FRONTGUARD</text>
+  <text x="${PAD_X}" y="36" font-size="16" font-weight="600" fill="#0f172a" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">Overview</text>
+  <defs>
+    <clipPath id="${overviewClip}">
+      <rect x="${TABLE_X}" y="${overviewY0}" width="${TABLE_W}" height="${overviewH}" rx="10" ry="10"/>
+    </clipPath>
+    <clipPath id="${checksClip}">
+      <rect x="${TABLE_X}" y="${tableTop}" width="${TABLE_W}" height="${cardH}" rx="10" ry="10"/>
+    </clipPath>
+  </defs>
+  <rect x="${TABLE_X}" y="${overviewY0}" width="${TABLE_W}" height="${overviewH}" rx="10" ry="10" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
+  <g clip-path="url(#${overviewClip})">
+    ${overviewRows.join("\n    ")}
+  </g>
+  <text x="${PAD_X}" y="${checksTitleY}" font-size="16" font-weight="600" fill="#0f172a" font-family="DejaVu Sans, Liberation Sans, system-ui, sans-serif">Checks</text>
+  <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(#${checksClip})">
+    <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="DejaVu Sans, Liberation Sans, system-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: resvgFontOptions()
+  });
+  const img = resvg.render();
+  const png = img.asPng();
+  await writeFile(pngPath, png);
+  const written = await readFile(pngPath);
+  if (!isPngBuffer(written) || written.length < 200) {
+    throw new Error(
+      "FrontGuard: checks PNG is missing or invalid after render. Install fonts on the runner (e.g. apt install fonts-dejavu-core fonts-liberation) and ensure @resvg/resvg-js native binary loads."
+    );
+  }
+  const { width, height } = img;
+  if (width < 16 || height < 16) {
+    throw new Error(`FrontGuard: checks PNG has invalid dimensions ${width}x${height}.`);
+  }
 }
 
 // src/report/builder.ts
@@ -5624,7 +5824,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`;
@@ -5753,26 +5953,53 @@ var CHECKS_TABLE_STYLES = `
     .dot-block { background: var(--block); }
     .dot-skip { background: #cbd5e1; }
 `;
+var SNAPSHOT_OVERVIEW_STYLES = `
+    .snapshot {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+      background: var(--surface);
+      border-radius: var(--radius);
+      overflow: hidden;
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow);
+      margin: 0 0 1.25rem;
+    }
+    .snapshot th, .snapshot td {
+      padding: 0.65rem 1rem;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .snapshot tr:last-child th, .snapshot tr:last-child td { border-bottom: none; }
+    .snapshot th {
+      width: 9rem;
+      color: var(--muted);
+      font-weight: 500;
+      background: #f1f5f9;
+    }
+    .muted { color: var(--muted); }
+`;
 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>`;
+    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) {
-  const { riskScore, mode, results, warns, infos, blocks } = p2;
+  const { riskScore, mode, stack, pr, results, lines } = p2;
   const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
   const riskClass = riskScore === "LOW" ? "risk-low" : riskScore === "MEDIUM" ? "risk-med" : "risk-high";
   const checkRows = renderCheckTableRows(results);
+  const prRow = pr && lines != null ? `<tr><th>Pull request</th><td>${lines} lines changed (+${pr.additions} / \u2212${pr.deletions}) \xB7 ${pr.changedFiles} files</td></tr>` : "";
   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>
+  <title>FrontGuard \u2014 Snapshot</title>
   <style>
     :root {
       --bg: #f8fafc;
@@ -5811,26 +6038,27 @@ function buildChecksSnapshotHtml(p2) {
     .h2 {
       font-size: 1rem;
       font-weight: 600;
-      margin: 0 0 0.5rem;
+      margin: 0 0 0.85rem;
       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); }
+    ${SNAPSHOT_OVERVIEW_STYLES}
     ${CHECKS_TABLE_STYLES}
   </style>
 </head>
 <body>
   <div class="brand">FrontGuard</div>
+  <h2 class="h2">Overview</h2>
+  <table class="snapshot">
+    <tr><th>Risk score</th><td><strong class="${riskClass}">${riskScore}</strong> <span class="muted">\u2014 heuristic</span></td></tr>
+    <tr><th>Mode</th><td>${escapeHtml(modeLabel)}</td></tr>
+    <tr><th>Stack</th><td>${escapeHtml(formatStackOneLiner(stack))}</td></tr>
+    ${prRow}
+  </table>
   <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>
@@ -6185,14 +6413,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 +6486,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 +6641,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 +7206,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 +7301,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",