@analitikisler/ai-tag-debugger 0.20.1 → 0.22.0

package/src/html/consent.js

@@ -1,14 +1,17 @@
 // 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 { consentMatrix, consentTable, IGNORE, SCENARIO_COLUMNS } from "../consent.js";
+import { cmpFacts } from "../cmp.js";
 import { isConsentEntry } from "../report-shared.js";
+import { tagConsentStates } from "../checks.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"];
+// The status line per platform keeps to no choice, accept and reject; the card lists every column that ran.
+const STATUS_SCENARIOS = ["before", "accept", "reject"];
 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 MODE_CHECKS = new Set(["consent_default_missing", "consent_default_late", "consent_default_not_applied", "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. */
@@ -73,12 +76,18 @@ export function render(ctx) {
     // 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))
+    const cells = STATUS_SCENARIOS.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 platform ---- */
+  const platform = cmpFacts(m, runs);
+  const platformCard = platform
+    ? `<details class="card" id="consent-platform"><summary><span class="t">${esc(m.ui.cmp.title)}</span>${plain(esc(platform.vendor))}</summary><div class="body"><ul class="xs cm-timing">${platform.facts.map((f) => `<li>${esc(f)}</li>`).join("")}</ul></div></details>\n`
+    : "";
+
   /* ---- Consent Mode ---- */
   const mode = metrics.consent.consentMode;
   const perRun = runs.map((run, ri) => {
@@ -116,13 +125,24 @@ export function render(ctx) {
   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;
+  // The Google tag's last recorded state per run; runs that ended in the same state share one line.
+  const tagGroups = new Map();
+  for (const run of runs) {
+    const last = tagConsentStates(run).at(-1);
+    if (!last) continue;
+    const k = JSON.stringify({ ...last, step: undefined });
+    if (!tagGroups.has(k)) tagGroups.set(k, { last, runs: [] });
+    tagGroups.get(k).runs.push(run);
+  }
+  const viaTag = withDefault.some((p) => p.info.source === "tag") ? `<p class="xs muted">${esc(t.defaultViaTag)}</p>` : "";
+  const tagHtml = [...tagGroups.values()].map(({ last, runs: rs }) => `<div class="cm-tag">${tagGroups.size > 1 ? `<div class="chips cm-runs">${rs.map(runChip).join("")}</div>` : ""}<p class="xs"><b>${esc(t.tagState)}</b> · ${esc(t.tagFlags(last.usedDefault, last.usedUpdate, last.wasSetLate, last.waitPeriodTimedOut))}</p><div class="chips">${signalChips(m, Object.fromEntries(Object.entries(last.entries).map(([k, e]) => [k, e.update ?? e.default ?? "none"])))}</div></div>`).join("");
   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>` : ""}`;
+    ? `${timing ? `<ul class="cm-timing">${timing}</ul>` : ""}${viaTag}${groupHtml}${tagHtml}${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>${tagHtml}${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>`);
+  if (!sc) return sectionBlock("consent", esc(m.html.shell.sections.consent), `${list}\n${platformCard}${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);
@@ -145,8 +165,13 @@ export function render(ctx) {
   };
   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("");
+  // Captures from before the no-choice scenario existed have no column for it.
+  const summaryChips = SCENARIO_COLUMNS.filter((s) => s !== IGNORE || sc.states?.[IGNORE]).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}`);
+  const matrix = consentMatrix(m, sc);
+  const matrixCard = matrix
+    ? `\n<details class="card" id="consent-matrix"><summary><span class="t">${esc(m.ui.matrix.title)}</span>${matrix.rows.some((r) => r.cells.some((c) => c.problem)) ? sevChip("risk", t.problems(matrix.rows.reduce((n, r) => n + r.cells.filter((c) => c.problem).length, 0))) : sevChip("ok", t.noProblems)}</summary><div class="body">${matrix.landing ? `<p class="xs muted">${esc(m.ui.matrix.intro(matrix.landing))}</p>` : ""}<div class="tscroll"><table class="tbl cs-tbl"><caption class="sr">${esc(m.ui.matrix.title)}</caption><thead><tr><th scope="col"></th>${matrix.cols.map((c) => `<th scope="col">${esc(t.cols[c])}</th>`).join("")}</tr></thead><tbody>${matrix.rows.map((r) => `<tr><th scope="row">${esc(r.label)}</th>${r.cells.map((c) => (c.problem ? `<td class="cs-bad"><span class="cs-c">${esc(c.text)}${badge("risk", "⚠")}<span class="sr"> ${esc(m.ui.matrix.problem)}</span></span></td>` : `<td class="xs">${esc(c.text)}</td>`)).join("")}</tr>`).join("")}</tbody></table></div><p class="xs muted">${esc(m.ui.matrix.legend)}</p></div></details>`
+    : "";
+  return sectionBlock("consent", esc(m.html.shell.sections.consent), `${list}\n${platformCard}${modeCard}\n${scenarios}${matrixCard}`);
 }

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,53 +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) {
-  // 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;
-}
-
-/* ---------- 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) {
@@ -120,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"]);
@@ -178,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>`;
@@ -339,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);
@@ -347,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/scope.js

@@ -3,6 +3,7 @@
 // handling (which runs check which platform, the funnel cells, the inventory's parties and cookies, the skipped
 // vendors, the trend) is the 0.17 renderer's, so the numbers match the Markdown report and the CLI.
 import { buildInventory } from "../inventory.js";
+import { containerRows } from "../containers.js";
 import { providerOf } from "../parsers.js";
 import { siteOf } from "../redact.js";
 import { VERSION, BUCKET_ORDER, coverageLines, pcSort, planChangeItems, routeList } from "../report-shared.js";
@@ -193,12 +194,24 @@ function inventoryLines(ctx) {
   return { lines, otherCookies: inv.otherCookies };
 }
 
+/** The Google containers card: one line per container and the way it reached the page. Null when none was recorded. */
+function containersCard(ctx) {
+  const { m, runs } = ctx;
+  const rows = containerRows(runs);
+  if (!rows.length) return null;
+  const c = m.ui.containers;
+  const items = rows.map((r) => `<li>${code(r.id)}${plain(esc(c.script[r.script]))}<span>${esc(c.kinds[r.kind](r.by))}</span>${plain(`${esc(m.ui.layerCol)} ${code(r.layer)}`)}${plain(esc(r.served === "google" ? c.served.google : `${c.served.site} (${r.host})`))}${r.environment ? badge("warning", c.environment(r.environment)) : ""}<span class="inv-n">${m.html.scope.pages(r.pages.length, bold(r.pages.length))}</span></li>`).join("");
+  const ids = uniq(rows.map((r) => r.id));
+  return `<li><details class="card inv" id="inv-containers"><summary><span class="t">${esc(m.ui.containersTitle)}</span>${plain(n(ids.length))}<span class="inv-m">${esc(ids.slice(0, 3).join(", "))}${ids.length > 3 ? " …" : ""}</span></summary><div class="body"><p class="xs muted">${esc(m.ui.containersIntro)}</p><ul class="inv-list">${items}</ul></div></details></li>`;
+}
+
 function inventorySection(ctx) {
   const { m, runs } = ctx;
   const t = m.html.scope;
   const { lines, otherCookies } = inventoryLines(ctx);
   const skipped = skippedTotals(runs);
-  if (!lines.length && !skipped.length) return sectionBlock("inventory", esc(m.html.shell.sections.inventory), `<p class="muted">${esc(m.ui.noInventory)}</p>`);
+  const containers = containersCard(ctx);
+  if (!lines.length && !skipped.length && !containers) return sectionBlock("inventory", esc(m.html.shell.sections.inventory), `<p class="muted">${esc(m.ui.noInventory)}</p>`);
   const counts = (x) => `<span class="inv-m">${t.requests(x.requests, bold(x.requests))}</span><span class="inv-m">${t.pages(x.pages.size, bold(x.pages.size))}</span><span class="inv-m${x.cookies.length ? "" : " zero"}">${t.cookies(x.cookies.length, bold(x.cookies.length))}</span>`;
   const out = lines.map((x) => {
     const id = `inv-${safeKey(x.p)}`;
@@ -214,6 +227,7 @@ function inventorySection(ctx) {
 <div role="tabpanel" id="${tid("pages")}" data-label="${esc(m.ui.pagesCol)}">${pages ? `<ul class="inv-list">${pages}</ul>` : none}</div>
 <div role="tabpanel" id="${tid("cookies")}" data-label="${esc(m.ui.cookiesCol)}">${x.cookies.length ? `<ul class="inv-list">${x.cookies.map((ck) => `<li>${code(ck)}</li>`).join("")}</ul>` : none}</div></div></div></details></li>`;
   });
+  if (containers) out.unshift(containers);
   const skippedN = skipped.reduce((a, [, k]) => a + k, 0);
   if (skipped.length) {
     out.push(`<li><details class="card inv" id="inv-out-of-scope"><summary><span class="t">${esc(m.ui.outOfScopeStatus)}</span>${plain(t.requests(skippedN, bold(skippedN)))}<span class="inv-m">${esc(skipped.slice(0, 3).map(([v]) => v).join(", "))}${skipped.length > 3 ? " …" : ""}</span></summary><div class="body"><ul class="inv-list">${skipped.map(([v, k]) => `<li><span>${esc(v)}</span>${badge("muted", m.ui.outOfScopeStatus)}<span class="inv-n">${t.requests(k, bold(k))}</span></li>`).join("")}</ul></div></details></li>`);

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>`;
 }