@analitikisler/ai-tag-debugger 0.16.0 → 0.18.0

package/src/history.js

@@ -0,0 +1,302 @@
+// Run history: what the site's saved runs say over time. changes.js compares a run with the one
+// before it; this module reads every run in the window and turns it into views the report, the CLI
+// and the alert can show: a timeline per finding, a trend series for sparklines and the completion
+// rate of every journey. Only a small summary of each run is kept, so thirty runs cost a few KB.
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { groupFindings } from "./checks.js";
+import { LANGUAGES } from "./i18n.js";
+import { PROVIDERS } from "./parsers.js";
+import { listRunIds, runsDir, siteDir } from "./workspace.js";
+
+/** The per-site index of run summaries, next to the plans and runs folders. */
+export const HISTORY_FILE = "history.json";
+export const historyFile = (dataDir, site) => path.join(siteDir(dataDir, site), HISTORY_FILE);
+
+const INDEX_VERSION = 1;
+const PROBLEMS = new Set(["broken", "risk", "warning"]);
+const SEVERITY_RANK = { broken: 0, risk: 1, warning: 2 };
+// Problems are weighed so one broken event outranks a few warnings when runs are compared.
+const WEIGHT = { broken: 3, risk: 2, warning: 1 };
+// "Recently" and the trend direction both look at the last few runs, not just the last one.
+const RECENT = 3;
+
+/**
+ * The identity of a finding across runs: the same line replay.js writes to site.json ("severity check
+ * journey viewport platform event"), so a replay and the history agree on what "the same finding" is.
+ * Kept inline rather than imported because replay.js loads the browser and the audit, and the report
+ * must stay importable without them. test/history.test.js pins the two to the same output.
+ */
+export const findingKey = (f) => [f.severity, f.check, f.journey, f.viewport, f.platform ?? "-", f.event ?? "-"].join(" ");
+
+/** The id's local time as "YYYY-MM-DDTHH:MM"; the seconds suffix of a same-minute id is dropped. */
+export const dateOfId = (id) => {
+  const m = /^(\d{4}-\d{2}-\d{2})_(\d{2})(\d{2})/.exec(id);
+  return m ? `${m[1]}T${m[2]}:${m[3]}` : null;
+};
+
+/**
+ * The summary of one run that history keeps: its journeys, its counts and its problems, a few hundred
+ * bytes instead of a capture. Fields a capture may lack (older shapes, or ones audit.js does not write
+ * yet such as version and ai) come out null, never throw. Findings a baseline accepted are left out,
+ * as the counts and the verdict leave them out, so an accepted problem is not "still open" in the trend.
+ */
+export function runSummary(id, capture = {}, { version = null, ai = null } = {}) {
+  const findings = Array.isArray(capture.findings) ? capture.findings : [];
+  const counts = { broken: 0, risk: 0, warning: 0, info: 0, ok: 0 };
+  for (const f of groupFindings(findings.filter((f) => f.severity in counts))) if (!f.accepted) counts[f.severity] += 1;
+  const seen = new Set();
+  const problems = [];
+  for (const f of findings) {
+    if (!PROBLEMS.has(f.severity) || !f.check || f.accepted === true) continue;
+    const key = findingKey(f);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    problems.push({ key, check: f.check, severity: f.severity, platform: f.platform ?? null, event: f.event ?? null, journey: f.journey ?? null, viewport: f.viewport ?? null });
+  }
+  const journeys = (Array.isArray(capture.runs) ? capture.runs : [])
+    .filter((r) => r && r.journeyId)
+    .map((r) => ({ id: r.journeyId, viewport: r.viewport ?? null, completed: Boolean(r.completed), hits: Array.isArray(r.hits) ? r.hits.length : 0 }));
+  return { id, date: dateOfId(id), version: capture.version ?? version, ai: capture.ai ?? ai, journeys, counts, findings: problems };
+}
+
+const readJson = (file) => readFile(file, "utf8").then(JSON.parse).catch(() => null);
+
+/** The summaries the index holds, by run id; empty when there is no index or it is unreadable. */
+async function readIndex(dataDir, site) {
+  const index = await readJson(historyFile(dataDir, site));
+  const runs = index?.version === INDEX_VERSION && Array.isArray(index.runs) ? index.runs : [];
+  return new Map(runs.filter((r) => r && typeof r.id === "string").map((r) => [r.id, r]));
+}
+
+/**
+ * The site's most recent `limit` runs, oldest first and newest last, each as a runSummary. Runs with a
+ * missing or unreadable capture.json are skipped. A run already in history.json is taken from there;
+ * the others are read from their capture.json, one at a time so only one capture is ever in memory.
+ * Cost without an index: one read and parse per run (a capture is 100 KB to a few MB, roughly 1-10 ms
+ * per 100 KB), then the parsed object is dropped. With the index, one small file.
+ */
+export async function loadHistory(dataDir, site, { limit = 30 } = {}) {
+  const ids = (await listRunIds(dataDir, site)).slice(-Math.max(0, limit));
+  const indexed = await readIndex(dataDir, site);
+  const out = [];
+  for (const id of ids) {
+    const known = indexed.get(id);
+    if (known) {
+      out.push(known);
+      continue;
+    }
+    const capture = await readJson(path.join(runsDir(dataDir, site), id, "capture.json"));
+    if (capture && typeof capture === "object") out.push(runSummary(id, capture));
+  }
+  return out;
+}
+
+/**
+ * Adds one run to the site's history.json (or replaces its entry) so later reports and CLI calls do not
+ * re-read every capture. `run` is { id, capture, version?, ai? } or an existing runSummary. Entries whose
+ * run folder is gone are dropped. Never throws on a missing or corrupt index: it is rebuilt from the run.
+ */
+export async function updateHistoryIndex(dataDir, site, run) {
+  const entry = run.capture ? runSummary(run.id, run.capture, { version: run.version ?? null, ai: run.ai ?? null }) : run;
+  const indexed = await readIndex(dataDir, site);
+  indexed.set(entry.id, entry);
+  const onDisk = new Set(await listRunIds(dataDir, site));
+  const runs = [...indexed.values()].filter((r) => r.id === entry.id || onDisk.has(r.id)).sort((a, b) => (a.id < b.id ? -1 : 1));
+  const file = historyFile(dataDir, site);
+  await writeFile(file, JSON.stringify({ version: INDEX_VERSION, site, updated: new Date().toISOString(), runs }, null, 2));
+  return { file, runs: runs.length };
+}
+
+/** Whether a run gives evidence about a journey: it ran and completed. An incomplete journey proves nothing by absence. */
+const observed = (run) => new Set(run.journeys.filter((j) => j.completed).map((j) => `${j.id}|${j.viewport}`));
+
+/**
+ * One entry per finding seen in the window, oldest open first:
+ * { key, check, severity, platform, event, journey, viewport, firstSeen, lastSeen, seenIn, openNow, openSince,
+ *   flapping, fixedIn }. A run where the finding's journey did not complete says nothing: it is neither "seen"
+ * nor "gone", so a crashed checkout does not count as a fix. flapping: seen, gone, then seen again.
+ * fixedIn: the first run after lastSeen where the journey completed without it; null while open.
+ */
+export function findingTimeline(history) {
+  const entries = new Map();
+  for (const run of history) {
+    for (const f of run.findings) {
+      if (!entries.has(f.key)) entries.set(f.key, { ...f, states: [] });
+    }
+  }
+  for (const run of history) {
+    const present = new Set(run.findings.map((f) => f.key));
+    const ok = observed(run);
+    for (const e of entries.values()) {
+      // A finding from an older capture without a journey has no completion to check: absence means gone.
+      const state = present.has(e.key) ? "seen" : !e.journey || ok.has(`${e.journey}|${e.viewport}`) ? "gone" : null;
+      e.states.push({ id: run.id, state });
+    }
+  }
+  const out = [];
+  for (const e of entries.values()) {
+    const { states, ...rest } = e;
+    const known = states.filter((s) => s.state);
+    const seen = known.filter((s) => s.state === "seen");
+    const firstSeen = seen[0].id;
+    const lastSeen = seen.at(-1).id;
+    const openNow = known.at(-1).state === "seen";
+    // Open since the start of the current unbroken streak, which is firstSeen unless it flapped.
+    let openSince = null;
+    for (let i = known.length - 1; i >= 0 && known[i].state === "seen"; i--) openSince = known[i].id;
+    const between = known.filter((s) => s.id > firstSeen && s.id < lastSeen);
+    const flapping = between.some((s) => s.state === "gone");
+    const fixedIn = openNow ? null : known.find((s) => s.id > lastSeen && s.state === "gone").id;
+    out.push({ ...rest, firstSeen, lastSeen, seenIn: seen.length, openNow, openSince, flapping, fixedIn });
+  }
+  return out.sort(byOpenLongest);
+}
+
+/** Open findings first, the one open longest on top; then the fixed ones, the most recently fixed on top. */
+function byOpenLongest(a, b) {
+  if (a.openNow !== b.openNow) return a.openNow ? -1 : 1;
+  if (a.openNow) return a.openSince < b.openSince ? -1 : a.openSince > b.openSince ? 1 : bySeverity(a, b);
+  return a.fixedIn > b.fixedIn ? -1 : a.fixedIn < b.fixedIn ? 1 : bySeverity(a, b);
+}
+
+const bySeverity = (a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity] || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0);
+
+/**
+ * The same problem on several journeys or viewports as one entry with its places, as the report groups
+ * findings. The first entry in timeline order speaks for the group, so its dates are the longest open.
+ */
+function grouped(entries) {
+  const out = new Map();
+  for (const { journey, viewport, ...e } of entries) {
+    const k = [e.severity, e.check, e.platform, e.event].join("|");
+    if (out.has(k)) out.get(k).places.push({ journey, viewport });
+    else out.set(k, { ...e, places: [{ journey, viewport }] });
+  }
+  return [...out.values()];
+}
+
+const score = (c) => c.broken * WEIGHT.broken + c.risk * WEIGHT.risk + c.warning * WEIGHT.warning;
+const mean = (xs) => xs.reduce((a, b) => a + b, 0) / xs.length;
+
+/**
+ * The series for sparklines plus a summary of the window.
+ * series: per run { id, date, broken, risk, warning, score, complete }, oldest first. score is
+ * 3·broken + 2·risk + warning (lower is better); complete is false when a journey did not finish.
+ * direction: the mean score of the last 3 complete runs against the 3 complete runs before them
+ * ("improving" when lower, "worsening" when higher, else "flat"); with fewer than 4 complete runs the
+ * two halves are compared, and with fewer than 2 it is "flat". Incomplete runs are left out because a
+ * journey that stopped early hides findings rather than fixing them.
+ * openLongest: the 5 problems open longest; fixedRecently / newRecently: fixed or first seen in the
+ * last 3 runs; flapping: seen, gone and seen again in the window. Each list has one entry per problem
+ * with its `places` (journey and viewport, as the report groups findings) and its `runsOpen` count.
+ */
+export function trend(history) {
+  const series = history.map((r) => ({ id: r.id, date: r.date, broken: r.counts.broken, risk: r.counts.risk, warning: r.counts.warning, score: score(r.counts), complete: r.journeys.every((j) => j.completed) }));
+  const timeline = findingTimeline(history);
+  const ids = history.map((r) => r.id);
+  const recentIds = new Set(ids.slice(-RECENT));
+  const withAge = (e) => ({ ...e, runsOpen: e.openNow ? ids.length - ids.indexOf(e.openSince) : 0 });
+  return {
+    runs: ids.length,
+    first: ids[0] ?? null,
+    last: ids.at(-1) ?? null,
+    series,
+    direction: direction(series.filter((p) => p.complete).map((p) => p.score)),
+    openLongest: grouped(timeline.filter((e) => e.openNow)).slice(0, 5).map(withAge),
+    fixedRecently: grouped(timeline.filter((e) => e.fixedIn && recentIds.has(e.fixedIn))).map(withAge),
+    newRecently: grouped(timeline.filter((e) => e.openNow && recentIds.has(e.firstSeen))).map(withAge),
+    flapping: grouped(timeline.filter((e) => e.flapping)).map(withAge),
+  };
+}
+
+function direction(scores) {
+  if (scores.length < 2) return "flat";
+  const n = Math.min(RECENT, Math.floor(scores.length / 2));
+  const recent = mean(scores.slice(-n));
+  const earlier = mean(scores.slice(-2 * n, -n));
+  return recent < earlier ? "improving" : recent > earlier ? "worsening" : "flat";
+}
+
+/**
+ * How reliably each journey finishes on this site, least reliable first: per journey and viewport
+ * { id, viewport, runs, completed, completionRate, lastFailure, avgHits }. A journey that keeps
+ * failing says the AI or the script cannot get through the site, not that the tracking is bad.
+ */
+export function journeyStability(history) {
+  const out = new Map();
+  for (const run of history) {
+    for (const j of run.journeys) {
+      const k = `${j.id}|${j.viewport}`;
+      const s = out.get(k) ?? { id: j.id, viewport: j.viewport, runs: 0, completed: 0, lastFailure: null, hits: 0 };
+      s.runs += 1;
+      s.hits += j.hits;
+      if (j.completed) s.completed += 1;
+      else s.lastFailure = run.id;
+      out.set(k, s);
+    }
+  }
+  return [...out.values()]
+    .map(({ hits, ...s }) => ({ ...s, completionRate: s.runs ? s.completed / s.runs : 0, avgHits: s.runs ? Math.round((hits / s.runs) * 10) / 10 : 0 }))
+    .sort((a, b) => a.completionRate - b.completionRate || a.id.localeCompare(b.id) || String(a.viewport).localeCompare(String(b.viewport)));
+}
+
+const day = (id) => (id ? String(id).slice(0, 10) : "");
+const platformLabel = (p) => (p ? PROVIDERS[p] ?? String(p) : "");
+/** "GA4 purchase missing_params" or, for a finding without an event, the check name. */
+const label = (e) => `${platformLabel(e.platform)} ${e.event ?? ""}`.trim().concat(` ${e.check}`).trim();
+/** The strings of ui.history in the report's language; an unknown language falls back to English rather than throwing. */
+const strings = (lang) => (LANGUAGES[lang] ?? LANGUAGES.en).ui.history;
+/** "GA4 purchase missing_params in 4 places": the problem with its place count when it is seen in more than one. */
+export const problemLabel = (e, lang = "en") => `${label(e)}${e.places?.length > 1 ? strings(lang).places(e.places.length) : ""}`;
+
+const SPARK = "▁▂▃▄▅▆▇█";
+
+/**
+ * The trend series as a text sparkline for the CLI and the alert: one character per run, the score
+ * mapped onto eight levels over 0..max, "·" for a run that did not complete (its lower counts are not
+ * a fix). The scale starts at 3 so one warning does not draw a full bar. Empty under two runs.
+ */
+export function sparkline(t) {
+  const series = t?.series ?? [];
+  if (series.length < 2) return "";
+  const max = Math.max(3, ...series.map((p) => p.score));
+  return series.map((p) => (p.complete ? SPARK[Math.min(SPARK.length - 1, Math.round((p.score / max) * (SPARK.length - 1)))] : "·")).join("");
+}
+
+/**
+ * The trend as 2-3 plain lines for the CLI after a run and for the alert: the direction with the counts
+ * now and three runs ago, the findings open longest (up to 3), and the flapping ones when there are any.
+ * Pass the stability list to add a line on journeys that do not always finish.
+ */
+export function historySummaryLines(t, lang = "en", stability = []) {
+  const s = strings(lang);
+  if (!t.runs) return [s.noRuns];
+  if (t.runs === 1) return [s.oneRun(t.last)];
+  const now = t.series.at(-1);
+  const was = t.series.at(-1 - RECENT);
+  const dir = s.direction[t.direction];
+  const lines = [was ? s.headline(t.runs, day(t.first), day(t.last), dir, s.counts(now), s.counts(was), RECENT) : s.headlineShort(t.runs, day(t.first), day(t.last), dir, s.counts(now))];
+  if (t.openLongest.length) lines.push(s.openLongest(t.openLongest.slice(0, 3).map((e) => s.since(problemLabel(e, lang), day(e.openSince), e.runsOpen))));
+  if (t.flapping.length) lines.push(s.flapping(t.flapping.slice(0, 3).map((e) => s.seenIn(problemLabel(e, lang), e.seenIn, t.runs))));
+  const unstable = stability.filter((j) => j.completionRate < 1);
+  if (unstable.length) lines.push(s.unstable(unstable.slice(0, 3).map((j) => `${j.id} (${j.viewport}) ${Math.round(j.completionRate * 100)}%`)));
+  return lines;
+}
+
+/**
+ * The trend as the alert shows it: the direction line with the text sparkline, the flapping line, and
+ * "still open after N runs" only when a problem has just reached a round number of runs (5, 10, 20, …),
+ * so the open-longest list does not repeat in every message and train readers to skip it.
+ */
+export function historyAlertLines(t, lang = "en") {
+  const s = strings(lang);
+  if (!t || t.runs < 2) return [];
+  const lines = [`${historySummaryLines(t, lang)[0]} \`${sparkline(t)}\``];
+  if (t.flapping.length) lines.push(s.flapping(t.flapping.slice(0, 3).map((e) => s.seenIn(problemLabel(e, lang), e.seenIn, t.runs))));
+  // A round number of runs open (5, 10, 20, then every 10) is worth one line; every other week it is noise.
+  const milestone = (n) => [5, 10, 20].includes(n) || (n > 20 && n % 10 === 0);
+  const ages = [...new Set(t.openLongest.filter((e) => milestone(e.runsOpen)).map((e) => e.runsOpen))].sort((a, b) => b - a);
+  for (const n of ages) lines.push(s.stillOpen(n, t.openLongest.filter((e) => e.runsOpen === n).map((e) => problemLabel(e, lang))));
+  return lines;
+}

package/src/html/consent.js

@@ -0,0 +1,152 @@
+// The Consent section: one status line per platform, the Consent Mode card and the scenarios card. Denied is red,
+// granted green and "no signal" grey, all by token through chip("consent", ...).
+import { consentTable } from "../consent.js";
+import { isConsentEntry } from "../report-shared.js";
+import { PLATFORM_ART, chip, esc, platformLabel, safeKey, sectionBlock, sortPlatforms, stepTitle, secs, use, badge } from "./lib.js";
+
+// Google tags carry Consent Mode signals on the hit; every other platform sends none, so its state is "none".
+const GOOGLE = new Set(["ga4", "google_ads"]);
+const SCENARIOS = ["before", "accept", "reject", "analytics"];
+const LINE_CHECKS = new Set(["before_consent", "after_reject", "consent_default_missing"]);
+const MODE_CHECKS = new Set(["consent_default_missing", "consent_default_late", "consent_v2_missing", "consent_v2_update"]);
+const SEVERITY_RANK = { broken: 0, risk: 1, warning: 2, info: 3 };
+
+/** A platform's artwork, or its initials when it has none. Decorative: the chip's text names it once for screen readers. */
+function platArt(key) {
+  const k = safeKey(key);
+  if (PLATFORM_ART[k]) return use(`p-${k}`, 13);
+  const initials = platformLabel(key).split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
+  return `<span class="plat-fb s14" aria-hidden="true">${esc(initials)}</span>`;
+}
+
+/** The worst problem row among these, or null. Accepted rows (the baseline's) do not count, as everywhere else. */
+const worstRow = (rows) => rows.filter((f) => !f.accepted && f.severity in SEVERITY_RANK).sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity])[0] ?? null;
+
+/** denied / granted for a Google platform, none for the rest; null when the tag sent nothing in that scenario. */
+function stateOf(platform, c) {
+  if (!c?.n) return null;
+  if (!GOOGLE.has(platform)) return "none";
+  return c.cookieless >= c.n || c.adDenied >= c.n ? "denied" : "granted";
+}
+
+/** What was sent after a scenario's choice (before: with no choice yet); undefined when the scenario did not run. */
+const afterOf = (sc, s) => (s === "before" ? sc.before : sc.states?.[s]?.after);
+
+/** The consent signals of a Consent Mode command, as the chips a hit carries: key and value, coloured by value. */
+function signalChips(m, signals) {
+  return Object.entries(signals ?? {}).filter(([, v]) => typeof v === "string")
+    .map(([k, v]) => {
+      const state = v === "granted" || v === "denied" ? v : "none";
+      return chip("consent", state, `<span class="k">${esc(k)}</span>${esc(v)}`);
+    }).join("");
+}
+
+/** A neutral outlined chip for a plain label or number. */
+const plain = (html, cls = "") => `<span class="chip plain${cls ? ` ${cls}` : ""}">${html}</span>`;
+
+/** @param {import("./shell.js").Ctx} ctx */
+export function render(ctx) {
+  const { m, runs, rows, ids, metrics, consentScenarios: sc } = ctx;
+  const t = m.html.consent;
+  const sevChip = (sev, label) => chip("sev", sev, `${use(`sev-${sev}`, 13)}${esc(label)}`);
+  const stateWord = (state) => t.state[state];
+  const stateChip = (state, label = stateWord(state)) => chip("consent", state, esc(label));
+  const platChip = (key) => chip("plat", key, `${platArt(key)}${esc(platformLabel(key))}`);
+  const findingLink = (row, cls = "") => (row && ids.get(row) ? `<a${cls ? ` class="${cls}"` : ""} href="#${ids.get(row)}">${esc(m.html.findingLink)}</a>` : "");
+
+  /* ---- one status line per platform ---- */
+  const total = (platform, s) => {
+    const after = sc ? afterOf(sc, s) : null;
+    if (!after) return "";
+    const byEvent = after[platform] ?? {};
+    const count = Object.values(byEvent).reduce((a, c) => a + c.n, 0);
+    if (!count) return `<span class="chip zero">0</span>`;
+    const states = new Set(Object.values(byEvent).map((c) => stateOf(platform, c)).filter(Boolean));
+    // One state for every event, else the strictest: a mix that holds a denied event reads denied.
+    const state = states.size === 1 ? [...states][0] : states.has("denied") ? "denied" : "none";
+    return stateChip(state, t.tally(count, stateWord(state)));
+  };
+  const platforms = sortPlatforms(new Set(metrics.consent.platforms.map((p) => p.platform)));
+  const lines = platforms.map((platform) => {
+    const own = rows.filter((f) => LINE_CHECKS.has(f.check) && f.platform === platform);
+    const row = worstRow(own);
+    // The scenarios can show a tag sent after Reject with no finding row for it; with no row at all (not even an
+    // accepted one) the metric decides, so the line agrees with the flagged cell below.
+    const sev = row?.severity ?? (!own.length && metrics.consent.platforms.find((p) => p.platform === platform)?.status !== "pass" ? "risk" : "ok");
+    const cells = SCENARIOS.slice(0, 3).filter((s) => sc && afterOf(sc, s))
+      .map((s) => `<span class="cs-p"><span class="cs-k">${esc(t.cols[s])}</span>${total(platform, s)}</span>`).join("");
+    return `<li class="card sev-${sev} cs-row" id="consent-${safeKey(platform)}">${platChip(platform)}${sevChip(sev, m.severity[sev])}${cells ? `<span class="cs-cells">${cells}</span>` : ""}${findingLink(row, "cs-go")}</li>`;
+  }).join("");
+  const list = lines ? `<ul class="cs-list" aria-label="${esc(t.statusLabel)}">${lines}</ul>` : "";
+
+  /* ---- Consent Mode ---- */
+  const mode = metrics.consent.consentMode;
+  const perRun = runs.map((run, ri) => {
+    const cmds = (run.dataLayerLog ?? []).filter((e) => isConsentEntry(e.value) && (e.value[1] === "default" || e.value[1] === "update"));
+    const first = cmds.find((e) => e.value[1] === "default");
+    const update = cmds.find((e) => e.value[1] === "update" && (!first || e.t >= first.t));
+    return { run, info: mode.runs[ri], first, update, resent: cmds.filter((e) => e !== first && e !== update).length };
+  });
+  const runChip = (run) => chip("vp", run.viewport, `${run.viewport === "desktop" || run.viewport === "mobile" ? use(`ui-${run.viewport}`, 13) : ""}${esc(run.journeyId)}<span class="sr"> ${esc(run.viewport)}</span>`);
+  const modeFinding = worstRow(rows.filter((f) => MODE_CHECKS.has(f.check)));
+  const withDefault = perRun.filter((p) => p.info?.present);
+  const ms = withDefault.map((p) => p.info.ms).filter((x) => x !== null);
+  const late = mode.defaultOnTime === false;
+  let modeHead;
+  if (!runs.length) modeHead = chip("consent", "none", esc(m.ui.notChecked));
+  else if (!mode.defaultPresent) modeHead = modeFinding ? sevChip(modeFinding.severity, t.noDefault) : chip("consent", "none", esc(t.noDefault));
+  else modeHead = late ? sevChip(modeFinding?.severity ?? "risk", t.defaultLate) : sevChip("ok", t.defaultFirst);
+  const modeChips = `${ms.length ? plain(`${use("ui-clock", 13)}<b>${esc(t.timing(Math.min(...ms), Math.max(...ms)))}</b>`, "mono") : ""}${withDefault.length && mode.v2Signals.present ? sevChip("ok", t.v2) : withDefault.length ? sevChip("warning", t.v2Missing) : ""}`;
+
+  // Runs that pushed the same commands on the same steps share one pair of rows; a run that differs gets its own.
+  const groups = new Map();
+  for (const p of withDefault) {
+    const key = JSON.stringify([p.first?.value[2], p.update?.value[2], p.info.stepLabel, p.update?.step]);
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(p);
+  }
+  const commandRow = (label, p, e) => {
+    if (!e) return "";
+    const step = p.run.steps.find((s) => s.index === e.step);
+    const where = `${step ? `${m.ui.step} ${step.index} · ${esc(stepTitle(p.run, step))} · ` : ""}${esc(secs(p.run, e.t))}`;
+    return `<li><b class="cm-l">${esc(label)}</b><span class="cm-w">${where}</span><span class="cm-s">${signalChips(m, e.value[2])}</span></li>`;
+  };
+  const groupHtml = [...groups.values()].map((g) => `${groups.size > 1 ? `<div class="chips cm-runs">${g.map((p) => runChip(p.run)).join("")}</div>` : ""}<ol class="cm-list">${commandRow(m.ui.consentDefault, g[0], g[0].first)}${commandRow(m.ui.consentUpdate, g[0], g[0].update)}</ol>`).join("");
+  const timing = withDefault.map((p) => `<li>${runChip(p.run)}<span class="xs">${esc(m.html.consentTiming(p.info.ms, p.info.beforeFirstGoogleHit, p.info.v2Signals.present, p.info.v2Signals.missing))}</span></li>`).join("");
+  const resent = Math.max(0, ...withDefault.map((p) => p.resent));
+  const modeFindings = rows.filter((f) => MODE_CHECKS.has(f.check) && !f.accepted && ids.get(f)).map((f) => findingLink(f)).join(" ");
+  const none = !runs.length ? m.ui.md.consentNotChecked : m.ui.md.consentModeNone;
+  const modeBody = withDefault.length
+    ? `${timing ? `<ul class="cm-timing">${timing}</ul>` : ""}${groupHtml}${resent ? `<p class="xs muted cm-rep">${use("ui-clock", 12)} ${esc(t.resent(resent))}</p>` : ""}${modeFindings ? `<p class="xs cm-find">${modeFindings}</p>` : ""}`
+    : `<p class="muted xs">${esc(none)}</p>${modeFindings ? `<p class="xs cm-find">${modeFindings}</p>` : ""}`;
+  const modeCard = `<details class="card" id="consent-mode"><summary><span class="t">${esc(m.html.consentMode)}</span>${modeHead}${modeChips}<span class="end muted xs">${esc(t.runsWith(withDefault.length, runs.length))}</span></summary><div class="body">${modeBody}</div></details>`;
+
+  /* ---- scenarios ---- */
+  if (!sc) return sectionBlock("consent", esc(m.html.shell.sections.consent), `${list}\n${modeCard}\n<p class="muted xs cs-none" id="consent-scenarios">${esc(m.ui.md.noScenarios)}</p>`);
+  const table = consentTable(sc);
+  const cols = table.cols.filter((s) => s !== "analytics" || sc.states?.analytics?.via);
+  const before = rows.filter((f) => f.check === "before_consent" && !f.accepted);
+  const problemRow = (platform, event) => rows.find((f) => f.platform === platform && f.event === event && !f.accepted && /^(after_reject|before_consent)$/.test(f.check));
+  const reasonOf = (c) => (c.cookieless >= c.n ? m.html.cellCookieless : c.adDenied >= c.n ? m.html.cellAdDenied : m.html.cellWithCookies);
+  let problemCount = 0;
+  const cellHtml = (r, cell) => {
+    const after = afterOf(sc, cell.state);
+    if (!after || cell.count === null) return `<td class="muted">–<span class="sr"> ${esc(m.ui.scenarioNotRun)}</span></td>`;
+    const c = after[r.platform]?.[r.event];
+    if (!c?.n) return `<td class="muted">0</td>`;
+    const state = stateOf(r.platform, c);
+    const reason = reasonOf(c);
+    const flagged = cell.problem || (cell.state === "before" && before.some((f) => f.platform === r.platform && f.event === r.event));
+    const body = `<b class="num">${c.n}</b><span title="${esc(reason)}">${stateChip(state)}</span><span class="sr"> ${esc(reason)}</span>`;
+    if (!flagged) return `<td><span class="cs-c">${body}</span></td>`;
+    problemCount++;
+    const f = problemRow(r.platform, r.event);
+    return `<td class="cs-bad"><span class="cs-c">${body}${badge(f?.severity ?? "risk", t.sent)}<span class="sr"> ${esc(m.html.cellProblem)} ${esc(m.html.cellShouldNot)}</span>${findingLink(f)}</span></td>`;
+  };
+  const body = table.rows.map((r) => `<tr><th scope="row"><span class="cs-tag">${platChip(r.platform)}<code>${esc(r.event)}</code></span></th>${cols.map((s) => cellHtml(r, r.cells.find((c) => c.state === s))).join("")}</tr>`).join("");
+  const supported = (s) => (s === "before" ? true : Boolean(sc.states?.[s]?.after));
+  const summaryChips = SCENARIOS.map((s) => (supported(s) ? plain(esc(t.cols[s])) : chip("consent", "none", esc(`${t.cols[s]} · ${t.notSupported}`)))).join("");
+  const probChip = problemCount ? sevChip("risk", t.problems(problemCount)) : sevChip("ok", t.noProblems);
+  const scenarios = `<details class="card" id="consent-scenarios"><summary><span class="t">${esc(t.scenarios)}</span>${summaryChips}<span class="end">${probChip}</span></summary><div class="body"><div class="tscroll"><table class="tbl cs-tbl"><caption class="sr">${esc(m.ui.scenarios)}</caption><thead><tr><th scope="col">${esc(m.ui.scenarioTag)}</th>${cols.map((s) => `<th scope="col">${esc(t.cols[s])}</th>`).join("")}</tr></thead><tbody>${body}</tbody></table></div></div></details>`;
+  return sectionBlock("consent", esc(m.html.shell.sections.consent), `${list}\n${modeCard}\n${scenarios}`);
+}