@cleartrip/frontguard 0.2.2 → 0.2.4

package/dist/cli.js

@@ -6,13 +6,14 @@ 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';
 import { pipeline } from 'stream/promises';
 import { PassThrough } from 'stream';
 import fg from 'fast-glob';
+import * as ts from 'typescript';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -2497,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();
@@ -2521,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();
@@ -2537,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);
@@ -2953,9 +2974,9 @@ async function detectStack(cwd) {
   try {
     const tsconfigPath = path5.join(cwd, "tsconfig.json");
     const tsRaw = await fs.readFile(tsconfigPath, "utf8");
-    const ts = JSON.parse(tsRaw);
-    if (typeof ts.compilerOptions?.strict === "boolean") {
-      tsStrict = ts.compilerOptions.strict;
+    const ts2 = JSON.parse(tsRaw);
+    if (typeof ts2.compilerOptions?.strict === "boolean") {
+      tsStrict = ts2.compilerOptions.strict;
     }
   } catch {
   }
@@ -5013,6 +5034,178 @@ async function runCustomRules(cwd, config, restrictToFiles) {
     durationMs: Math.round(performance.now() - t0)
   };
 }
+var BIG_LITERAL_MIN = 9e3;
+function scanDiscardedExpensiveCalls(regionText, fileNameHint, regionStartLine) {
+  const kind = /\.(tsx|jsx)$/i.test(fileNameHint) ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  const sf = ts.createSourceFile(
+    fileNameHint,
+    regionText,
+    ts.ScriptTarget.Latest,
+    true,
+    kind
+  );
+  const parseDiags = sf.parseDiagnostics;
+  if (parseDiags && parseDiags.length > 12) {
+    return [];
+  }
+  const stack = [/* @__PURE__ */ new Map()];
+  const lines = [];
+  function current() {
+    return stack[stack.length - 1];
+  }
+  function lookupExpensive(name) {
+    for (let i3 = stack.length - 1; i3 >= 0; i3--) {
+      const v3 = stack[i3].get(name);
+      if (v3 !== void 0) return v3;
+    }
+    return false;
+  }
+  function lineOf(node) {
+    const lc = ts.getLineAndCharacterOfPosition(sf, node.getStart(sf, false));
+    return regionStartLine + lc.line;
+  }
+  function visitFunctionLike(fn) {
+    stack.push(/* @__PURE__ */ new Map());
+    for (const p2 of fn.parameters) {
+      if (ts.isIdentifier(p2.name)) current().set(p2.name.text, false);
+    }
+    const body = fn.body;
+    if (!body) {
+      stack.pop();
+      return;
+    }
+    if (ts.isBlock(body)) {
+      for (const st of body.statements) visitStmt(st);
+    } else if (ts.isExpression(body)) {
+      visitStmt(ts.factory.createExpressionStatement(body));
+    }
+    stack.pop();
+  }
+  function visitBlock(block) {
+    stack.push(/* @__PURE__ */ new Map());
+    for (const st of block.statements) visitStmt(st);
+    stack.pop();
+  }
+  function visitMaybeBlock(s3) {
+    if (ts.isBlock(s3)) visitBlock(s3);
+    else visitStmt(s3);
+  }
+  function visitStmt(st) {
+    if (ts.isVariableStatement(st)) {
+      for (const decl of st.declarationList.declarations) {
+        if (!ts.isIdentifier(decl.name) || !decl.initializer) continue;
+        const name = decl.name.text;
+        const init3 = decl.initializer;
+        if (ts.isArrowFunction(init3) || ts.isFunctionExpression(init3)) {
+          current().set(name, isBodyExpensive(init3.body));
+          visitFunctionLike(init3);
+        }
+      }
+      return;
+    }
+    if (ts.isFunctionDeclaration(st) && st.name && st.body) {
+      current().set(st.name.text, isBodyExpensive(st.body));
+      visitFunctionLike(st);
+      return;
+    }
+    if (ts.isExpressionStatement(st)) {
+      const ex = st.expression;
+      if (ts.isCallExpression(ex) && !ex.questionDotToken && ts.isIdentifier(ex.expression) && lookupExpensive(ex.expression.text)) {
+        lines.push(lineOf(ex));
+      }
+      return;
+    }
+    if (ts.isBlock(st)) {
+      visitBlock(st);
+      return;
+    }
+    if (ts.isIfStatement(st)) {
+      visitMaybeBlock(st.thenStatement);
+      if (st.elseStatement) visitMaybeBlock(st.elseStatement);
+      return;
+    }
+    if (ts.isForStatement(st) || ts.isForOfStatement(st) || ts.isForInStatement(st) || ts.isWhileStatement(st) || ts.isDoStatement(st)) {
+      visitMaybeBlock(st.statement);
+      return;
+    }
+    if (ts.isTryStatement(st)) {
+      visitBlock(st.tryBlock);
+      if (st.catchClause?.block) visitBlock(st.catchClause.block);
+      if (st.finallyBlock) visitBlock(st.finallyBlock);
+      return;
+    }
+    if (ts.isSwitchStatement(st)) {
+      for (const clause of st.caseBlock.clauses) {
+        for (const s3 of clause.statements) visitStmt(s3);
+      }
+      return;
+    }
+    if (ts.isClassDeclaration(st) && st.members) {
+      for (const member of st.members) {
+        if (ts.isMethodDeclaration(member) && member.body) {
+          const nm = member.name;
+          if (ts.isIdentifier(nm)) {
+            current().set(nm.text, isBodyExpensive(member.body));
+          }
+          visitFunctionLike(member);
+        }
+      }
+    }
+  }
+  for (const st of sf.statements) {
+    if (ts.isImportDeclaration(st) || ts.isImportEqualsDeclaration(st)) continue;
+    if (ts.isExportDeclaration(st)) continue;
+    if (ts.isExportAssignment(st)) {
+      const ex = st.expression;
+      if (ts.isArrowFunction(ex) || ts.isFunctionExpression(ex)) {
+        visitFunctionLike(ex);
+      }
+      continue;
+    }
+    visitStmt(st);
+  }
+  return dedupeSorted(lines);
+}
+function dedupeSorted(nums) {
+  return [...new Set(nums)].sort((a3, b3) => a3 - b3);
+}
+function isBodyExpensive(body) {
+  if (!body) return false;
+  if (ts.isBlock(body)) return blockHasExpensiveLoop(body);
+  return nodeHasExpensiveLoop(body);
+}
+function blockHasExpensiveLoop(block) {
+  return nodeHasExpensiveLoop(block);
+}
+function nodeHasExpensiveLoop(node) {
+  let found = false;
+  const visit = (n3) => {
+    if (found) return;
+    if (ts.isForStatement(n3) || ts.isForOfStatement(n3) || ts.isForInStatement(n3) || ts.isWhileStatement(n3) || ts.isDoStatement(n3)) {
+      if (subtreeHasBigNumeric(n3, BIG_LITERAL_MIN)) found = true;
+      return;
+    }
+    ts.forEachChild(n3, visit);
+  };
+  visit(node);
+  return found;
+}
+function subtreeHasBigNumeric(node, min) {
+  let found = false;
+  const visit = (n3) => {
+    if (found) return;
+    if (ts.isNumericLiteral(n3)) {
+      const v3 = Number(n3.text.replace(/_/g, ""));
+      if (Number.isFinite(v3) && v3 >= min) {
+        found = true;
+        return;
+      }
+    }
+    ts.forEachChild(n3, visit);
+  };
+  visit(node);
+  return found;
+}
 
 // src/lib/ai-decorators.ts
 var FILE_SCAN_HEAD_LINES = 40;
@@ -5183,6 +5376,21 @@ var PATTERNS2 = [
     id: "ai-sql-template",
     re: /(?:query|execute|raw)\s*\(\s*[`'"][^`'"]*\$\{/i,
     message: "Possible dynamic SQL/string \u2014 ensure parameterization, not string concat."
+  },
+  /**
+   * Classic C-style loop with `<= ...length` — often an off-by-one with `charAt(i)` / array indexing
+   * (index `length` is out of range). Prefer `< length`, `for...of`, or `Array.from`.
+   */
+  {
+    id: "ai-for-lte-length",
+    re: /for\s*\(\s*(?:let|var|const)\s+\w+\s*=\s*\d+\s*;\s*\w+\s*<=\s*[^;)]+\.length\s*;/,
+    message: "Loop condition uses `<= ...length` \u2014 often an extra iteration (e.g. `charAt(length)` is empty). Prefer `< ...length` or a safer iteration style."
+  },
+  /** AI often pastes broad eslint suppression without review. */
+  {
+    id: "ai-eslint-disable",
+    re: /eslint-disable(?:-next-line|-line)?\b/i,
+    message: "ESLint disable in AI-marked code \u2014 confirm the rule violation is understood and cannot be fixed properly."
   }
 ];
 function scanRegion(rel, regionText, regionStartLine, gate, tag, findings) {
@@ -5198,6 +5406,16 @@ function scanRegion(rel, regionText, regionStartLine, gate, tag, findings) {
       });
     }
   }
+  const astLines = scanDiscardedExpensiveCalls(regionText, rel, regionStartLine);
+  for (const line of astLines) {
+    findings.push({
+      id: "ai-discarded-expensive-call",
+      severity: sev(gate),
+      message: `${tag} Call discards the return value of a local function whose body includes a loop with a very large numeric bound \u2014 likely wasted CPU on every run (e.g. remove the call or move work to an effect / memo with a real dependency).`,
+      file: rel,
+      detail: `line ${line}`
+    });
+  }
 }
 async function runAiAssistedStrict(cwd, config, pr) {
   const t0 = performance.now();
@@ -5321,6 +5539,26 @@ function escapeHtml(s3) {
   return s3.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
+// src/report/check-descriptions.ts
+var CHECK_DESCRIPTIONS = {
+  eslint: "Runs ESLint using your project config. Flags style, correctness, and framework-specific issues in the repo or PR-scoped files.",
+  prettier: "Checks that files match Prettier formatting. Catches unformatted edits so the codebase stays consistent.",
+  typescript: "Runs the TypeScript compiler (tsc --noEmit) on the project. Surfaces type errors before merge.",
+  secrets: "Scans changed files for patterns that look like leaked secrets (tokens, keys). Heuristic \u2014 review each hit.",
+  cycles: "Runs madge for circular dependencies on TypeScript/JavaScript entry points. Import cycles can cause brittle builds and load order bugs.",
+  "dead-code": "Runs ts-prune to find unused exports in the TypeScript project. Helps trim dead surface area.",
+  bundle: "Measures total size of configured build artifacts (glob) and compares to a checked-in baseline. Flags large regressions in shipped JS/CSS.",
+  "core-web-vitals": "Static hints in JSX/TSX related to Core Web Vitals (e.g. LCP-friendly images, main-thread hygiene). Not a substitute for real field metrics.",
+  "ai-assisted-strict": "When the PR is AI-assisted or code is marked with @frontguard-ai decorators, scans those regions for risky patterns (eval, XSS sinks, etc.) and a few AST heuristics (e.g. discarded hot loops).",
+  "pr-hygiene": "Validates PR metadata when CI provides PR context: description length, checklist items, and similar hygiene rules from config.",
+  "pr-size": "Compares PR diff size (lines/files) against configured budgets to discourage oversized changes.",
+  "ts-any-delta": "Diffs the branch against a base ref and counts newly added uses of the TypeScript any type. Helps stop gradual loss of type safety.",
+  "custom-rules": "Runs optional file/content rules you define in FrontGuard config (regex or structured checks on paths). Skipped when no rules are configured."
+};
+function getCheckDescription(checkId) {
+  return CHECK_DESCRIPTIONS[checkId] ?? `FrontGuard check "${checkId}". See your frontguard config and docs for behavior.`;
+}
+
 // src/report/html-report.ts
 function parseLineHint(detail) {
   if (!detail) return 0;
@@ -5360,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";
@@ -5384,10 +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)`;
-    return `<tr><td class="td-icon">${statusDot(r4)}</td><td><strong class="check-name">${escapeHtml(r4.checkId)}</strong></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(
@@ -5531,43 +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-num, .td-time { color: var(--muted); font-variant-numeric: tabular-nums; }
-    .check-name { font-weight: 600; }
-    .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);
@@ -5746,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;
@@ -6507,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);
@@ -6521,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.
 
 `
     );
@@ -6573,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)"
@@ -6585,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
     });
   }