@analitikisler/ai-tag-debugger 0.19.0 → 0.20.1

package/src/html/journeys.js

@@ -65,8 +65,10 @@ function pushesForHit(run, hit) {
 
 /** The network request that carried the hit. Identical hits (duplicates) are paired with identical requests in order. */
 function callsForHit(run, hit) {
-  const calls = (run.network ?? []).filter((c) => c.step === hit.step && c.url === hit.url);
-  const twins = run.hits.filter((h) => h.step === hit.step && h.url === hit.url);
+  // A late hit was sent during a later step, so its request is recorded there.
+  const sentIn = hit.late?.during ?? hit.step;
+  const calls = (run.network ?? []).filter((c) => c.step === sentIn && c.url === hit.url);
+  const twins = run.hits.filter((h) => (h.late?.during ?? h.step) === sentIn && h.url === hit.url);
   return twins.length > 1 && calls.length === twins.length ? [calls[twins.indexOf(hit)]] : calls;
 }
 
@@ -216,7 +218,7 @@ function runState(ctx, rows, run) {
 /* ---------- step pane: hits ---------- */
 
 /** The 1–3 parameters a practitioner scans first: missing required ones, value, items, the order id; a page title when there is nothing else. */
-function keyBits(ctx, t, hit, flag) {
+function keyBits(ctx, t, hit, flag, run) {
   const { m } = ctx;
   const p = hit.params ?? {};
   const out = [];
@@ -228,6 +230,7 @@ function keyBits(ctx, t, hit, flag) {
   if (p.transaction_id) out.push(kv("transaction_id", p.transaction_id));
   if (hit.delivery === "server") out.push(`<span class="chip plain">${esc(m.ui.serverSideTag)}</span>`);
   if (!out.length && p.page_title) out.push(kv("", p.page_title));
+  if (hit.late) out.unshift(`<span class="chip plain" title="${esc(m.ui.lateHitTip((run?.steps ?? []).find((s) => s.index === hit.late.during)?.label ?? hit.late.during))}">${esc(m.ui.lateHit(hit.late.ms))}</span>`);
   if (!out.length) return `<span class="muted">${esc(m.ui.noParameters)}</span>`;
   return out.slice(0, 3).join("");
 }
@@ -261,10 +264,10 @@ function hitCard(ctx, t, rows, run, ri, step, hit, k) {
   const label = PROVIDERS[safeKey(hit.platform)] ?? platformLabel(hit.platform);
   const calls = callsForHit(run, hit);
   const reqLine = calls.length
-    ? calls.map((c) => `<a class="mono" href="#${requestId(ri, step.index, stepCalls.indexOf(c))}">${esc(c.method ?? "")} ${esc(hostPath(c.url))} ${esc(c.status ?? "")}</a>${c.blocked ? `<span class="muted">${esc(m.html.blockedBy(label))}</span>` : ""}`).join("")
+    ? calls.map((c) => `<a class="mono" href="#${requestId(ri, c.step, (c.step === step.index ? stepCalls : requestsOf(run, c.step)).indexOf(c))}">${esc(c.method ?? "")} ${esc(hostPath(c.url))} ${esc(c.status ?? "")}</a>${c.blocked ? `<span class="muted">${esc(m.html.blockedBy(label))}</span>` : ""}`).join("")
     : `<span class="mono">${esc(hostPath(hit.url))}</span>`;
   const card = flag ? ids.get(flag) : null;
-  return `<details class="card jr-hit${sev ? ` sev-${sev}` : ""}" id="${id}"${sev ? ` data-flagged="${sev}" data-print-open` : ""}><summary><span class="jr-c-p">${platChip(hit.platform)}</span><code class="jr-ev">${esc(hit.name)}</code><span class="jr-c-k">${keyBits(ctx, t, hit, flag)}</span><span class="jr-c-c">${hitConsent(t, hit.consent)}</span><span class="jr-c-s">${sev ? badge(sev, m.severity[sev]) : ""}</span><span class="jr-tm">${esc(secs(run, hit.t))}</span></summary>
+  return `<details class="card jr-hit${sev ? ` sev-${sev}` : ""}" id="${id}"${sev ? ` data-flagged="${sev}" data-print-open` : ""}><summary><span class="jr-c-p">${platChip(hit.platform)}</span><code class="jr-ev">${esc(hit.name)}</code><span class="jr-c-k">${keyBits(ctx, t, hit, flag, run)}</span><span class="jr-c-c">${hitConsent(t, hit.consent)}</span><span class="jr-c-s">${sev ? badge(sev, m.severity[sev]) : ""}</span><span class="jr-tm">${esc(secs(run, hit.t))}</span></summary>
 <div class="body">${flag ? `<p class="jr-flag sev-${sev}">${use(`sev-${sev}`, 14)}<span>${detailHtml(flag.detail)}</span>${card ? `<a href="#${card}">${esc(m.html.findingLink)}</a>` : ""}</p>` : ""}
 <div class="jr-hb"><div><h4 class="jr-h">${esc(m.ui.parameters)}${n(event.length + missing.length)}</h4>${batch ? `<p class="muted xs jr-batch">${esc(m.ui.inBatch(batch[0], batch[1]))}</p>` : ""}${paramTable}${ctxTable}</div>
 ${items.length ? `<div><h4 class="jr-h">${esc(m.ui.items)}${n(items.length)}</h4>${itemsTable(m, t, items)}</div>` : ""}

package/src/i18n.js

@@ -24,6 +24,8 @@ const journeysOf = (v) => v?.journeys ?? {};
 
 const en = {
   name: "English",
+  // The enhanced measurement settings as GA4's web stream page names them.
+  ga4Settings: { pageViews: "Page views", scrolls: "Scrolls", outboundClicks: "Outbound clicks", siteSearch: "Site search", videoEngagement: "Video engagement", fileDownloads: "File downloads", formInteractions: "Form interactions" },
   severity: { broken: "Broken", risk: "Risk", warning: "Warning", info: "Info", ok: "OK" },
   ui: {
     title: (host) => `ai tag debugger report: ${host}`,
@@ -78,6 +80,8 @@ const en = {
     customItemParams: "Custom item parameters",
     noItems: "no items",
     serverSideTag: "server-side",
+    lateHit: (ms) => `arrived ${(ms / 1000).toFixed(1)} s late`,
+    lateHitTip: (step) => `Sent after this step was over, during "${step}". It belongs to this step's page.`,
     source: "Source",
     request: "Request",
     noPushes: "No dataLayer pushes in this step.",
@@ -246,6 +250,8 @@ const en = {
     journeyIncomplete: (note) => `The journey did not reach its goal${note ? `: ${note}` : "."} Events after that point could not be checked.`,
     missingEvent: (platform, name) => `${label(platform)} ${q(name)} was not sent on this journey, although the journey reached its goal. ${label(platform)} recorded nothing for it.`,
     missingEventEarly: (name) => `${q(name)} was not seen, but the journey stopped early, so it is unverified rather than missing.`,
+    missingEnhanced: (name, setting) => `GA4 ${q(name)} was not sent on this journey, although the journey reached its goal. GA4 sends it by itself, with no tag, when enhanced measurement is on: in GA4, Admin > Data streams > the web stream > Enhanced measurement, switch on "${en.ga4Settings[setting]}". A tag that sends it instead works too.`,
+    missingAutomatic: (name) => `GA4 ${q(name)} was not seen. GA4 makes it by itself, with no tag (first_visit and session_start from flags on its other hits, user_engagement when the page is hidden or left), so it needs no setup and is not counted as missing.`,
     missingParams: (name, params) => `${q(name)} was sent without ${andList(sortParams(params).map(q), "and")}.`,
     duplicate: (name, n) => `${q(name)} was sent ${n} times by one action. Every real one is counted ${n} times.`,
     purchaseValueZero: (platform, name, v) => `${label(platform)} ${q(name)} was sent with value ${q(v)}. A purchase worth 0 or less adds no revenue, so ad platforms cannot optimise bids on it.`,
@@ -333,6 +339,7 @@ const en = {
     pii_datalayer: "The dataLayer holds unhashed personal data, so every script on the page can read it, not only the tag that needs it.",
     journey_incomplete: "The browser could not finish this journey, so every event after that point, including any conversion, is unverified.",
     unplanned_events: "Events fire that are not in the plan: either the plan is out of date or tags send things nobody asked for.",
+    ga4_automatic_event: "Nothing is lost: GA4 makes this event itself, and a short test visit can end before it does.",
     planned_out_of_scope: "Some planned events are on platforms this run did not check, so their status is unknown.",
     matches_plan: "These planned events fired with everything the plan requires.",
   },
@@ -369,6 +376,7 @@ const en = {
     pii_datalayer: "Push user data to the dataLayer already hashed, or restrict it to the tag that needs it and clear it afterwards.",
     journey_incomplete: "Read the note for why the browser stopped (a blocked click, a missing element, an error), fix the page or the step, and re-run the journey.",
     unplanned_events: "Add the events to the measurement plan if they are wanted, or remove the tags that send them.",
+    ga4_automatic_event: "No fix is needed. Keep the event in the plan for reference, or remove it, since no tag has to send it.",
     planned_out_of_scope: "Include their platforms in the next run's providers so they are checked.",
     matches_plan: "Nothing to fix.",
   },
@@ -405,6 +413,7 @@ const en = {
     pii_datalayer: "legal",
     journey_incomplete: "hygiene",
     unplanned_events: "hygiene",
+    ga4_automatic_event: "hygiene",
     planned_out_of_scope: "hygiene",
     matches_plan: "hygiene",
   },
@@ -720,6 +729,7 @@ const en = {
 
 const tr = {
   name: "Turkish",
+  ga4Settings: { pageViews: "Sayfa görüntülemeleri", scrolls: "Kaydırmalar", outboundClicks: "Giden tıklamalar", siteSearch: "Site araması", videoEngagement: "Video etkileşimi", fileDownloads: "Dosya indirmeleri", formInteractions: "Form etkileşimleri" },
   severity: { broken: "Bozuk", risk: "Risk", warning: "Uyarı", info: "Bilgi", ok: "Sorunsuz" },
   ui: {
     title: (host) => `ai tag debugger raporu: ${host}`,
@@ -774,6 +784,8 @@ const tr = {
     customItemParams: "Özel ürün parametreleri",
     noItems: "ürün yok",
     serverSideTag: "sunucu tarafı",
+    lateHit: (ms) => `${(ms / 1000).toFixed(1).replace(".", ",")} sn gecikmeli geldi`,
+    lateHitTip: (step) => `Bu adım bittikten sonra, "${step}" sırasında gönderildi. Bu adımın sayfasına ait.`,
     source: "Kaynak",
     request: "İstek",
     noPushes: "Bu adımda dataLayer gönderimi yok.",
@@ -938,6 +950,8 @@ const tr = {
     journeyIncomplete: (note) => `Yolculuk hedefine ulaşmadı${note ? `: ${note}` : "."} Bu noktadan sonraki olaylar kontrol edilemedi.`,
     missingEvent: (platform, name) => `${label(platform)} ${q(name)} bu yolculukta gönderilmedi; oysa yolculuk hedefine ulaştı. ${label(platform)} bu olay için hiçbir veri almadı.`,
     missingEventEarly: (name) => `${q(name)} görülmedi; ancak yolculuk erken durduğu için bu olay eksik değil, doğrulanmamış sayılır.`,
+    missingEnhanced: (name, setting) => `GA4 ${q(name)} bu yolculukta gönderilmedi; oysa yolculuk hedefine ulaştı. GA4 bu olayı geliştirilmiş ölçüm açıkken etiket gerekmeden kendisi gönderir: GA4'te Yönetici > Veri akışları > web akışı > Geliştirilmiş ölçüm altında "${tr.ga4Settings[setting]}" ayarını açın. Olayı gönderen bir etiket de aynı işi görür.`,
+    missingAutomatic: (name) => `GA4 ${q(name)} görülmedi. GA4 bu olayı etiket gerekmeden kendisi oluşturur (first_visit ve session_start diğer isteklerindeki işaretlerden, user_engagement sayfa gizlendiğinde ya da kapatıldığında), bu yüzden kurulum gerektirmez ve eksik sayılmaz.`,
     missingParams: (name, params) => `${q(name)} olayı ${andList(sortParams(params).map(q), "ve")} ${params.length > 1 ? "parametreleri" : "parametresi"} olmadan gönderildi.`,
     duplicate: (name, n) => `${q(name)} tek bir işlemde ${n} kez gönderildi. Her gerçek olay ${n} kez sayılıyor.`,
     purchaseValueZero: (platform, name, v) => `${label(platform)} ${q(name)} ${q(v)} değeriyle gönderildi. 0 veya daha düşük değerli bir satın alma gelire eklenmez; reklam platformları teklifleri buna göre optimize edemez.`,
@@ -1024,6 +1038,7 @@ const tr = {
     pii_datalayer: "dataLayer karma yapılmamış kişisel veri tutuyor; sayfadaki her betik bunu okuyabilir, yalnızca ihtiyaç duyan etiket değil.",
     journey_incomplete: "Tarayıcı bu yolculuğu bitiremedi; o noktadan sonraki her olay, dönüşüm dâhil, doğrulanmamış durumda.",
     unplanned_events: "Planda olmayan olaylar gönderiliyor: ya plan güncel değil ya da etiketler kimsenin istemediği şeyler gönderiyor.",
+    ga4_automatic_event: "Kayıp yok: GA4 bu olayı kendisi oluşturur ve kısa bir test ziyareti o olay gönderilmeden bitebilir.",
     planned_out_of_scope: "Plandaki bazı olaylar bu çalıştırmanın kontrol etmediği platformlarda; durumları bilinmiyor.",
     matches_plan: "Plandaki bu olaylar, planın istediği her şeyle birlikte gönderildi.",
   },
@@ -1058,6 +1073,7 @@ const tr = {
     pii_datalayer: "Kullanıcı verisini dataLayer'a karma yapılmış olarak gönderin ya da yalnızca ihtiyaç duyan etiketle sınırlayıp ardından temizleyin.",
     journey_incomplete: "Tarayıcının neden durduğunu nottan okuyun (engellenen bir tıklama, bulunamayan bir öğe, bir hata), sayfayı ya da adımı düzeltin ve yolculuğu yeniden çalıştırın.",
     unplanned_events: "İstenen olayları ölçüm planına ekleyin ya da onları gönderen etiketleri kaldırın.",
+    ga4_automatic_event: "Düzeltme gerekmez. Olayı başvuru için planda tutabilir ya da kaldırabilirsiniz; hiçbir etiketin göndermesi gerekmez.",
     planned_out_of_scope: "Kontrol edilmeleri için platformlarını bir sonraki çalıştırmanın sağlayıcılarına ekleyin.",
     matches_plan: "Düzeltilecek bir şey yok.",
   },
@@ -1093,6 +1109,7 @@ const tr = {
     pii_datalayer: "legal",
     journey_incomplete: "hygiene",
     unplanned_events: "hygiene",
+    ga4_automatic_event: "hygiene",
     planned_out_of_scope: "hygiene",
     matches_plan: "hygiene",
   },

package/src/mcp.js

@@ -17,7 +17,7 @@ import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/
 import { AuditSession } from "./browser.js";
 import { navigationError, privateHostChecker } from "./guard.js";
 import { collect, pageView, SYSTEM_PROMPT } from "./agent.js";
-import { checkRun, groupFindings, summarize } from "./checks.js";
+import { checkRun, groupFindings, isConsentCommand, summarize } from "./checks.js";
 import { LANGUAGES, messages } from "./i18n.js";
 import { loadConfig, readJson, runAudit, writeReports } from "./audit.js";
 import { validatePlan } from "./schema.js";
@@ -29,7 +29,7 @@ import { checkTopic, discoverPlan, TOPICS } from "./discover.js";
 import { createProvider } from "./providers.js";
 import { savePlan } from "./plan.js";
 import { changesLines, sinceLastRun } from "./changes.js";
-import { DEFAULT_PROVIDERS, PROVIDERS as TRACKING_PROVIDERS } from "./parsers.js";
+import { DEFAULT_PROVIDERS, isCollectionEndpoint, parseTrackingRequest, PROVIDERS as TRACKING_PROVIDERS } from "./parsers.js";
 import { expectEvents, filterFindings, JOURNEY_PRESETS, onlyEvents, presetFor, withPresetEvents } from "./journeys.js";
 
 const VERSION = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version;
@@ -64,20 +64,68 @@ const audits = new Map();
 const text = (t) => ({ content: [{ type: "text", text: t }] });
 const fail = (t) => ({ content: [{ type: "text", text: t }], isError: true });
 
-function describeHit(h) {
-  const params = Object.entries(h.params ?? {})
-    .filter(([k]) => !["v", "tid", "gtm", "_p", "cid", "sid", "_s", "sct", "seg", "dl", "dr", "dt", "ul", "sr", "_et", "en"].includes(k))
-    .slice(0, 12)
-    .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`.slice(0, 120))
-    .join(", ");
-  return `- ${h.platform} ${h.name}${h.consent ? ` [consent ${Object.entries(h.consent).map(([k, v]) => `${k}=${v}`).join(" ")}]` : ""}${params ? `: ${params}` : ""}`;
+// Kept whole in the step result, wherever they appear: the end of a page address is where a UTM
+// parameter or a gclid gets lost, so cutting it hides exactly what a campaign check needs.
+const WHOLE_FIELDS = new Set(["page_location", "page_referrer"]);
+const VALUE_LIMIT = 120;
+const PUSH_LIMIT = 200;
+const cut = (s, n) => (s.length > n ? `${s.slice(0, n)}…` : s);
+const show = (v) => (typeof v === "string" ? v : JSON.stringify(v));
+
+/** The page address fields anywhere in a pushed object, a few levels deep, as [name, value]. */
+function wholeFieldsIn(value, depth = 0, out = []) {
+  if (!value || typeof value !== "object" || depth > 3) return out;
+  for (const [k, v] of Object.entries(value)) {
+    if (WHOLE_FIELDS.has(k) && typeof v === "string") out.push([k, v]);
+    else wholeFieldsIn(v, depth + 1, out);
+  }
+  return out;
+}
+
+function describeHit(h, steps) {
+  const entries = Object.entries(h.params ?? {}).filter(([k]) => !["v", "tid", "gtm", "_p", "cid", "sid", "_s", "sct", "seg", "dl", "dr", "dt", "ul", "sr", "_et", "en"].includes(k));
+  const params = [
+    ...entries.filter(([k]) => !WHOLE_FIELDS.has(k)).slice(0, 12).map(([k, v]) => cut(`${k}=${show(v)}`, VALUE_LIMIT)),
+    ...entries.filter(([k]) => WHOLE_FIELDS.has(k)).map(([k, v]) => `${k}=${show(v)}`),
+  ].join(", ");
+  const late = h.late ? ` (arrived ${(h.late.ms / 1000).toFixed(1)} s late, after the step that loaded its page: "${steps[h.step]?.label ?? `step ${h.step}`}")` : "";
+  return `- ${h.platform} ${h.name}${h.consent ? ` [consent ${Object.entries(h.consent).map(([k, v]) => `${k}=${v}`).join(" ")}]` : ""}${params ? `: ${params}` : ""}${late}`;
+}
+
+/** A consent command in full, as key=value; any other push as JSON, cut, with its page address fields whole. */
+function describePush(p) {
+  if (isConsentCommand(p, "default") || isConsentCommand(p, "update")) {
+    const signals = p.value[2] && typeof p.value[2] === "object" ? Object.entries(p.value[2]).map(([k, v]) => `${k}=${show(v)}`).join(" ") : show(p.value[2]);
+    return `- consent ${p.value[1]}: ${signals}`;
+  }
+  const json = JSON.stringify(p.value) ?? String(p.value);
+  const whole = json.length > PUSH_LIMIT ? wholeFieldsIn(p.value) : [];
+  return `- ${cut(json, PUSH_LIMIT)}${whole.length ? ` (${whole.map(([k, v]) => `${k}=${v}`).join(", ")})` : ""}`;
+}
+
+/** A call to a tracking endpoint that carries no event the tool reads, such as a Consent Mode ping, with its consent parameters. */
+function describeCall(c) {
+  let u;
+  try {
+    u = new URL(c.url);
+  } catch {
+    return `- ${c.vendor ?? c.provider} ${cut(c.url, VALUE_LIMIT)}`;
+  }
+  const signals = ["gcs", "gcd", "dma", "npa"].filter((k) => u.searchParams.has(k)).map((k) => `${k}=${u.searchParams.get(k)}`).join(" ");
+  return `- ${c.vendor ?? c.provider}: ${u.hostname}${u.pathname}${signals ? ` [${signals}]` : ""}`;
 }
 
-function stepCapture(audit, step) {
-  const hits = audit.session.hits.filter((h) => h.step === step);
-  const pushes = audit.session.dataLayerLog.filter((e) => e.step === step);
-  const lines = [`Tracking hits sent by this step: ${hits.length}`, ...hits.map(describeHit)];
-  if (pushes.length) lines.push(`dataLayer pushes: ${pushes.map((p) => JSON.stringify(p.value).slice(0, 160)).join(" | ")}`);
+export function stepCapture(audit, step) {
+  const { session } = audit;
+  const hits = session.hits.filter((h) => h.step === step);
+  const pushes = session.dataLayerLog.filter((e) => e.step === step);
+  // Hits that arrived during this step for a page an earlier step loaded are listed there, and noted here.
+  const lateHere = session.hits.filter((h) => h.late?.during === step);
+  const pings = session.network.filter((c) => c.step === step && isCollectionEndpoint(c.url) && !parseTrackingRequest(c.url, c.postData ?? null));
+  const lines = [`Tracking hits sent by this step: ${hits.length}`, ...hits.map((h) => describeHit(h, session.steps))];
+  if (lateHere.length) lines.push(`Arrived during this step but belong to the step that loaded their page: ${lateHere.map((h) => `${h.platform} ${h.name} (step "${session.steps[h.step]?.label ?? h.step}")`).join(", ")}`);
+  if (pings.length) lines.push("Other calls to analytics and ad endpoints, not read as events (Consent Mode pings, resends, remarketing):", ...pings.map(describeCall));
+  if (pushes.length) lines.push("dataLayer pushes:", ...pushes.map(describePush));
   return lines.join("\n");
 }
 

package/src/parsers.js

@@ -64,6 +64,8 @@ export function parseGa4(url, postData) {
     for (const [k, v] of new URLSearchParams(line)) merged.set(k, v);
     const items = [...merged].filter(([k]) => /^pr\d+$/.test(k)).map(([, v]) => v);
     const user = [...merged].filter(([k]) => isUserDataKey(k));
+    // GA4 makes first_visit and session_start from these flags on another hit; they are never sent by name.
+    const autoEvents = [["_fv", "first_visit"], ["_ss", "session_start"]].filter(([flag]) => merged.has(flag)).map(([, name]) => name);
     return {
       platform: "ga4",
       delivery: ga4Delivery(u),
@@ -72,6 +74,7 @@ export function parseGa4(url, postData) {
       params: ga4ParamsFrom(merged),
       consent: ga4Consent(merged),
       ...(items.length ? { items } : {}),
+      ...(autoEvents.length ? { autoEvents } : {}),
       ...(user.length ? { userFields: Object.fromEntries(user) } : {}),
       url,
     };

package/src/plan-html.js

@@ -18,12 +18,12 @@ const PLAN_CSS = `
 .top-end{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
 .byline{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--muted)}
 .logo{display:inline-flex}
-svg.logo{display:inline-block;flex:none;color:var(--fg)}
+svg.logo{display:inline-block;flex:none;color:var(--fg-strong)}
 .logo .l-dark{display:none}
 html[data-theme="dark"] .logo .l-light{display:none}
 html[data-theme="dark"] .logo .l-dark{display:inline}
 @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .logo .l-light{display:none}html:not([data-theme="light"]) .logo .l-dark{display:inline}}
-.eyebrow{font:600 11px/1.4 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
+.eyebrow{font:500 12px/1.4 var(--font-sans);color:var(--muted)}
 .plan{max-width:1100px;margin:0 auto;padding:var(--s5) var(--s6) var(--s7)}
 .plan-title{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
 .plan-title .chips{margin-top:var(--s1)}
@@ -39,8 +39,8 @@ html[data-theme="dark"] .logo .l-dark{display:inline}
 .pl-trigger{font-size:12px;color:var(--muted);margin-bottom:10px}
 .pl-trigger b{font-weight:500;color:var(--fg)}
 .chip .plat{display:inline-flex;align-items:center;gap:5px}
-.chip.on{--k:var(--accent);--k-fg:var(--accent-fg);background:var(--accent-bg)}
-.chip.req{--k:var(--sev-warning);--k-fg:var(--sev-warning-fg);background:var(--sev-warning-bg)}
+.chip.on{--k:var(--accent);--k-fg:var(--accent-fg)}
+.chip.req{--k:var(--sev-warning);--k-fg:var(--sev-warning-fg)}
 .pl-card-body{padding:var(--s4)}
 .tbl td,.tbl th{vertical-align:top}
 /* a narrow table scrolls inside its .tscroll instead of breaking names mid-word */

package/src/verify.js

@@ -14,6 +14,7 @@ const OWNER_BY_CHECK = {
   server_side: "developer",
   unplanned_events: "marketing",
   planned_out_of_scope: "marketing",
+  ga4_automatic_event: "marketing",
 };
 
 /** Who most likely fixes this finding: the site's developer, whoever runs Tag Manager, or marketing (the plan itself). Tag and consent setup is the default. */

package/src/whitelabel.js

@@ -53,33 +53,66 @@ export const contrast = (a, b) => {
   return (h + 0.05) / (l + 0.05);
 };
 const MIN_TEXT_CONTRAST = 4.5;
-// The card surfaces of visual-system.md §1, which the link colour must read on.
-const LIGHT_CARD = "#ffffff";
-const DARK_CARD = "#141927";
+const MIN_MARK_CONTRAST = 3;
+// The grounds of visual-system.md §1 the accent is drawn on, in each theme: card (Tally's surface), page (bg), card-2
+// (surface-2: hovered and selected rows, hovered controls) and well. Links sit on all four; the tint is added per colour.
+const GROUNDS = {
+  light: ["#ffffff", "#f4f6fa", "#ecf1f8", "#e9eef5"],
+  dark: ["#0e1e34", "#071529", "#15263f", "#040e1f"],
+};
+const BLACK = [0, 0, 0];
+const WHITE = [255, 255, 255];
+// The dark tint is the brand colour laid on the navy card, as the default --accent-bg is.
+const DARK_CARD_RGB = rgb(GROUNDS.dark[0]);
 
-/** The colour mixed step by step towards `toward` until it reads at 4.5:1 on `surface`; the input when it already does. */
-function readable(hex, toward, surface) {
+/**
+ * The colour mixed step by step towards `toward` until it reads at `min`:1 on every ground; the input when it already
+ * does. Mixing towards black or white keeps the hue, so a brand colour only gets darker or lighter, never another colour.
+ */
+function readable(hex, toward, grounds, min) {
   let c = hex;
-  for (let i = 0; i < 20 && contrast(c, surface) < MIN_TEXT_CONTRAST; i++) c = mix(c, toward, 0.1);
+  while (grounds.some((g) => contrast(c, g) < min)) {
+    const next = mix(c, toward, 0.1);
+    if (next === c) break; // as far as rounding goes: black and white pass every ground long before this
+    c = next;
+  }
   return c;
 }
 
 /**
- * CSS that recolors the report's accent: the active tab rule, focus rings, links and the step plates (visual-system.md §9).
- * The light theme gets a link colour darkened until it reads on a white card, the dark theme one lightened until it
- * reads on the dark card, so a pale brand colour never gives unreadable links. The dark set is written under both dark
- * selectors the report uses, so a forced light theme on a dark OS keeps the light accent.
+ * The three accent tokens for a brand colour, per theme. The tint (--accent-bg) is the brand colour on the card: 10% on
+ * white in light, 25% on the navy in dark. The link colour (--accent-fg) is darkened (light) or lightened (dark) until it
+ * reads at 4.5:1 on the card, the page, card-2, the well and that tint; the colour for marks (--accent: the active tab
+ * and rail rule, focus rings, pressed filter edges) until it reaches 3:1 on the same grounds. A colour that already
+ * passes is left as it is.
+ * @returns {{ light: { accent: string, fg: string, bg: string }, dark: { accent: string, fg: string, bg: string } }}
+ */
+export function brandTokens(color) {
+  const lightBg = mix(color, WHITE, 0.9);
+  const darkBg = mix(color, DARK_CARD_RGB, 0.75);
+  const light = [...GROUNDS.light, lightBg];
+  const dark = [...GROUNDS.dark, darkBg];
+  return {
+    light: { accent: readable(color, BLACK, light, MIN_MARK_CONTRAST), fg: readable(mix(color, BLACK, 0.2), BLACK, light, MIN_TEXT_CONTRAST), bg: lightBg },
+    dark: { accent: readable(mix(color, WHITE, 0.2), WHITE, dark, MIN_MARK_CONTRAST), fg: readable(mix(color, WHITE, 0.5), WHITE, dark, MIN_TEXT_CONTRAST), bg: darkBg },
+  };
+}
+
+/**
+ * CSS that recolors the report's accent: the active tab rule, focus rings, links and the step plates (visual-system.md §9),
+ * from brandTokens(), so a pale or a very dark brand colour never gives unreadable links or invisible focus rings in either
+ * theme. The dark set is written under both dark selectors the report uses, so a forced light theme on a dark OS keeps
+ * the light accent.
  */
 export function brandCss(color) {
   if (!color) return "";
-  const black = [0, 0, 0], white = [255, 255, 255];
-  const light = `--accent:${color};--accent-fg:${readable(mix(color, black, 0.2), black, LIGHT_CARD)};--accent-bg:${mix(color, white, 0.9)}`;
-  const dark = `--accent:${mix(color, white, 0.2)};--accent-fg:${readable(mix(color, white, 0.5), white, DARK_CARD)};--accent-bg:${mix(color, [10, 14, 26], 0.75)}`;
-  return `:root{${light}}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${dark}}}:root[data-theme="dark"]{${dark}}`;
+  const { light, dark } = brandTokens(color);
+  const set = (t) => `--accent:${t.accent};--accent-fg:${t.fg};--accent-bg:${t.bg}`;
+  return `:root{${set(light)}}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${set(dark)}}}:root[data-theme="dark"]{${set(dark)}}`;
 }
 
 // A forwarded PDF loses its file name, so every page carries the document title and the page number (Chromium fills the spans).
-const PDF_FOOTER = '<div style="width:100%;font:9px system-ui,sans-serif;color:#4b5567;padding:0 10mm;display:flex;justify-content:space-between"><span class="title"></span><span><span class="pageNumber"></span> / <span class="totalPages"></span></span></div>';
+const PDF_FOOTER = '<div style="width:100%;font:9px \'Google Sans\',system-ui,sans-serif;color:#566479;padding:0 10mm;display:flex;justify-content:space-between"><span class="title"></span><span><span class="pageNumber"></span> / <span class="totalPages"></span></span></div>';
 
 /** Prints an HTML report to a PDF with Chromium. The print styles stack every tab and open every details, so the PDF holds the whole report. */
 export async function writePdf(htmlPath, pdfPath) {