@cleartrip/frontguard 0.2.7 → 0.2.8

package/dist/cli.js

@@ -5,7 +5,7 @@ import f from 'readline';
 import * as tty from 'tty';
 import { WriteStream } from 'tty';
 import path5, { sep, normalize, delimiter, resolve, dirname } from 'path';
-import fs, { writeFile } from 'fs/promises';
+import fs, { writeFile, readFile } from 'fs/promises';
 import { fileURLToPath, pathToFileURL } from 'url';
 import fs2, { existsSync, statSync, readFileSync } from 'fs';
 import { execFileSync, spawn } from 'child_process';
@@ -5579,10 +5579,18 @@ 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;
+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;");
 }
@@ -5600,7 +5608,7 @@ function formatDuration(ms) {
   return r4 ? `${m3}m ${r4}s` : `${m3}m`;
 }
 function statusText(r4) {
-  if (r4.skipped) return `Skipped \u2014 ${truncate5(r4.skipped, 36)}`;
+  if (r4.skipped) return `Skipped \u2014 ${truncate5(r4.skipped, 42)}`;
   if (r4.findings.length === 0) return "Pass";
   return `${r4.findings.length} issue(s)`;
 }
@@ -5615,16 +5623,38 @@ function riskFill(risk) {
   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, results, warns, infos, blocks } = p2;
+  const { riskScore, mode, stack, pr, results, lines } = p2;
   const modeLabel = mode === "enforce" ? "Enforce" : "Warn only";
-  const brandY = 20;
-  const titleY = 42;
-  const metaY = 66;
-  const tableTop = 88;
+  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 + 28;
+  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 = [
@@ -5633,6 +5663,33 @@ function buildChecksSnapshotSvg(p2) {
     { 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;
@@ -5645,13 +5702,14 @@ function buildChecksSnapshotSvg(p2) {
   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>`
+      `<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 = [];
@@ -5661,27 +5719,30 @@ function buildChecksSnapshotSvg(p2) {
       `<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="${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>
+  <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="fg-card">
+    <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(#fg-card)">
+  <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="system-ui, -apple-system, Segoe UI, sans-serif" text-anchor="${c4.anchor}">${c4.label}</text>`
+    (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    ")}
@@ -5694,10 +5755,21 @@ async function renderChecksSnapshotPng(pngPath, input) {
   const resvg = new Resvg(svg, {
     background: "#f8fafc",
     fitTo: { mode: "width", value: W3 },
-    font: { loadSystemFonts: true }
+    font: resvgFontOptions()
   });
   const img = resvg.render();
-  await writeFile(pngPath, img.asPng());
+  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
@@ -5881,6 +5953,32 @@ 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)`;
@@ -5891,16 +5989,17 @@ function renderCheckTableRows(results) {
   }).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;
@@ -5939,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>