@cleartrip/frontguard 0.2.1 → 0.2.3

package/dist/cli.js

@@ -13,6 +13,7 @@ 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;
@@ -2425,6 +2426,8 @@ export default defineConfig({
   //       { minLines: 500, severity: 'info', message: 'Consider splitting (\${lines} lines)' },
   //     ],
   //   },
+  //   // AI strict: only // @frontguard-ai:start \u2026 :end (or // written by AI: start \u2026 :end) in PR files
+  //   // aiAssistedReview: { strictScanMode: 'decorator' },
   //   cycles: { enabled: true },
   //   deadCode: { enabled: true, gate: 'info' },
   //   // LLM: cloud keys in CI, or local Ollama (no API key) on dev/self-hosted runners:
@@ -2789,6 +2792,7 @@ var defaultConfig = {
     aiAssistedReview: {
       enabled: true,
       gate: "warn",
+      strictScanMode: "both",
       escalate: {
         secretFindingsToBlock: true,
         tsAnyDeltaToBlock: true
@@ -2950,9 +2954,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 {
   }
@@ -5010,6 +5014,287 @@ 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;
+function commentInner(line) {
+  const t3 = line.trim();
+  const mLine = /^\/\/\s*(.*)$/.exec(t3);
+  if (mLine) return mLine[1]?.trim() ?? "";
+  const mBlock = /^\/\*\s*(.*?)\s*\*\/\s*$/.exec(t3);
+  if (mBlock) return mBlock[1]?.trim() ?? "";
+  return null;
+}
+function lineMarkerKind(line) {
+  const inner = commentInner(line);
+  if (!inner) return null;
+  if (/@(?:frontguard-ai|ai-written)\s*:\s*file\b/i.test(inner) || /^written\s+by\s+ai\s*:?\s*file\b/i.test(inner))
+    return "file";
+  if (/@(?:frontguard-ai|ai-written)\s*:\s*start\b/i.test(inner) || /^written\s+by\s+ai\s*:?\s*start\b/i.test(inner))
+    return "start";
+  if (/@(?:frontguard-ai|ai-written)\s*:\s*end\b/i.test(inner) || /^written\s+by\s+ai\s*:?\s*end\b/i.test(inner))
+    return "end";
+  return null;
+}
+function isAiFileDirectiveLine(line) {
+  return lineMarkerKind(line) === "file";
+}
+function parseAiMarkedRegions(source, fileHint) {
+  const lines = source.split(/\r?\n/);
+  const parseWarnings = [];
+  const regions = [];
+  let headNonEmpty = 0;
+  for (let i3 = 0; i3 < lines.length && headNonEmpty < FILE_SCAN_HEAD_LINES; i3++) {
+    if (!lines[i3]?.trim()) continue;
+    headNonEmpty++;
+    if (isAiFileDirectiveLine(lines[i3] ?? "")) {
+      const bodyLines = lines.filter((_4, idx) => idx !== i3);
+      regions.push({
+        startLine: 1,
+        endLine: lines.length,
+        text: bodyLines.join("\n")
+      });
+      return { regions, parseWarnings };
+    }
+  }
+  let open = false;
+  let contentStart = null;
+  const buf = [];
+  for (let i3 = 0; i3 < lines.length; i3++) {
+    const line = lines[i3] ?? "";
+    const kind = lineMarkerKind(line);
+    if (kind === "file") {
+      parseWarnings.push(`${fileHint}:${i3 + 1}: @file directive ignored (only honored in first ${FILE_SCAN_HEAD_LINES} non-empty lines)`);
+      if (open) buf.push(line);
+      continue;
+    }
+    if (kind === "start") {
+      if (open) {
+        parseWarnings.push(`${fileHint}:${i3 + 1}: nested AI:start ignored (flatten your regions)`);
+        buf.push(line);
+        continue;
+      }
+      open = true;
+      contentStart = i3 + 2;
+      buf.length = 0;
+      continue;
+    }
+    if (kind === "end") {
+      if (!open) {
+        parseWarnings.push(`${fileHint}:${i3 + 1}: stray AI:end`);
+        continue;
+      }
+      open = false;
+      if (contentStart !== null) {
+        regions.push({
+          startLine: contentStart,
+          endLine: i3,
+          text: buf.join("\n")
+        });
+      }
+      contentStart = null;
+      buf.length = 0;
+      continue;
+    }
+    if (open) buf.push(line);
+  }
+  if (open && contentStart !== null) {
+    parseWarnings.push(`${fileHint}: unclosed AI:start \u2014 treating region as ending at EOF`);
+    regions.push({
+      startLine: contentStart,
+      endLine: lines.length,
+      text: buf.join("\n")
+    });
+  }
+  return { regions, parseWarnings };
+}
+function matchLineNumbersInRegion(regionText, regionStartLine, re) {
+  const flags = re.flags.includes("g") ? re.flags : `${re.flags}g`;
+  const g4 = new RegExp(re.source, flags);
+  const out = [];
+  let m3;
+  const text = regionText;
+  while ((m3 = g4.exec(text)) !== null) {
+    const lineInRegion = text.slice(0, m3.index).split("\n").length;
+    out.push(regionStartLine + lineInRegion - 1);
+    if (m3.index === g4.lastIndex) g4.lastIndex++;
+  }
+  return out;
+}
+
+// src/checks/ai-assisted-strict.ts
 function sev(gate) {
   return gate === "block" ? "block" : gate === "info" ? "info" : "warn";
 }
@@ -5071,8 +5356,47 @@ 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) {
+  for (const { id, re, message, forceBlock } of PATTERNS2) {
+    const lines = matchLineNumbersInRegion(regionText, regionStartLine, re);
+    for (const line of lines) {
+      findings.push({
+        id,
+        severity: forceBlock ? "block" : sev(gate),
+        message: `${tag} ${message}`,
+        file: rel,
+        detail: `line ${line}`
+      });
+    }
+  }
+  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();
   const cfg = config.checks.aiAssistedReview;
@@ -5092,35 +5416,62 @@ async function runAiAssistedStrict(cwd, config, pr) {
       skipped: "no PR context (Bitbucket PR pipeline + BITBUCKET_PR_ID required)"
     };
   }
-  if (!pr.aiAssisted) {
+  const mode = cfg.strictScanMode ?? "both";
+  const gate = cfg.gate;
+  const files = (pr.files ?? []).filter((f4) => CODE_EXT.test(f4)).slice(0, 150);
+  const byRel = /* @__PURE__ */ new Map();
+  let anyDecoratorInPr = false;
+  for (const rel of files) {
+    const full = path5.join(cwd, rel);
+    try {
+      const content = await fs.readFile(full, "utf8");
+      if (content.length > 5e5) continue;
+      const parsed = parseAiMarkedRegions(content, rel);
+      byRel.set(rel, { content, parsed });
+      if (parsed.regions.length > 0) anyDecoratorInPr = true;
+    } catch {
+      continue;
+    }
+  }
+  if (mode === "decorator" && !anyDecoratorInPr) {
     return {
       checkId: "ai-assisted-strict",
       findings: [],
       durationMs: Math.round(performance.now() - t0),
-      skipped: "PR does not indicate AI-assisted code"
+      skipped: "strictScanMode=decorator \u2014 no `@frontguard-ai:start` / `written by AI: start` regions in PR files"
     };
   }
-  const files = (pr.files ?? []).filter((f4) => CODE_EXT.test(f4)).slice(0, 150);
-  const gate = cfg.gate;
+  if (mode === "pr-disclosure" && !pr.aiAssisted) {
+    return {
+      checkId: "ai-assisted-strict",
+      findings: [],
+      durationMs: Math.round(performance.now() - t0),
+      skipped: "strictScanMode=pr-disclosure \u2014 PR does not indicate AI-assisted code"
+    };
+  }
+  const useWholeFileFallback = (mode === "pr-disclosure" || mode === "both") && Boolean(pr.aiAssisted);
   const findings = [];
   for (const rel of files) {
-    const full = path5.join(cwd, rel);
-    let content;
-    try {
-      content = await fs.readFile(full, "utf8");
-    } catch {
-      continue;
-    }
-    if (content.length > 5e5) continue;
-    for (const { id, re, message, forceBlock } of PATTERNS2) {
-      if (!re.test(content)) continue;
+    const entry = byRel.get(rel);
+    if (!entry) continue;
+    const { content, parsed } = entry;
+    for (const w3 of parsed.parseWarnings) {
       findings.push({
-        id,
-        severity: forceBlock ? "block" : sev(gate),
-        message: `[AI-assisted strict] ${message}`,
+        id: "ai-decorator-parse",
+        severity: "info",
+        message: `[AI markers] ${w3}`,
         file: rel
       });
     }
+    if (parsed.regions.length > 0) {
+      for (const r4 of parsed.regions) {
+        scanRegion(rel, r4.text, r4.startLine, gate, "[AI-marked code]", findings);
+      }
+      continue;
+    }
+    if (useWholeFileFallback) {
+      scanRegion(rel, content, 1, gate, "[AI-assisted strict]", findings);
+    }
   }
   return {
     checkId: "ai-assisted-strict",
@@ -5132,7 +5483,7 @@ function dedupe(f4) {
   const s3 = /* @__PURE__ */ new Set();
   const out = [];
   for (const x3 of f4) {
-    const k3 = `${x3.id}:${x3.file ?? ""}`;
+    const k3 = `${x3.id}:${x3.file ?? ""}:${x3.detail ?? ""}`;
     if (s3.has(k3)) continue;
     s3.add(k3);
     out.push(x3);
@@ -5168,6 +5519,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;
@@ -5233,7 +5604,10 @@ function buildHtmlReport(p2) {
   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>`;
+    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");
   const blockItems = sortFindings(
     cwd,
@@ -5403,8 +5777,83 @@ function buildHtmlReport(p2) {
       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;