@analitikisler/ai-tag-debugger 0.20.0 → 0.21.0

package/src/html/journeys.js

@@ -3,8 +3,9 @@
 // [data-vp-switch], details.card), so shell.js drives it; the JOURNEYS script in script.js only keeps the viewport
 // when the journey changes. Ids come from lib.js (stepAnchor, hitId, pushId, requestId) so Findings links land here.
 import { canonicalEvent } from "../checks.js";
-import { parseTrackingRequest, providerOf, PROVIDERS } from "../parsers.js";
-import { decodeGa4Item, isEventParam, paramTip } from "../glossary.js";
+import { CONSENT_SIGNALS, parseTrackingRequest, providerOf, PROVIDERS } from "../parsers.js";
+import { decodeGa4Item, paramTip } from "../glossary.js";
+import { callsForHit, hitParams, paramSets } from "../hit-params.js";
 import { SEVERITY_RANK, isConsentEntry } from "../report-shared.js";
 import {
   sectionBlock, use, plat, platIcon, badge, chip, n, esc, secs, pathOf, hostPath, safeKey, platformLabel, sortPlatforms, detailHtml,
@@ -63,51 +64,7 @@ function pushesForHit(run, hit) {
   return twins.length > 1 && pushes.length === twins.length ? [pushes[twins.indexOf(hit)]] : pushes;
 }
 
-/** 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);
-  return twins.length > 1 && calls.length === twins.length ? [calls[twins.indexOf(hit)]] : calls;
-}
-
-/* ---------- request parameters, moved from the 0.17 renderer ---------- */
-
-/** Nested JSON as dotted keys (properties.value); arrays stay JSON text. */
-function flatten(obj, prefix = "", out = []) {
-  for (const [k, v] of Object.entries(obj ?? {})) {
-    const key = prefix ? `${prefix}.${k}` : k;
-    if (v && typeof v === "object" && !Array.isArray(v) && prefix.split(".").length < 3) flatten(v, key, out);
-    else out.push([key, cell(v)]);
-  }
-  return out;
-}
-
-/** The parameter sets a request carried: one per event in a GA4 batch (query plus each body line), the query plus a flattened JSON body, or just the query. */
-function paramSets(call) {
-  let u;
-  try {
-    u = new URL(call.url);
-  } catch {
-    return [[]];
-  }
-  const query = [...u.searchParams];
-  const body = call.postData;
-  if (!body) return [query];
-  const trimmed = body.trim();
-  if (trimmed.startsWith("{")) {
-    try {
-      return [[...query, ...flatten(JSON.parse(trimmed))]];
-    } catch { /* not JSON, or cut at the size limit */ }
-  }
-  if (/^[^\s{]*=/.test(trimmed)) {
-    return trimmed.split("\n").filter(Boolean).map((line) => {
-      const merged = new Map(query);
-      for (const [k, v] of new URLSearchParams(line)) merged.set(k, v);
-      return [...merged];
-    });
-  }
-  return [query];
-}
+/* ---------- request parameters ---------- */
 
 /** Parameter rows with a glossary tip: the "?" shows the tip on hover and takes no focus; screen readers read the hidden span. */
 function paramRows(lang, entries) {
@@ -118,24 +75,6 @@ function paramRows(lang, entries) {
   }).join("");
 }
 
-/**
- * What a hit card shows as its parameters: the request's own parameter set (raw keys, with glossary tips), split
- * into the event's parameters and the session, device, page and consent ones. A GA4 batch carries one set per
- * event; the hit takes the set with its name. Without a captured request, the hit's parsed parameters.
- */
-function hitParams(run, hit) {
-  const call = callsForHit(run, hit)[0] ?? null;
-  if (!call) return { call, batch: null, event: Object.entries(hit.params ?? {}).filter(([k]) => !(k === "items" && hit.items?.length)).map(([k, v]) => [k, cell(v)]), context: [] };
-  const sets = paramSets(call);
-  let i = 0;
-  if (sets.length > 1) {
-    const names = (parseTrackingRequest(call.url, call.postData ?? null) ?? []).map((h) => h.name);
-    i = Math.max(0, names.indexOf(hit.name));
-  }
-  const entries = sets[i] ?? [];
-  return { call, batch: sets.length > 1 ? [i + 1, sets.length] : null, event: entries.filter(([k]) => isEventParam(k)), context: entries.filter(([k]) => !isEventParam(k)) };
-}
-
 /* ---------- items: GA4 item strings and dataLayer item objects as one table ---------- */
 
 const STANDARD_ITEM_KEYS = new Set(["item_id", "item_name", "affiliation", "coupon", "discount", "index", "item_brand", "item_category", "item_category2", "item_category3", "item_category4", "item_category5", "item_list_id", "item_list_name", "item_variant", "location_id", "price", "quantity", "promotion_id", "promotion_name", "creative_name", "creative_slot"]);
@@ -176,7 +115,7 @@ function consentChip(t, key, v) {
   return `<span class="chip chip-consent ${safeKey(v)}" title="${esc(`${key}: ${v}`)}"><span class="k" aria-hidden="true">${esc(t.signals[key] ?? key)}</span><span aria-hidden="true">${mark}</span><span class="sr">${esc(`${key} ${v}`)}</span></span>`;
 }
 const hitConsent = (t, c) => {
-  const keys = c ? ["ad_storage", "analytics_storage"].filter((k) => typeof c[k] === "string") : [];
+  const keys = c ? CONSENT_SIGNALS.filter((k) => typeof c[k] === "string") : [];
   return keys.length ? keys.map((k) => consentChip(t, k, c[k])).join("") : `<span class="chip chip-consent none" title="${esc(t.noSignalTitle)}">${esc(t.noSignal)}</span>`;
 };
 const missingChip = (m, k) => `<span class="chip chip-sev broken jr-miss"><span class="k">${esc(k)}</span>${esc(m.ui.missing)}</span>`;
@@ -216,7 +155,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 +167,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 +201,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>` : ""}
@@ -336,6 +276,27 @@ function parityNote(m, run, step, parity) {
   }).join("");
 }
 
+/** The step's cookie changes by name, and what the analytics and ad cookies say when the step changed it. */
+function cookiePane(m, run, step) {
+  const changes = (run.cookieChanges ?? []).filter((c) => c.step === step.index);
+  const id = step.identity;
+  const before = (run.steps ?? []).filter((st) => st.index < step.index && st.identity).at(-1)?.identity;
+  const facts = [];
+  if (id && (changes.length || JSON.stringify(id) !== JSON.stringify(before))) {
+    if (id.ga_client_id) {
+      const prev = before?.ga_client_id;
+      const since = (run.steps ?? []).find((st) => st.identity?.ga_client_id === id.ga_client_id)?.index;
+      facts.push(m.ui.gaClientId(id.ga_client_id, prev ? since : null, prev && prev !== id.ga_client_id ? prev : null));
+    }
+    if (id.gcl_aw) facts.push(m.ui.gclAw(id.gcl_aw === "landing"));
+    if (id.fbc) facts.push(m.ui.fbc(id.fbc === "landing"));
+  }
+  const table = changes.length
+    ? `<table class="tbl jr-req" aria-label="${esc(m.ui.tabCookies)}"><thead><tr><th scope="col">${esc(m.ui.cookieCol)}</th><th scope="col">${esc(m.ui.domainCol)}</th><th scope="col">${esc(m.ui.changeCol)}</th></tr></thead><tbody>${changes.map((c) => `<tr><td><code>${esc(c.name)}</code></td><td class="mono xs">${esc(c.domain)}</td><td>${esc(m.ui.cookieChange[c.change] ?? c.change)}</td></tr>`).join("")}</tbody></table>`
+    : "";
+  return { count: changes.length, live: changes.length > 0 || facts.length > 0, html: `${facts.map((f) => `<p class="xs jr-note-s">${esc(f)}</p>`).join("")}${table ? `<div class="tscroll">${table}</div>` : ""}<p class="muted xs jr-note-s">${esc(m.ui.cookieNamesOnly)}</p>` };
+}
+
 function stepPane(ctx, t, rows, run, ri, step, sev, selected) {
   const { m } = ctx;
   const id = stepAnchor(ri, step.index);
@@ -344,15 +305,19 @@ function stepPane(ctx, t, rows, run, ri, step, sev, selected) {
   const calls = requestsOf(run, step.index);
   const skipped = skippedOf(run, step.index);
   const skippedN = skipped.reduce((a, [, c]) => a + c, 0);
+  const cookies = cookiePane(m, run, step);
   const meta = [step.pagePath ? pathOf(step.pagePath) : null, ...actionText(m, step), secs(run, step.t)].filter(Boolean).map((x) => `<span>${esc(x)}</span>`).join("");
   const reqNotes = `${skippedN ? `<p class="muted xs jr-note-s">${esc(m.ui.skippedInStep(skipped.map(([v, c]) => `${v} ${c}`).join(", "), skippedN))}</p>` : ""}${calls.some((c) => c.bodyDropped) ? `<p class="muted xs jr-note-s">${esc(m.ui.bodyDropped)}</p>` : ""}`;
   const tabs = [
     ["hits", esc(m.html.hitsCol), m.html.hitsInStep, hits.length, hits.length ? `<div class="jr-list">${hits.map((h, k) => hitCard(ctx, t, rows, run, ri, step, h, k)).join("")}</div>` : `<p class="muted xs jr-empty">${esc(m.ui.noHits)}</p>`],
     ["dl", esc(t.dataLayer), t.dataLayer, pushes.length, pushes.length ? `<div class="jr-list">${pushes.map((e, k) => pushCard(ctx, t, run, ri, step, e, k)).join("")}</div>` : `<p class="muted xs jr-empty">${esc(m.ui.noPushes)}</p>`],
     ["req", esc(m.ui.tabNetwork), m.ui.tabNetwork, calls.length, `${calls.length ? requestTable(ctx, t, run, ri, step, calls) : `<p class="muted xs jr-empty">${esc(m.ui.noRequests)}</p>`}${reqNotes}`],
+    // Captures from before cookies were tracked per step have no cookieChanges, and no tab for them.
+    ...(run.cookieChanges ? [["ck", esc(m.ui.tabCookies), m.ui.tabCookies, cookies.count, cookies.html]] : []),
   ];
-  // A tab with nothing in it is shown but disabled; the requests tab stays open when it only has the skipped-requests note.
-  const live = (k, c) => c > 0 || (k === "req" && Boolean(reqNotes));
+  // A tab with nothing in it is shown but disabled; the requests tab stays open when it only has the skipped-requests note,
+  // and the cookies tab when it only says what the click id and client id cookies hold.
+  const live = (k, c) => c > 0 || (k === "req" && Boolean(reqNotes)) || (k === "ck" && cookies.live);
   const first = tabs.find(([k, , , c]) => live(k, c));
   const body = first
     ? `<div class="tabs jr-tabs" data-tabs><div role="tablist" aria-label="${esc(t.stepOf(step.index))}">${tabs.map(([k, label, , c]) => `<button type="button" role="tab" aria-controls="${id}-${k}" aria-selected="${first[0] === k}"${live(k, c) ? "" : " disabled"}>${label} ${n(c)}</button>`).join("")}</div>

package/src/html/summary.js

@@ -172,7 +172,7 @@ function scorecard(ctx) {
 <p class="sc-verdict sev-${sev}">${use(`sev-${sev}`, 26)}${esc(verdict.statusText)}</p>
 <p class="sc-head">${esc(headline)}</p>
 ${aiLine(ctx)}${costLines(ctx, noScore)}
-${statusChips(ctx)}${accepted > 0 ? `\n<p class="meta accepted-line">${esc(m.ui.acceptedLine(accepted))}</p>` : ""}
+${statusChips(ctx)}${accepted > 0 ? `\n<p class="meta accepted-line">${esc(m.ui.acceptedLine(accepted))}</p>` : ""}${ctx.runs.some((r) => r.live) ? `\n<p class="meta sev-warning">${use("sev-warning", 14)} ${esc(m.ui.liveRun)}</p>` : ""}
 </div>`;
 }