npm - @dreamdata_io/verify-tracking - Versions diffs - 0.1.0 → 0.1.1 - Mend

@dreamdata_io/verify-tracking 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +52 -25
package/dist/cli.js +54 -0
package/dist/cli.js.map +1 -1
package/dist/config/env.js.map +1 -1
package/dist/review/dashboard.js +37 -0
package/dist/review/dashboard.js.map +1 -0
package/dist/review/data.js +185 -0
package/dist/review/data.js.map +1 -0
package/dist/review/emit.js +66 -0
package/dist/review/emit.js.map +1 -0
package/dist/review/open.js +53 -0
package/dist/review/open.js.map +1 -0
package/dist/version.js +1 -1
package/package.json +2 -1
package/scripts/install.sh +43 -3
package/verification/review/index.html +1810 -0

package/verification/review/index.html ADDED Viewed

@@ -0,0 +1,1810 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Verification Console</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<style>
+  /*
+   * Palette and metrics come from the Verification Console design. It is a
+   * deliberately single-theme page: an internal console pinned to one look,
+   * so every colour is painted explicitly rather than inherited, and there is
+   * no dark variant to keep in step.
+   */
+  :root {
+    --navy: #24466c;
+    --navy-mid: #8fb0c4;
+    --ground: #f4f5f7;
+    --surface: #ffffff;
+    --line: #e2e8f0;
+    --hair: #eef1f5;
+    --muted: #63717e;
+    --faint: #a3aed0;
+    --body: #444;
+    --link: #0069c0;
+    --rail: #105bfb;
+    --pass: #238551;
+    --pass-bg: #ebf7ed;
+    --pass-line: #c2ebca;
+    --pass-ink: #02675c;
+    --fail: #cc301a;
+    --fail-bg: #fef2f2;
+    --fail-line: #edd7d5;
+    --fail-ink: #b4240f;
+    --warn: #66520c;
+    --warn-bg: #fff5d2;
+    --warn-line: #f6c77e;
+    --warn-callout: #fcf1db;
+    --neutral-bg: #f1f5f8;
+    --info-bg: #eff5fe;
+    --info-line: #d6e4f8;
+    --tint: #f6fafb;
+    --tint-line: #e7eff3;
+    --panel: #f5f9fa;
+    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body {
+    background: var(--ground);
+    color: #000;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  .app { display: flex; height: 100vh; position: relative; min-width: 1040px; overflow: hidden; }
+  /* ── Sidebar ───────────────────────────────────────────────────── */
+  .side {
+    width: 308px; flex: 0 0 308px; display: flex; flex-direction: column;
+    background: var(--surface); border-right: 1px solid var(--line); overflow: hidden;
+  }
+  .side-head {
+    display: flex; align-items: center; gap: 8px;
+    padding: 14px 16px; border-bottom: 1px solid var(--hair);
+  }
+  .side-title { font-size: 13px; font-weight: 600; letter-spacing: -.01em; flex: 1; }
+  .icon-btn {
+    border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
+    width: 26px; height: 26px; cursor: pointer; color: var(--muted);
+    font-size: 13px; line-height: 1; flex: 0 0 auto;
+  }
+  .icon-btn:hover { background: var(--tint); }
+  .side-block {
+    padding: 14px 16px; border-bottom: 1px solid var(--hair);
+    display: flex; flex-direction: column; gap: 10px;
+  }
+  .side-search { padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
+  .eyebrow {
+    font-size: 11px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .06em; color: var(--muted);
+  }
+  .field { display: flex; flex-direction: column; gap: 4px; }
+  .field label { font-size: 11px; font-weight: 600; color: var(--muted); }
+  .field input {
+    font: inherit; font-size: 12.5px; padding: 6px 9px; width: 100%;
+    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: #000;
+  }
+  .field input:focus-visible { outline: 2px solid var(--rail); outline-offset: -1px; border-color: var(--rail); }
+  .btn {
+    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
+    border: 1px solid var(--line); background: var(--surface); color: #000;
+    border-radius: 6px; padding: 6px 12px; height: 30px; white-space: nowrap;
+  }
+  .btn:hover { background: var(--tint); }
+  .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
+  .btn.primary:hover { background: #1d3a5b; }
+  .btn.full { width: 100%; }
+  .notice {
+    font-size: 11.5px; color: var(--muted); background: var(--neutral-bg);
+    border: 1px solid var(--hair); border-radius: 6px; padding: 7px 9px; line-height: 1.45;
+  }
+  .notice code {
+    font-family: var(--mono); font-size: 11px; display: block; margin-top: 4px;
+    color: var(--navy); word-break: break-all; user-select: all;
+  }
+  .site-list { flex: 1; overflow-y: auto; padding: 0 10px 16px; }
+  .site {
+    position: relative; padding: 7px 10px; border-radius: 8px;
+    cursor: pointer; margin-bottom: 1px; border: 1px solid transparent;
+  }
+  .site:hover { background: var(--tint); }
+  .site.on { border-color: var(--info-line); background: var(--info-bg); }
+  .site-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
+  .site-slug {
+    font-size: 12.5px; font-weight: 600; font-family: var(--mono);
+    white-space: nowrap; flex: 0 0 auto;
+  }
+  .site-host {
+    font-size: 11px; color: var(--muted); white-space: nowrap;
+    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
+  }
+  .site-when { font-size: 10.5px; color: var(--faint); white-space: nowrap; flex: 0 0 auto; }
+  .site-tags { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0; }
+  .side-rail {
+    width: 48px; flex: 0 0 48px; display: flex; flex-direction: column; align-items: center;
+    gap: 12px; padding: 14px 0; background: var(--surface); border-right: 1px solid var(--line);
+  }
+  .side-rail .vert {
+    writing-mode: vertical-rl; font-size: 11px; letter-spacing: .08em;
+    text-transform: uppercase; color: var(--muted);
+  }
+  /* Pills, shared by the sidebar, header and cause cards. */
+  .pill {
+    font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    border-radius: 4px; padding: 1px 6px; font-size: 10.5px;
+  }
+  .pill.lg { font-size: 12px; border-radius: 99px; padding: 2px 10px; border-style: solid; border-width: 1px; }
+  .pill.good { color: var(--pass); background: var(--pass-bg); border-color: var(--pass-line); }
+  .pill.bad { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-line); }
+  .pill.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
+  .pill.neutral { color: var(--muted); background: var(--neutral-bg); border-color: var(--line); }
+  .more { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
+  /* ── Main column ───────────────────────────────────────────────── */
+  main { flex: 1; min-width: 520px; display: flex; flex-direction: column; overflow: hidden; }
+  .top {
+    padding: 16px 24px 14px; background: var(--surface);
+    border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 16px;
+  }
+  .top h1 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
+  .top-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+  .top-meta {
+    font-size: 12px; color: #666; margin-top: 5px;
+    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
+  }
+  .top-meta a {
+    font-size: 13px; font-weight: 600; color: var(--link);
+    display: inline-flex; align-items: center; gap: 5px;
+  }
+  .top-meta a:hover { color: #08548a; text-decoration: underline; }
+  .top-meta .sep { color: #cbd5e1; }
+  .top-meta .mono { font-family: var(--mono); }
+  /* The header's right column: the action, then where the files it produced live. */
+  .top-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
+  .top-note {
+    font-size: 11px; color: var(--muted); text-align: right; max-width: 260px;
+  }
+  .top-note .mono { font-family: var(--mono); word-break: break-all; user-select: all; }
+  .scroll { flex: 1; overflow-y: auto; padding: 20px 24px 60px; }
+  .col { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
+  /* ── Summary card ──────────────────────────────────────────────────
+   * The verdict sits on white with a status-coloured rail rather than on a
+   * navy slab: the tone is carried by the rail and the headline colour, so
+   * the card reads as part of the same stack as the question cards below,
+   * and the diagnosis rides in it as a disclosure instead of a second block.
+   */
+  .summary {
+    border-radius: 12px; background: var(--surface);
+    border: 1px solid var(--line); overflow: hidden;
+  }
+  .summary-top { display: flex; align-items: stretch; gap: 14px; padding: 16px 18px; }
+  .summary-rail { width: 5px; flex: 0 0 5px; border-radius: 99px; }
+  .summary-rail.good { background: var(--pass); }
+  .summary-rail.warn { background: #f59f19; }
+  .summary-rail.bad { background: var(--fail); }
+  .summary-main { flex: 1; min-width: 0; }
+  .summary-head { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
+  .summary-head.good { color: var(--pass-ink); }
+  .summary-head.warn { color: var(--warn); }
+  .summary-head.bad { color: var(--fail-ink); }
+  .summary-sub {
+    font-size: 13px; color: var(--body); margin-top: 5px;
+    line-height: 1.5; text-wrap: pretty;
+  }
+  .summary-stats {
+    flex: 0 0 auto; display: flex; gap: 20px;
+    align-items: flex-start; padding-left: 8px;
+  }
+  .stat { text-align: right; }
+  .stat-value { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
+  .stat-label {
+    font-size: 10.5px; color: var(--muted); text-transform: uppercase;
+    letter-spacing: .05em; margin-top: 2px; white-space: nowrap;
+  }
+  /* Diagnosis, as a disclosure inside the summary card */
+  .dx { border-top: 1px solid var(--hair); background: var(--tint); }
+  .dx > summary {
+    cursor: pointer; list-style: none; padding: 11px 18px;
+    font-size: 12.5px; font-weight: 600; color: var(--link);
+  }
+  .dx > summary::-webkit-details-marker { display: none; }
+  .dx > summary:hover { color: #08548a; }
+  .dx-body { padding: 0 18px 16px; }
+  .dx-clean {
+    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
+    padding: 11px 13px; font-size: 12.5px; line-height: 1.55;
+    color: var(--body); text-wrap: pretty;
+  }
+  .dx-causes { display: flex; flex-direction: column; gap: 9px; }
+  .cause {
+    background: var(--surface); border: 1px solid var(--line);
+    border-radius: 8px; padding: 12px 13px;
+  }
+  .cause-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .cause-rank { font-size: 11px; font-weight: 700; color: var(--muted); }
+  .cause-tag { font-size: 11.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; border: 1px solid transparent; }
+  .cause-tag.bad { color: var(--fail); background: var(--fail-bg); border-color: var(--fail-line); }
+  .cause-tag.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
+  .cause-tag.neutral { color: var(--muted); background: var(--neutral-bg); border-color: var(--line); }
+  .cause-grid {
+    display: grid; grid-template-columns: 74px 1fr; gap: 4px 10px;
+    margin-top: 10px; align-items: baseline;
+  }
+  .cause-key {
+    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
+  }
+  .cause-key.problem { color: var(--fail-ink); }
+  .cause-key.fix { color: var(--link); }
+  .cause-val { font-size: 13px; line-height: 1.5; color: #000; text-wrap: pretty; }
+  .cause-doc { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hair); }
+  .cause-doc a { font-size: 12px; font-weight: 600; color: var(--link); }
+  .dx-also { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
+  .dx-body details { margin-top: 9px; }
+  .dx-body details > summary {
+    cursor: pointer; font-size: 12px; font-weight: 600;
+    color: var(--link); list-style: none;
+  }
+  .dx-body details > summary::-webkit-details-marker { display: none; }
+  .dx-body details > div {
+    font-size: 12px; color: var(--body); margin-top: 6px; line-height: 1.55; text-wrap: pretty;
+  }
+  .section-label {
+    font-size: 11px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .07em; color: var(--muted); margin-top: 8px;
+  }
+  /* Question cards
+   *
+   * Two to a row, and reduced to the eyebrow plus the answer: the reasoning
+   * sentence and the evidence chips that used to sit under each answer now
+   * open in the detail panel, so the grid stays scannable at a glance. The
+   * selection ring is an inset overlay rather than a left rail, so picking a
+   * card never shifts its text.
+   */
+  .q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .q {
+    position: relative; background: var(--surface); border: 1px solid var(--line);
+    border-radius: 12px; padding: 13px 15px; cursor: pointer;
+    display: flex; flex-direction: column; gap: 5px;
+  }
+  .q:hover { border-color: var(--navy-mid); }
+  .q.on::after {
+    content: ""; position: absolute; inset: 0; pointer-events: none;
+    border: 2px solid var(--rail); border-radius: 12px;
+  }
+  .q-row { display: flex; align-items: center; gap: 8px; }
+  .q-label {
+    flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700;
+    text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
+  }
+  .q-answer {
+    font-size: 17px; font-weight: 650; letter-spacing: -.015em;
+    line-height: 1.3; text-wrap: pretty;
+  }
+  .q-more { flex: 0 0 auto; font-size: 11px; color: var(--link); font-weight: 600; white-space: nowrap; }
+  .flag-icon {
+    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+    width: 15px; height: 15px; border-radius: 50%; font-size: 10.5px; font-weight: 800;
+    line-height: 1;
+  }
+  .flag-icon.bad { color: var(--fail); background: var(--fail-bg); border: 1px solid var(--fail-line); }
+  .flag-icon.warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); }
+  /* The pageview card keeps a full row to itself: it carries the table. */
+  .q.wide { padding: 14px 16px 16px; gap: 0; }
+  .q.wide .q-row { align-items: baseline; }
+  .q.wide .q-answer { flex: 1; min-width: 0; }
+  .chip {
+    font-size: 11px; font-family: var(--mono); color: var(--navy);
+    background: var(--neutral-bg); border: 1px solid var(--tint-line);
+    border-radius: 5px; padding: 2px 7px;
+  }
+  .callout {
+    background: var(--warn-callout); border: 1px solid var(--warn-line);
+    border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
+    color: var(--warn); text-wrap: pretty;
+  }
+  /* Pageview table */
+  table.pv { width: 100%; border-collapse: collapse; margin-top: 12px; table-layout: fixed; }
+  table.pv th {
+    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .05em; color: var(--muted); padding: 0 8px 6px 0;
+  }
+  table.pv td { border-top: 1px solid var(--hair); padding: 9px 8px 9px 0; vertical-align: top; }
+  table.pv td.cell { padding: 7px 8px 7px 0; }
+  .pv-label { font-size: 12.5px; font-weight: 600; }
+  .obs.exp { background: var(--neutral-bg); border-color: var(--tint-line); }
+  .obs.exp .obs-text { color: var(--muted); font-weight: 600; }
+  .obs { border-radius: 6px; padding: 5px 8px; border: 1px solid transparent; }
+  .obs-top { display: flex; align-items: baseline; gap: 5px; }
+  .obs-mark { font-weight: 700; font-size: 12px; }
+  .obs-text { font-size: 12.5px; font-weight: 600; }
+  .obs-note { font-size: 11px; line-height: 1.4; margin-top: 2px; }
+  .obs.ok { background: var(--pass-bg); border-color: var(--pass-line); }
+  .obs.ok .obs-mark { color: var(--pass); }
+  .obs.ok .obs-text { color: var(--pass-ink); }
+  .obs.ok .obs-note { color: var(--muted); }
+  .obs.off { background: var(--fail-bg); border-color: var(--fail-line); }
+  .obs.off .obs-mark { color: var(--fail); }
+  .obs.off .obs-text { color: var(--fail-ink); }
+  .obs.off .obs-note { color: var(--fail-ink); }
+  .obs.blank { background: #f6f6f6; border-color: var(--hair); }
+  .obs.blank .obs-mark { color: var(--faint); }
+  .obs.blank .obs-text { color: var(--muted); font-weight: 400; }
+  .obs.blank .obs-note { color: var(--muted); }
+  /* ── Detail panel ──────────────────────────────────────────────── */
+  .detail {
+    position: absolute; top: 0; right: 0; bottom: 0; width: 52%; min-width: 560px; z-index: 5;
+    display: flex; flex-direction: column; background: var(--panel);
+    border-left: 1px solid #cbd5e1; box-shadow: -12px 0 32px rgba(36, 70, 108, .12); overflow: hidden;
+  }
+  .detail-head {
+    padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
+    display: flex; align-items: flex-start; gap: 10px;
+  }
+  .detail-title {
+    font-size: 14px; font-weight: 600; letter-spacing: -.01em;
+    margin-top: 3px; line-height: 1.35; text-wrap: pretty;
+  }
+  .detail-body {
+    flex: 1; overflow-y: auto; padding: 14px 16px 40px;
+    display: flex; flex-direction: column; gap: 14px;
+  }
+  .detail-lead {
+    font-size: 12.5px; line-height: 1.55; color: var(--navy); background: var(--info-bg);
+    border: 1px solid var(--info-line); border-radius: 8px; padding: 10px 12px; text-wrap: pretty;
+  }
+  .d-label {
+    font-size: 11px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .06em; color: var(--muted); margin-bottom: 7px;
+  }
+  .d-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 7px; }
+  .d-prose {
+    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
+    padding: 10px 12px; font-size: 12.5px; line-height: 1.55;
+    color: var(--body); text-wrap: pretty;
+  }
+  .d-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+  .close-btn {
+    border: 1px solid var(--line); background: var(--surface); border-radius: 6px;
+    padding: 0 9px; height: 26px; cursor: pointer; color: var(--muted);
+    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
+    white-space: nowrap; display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
+  }
+  .close-btn:hover { border-color: var(--navy-mid); color: var(--navy); }
+  .close-btn span { font-size: 10px; color: var(--faint); }
+  .d-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
+  .d-stack { display: flex; flex-direction: column; gap: 7px; }
+  .d-card-top { display: flex; align-items: center; gap: 7px; }
+  .status {
+    font-size: 10px; font-weight: 700; border-radius: 4px;
+    padding: 1px 6px; letter-spacing: .04em; white-space: nowrap;
+  }
+  .status.pass { color: var(--pass); background: var(--pass-bg); }
+  .status.fail { color: var(--fail); background: var(--fail-bg); }
+  .status.other { color: var(--warn); background: var(--warn-bg); }
+  .d-card-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
+  .d-card-detail { font-size: 12px; color: var(--body); line-height: 1.5; margin-top: 5px; text-wrap: pretty; }
+  .d-evidence {
+    font-size: 11px; font-family: var(--mono); color: var(--muted); background: #f6f6f6;
+    border-radius: 5px; padding: 6px 7px; margin-top: 6px;
+    white-space: pre-wrap; word-break: break-word;
+  }
+  .d-id { font-size: 10.5px; font-family: var(--mono); color: var(--faint); margin-top: 5px; }
+  .d-advice { background: var(--surface); border: 1px solid var(--warn-line); border-radius: 8px; padding: 10px 12px; }
+  .d-advice .d-label { color: var(--warn); margin-bottom: 5px; }
+  .d-advice-text { font-size: 12px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
+  .d-raw summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--link); }
+  .d-raw pre {
+    font-size: 11px; font-family: var(--mono); color: var(--body);
+    white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; line-height: 1.5;
+  }
+  /* ── GTM summary (top of the detail panel) ─────────────────────── */
+  .gtm {
+    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
+    padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 9px;
+  }
+  .gtm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+  .gtm-hint { font-size: 11px; color: var(--faint); line-height: 1.4; }
+  .gtm-c { display: flex; flex-direction: column; gap: 7px; }
+  .gtm-c + .gtm-c { border-top: 1px solid var(--hair); padding-top: 9px; }
+  .gtm-c-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
+  .gtm-id { font-size: 12px; font-weight: 700; font-family: var(--mono); }
+  .gtm-meta, .gtm-ships { font-size: 11px; color: var(--muted); }
+  .gtm-ships { color: var(--body); }
+  .gtm-empty { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
+  .gtm-tag-title { font-size: 11.5px; font-weight: 600; color: var(--body); }
+  .gtm-note { font-size: 11px; color: var(--warn); line-height: 1.45; margin-top: 3px; }
+  .gtm-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
+  .gtm-row {
+    display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline;
+    border-left: 3px solid var(--hair); padding: 4px 0 4px 8px; border-radius: 2px;
+  }
+  .gtm-row.gate { border-left-color: var(--warn); background: var(--warn-bg); }
+  .gtm-k {
+    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .05em; color: var(--muted);
+  }
+  .gtm-row.gate .gtm-k { color: var(--warn); }
+  .gtm-v { font-size: 12px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
+  .grid-wrap {
+    background: var(--surface); border: 1px solid var(--line);
+    border-radius: 8px; padding: 10px 12px; overflow-x: auto;
+  }
+  table.mx { width: 100%; border-collapse: collapse; }
+  table.mx th {
+    text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: .04em; color: var(--muted); padding: 0 8px 6px 0;
+  }
+  table.mx td { border-top: 1px solid var(--hair); padding: 7px 8px 7px 0; }
+  table.mx td.phase { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
+  .mx-cell { display: flex; align-items: center; gap: 5px; }
+  .mx-cell i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
+  .mx-cell span { font-size: 11.5px; color: var(--body); font-family: var(--mono); }
+  .mx-status { font-size: 10px; color: var(--faint); margin-top: 2px; padding-left: 14px; }
+  .empty { padding: 14px 12px; font-size: 12px; color: var(--muted); }
+  .foot {
+    font-size: 11px; color: var(--faint); font-family: var(--mono);
+    padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface);
+    line-height: 1.6; word-break: break-word;
+  }
+  :focus-visible { outline: 2px solid var(--rail); outline-offset: 2px; }
+</style>
+</head>
+<body>
+<script>
+  /**
+   * Which dataset to show: data.js by default, or ?data=local-data.js for a
+   * set built from another reports directory (a replayed local-model run).
+   *
+   * document.write is the price of keeping this to one page: the script below
+   * reads window.__REVIEW_DATA__ at parse time, and a parser-inserted write is
+   * the only way to load a chosen file synchronously from a file:// page with
+   * no build step. The name is matched against a plain filename beside this
+   * page, so a hand-edited query string cannot point it at an arbitrary URL.
+   */
+  (function () {
+    // A self-contained page (the one the CLI writes) has already assigned its
+    // data above, and there is no sibling file to load — nor any to be misled
+    // by, if it were ever saved next to someone else's data.js.
+    if (window.__REVIEW_DATA__) return;
+    var requested = new URLSearchParams(location.search).get('data') || 'data.js';
+    var file = /^[A-Za-z0-9._-]+\.js$/.test(requested) ? requested : 'data.js';
+    window.__REVIEW_DATA_FILE__ = file;
+    document.write('<scr' + 'ipt src="' + file + '"><\/scr' + 'ipt>');
+  })();
+</script>
+<div class="app" id="app"></div>
+<script>
+"use strict";
+const DATA = window.__REVIEW_DATA__ || { slugs: [] };
+const DATA_FILE = window.__REVIEW_DATA_FILE__ || 'data.js';
+/**
+ * build.ts nests each run under `slug.report` and splits the phases into
+ * `variants`. Everything below wants one flat report per account with a
+ * `phases` array, which is the shape the report JSON itself has — so the
+ * adaptation happens once, here, rather than in every model function.
+ */
+const REPORTS = (DATA.slugs || [])
+  .filter((s) => s && s.report)
+  .map((s) => ({
+    slug: s.slug,
+    slugRecordedAs: s.slugRecordedAs || null,
+    url: s.report.url,
+    timestamp: s.report.timestamp,
+    deployment: s.report.deployment || {},
+    result: s.report.result || {},
+    httpProbe: s.report.httpProbe || null,
+    phases: (s.report.variants || []).map((v) => v.evidence).filter(Boolean),
+  }));
+// ── Static tables ────────────────────────────────────────────────────
+/**
+ * Which automated checks belong behind each question. A check may appear
+ * under more than one: `second-page-keeps-tracking` is evidence both for what
+ * the site is built on and for whether the page view fires everywhere.
+ */
+const CHECK_MAP = {
+  script: ['script-installed', 'global-handoff', 'first-party-delivery-host'],
+  install: ['script-installed'],
+  tech: ['second-page-keeps-tracking', 'soft-nav-keeps-tracking'],
+  cmp: ['clean-consent-mode-default', 'consent-mode-signal'],
+  // The v2 check alone: `cmp` above answers "does the banner's choice get
+  // through", this one answers "is the mechanism installed at all", and the
+  // two are separate questions on purpose — see consentModeModel.
+  consentmode: ['consent-mode-v2-enabled'],
+  pageview: ['clean-before-consent', 'grant-enables-normal', 'reject-blocks-normal', 'cookieless-covers-unconsented',
+    'page-view-counted-once', 'second-page-keeps-tracking', 'second-page-honours-consent', 'anonymous-id-stable',
+    'grant-sets-identity-cookies', 'reject-writes-no-identity', 'request-payload-complete',
+    'request-delivery-accepted', 'console-clean', 'collection-complete'],
+};
+const VERDICT_MAP = {
+  script: ['script-presence', 'global-object'],
+  install: ['script-presence'],
+  tech: ['event-behavior'],
+  cmp: ['consent-mode'],
+  consentmode: ['consent-mode'],
+  pageview: ['core-tracking', 'event-behavior', 'cookies', 'debugging-signals'],
+};
+const VENDOR_LABEL = {
+  onetrust: 'OneTrust',
+  cookiebot: 'Cookiebot',
+  usercentrics: 'Usercentrics',
+  cookieyes: 'CookieYes',
+  cookiescript: 'CookieScript',
+  complianz: 'Complianz',
+  osano: 'Osano',
+  trustarc: 'TrustArc',
+  termly: 'Termly',
+  ketch: 'Ketch',
+  hubspot: 'HubSpot',
+  pardot: 'Pardot',
+};
+const vendorLabel = (v) => VENDOR_LABEL[String(v).toLowerCase()] || String(v).charAt(0).toUpperCase() + String(v).slice(1);
+const FRAMEWORK_LABEL = {
+  next: 'Next.js',
+  nuxt: 'Nuxt',
+  remix: 'Remix',
+  sveltekit: 'SvelteKit',
+  gatsby: 'Gatsby',
+  angular: 'Angular',
+};
+const PHASES = [
+  { key: 'clean', label: 'Before any choice' },
+  { key: 'grant', label: 'Accept' },
+  { key: 'reject', label: 'Reject' },
+];
+const METHOD_LABEL = {
+  'google-tag-manager': 'Google Tag Manager',
+  'hardcoded-and-tag-manager': 'GTM + page snippet',
+  'hardcoded-snippet': 'Page snippet',
+  'server-side': 'Server-side',
+  'bundled-no-global': 'npm package',
+  'not-installed': 'Not installed',
+};
+const METHOD_SUB = {
+  'google-tag-manager': 'The loader ships from the site’s own container, so changes are made in GTM rather than in the site code.',
+  'hardcoded-and-tag-manager': 'One loader comes from the container and another sits in the page source, so a change may need both a GTM edit and a release.',
+  'hardcoded-snippet': 'The snippet sits in the page source, so any change needs a website release.',
+  'bundled-no-global': 'The SDK is compiled into the app’s own JavaScript, so any change needs a developer release.',
+  'server-side': 'Events are sent from their servers rather than the visitor’s browser.',
+  'not-installed': 'Nothing was found in the page, on the wire, or in the tag manager container.',
+};
+/**
+ * Reader-facing names for the cause catalog. Kept in step with
+ * src/analysis/diagnosis/copy.en.ts — a missing id falls back to the id
+ * itself, so a newly added cause renders readably before it is listed here.
+ */
+const CAUSE_LABELS = {
+  'page-unreadable': 'Site blocked our browser',
+  'third-party-segment': 'Runs Segment, not Dreamdata',
+  'banner-undrivable': 'Banner couldn’t be answered',
+  'not-installed': 'No tracking script installed',
+  'requests-never-reach-dreamdata': 'Nothing reaches Dreamdata',
+  'cookieless-not-installed': 'No cookieless tracking',
+  'cookieless-shares-normal-gate': 'Cookieless blocked by consent',
+  'consent-not-persisted-across-reload': 'Consent lost on reload',
+  'consent-mode-not-wired': 'Consent Mode not wired up',
+  'consent-mode-never-called': 'Consent Mode not enabled',
+  'consent-mode-set-late': 'Consent platform loads too late',
+  'consent-gate-wrong-signal': 'Tag gated on a signal nothing grants',
+  'normal-bundle-never-fires': 'Consented visitors not tracked',
+  'router-no-page-call': 'SPA: only the first page tracked',
+  'entry-page-only': 'Only the landing page tracked',
+  'consent-default-not-denied': 'Tracks before the visitor answers',
+  'cmp-signal-not-emitted': 'Banner choice never passed on',
+  'combined-tag-gate-failed': 'Script’s consent gate did not hold',
+  'no-consent-gate-on-bundle': 'Script ignores the consent choice',
+  'navigation-treated-as-consent': 'Navigating counted as consent',
+  'reject-writes-identity': 'Identity cookies set after refusal',
+  'duplicate-two-builds': 'Two script builds, double counting',
+  'duplicate-replayed-buffer': 'Events delivered twice',
+  'duplicate-same-build': 'Snippet installed twice',
+  'snippet-order': 'Bundles load in the wrong order',
+  'refusal-not-passed-to-consent-mode': 'Refusal never reaches Consent Mode',
+  'consent-mode-v1-only': 'Consent Mode v1, not v2',
+  'consent-mode-region-shadowed': 'Permissive consent default per region',
+  'consent-gate-broad-signal': 'Tag gated on the wrong consent signal',
+};
+const GRID_COLUMNS = [
+  { key: 'bundle', label: 'Script in page' },
+  { key: 'load', label: 'Event on load' },
+  { key: 'nav', label: 'Event after nav' },
+  { key: 'identity', label: 'Visitor ID' },
+  { key: 'consent', label: 'Consent Mode' },
+];
+const STATUS_RANK = { fail: 0, warn: 1, inconclusive: 2, pass: 3, not_applicable: 4 };
+const STATUS_COLOR = {
+  pass: '#238551', fail: '#cc301a', warn: '#f59f19', inconclusive: '#f59f19',
+  not_applicable: '#cbd5e1', missing: '#eef1f5', info: '#a3aed0',
+};
+// ── Helpers ──────────────────────────────────────────────────────────
+function esc(s) {
+  return String(s == null ? '' : s).replace(/[&<>"']/g, (c) =>
+    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+function host(url) {
+  try { return new URL(url).hostname.replace(/^www\./, ''); } catch (e) { return url || '—'; }
+}
+function when(ts) {
+  if (!ts) return '—';
+  const d = new Date(ts);
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' +
+    d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+function libraries(report) {
+  const out = [];
+  for (const p of report.phases || []) {
+    for (const l of (p.network && p.network.observedLibraries) || []) if (!out.includes(l)) out.push(l);
+  }
+  return out;
+}
+function bundleNames(report) {
+  const dep = report.deployment || {};
+  const inst = dep.install || {};
+  const set = new Set([].concat(inst.domBundles || [], inst.tagManagerBundles || []));
+  if (dep.normalBundleConfigured) set.add('normal');
+  if (dep.cookielessBundleConfigured) set.add('cookieless');
+  const libs = libraries(report);
+  if (libs.some((l) => /-cl|cookieless/i.test(l))) set.add('cookieless');
+  if (libs.some((l) => /^analytics v[23]/i.test(l))) set.add('normal');
+  const v3 = libs.some((l) => /v3/.test(l));
+  const names = [];
+  if (set.has('normal')) names.push(v3 ? 'Future analytics v3.0' : 'Analytics v2.0@next');
+  if (set.has('cookieless')) names.push('Cookieless analytics v2.0@next');
+  return names;
+}
+function pill(tag, big) {
+  const kind = tag.good ? 'good' : tag.bad ? 'bad' : tag.warn ? 'warn' : 'neutral';
+  return `<span class="pill ${big ? 'lg ' : ''}${kind}" title="${esc(tag.title || '')}">${esc(tag.label)}</span>`;
+}
+// ── Models ───────────────────────────────────────────────────────────
+function tagsFor(report) {
+  const dep = report.deployment || {};
+  const causes = (dep.diagnosis || {}).causes || [];
+  if (causes.length) {
+    return causes.slice(0, 2).map((c) => ({
+      label: CAUSE_LABELS[c.id] || c.id,
+      title: c.problem || c.id,
+      bad: c.kind !== 'hardening' && c.kind !== 'not-a-verdict',
+      warn: c.kind === 'hardening',
+      neutral: c.kind === 'not-a-verdict',
+      good: false,
+    }));
+  }
+  if ((dep.checks || []).some((c) => c.status === 'fail')) {
+    return [{ label: 'Failures with no known cause', title: 'Checks failed but no catalogued cause explains them', bad: true }];
+  }
+  return [{ label: 'Tracking is healthy', title: 'Every check passed for the way this site is set up', good: true }];
+}
+/**
+ * The verdict line at the top of the page: a tone, a headline, one sentence,
+ * and the three counts worth seeing without opening anything. Every value is
+ * read off the report — no wording is chosen here that the checks and the
+ * cause catalog have not already decided.
+ */
+function healthModel(report, dx) {
+  const dep = report.deployment || {};
+  const checks = dep.checks || [];
+  const passed = checks.filter((c) => c.status === 'pass').length;
+  const failed = checks.filter((c) => c.status === 'fail').length;
+  const driven = (dep.matrix || []).length;
+  const bad = dx.causes.filter((c) => c.bad);
+  const warn = dx.causes.filter((c) => c.warn);
+  const tone = bad.length || (failed && !dx.causes.length) ? 'bad' : warn.length ? 'warn' : 'good';
+  const headline = bad.length
+    ? (bad.length === 1 ? 'One thing is breaking tracking' : bad.length + ' things are breaking tracking')
+    : failed && !dx.causes.length
+    ? 'Checks failed with no known cause'
+    : warn.length
+    ? (warn.length === 1 ? 'Nothing is broken — one thing to harden' : 'Nothing is broken — ' + warn.length + ' things to harden')
+    : dx.causes.length
+    ? 'Not a verdict about this site'
+    : 'Tracking is healthy';
+  const sub = bad.length
+    ? bad[0].problem
+    : failed && !dx.causes.length
+    ? failed + ' check' + (failed === 1 ? '' : 's') + ' failed, but no catalogued cause explains them — worth a look by hand.'
+    : warn.length
+    ? warn[0].problem
+    : dx.causes.length
+    ? dx.causes[0].problem
+    : 'Every check passed for the way this site is set up, so there is nothing for the team to change right now.';
+  return {
+    tone,
+    headline,
+    sub,
+    stats: [
+      { value: passed + '/' + checks.length, label: 'Checks passed' },
+      { value: String(dx.causes.length), label: dx.causes.length === 1 ? 'Cause' : 'Causes' },
+      { value: String(driven), label: 'States tested' },
+    ],
+  };
+}
+function diagnosisModel(report) {
+  const dep = report.deployment || {};
+  const dx = dep.diagnosis || {};
+  const list = dx.causes || [];
+  const causes = list.map((c, i) => {
+    const url = typeof c.docUrl === 'string' && c.docUrl.startsWith('https://developer.dreamdata.io/') ? c.docUrl : null;
+    return {
+      rank: list.length > 1 ? String(i + 1) : '',
+      label: CAUSE_LABELS[c.id] || c.id,
+      bad: c.kind !== 'hardening' && c.kind !== 'not-a-verdict',
+      warn: c.kind === 'hardening',
+      neutral: c.kind === 'not-a-verdict',
+      problem: c.problem || '',
+      fix: c.fix || '',
+      docUrl: url,
+      docTitle: c.docTitle || 'Dreamdata docs',
+    };
+  });
+  const everyHardening = causes.length > 0 && causes.every((c) => c.warn);
+  const onlyNotAVerdict = causes.length > 0 && causes.every((c) => c.neutral);
+  // With no causes the disclosure still has to say something true, and "nothing
+  // is wrong" is only true when nothing failed either — a run with failures the
+  // catalog cannot name must not read as a clean bill of health.
+  const failed = (dep.checks || []).filter((c) => c.status === 'fail').length;
+  return {
+    head: onlyNotAVerdict ? 'Not a verdict about this site'
+      : everyHardening ? 'Nothing is broken — one thing to harden'
+      : causes.length ? 'What is wrong, and what to do about it'
+      : failed ? 'Which checks failed without a named cause'
+      : 'Nothing is wrong with this install',
+    causes,
+    cleanNote: causes.length === 0
+      ? (failed
+          ? failed + ' check' + (failed === 1 ? '' : 's') + ' failed, but no catalogued cause explains ' +
+            (failed === 1 ? 'it' : 'them') + '. Open the question cards below to read the failing checks and their evidence.'
+          : 'Every check passed for the way this site is set up, so there is nothing for the team to change right now.')
+      : '',
+    also: (dx.alsoFired || []).length
+      ? 'Also found, outside the top causes: ' + dx.alsoFired.map((id) => CAUSE_LABELS[id] || id).join('; ') + '.'
+      : '',
+    advice: (report.result || {}).remediationAdvice || '',
+  };
+}
+/**
+ * Which question cards (and the pageview card) have a diagnosis cause
+ * pointing into their evidence, so the card can carry a small warning/error
+ * mark instead of making the reader open every card to find the one the
+ * diagnosis panel is actually talking about. Driven off the same
+ * `explains` list the diagnosis panel already carries — CHECK_MAP is the
+ * one place that already says which checks belong to which card.
+ */
+function causeFlagsForQuestions(report) {
+  const dep = report.deployment || {};
+  const causes = (dep.diagnosis || {}).causes || [];
+  const flags = {};
+  for (const c of causes) {
+    const bad = c.kind !== 'hardening' && c.kind !== 'not-a-verdict';
+    const warn = c.kind === 'hardening';
+    if (!bad && !warn) continue;
+    const explains = c.explains || [];
+    if (!explains.length) continue;
+    const label = CAUSE_LABELS[c.id] || c.id;
+    for (const qId of Object.keys(CHECK_MAP)) {
+      if (!CHECK_MAP[qId].some((id) => explains.includes(id))) continue;
+      const cur = flags[qId] || { bad: false, warn: false, labels: [] };
+      cur.bad = cur.bad || bad;
+      cur.warn = cur.warn || warn;
+      cur.labels.push(label);
+      flags[qId] = cur;
+    }
+  }
+  return flags;
+}
+function flagIcon(flag) {
+  if (!flag) return '';
+  const cls = flag.bad ? 'bad' : 'warn';
+  const mark = flag.bad ? '✕' : '!';
+  return `<span class="flag-icon ${cls}" title="${esc(flag.labels.join('; '))}">${mark}</span>`;
+}
+function consentShape(report) {
+  const dep = report.deployment || {};
+  const cmp = dep.cmp || {};
+  const driven = (cmp.drivenPhases || []).length > 0;
+  return {
+    collects: !!cmp.detected,
+    usable: driven || !cmp.detected,
+    neverDriven: !!cmp.detected && !driven,
+    installed: bundleNames(report).length > 0 || !!dep.normalBundleConfigured || !!dep.cookielessBundleConfigured,
+  };
+}
+/**
+ * Whether an unconsented state (clean/reject) is on the hook for a
+ * cookieless page view, per the backend's own cookieless-covers-unconsented
+ * check — not_applicable means the account deliberately ships no cookieless
+ * bundle (its container says so), which is a design choice, not a gap. Only
+ * "fail" or "pass" means this phase is actually held to a cookieless event.
+ */
+function cookielessVerdict(phaseKey, dep) {
+  const check = (dep.checks || []).find((c) => c.id === 'cookieless-covers-unconsented');
+  if (!check || !(check.phases || []).includes(phaseKey)) return null;
+  if (check.status === 'not_applicable') return 'not-required';
+  if (check.status === 'inconclusive') return 'not-testable';
+  return 'required';
+}
+function expectedFor(phaseKey, shape, dep) {
+  if (!shape.installed) return 'No event';
+  if (!shape.collects) return '1 normal';
+  if (phaseKey === 'grant') return '1 normal';
+  if (!shape.usable) return 'Not testable';
+  const verdict = cookielessVerdict(phaseKey, dep);
+  // A banner exists and this state has not granted consent, so a cookieless
+  // page view is what compliant tracking looks like here by default — no
+  // state should ever have bare "nothing" as its expected outcome. The one
+  // exception is an account explicitly built without a cookieless bundle
+  // (verdict 'not-required'), which is a coverage decision the check itself
+  // already names, not a silent expectation of nothing.
+  if (verdict === 'not-required') return 'Not required';
+  if (verdict === 'not-testable') return 'Not testable';
+  return '1 cookieless';
+}
+function observedCell(counts, expectNormal, expectCookieless, blank) {
+  if (blank) return { kind: 'blank', text: 'Not tested', note: 'banner could not be driven' };
+  const n = counts.normal || 0;
+  const c = counts.cookieless || 0;
+  const parts = [];
+  if (n) parts.push(n + ' normal');
+  if (c) parts.push(c + ' cookieless');
+  const text = parts.length ? parts.join(' + ') : 'No event';
+  let ok;
+  if (expectCookieless) ok = c > 0;
+  else if (expectNormal) ok = n > 0;
+  else ok = true;
+  return { kind: ok ? 'ok' : 'off', text };
+}
+function pageviewModel(report) {
+  const dep = report.deployment || {};
+  const shape = consentShape(report);
+  const byPhase = {};
+  for (const m of dep.matrix || []) byPhase[m.phase] = m;
+  const rule = !shape.installed
+    ? 'No Dreamdata script is installed on this site, so no page view can fire in any state. Nothing here is a tracking fault — the install has to happen first.'
+    : !shape.usable
+    ? 'The consent banner was found but this run never managed to open it, so only the untouched first load could be judged. The Accept and Reject columns are left blank on purpose — they were never observed.'
+    : !shape.collects
+    ? 'No consent banner was found on this site, so nothing gates the tracking — we expect a normal page view in every state, before and after any choice.'
+    : 'This site collects consent, so before a choice and after a refusal we expect a cookieless page view, and a normal one once consent is granted — unless the account is deliberately built without a cookieless bundle, in which case those states are marked not required rather than expected to record nothing.';
+  const rows = PHASES.map((p) => {
+    const m = byPhase[p.key];
+    const blank = !m || (p.key !== 'clean' && shape.neverDriven);
+    const verdict = p.key !== 'grant' ? cookielessVerdict(p.key, dep) : null;
+    const expectCookieless = shape.installed && shape.collects && p.key !== 'grant' && verdict !== 'not-required' && verdict !== 'not-testable';
+    const expectNormal = shape.installed && (p.key === 'grant' || !shape.collects);
+    const sp = (m && m.secondPage) || null;
+    const cells = [
+      observedCell({ normal: m ? m.normalRequests : 0, cookieless: m ? m.cookielessRequests : 0 },
+        expectNormal, expectCookieless, blank),
+      sp && sp.observed
+        ? observedCell({ normal: sp.normalRequests, cookieless: sp.cookielessRequests },
+            expectNormal, expectCookieless, blank)
+        : { kind: 'blank', text: blank ? 'Phase not tested' : 'No reachable link' },
+      (function () {
+        const ids = (m && m.identityCookiesSet) || [];
+        if (blank) return { kind: 'blank', text: 'Not tested' };
+        if (p.key === 'grant') return ids.length ? { kind: 'ok', text: ids.join(', ') } : { kind: 'off', text: 'Nothing stored' };
+        return ids.length ? { kind: 'off', text: ids.join(', '), note: 'written without consent' } : { kind: 'ok', text: 'Nothing stored' };
+      })(),
+    ];
+    return { label: p.label, expected: expectedFor(p.key, shape, dep), cells };
+  });
+  const dupe = (dep.checks || []).find((c) => c.id === 'page-view-counted-once');
+  return {
+    answer: (function () {
+      const off = rows.some((r) => r.cells.some((c) => c.kind === 'off'));
+      if (!shape.installed) return 'No — no script installed';
+      if (!shape.usable) return 'Partly tested — the banner never opened';
+      return off ? 'No' : 'Yes';
+    })(),
+    rule,
+    rows,
+    callout: dupe && (dupe.status === 'fail' || dupe.status === 'warn') ? dupe.detail : '',
+  };
+}
+/**
+ * "Is Google Consent Mode v2 enabled?"
+ *
+ * Rendered only when the page carries a Google tag, which is the same gate
+ * consentModeV2Check applies (sawGoogleTag) and deliberately NOT "was
+ * Dreamdata installed through GTM". The two are different sets and the
+ * difference decides real reports: fama.io installs the snippet directly in
+ * its HTML and Consent Mode never being called is its entire diagnosis, while
+ * sovos.com is a tag-manager install with no gtag.js on the page at all, so
+ * there is nothing to ask about. Gating on install method would hide the card
+ * on the first and show an unanswerable one on the second.
+ */
+function consentModeModel(report) {
+  const dep = report.deployment || {};
+  const v = dep.consentModeV2;
+  const phases = report.phases || [];
+  const sawGoogleTag = phases.some((p) => p.consent && p.consent.googleTagDataExists);
+  if (!v || !sawGoogleTag) return null;
+  const ANSWERS = {
+    'enabled': 'Enabled',
+    'enabled-not-yet-answered': 'Enabled, not answered yet',
+    'misconfigured': 'Misconfigured',
+    'not-installed': 'Not installed',
+    'unreadable': 'Unreadable',
+  };
+  const CAUSE_SENTENCE = {
+    'no-consent-mode': 'A Google tag created the consent signal entries itself, which is why analytics_storage looks readable — but no consent platform ever set one, so a tag waiting on the visitor’s choice waits forever.',
+    'v1-only': 'Running v1: the two advertising signals v2 added (ad_user_data, ad_personalization) are never declared. Analytics consent still works.',
+    'not-yet-answered': 'No consent update was applied during this run, which is the correct and normal state for a visitor who has not answered the banner.',
+    'region-shadowed-default': 'The consent platform allows analytics storage globally and blocks it per region. Google applies the right one, but anything reading the dataLayer commands directly sees the permissive value and takes it for a decision.',
+    'wait-period-timed-out': 'A wait_for_update window closed with no answer in it, so tags fell back to the declared defaults rather than the visitor’s choice.',
+    'set-late': 'Consent was set after tags had already run, so the tags that fire first see no consent state at all.',
+  };
+  // The settled read of whichever phase has one; these flags do not differ
+  // between phases except for wasSetLate, which the verdict already folds in.
+  const ics = (phases.map((p) => p.consent && p.consent.ics).filter(Boolean))[0] || null;
+  const chips = [];
+  if (v.version === 'v2' || v.version === 'v1') chips.push('Consent Mode ' + v.version);
+  if (ics) {
+    chips.push('ics.active: ' + ics.active);
+    chips.push('usedUpdate: ' + ics.usedUpdate);
+    if (ics.wasSetLate === true) chips.push('wasSetLate: true');
+    if (ics.waitPeriodTimedOut === true) chips.push('waitPeriodTimedOut: true');
+    chips.push(ics.entryKeys.length + ' signal' + (ics.entryKeys.length === 1 ? '' : 's') + ' declared');
+  }
+  const sentences = (v.causes || []).map((id) => CAUSE_SENTENCE[id]).filter(Boolean);
+  return {
+    id: 'consentmode',
+    label: 'Consent Mode v2',
+    question: 'Is Google Consent Mode v2 enabled?',
+    answer: ANSWERS[v.outcome] || v.outcome,
+    sub: sentences.length
+      ? sentences.join(' ')
+      : 'Both signals v2 added are declared and gtag(‘consent’, …) is in use.',
+    chips,
+  };
+}
+function questionModels(report) {
+  const dep = report.deployment || {};
+  const inst = dep.install || {};
+  const cmp = dep.cmp || {};
+  const routing = dep.routing || {};
+  const libs = libraries(report);
+  const bundles = bundleNames(report);
+  const probe = report.httpProbe || {};
+  const markers = [...new Set([].concat(routing.frameworkMarkers || [], probe.frameworkMarkers || []))];
+  const unobserved = !routing.mode || routing.mode === 'unobserved' || routing.observed === false;
+  const spa = !unobserved && routing.mode !== 'document-loads';
+  const framework = markers.length ? (FRAMEWORK_LABEL[markers[0]] || markers[0]) : '';
+  const cmpMarkers = probe.cmpMarkers || [];
+  const driven = (cmp.drivenPhases || []).length > 0;
+  const cmpAnswer = cmp.detected
+    ? (cmp.vendorConfirmed && cmp.vendor ? vendorLabel(cmp.vendor) : 'Banner exists, unknown vendor')
+    : 'No banner';
+  const cmpSub = cmp.detected
+    ? (!driven
+        ? 'The banner was found but this run never clicked through it, so its Accept and Reject behaviour is untested.'
+        : cmp.vendorConfirmed && cmp.vendor
+        ? 'The banner was found and driven in both directions.'
+        : 'The banner was matched by its Accept / Reject button text only, so the vendor is unnamed.' +
+          (cmpMarkers.length ? ' Page markers hint at ' + cmpMarkers.join(', ') + '.' : ''))
+    : 'Nothing on the paths we walked asked the visitor for a choice.';
+  const cards = [
+    {
+      id: 'script',
+      label: 'Script installed',
+      question: 'What script does this website install?',
+      answer: bundles.length ? bundles.join(' + ') : 'Not installed',
+      sub: bundles.length
+        ? (libs.length ? 'Live events reported the build ' + libs.join(', ') + '.' : 'The script is configured, but no event named a build during this check.')
+        : (dep.shape === 'undetermined'
+            ? 'Nothing was found in the page, on the wire, or in the tag manager — but the banner never opened, so a script that only loads after consent cannot be ruled out.'
+            : 'Nothing was found in the page, on the wire, or in the tag manager container.'),
+      chips: [],
+    },
+    {
+      id: 'install',
+      label: 'Install method',
+      question: 'How is that script installed?',
+      answer: METHOD_LABEL[inst.method] || inst.label || 'Install method unclear',
+      sub: METHOD_SUB[inst.method] || '',
+      chips: (inst.tagManagerContainerIds || []).slice(0, 4),
+    },
+    {
+      id: 'tech',
+      label: 'Site type',
+      question: 'What is the website built on?',
+      answer: unobserved
+        ? 'Not observed'
+        : spa
+        ? 'Single-page app' + (framework ? ' – ' + framework : '')
+        : 'Classic',
+      sub: (routing.reason || '') + (markers.length ? ' Framework fingerprints: ' + markers.join(', ') + '.' : ' No framework fingerprint was found in the page source.'),
+      chips: [],
+    },
+    {
+      id: 'cmp',
+      label: 'Cookie banner',
+      question: 'Do they have a cookie banner? Which vendor?',
+      answer: cmpAnswer,
+      sub: cmpSub,
+      chips: [],
+    },
+  ];
+  const consentmode = consentModeModel(report);
+  if (consentmode) cards.push(consentmode);
+  return cards;
+}
+function gridCheckIds(phase, col) {
+  if (col === 'bundle') return [];
+  if (col === 'load') {
+    if (phase === 'clean') return ['clean-before-consent', 'cookieless-covers-unconsented'];
+    if (phase === 'grant') return ['grant-enables-normal', 'page-view-counted-once'];
+    return ['reject-blocks-normal', 'cookieless-covers-unconsented'];
+  }
+  if (col === 'nav') {
+    const ids = ['second-page-keeps-tracking', 'soft-nav-keeps-tracking'];
+    if (phase !== 'grant') ids.push('second-page-honours-consent');
+    return ids;
+  }
+  if (col === 'identity') {
+    if (phase === 'clean') return ['clean-before-consent'];
+    if (phase === 'grant') return ['grant-sets-identity-cookies', 'anonymous-id-stable'];
+    return ['reject-writes-no-identity'];
+  }
+  // The consent column carries the v2 check too: a phase whose
+  // analytics_storage reads correctly while nothing ever set it is exactly
+  // the case the other two checks cannot see.
+  return phase === 'clean'
+    ? ['clean-consent-mode-default', 'consent-mode-v2-enabled']
+    : ['consent-mode-signal', 'consent-mode-v2-enabled'];
+}
+function gridModel(report) {
+  const dep = report.deployment || {};
+  const byId = {};
+  for (const c of dep.checks || []) byId[c.id] = c;
+  const byPhase = {};
+  for (const m of dep.matrix || []) byPhase[m.phase] = m;
+  const worst = (list) => {
+    const known = list.filter((s) => s in STATUS_RANK);
+    if (!known.length) return 'info';
+    return known.sort((a, b) => STATUS_RANK[a] - STATUS_RANK[b])[0];
+  };
+  const reqText = (n, c) => {
+    const parts = [];
+    if (n) parts.push(n + ' normal');
+    if (c) parts.push(c + ' cookieless');
+    return parts.length ? parts.join(' + ') : 'none';
+  };
+  const rows = PHASES.map((p) => {
+    const m = byPhase[p.key];
+    const cells = GRID_COLUMNS.map((col) => {
+      let status = 'missing';
+      let text = 'not observed';
+      if (m) {
+        const relevant = gridCheckIds(p.key, col.key)
+          .map((id) => byId[id])
+          .filter(Boolean)
+          .filter((c) => !Array.isArray(c.phases) || c.phases.includes(p.key));
+        status = col.key === 'bundle' ? 'info' : worst(relevant.map((c) => c.status));
+        if (col.key === 'bundle') {
+          const names = [];
+          if (m.normalBundleInDom) names.push('normal');
+          if (m.cookielessBundleInDom) names.push('cookieless');
+          text = names.length ? names.join(' + ') : 'none';
+        } else if (col.key === 'load') {
+          text = reqText(m.normalRequests, m.cookielessRequests);
+        } else if (col.key === 'nav') {
+          const sp = m.secondPage || {};
+          text = sp.observed ? reqText(sp.normalRequests, sp.cookielessRequests) : 'no second page';
+        } else if (col.key === 'identity') {
+          text = (m.identityCookiesSet || []).join(', ') || 'none';
+        } else {
+          text = (m.analyticsStorage || 'not set') + (m.analyticsStorageSource ? ' (' + m.analyticsStorageSource + ')' : '');
+        }
+      }
+      return {
+        status,
+        statusLabel: String(status).replace('_', ' '),
+        text,
+        color: STATUS_COLOR[status] || STATUS_COLOR.info,
+      };
+    });
+    return { label: p.label, cells };
+  });
+  return { columns: GRID_COLUMNS, rows };
+}
+/**
+ * The published GTM container's own account of the install, as a scannable
+ * summary — three gates, per tag, per container.
+ *
+ * This exists because the container is the only place the install's real
+ * shape is written down, and the panel's prose could only fit it as one long
+ * sentence in `install.detail`. verda.com's reads "ships ... from one
+ * combined tag, gated on analytics_storage and blocked whenever CookieConsent
+ * does not contain statistics:true and fired only on the virtualPageView or
+ * cookie_consent_update dataLayer events" — every fact present, none of it
+ * findable at a glance, and the reader still has to know that those are three
+ * independent gates any one of which stops the tag.
+ *
+ * `tone: 'gate'` marks a row that can hold the tag back, so the eye lands on
+ * the gates rather than on the inventory rows next to them. Returns null when
+ * no container was scanned: a hardcoded or npm install has nothing to say
+ * here and an empty card would read as a failed read.
+ */
+function gtmModel(report) {
+  const install = (report.deployment || {}).install || {};
+  if (!install.tagManagerScanned) return null;
+  const ids = install.tagManagerContainerIds || [];
+  if (!ids.length) return null;
+  const BUNDLE_LABEL = { normal: 'standard (cookie-based)', cookieless: 'cookieless' };
+  const bundles = (list) => (list || []).map((b) => BUNDLE_LABEL[b] || b).join(' + ') || 'none';
+  // Evidence archives predate `containers`, and a container that 404s or will
+  // not parse has no tags to describe — both are reported as themselves
+  // rather than silently rendering as "no Dreamdata tag".
+  const scans = install.tagManagerContainers && install.tagManagerContainers.length
+    ? install.tagManagerContainers
+    : ids.map((id) => ({ containerId: id, read: null, error: null, version: null, bundles: install.tagManagerBundles, tags: null }));
+  const containers = scans.map((c) => {
+    const tags = (c.tags || []).map((t) => {
+      // Absent and empty mean different things: an archive written before
+      // this field existed did not look, while [] means every firing path is
+      // reachable without a custom event. Reporting the first as the second
+      // would state "fires on every page" about verda.com, whose tag fires on
+      // nothing but virtualPageView.
+      const events = t.requiresEvents;
+      const consent = t.consent || [];
+      const blocked = t.blockedWhen || [];
+      return {
+        title: 'Tag ' + t.tagIndex + ' — loads the ' + bundles(t.bundles) + ' bundle' + ((t.bundles || []).length > 1 ? 's' : ''),
+        // One tag has one consent field and one trigger set, so a combined
+        // tag cannot hold the two bundles to opposite consent states however
+        // GTM is configured. Worth saying next to the gates, because it is
+        // why reading them per bundle would be meaningless here.
+        note: (t.bundles || []).length > 1
+          ? 'One tag loads both bundles, so no GTM setting can gate them apart — the split falls to the snippet’s own JavaScript.'
+          : '',
+        rows: [
+          {
+            label: 'Fires on',
+            value: !events
+              ? 'not recorded — this run’s evidence predates the trigger read; re-run the site to see it'
+              : events.length
+                ? 'the ' + events.join(' or ') + ' dataLayer event' + (events.length > 1 ? 's' : '') + ' — and nothing else'
+                : 'a GTM built-in event (page load / DOM ready), which fires on every page by itself',
+            // A custom-event trigger is the gate that breaks silently: the
+            // container keeps reading as healthy after a release stops
+            // pushing the event.
+            tone: events && events.length ? 'gate' : 'plain',
+          },
+          {
+            label: 'Consent Mode',
+            value: consent.length ? 'requires ' + consent.join(' + ') : 'no consent requirement on the tag',
+            tone: consent.length ? 'gate' : 'plain',
+          },
+          {
+            label: 'Exceptions',
+            value: blocked.length ? 'blocked when ' + blocked.join('; or ') : 'none',
+            tone: blocked.length ? 'gate' : 'plain',
+          },
+        ],
+      };
+    });
+    return {
+      containerId: c.containerId,
+      meta: [c.version ? 'version ' + c.version : '', c.read === false ? 'could not be read' : '', c.error || '']
+        .filter(Boolean).join(' · '),
+      ships: bundles(c.bundles),
+      tags,
+      // Distinguishes "read it, no Dreamdata tag in it" from "never got to
+      // look" — checkproof.com loads two containers and only one carries a
+      // tag, credo.ai's second one 404s.
+      empty: c.tags === null
+        ? 'This container’s tags were not recorded in this run’s evidence.'
+        : tags.length === 0
+          ? (c.read === false ? 'The container could not be read, so nothing is known about its tags.' : 'Read, but it carries no Dreamdata tag.')
+          : '',
+    };
+  });
+  return { containers, errors: install.tagManagerErrors || [] };
+}
+function detailModel(report, question) {
+  const dep = report.deployment || {};
+  const res = report.result || {};
+  const titles = {
+    script: 'What script does this website install?',
+    install: 'How is that script installed?',
+    tech: 'What is the website built on?',
+    cmp: 'Do they have a cookie banner?',
+    consentmode: 'Is Google Consent Mode v2 enabled?',
+    pageview: 'Does the page view event fire as expected?',
+  };
+  const leads = {
+    script: 'The answer is read from the tag-manager container scan and the DOM script tags, then corroborated by the library string each live event reported.',
+    install: 'Install method comes from where the loading tag was found: a published tag-manager container, a hardcoded tag in the HTML, a server-side endpoint, or a bundled package with no loader.',
+    tech: 'Routing mode is observed, not guessed: the run follows a same-origin link in each phase and records whether the browser loaded a new document or changed route in place.',
+    cmp: 'A banner is detected by vendor globals and element ids first; when none match, it is matched by Accept / Reject button text — in which case the vendor cannot be named.',
+    consentmode: 'Read from google_tag_data.ics’s own diagnostic flags. ics.active is the only proof gtag(‘consent’, …) was ever called — the signal entries exist as soon as any Google tag loads, so analytics_storage is readable on a page with no Consent Mode at all.',
+    pageview: 'Every phase runs in a fresh browser context. Requests are attributed to the bundle that sent them, so a normal and a cookieless page view are never conflated.',
+  };
+  const byId = {};
+  for (const c of dep.checks || []) byId[c.id] = c;
+  const checks = (CHECK_MAP[question] || []).map((id) => byId[id]).filter(Boolean).map((c) => ({
+    id: c.id, title: c.title, detail: c.detail, evidence: c.evidence,
+    cls: c.status === 'pass' ? 'pass' : c.status === 'fail' ? 'fail' : 'other',
+    statusLabel: String(c.status || '').replace('_', ' ').toUpperCase(),
+  }));
+  const vIds = VERDICT_MAP[question] || [];
+  const verdicts = (res.verdicts || []).filter((v) => vIds.includes(v.id)).map((v) => ({
+    title: v.title, feedback: v.feedback, evidenceQuote: v.evidenceQuote,
+    cls: v.passed === true ? 'pass' : v.passed === false ? 'fail' : 'other',
+    statusLabel: v.passed === true ? 'PASS' : v.passed === false ? 'FAIL' : 'INCONCLUSIVE',
+  }));
+  const rawSlices = {
+    script: { shape: dep.shape, shapeReason: dep.shapeReason, install: dep.install, normalBundleSignals: dep.normalBundleSignals, httpProbeScript: (report.httpProbe || {}).script },
+    install: { install: dep.install, normalBundleSignals: dep.normalBundleSignals },
+    tech: { routing: dep.routing, secondPages: (dep.matrix || []).map((m) => ({ phase: m.phase, secondPage: m.secondPage })) },
+    cmp: { cmp: dep.cmp, cmpMarkers: (report.httpProbe || {}).cmpMarkers, consentPerPhase: (report.phases || []).map((p) => ({ phase: p.phase, consent: p.consent, consentAcceptance: p.consentAcceptance })) },
+    consentmode: {
+      consentModeV2: dep.consentModeV2,
+      perPhase: (report.phases || []).map((p) => ({
+        phase: p.phase,
+        ics: p.consent && p.consent.ics,
+        icsBeforeDecision: p.consent && p.consent.icsBeforeDecision,
+        signals: p.consent && p.consent.signals,
+        dataLayerConsentPushes: p.consent && p.consent.dataLayerConsentPushes,
+      })),
+    },
+    pageview: { matrix: dep.matrix, requests: (report.phases || []).map((p) => ({ phase: p.phase, requests: (p.network && p.network.requests) || [], cookies: p.cookies })) },
+  };
+  // The question cards no longer carry their reasoning sentence or their
+  // evidence chips, so the panel is where that copy lands: "what we expect for
+  // this site" is the card's old sub-line for a question, and the pageview
+  // card's expectation rule for the table.
+  const pv = question === 'pageview' ? pageviewModel(report) : null;
+  const card = pv ? null : questionModels(report).find((q) => q.id === question);
+  return {
+    title: titles[question] || question,
+    lead: leads[question] || '',
+    expectation: pv ? pv.rule : (card && card.sub) || '',
+    chips: (card && card.chips) || [],
+    callout: pv ? pv.callout : '',
+    checks,
+    verdicts,
+    advice: question === 'pageview' || question === 'cmp' || question === 'consentmode' ? res.remediationAdvice || '' : '',
+    rawLabel: 'report.json — the fields behind this answer',
+    raw: JSON.stringify(rawSlices[question], null, 2),
+  };
+}
+// ── Rendering ────────────────────────────────────────────────────────
+const state = {
+  slug: REPORTS[0] ? REPORTS[0].slug : null,
+  question: 'pageview',
+  sidebarOpen: true,
+  search: '',
+  newSlug: '',
+  newUrl: '',
+  runNotice: '',
+  runCommand: '',
+  commandCopied: false,
+  commandCopyFailed: false,
+  detailOpen: false,
+  copied: false,
+  copyFailed: false,
+};
+function currentReport() {
+  return REPORTS.find((r) => r.slug === state.slug) || null;
+}
+function set(patch) { Object.assign(state, patch); render(); }
+/**
+ * This page is opened over file://, which is not a secure context in every
+ * browser, so navigator.clipboard can be missing outright and writeText can
+ * reject. Saying "Copied" when nothing was copied is the one failure a reader
+ * cannot notice, so the label only changes once the write actually landed.
+ */
+function copyText(text, done) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => done(true), () => done(legacyCopy(text)));
+    return;
+  }
+  done(legacyCopy(text));
+}
+// The pre-Clipboard-API path, which still works on file://.
+function legacyCopy(text) {
+  try {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(ta);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function matchingReports() {
+  const search = state.search.trim().toLowerCase();
+  return REPORTS.filter((r) =>
+    r.slug.toLowerCase().includes(search) || String(r.url || '').toLowerCase().includes(search));
+}
+function listHeading() {
+  const n = matchingReports().length;
+  return n + ' account' + (n === 1 ? '' : 's') + ' checked';
+}
+function siteListHtml() {
+  const rows = matchingReports();
+  if (rows.length === 0) return `<div class="empty">No account matches that search.</div>`;
+  return rows.map((r) => {
+    const tags = tagsFor(r);
+    return `<div class="site ${r.slug === state.slug ? 'on' : ''}" data-act="select-site" data-slug="${esc(r.slug)}">
+      <div class="site-top">
+        <div class="site-slug">${esc(r.slug)}</div>
+        <div class="site-host">${esc(host(r.url))}</div>
+        <span class="site-when">${esc(when(r.timestamp))}</span>
+      </div>
+      <div class="site-tags">${pill(tags[0])}${tags.length > 1 ? `<span class="more">+${tags.length - 1}</span>` : ''}</div>
+    </div>`;
+  }).join('');
+}
+function renderSidebar() {
+  if (!state.sidebarOpen) {
+    return `<aside class="side-rail">
+      <button class="icon-btn" data-act="toggle-sidebar" title="Expand panel">»</button>
+      <div class="vert">${esc(listHeading())}</div>
+    </aside>`;
+  }
+  return `<aside class="side">
+    <div class="side-head">
+      <div class="side-title">Tracking verification</div>
+      <button class="icon-btn" data-act="toggle-sidebar" title="Collapse panel">«</button>
+    </div>
+    <div class="side-block">
+      <div class="eyebrow">Run a new check</div>
+      <div class="field"><label for="ns">Account slug</label>
+        <input id="ns" placeholder="dreamdata_io" value="${esc(state.newSlug)}" data-act="new-slug" /></div>
+      <div class="field"><label for="nu">Website URL</label>
+        <input id="nu" placeholder="https://dreamdata.io/" value="${esc(state.newUrl)}" data-act="new-url" /></div>
+      <button class="btn primary full" data-act="run">Build the command</button>
+      ${state.runNotice ? `<div class="notice">${state.runNotice}
+        ${state.runCommand ? `<code>${esc(state.runCommand)}</code>
+        <button class="btn full" style="margin-top:6px" data-act="copy-command">${state.commandCopied ? 'Copied' : state.commandCopyFailed ? 'Copy it by hand — the browser blocked this' : 'Copy'}</button>` : ''}
+      </div>` : ''}
+    </div>
+    <div class="side-search">
+      <div class="field"><input placeholder="Search a slug or domain" value="${esc(state.search)}" data-act="search" /></div>
+      <div class="eyebrow">${esc(listHeading())}</div>
+    </div>
+    <div class="site-list">${siteListHtml()}</div>
+  </aside>`;
+}
+function renderDiagnosis(dx) {
+  const causes = dx.causes.map((c) => `<div class="cause">
+    <div class="cause-top">
+      ${c.rank ? `<span class="cause-rank">${esc(c.rank)}</span>` : ''}
+      <span class="cause-tag ${c.bad ? 'bad' : c.warn ? 'warn' : 'neutral'}">${esc(c.label)}</span>
+    </div>
+    <div class="cause-grid">
+      <div class="cause-key problem">Cause</div><div class="cause-val">${esc(c.problem)}</div>
+      <div class="cause-key fix">Fix</div><div class="cause-val">${esc(c.fix)}</div>
+    </div>
+    ${c.docUrl ? `<div class="cause-doc"><a href="${esc(c.docUrl)}" target="_blank" rel="noreferrer">${esc(c.docTitle)} ↗</a></div>` : ''}
+  </div>`).join('');
+  return `<details class="dx">
+    <summary>${esc(dx.head)} ›</summary>
+    <div class="dx-body">
+      ${dx.cleanNote ? `<div class="dx-clean">${esc(dx.cleanNote)}</div>` : ''}
+      ${dx.causes.length ? `<div class="dx-causes">${causes}</div>` : ''}
+      ${dx.also ? `<div class="dx-also">${esc(dx.also)}</div>` : ''}
+      ${dx.advice ? `<details><summary>Verify next ›</summary><div>${esc(dx.advice)}</div></details>` : ''}
+    </div>
+  </details>`;
+}
+function renderSummary(health, dx) {
+  return `<div class="summary">
+    <div class="summary-top">
+      <div class="summary-rail ${health.tone}"></div>
+      <div class="summary-main">
+        <div class="summary-head ${health.tone}">${esc(health.headline)}</div>
+        <div class="summary-sub">${esc(health.sub)}</div>
+      </div>
+      <div class="summary-stats">${health.stats.map((s) => `<div class="stat">
+        <div class="stat-value">${esc(s.value)}</div>
+        <div class="stat-label">${esc(s.label)}</div>
+      </div>`).join('')}</div>
+    </div>
+    ${renderDiagnosis(dx)}
+  </div>`;
+}
+function renderQuestionCard(q, flag) {
+  return `<div class="q ${state.question === q.id ? 'on' : ''}" data-act="select-question" data-q="${esc(q.id)}">
+    <div class="q-row">
+      <div class="q-label">${esc(q.label || q.question)}</div>
+      ${flagIcon(flag)}
+      <div class="q-more">Details ›</div>
+    </div>
+    <div class="q-answer">${esc(q.answer)}</div>
+  </div>`;
+}
+function renderPageviewCard(pv, flag) {
+  const cell = (c) => `<td class="cell"><div class="obs ${c.kind}">
+    <div class="obs-top">
+      <span class="obs-mark">${c.kind === 'ok' ? '✓' : c.kind === 'off' ? '✕' : '—'}</span>
+      <span class="obs-text">${esc(c.text)}</span>
+    </div>
+    ${c.note ? `<div class="obs-note">${esc(c.note)}</div>` : ''}
+  </div></td>`;
+  const rows = pv.rows.map((r) => `<tr>
+    <td><div class="pv-label">${esc(r.label)}</div></td>
+    <td><div class="obs exp"><span class="obs-text">${esc(r.expected)}</span></div></td>
+    ${r.cells.map(cell).join('')}
+  </tr>`).join('');
+  return `<div class="q wide ${state.question === 'pageview' ? 'on' : ''}" data-act="select-question" data-q="pageview">
+    <div class="q-row">
+      <div class="q-answer">${esc(pv.answer)}</div>
+      ${flagIcon(flag)}
+      <div class="q-more">Details ›</div>
+    </div>
+    <table class="pv">
+      <thead><tr>
+        <th style="width:18%">Visitor state</th>
+        <th style="width:18%">Expected</th>
+        <th>Landing page</th>
+        <th>Second page</th>
+        <th>Visitor ID</th>
+      </tr></thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+function renderDetail(report) {
+  const d = detailModel(report, state.question);
+  const grid = state.question === 'pageview' ? gridModel(report) : null;
+  const gridHtml = !grid ? '' : `<div>
+    <div class="d-label">Phase × signal matrix</div>
+    <div class="d-note">The same three visitor states as the card, judged against every signal the checks cover — the square is the worst check status naming that state.</div>
+    <div class="grid-wrap"><table class="mx">
+      <thead><tr><th>Phase</th>${grid.columns.map((c) => `<th>${esc(c.label)}</th>`).join('')}</tr></thead>
+      <tbody>${grid.rows.map((r) => `<tr>
+        <td class="phase">${esc(r.label)}</td>
+        ${r.cells.map((c) => `<td>
+          <div class="mx-cell"><i style="background:${esc(c.color)}"></i><span>${esc(c.text)}</span></div>
+          <div class="mx-status">${esc(c.statusLabel)}</div>
+        </td>`).join('')}
+      </tr>`).join('')}</tbody>
+    </table></div>
+  </div>`;
+  // Above the lead and above every question's own evidence, because it is the
+  // one block that answers "what did they actually build" for all of them.
+  const gtm = gtmModel(report);
+  const gtmHtml = !gtm ? '' : `<div class="gtm">
+    <div class="gtm-head">
+      <div class="d-label" style="margin:0">GTM setup at a glance</div>
+      <div class="gtm-hint">Read from the published container itself — any one gate below stops the tag</div>
+    </div>
+    ${gtm.containers.map((c) => `<div class="gtm-c">
+      <div class="gtm-c-top">
+        <span class="gtm-id">${esc(c.containerId)}</span>
+        ${c.meta ? `<span class="gtm-meta">${esc(c.meta)}</span>` : ''}
+        <span class="gtm-ships">ships ${esc(c.ships)}</span>
+      </div>
+      ${c.empty ? `<div class="gtm-empty">${esc(c.empty)}</div>` : ''}
+      ${c.tags.map((t) => `<div class="gtm-tag">
+        <div class="gtm-tag-title">${esc(t.title)}</div>
+        ${t.note ? `<div class="gtm-note">${esc(t.note)}</div>` : ''}
+        <div class="gtm-rows">${t.rows.map((r) => `<div class="gtm-row ${r.tone}">
+          <span class="gtm-k">${esc(r.label)}</span>
+          <span class="gtm-v">${esc(r.value)}</span>
+        </div>`).join('')}</div>
+      </div>`).join('')}
+    </div>`).join('')}
+    ${gtm.errors.length ? `<div class="gtm-empty">${esc(gtm.errors.join('; '))}</div>` : ''}
+  </div>`;
+  const checks = d.checks.length ? `<div>
+    <div class="d-label">Automated checks</div>
+    <div class="d-stack">${d.checks.map((c) => `<div class="d-card">
+      <div class="d-card-top">
+        <span class="status ${c.cls}">${esc(c.statusLabel)}</span>
+        <div class="d-card-title">${esc(c.title)}</div>
+      </div>
+      <div class="d-card-detail">${esc(c.detail)}</div>
+      <div class="d-evidence">${esc(c.evidence)}</div>
+      <div class="d-id">${esc(c.id)}</div>
+    </div>`).join('')}</div>
+  </div>` : '';
+  const verdicts = d.verdicts.length ? `<div>
+    <div class="d-label">AI reviewer verdict</div>
+    <div class="d-stack">${d.verdicts.map((v) => `<div class="d-card">
+      <div class="d-card-top">
+        <span class="status ${v.cls}">${esc(v.statusLabel)}</span>
+        <div class="d-card-title">${esc(v.title)}</div>
+      </div>
+      <div class="d-card-detail">${esc(v.feedback)}</div>
+      <div class="d-evidence">${esc(v.evidenceQuote)}</div>
+    </div>`).join('')}</div>
+  </div>` : '';
+  return `<aside class="detail">
+    <div class="detail-head">
+      <div style="flex:1;min-width:0">
+        <div class="eyebrow">Technical detail</div>
+        <div class="detail-title">${esc(d.title)}</div>
+      </div>
+      <button class="close-btn" data-act="close-detail" title="Close (Esc)">Close <span>esc</span></button>
+    </div>
+    <div class="detail-body">
+      ${gtmHtml}
+      <div class="detail-lead">${esc(d.lead)}</div>
+      ${d.expectation ? `<div>
+        <div class="d-label">What we expect for this site</div>
+        <div class="d-prose">${esc(d.expectation)}</div>
+        ${d.chips.length ? `<div class="d-chips">${d.chips.map((c) => `<span class="chip">${esc(c)}</span>`).join('')}</div>` : ''}
+      </div>` : ''}
+      ${d.callout ? `<div class="callout">${esc(d.callout)}</div>` : ''}
+      ${gridHtml}
+      ${checks}
+      ${verdicts}
+      ${d.advice ? `<div class="d-advice"><div class="d-label">Suggested next step</div><div class="d-advice-text">${esc(d.advice)}</div></div>` : ''}
+      <div>
+        <div class="d-label">Raw evidence</div>
+        <details class="d-card d-raw">
+          <summary>${esc(d.rawLabel)}</summary>
+          <pre>${esc(d.raw)}</pre>
+        </details>
+      </div>
+      <button class="btn full" data-act="copy-detail">${state.copied ? 'Copied' : state.copyFailed ? 'Copy it by hand — the browser blocked this' : 'Copy this detail for the team'}</button>
+    </div>
+  </aside>`;
+}
+/**
+ * The one command a run needs. `verify-tracking` is the installed name; a
+ * checkout runs the same thing as `bun run src/cli.ts`, which is a developer's
+ * detail and not what this page's reader has.
+ */
+function runCommandFor(slug, url) {
+  return 'verify-tracking --slug ' + shq(slug) + ' --url ' + shq(url);
+}
+/**
+ * A URL carries `?` and `&` far more often than not, and pasted unquoted the
+ * `&` backgrounds the command. Single quotes are the one POSIX form with no
+ * expansion inside them; a literal quote has to be closed and re-opened.
+ */
+function shq(value) {
+  return "'" + String(value).split("'").join(`'\\''`) + "'";
+}
+function render() {
+  const report = currentReport();
+  const app = document.getElementById('app');
+  if (!report) {
+    app.innerHTML = renderSidebar() + `<main><div class="scroll"><div class="col">
+      <div class="q" style="cursor:default">
+        <div class="q-label">No checks yet</div>
+        <div class="q-answer">Nothing was found in ${esc(DATA_FILE)}</div>
+        <div class="summary-sub">Fill in <strong>Run a new check</strong> on the left to build the
+        command, then paste it into your terminal:
+        <code style="display:block;margin-top:6px;font-family:var(--mono)">verify-tracking --slug dreamdata_io --url https://dreamdata.io/</code>
+        The check rebuilds this page when it finishes — reload the tab to see it.</div>
+      </div>
+    </div></div></main>`;
+    return;
+  }
+  const questions = questionModels(report);
+  const tags = tagsFor(report);
+  const pv = pageviewModel(report);
+  const dx = diagnosisModel(report);
+  const causeFlags = causeFlagsForQuestions(report);
+  app.innerHTML = renderSidebar() + `<main>
+    <header class="top">
+      <div style="flex:1;min-width:0">
+        <div class="top-line">
+          <h1>${esc(report.slug)}</h1>
+          ${tags.map((t) => pill(t, true)).join('')}
+        </div>
+        <div class="top-meta">
+          <a href="${esc(report.url)}" target="_blank" rel="noreferrer">${esc(report.url)} ↗</a>
+          <span class="sep">·</span>
+          <span class="mono">${esc(host(report.url))}</span><span class="sep">·</span>
+          <span>Checked ${esc(when(report.timestamp))}</span>
+        </div>
+      </div>
+      <div class="top-side">
+        <button class="btn" data-act="rerun">Re-run check</button>
+        ${DATA.outputRoot ? `<div class="top-note">Raw report + evidence:
+          <span class="mono">${esc(DATA.outputRoot)}</span></div>` : ''}
+      </div>
+    </header>
+    <div class="scroll"><div class="col">
+      ${renderSummary(healthModel(report, dx), dx)}
+      <div class="section-label">How the site is set up</div>
+      <div class="q-grid">${questions.map((q) => renderQuestionCard(q, causeFlags[q.id])).join('')}</div>
+      <div class="section-label">Do the events fire as expected?</div>
+      ${renderPageviewCard(pv, causeFlags.pageview)}
+    </div></div>
+  </main>` + (state.detailOpen ? renderDetail(report) : '');
+}
+// ── Events ───────────────────────────────────────────────────────────
+document.getElementById('app').addEventListener('click', (e) => {
+  const el = e.target.closest('[data-act]');
+  if (!el) return;
+  const act = el.dataset.act;
+  if (act === 'toggle-sidebar') return set({ sidebarOpen: !state.sidebarOpen });
+  if (act === 'close-detail') return set({ detailOpen: false });
+  if (act === 'select-site') return set({ slug: el.dataset.slug, copied: false, copyFailed: false });
+  if (act === 'select-question') {
+    const q = el.dataset.q;
+    return set({ question: q, detailOpen: !(state.detailOpen && state.question === q), copied: false, copyFailed: false });
+  }
+  if (act === 'run' || act === 'rerun') {
+    const report = act === 'rerun' ? currentReport() : null;
+    const slug = report ? report.slug : state.newSlug.trim();
+    const url = report ? report.url : state.newUrl.trim();
+    if (!slug || !url) return set({ runNotice: 'Add a slug and a URL first.' });
+    // This page is opened over file:// and cannot start a run. Handing over
+    // the exact command is the honest version of a "Run" button. One command:
+    // the run rebuilds this dashboard itself when it finishes.
+    return set({
+      runCommand: runCommandFor(slug, url),
+      runNotice: 'Run this in your terminal:',
+      commandCopied: false,
+      commandCopyFailed: false,
+      sidebarOpen: true,
+    });
+  }
+  if (act === 'copy-command') {
+    return copyText(state.runCommand, (ok) => set({ commandCopied: ok, commandCopyFailed: !ok }));
+  }
+  if (act === 'copy-detail') {
+    const d = detailModel(currentReport(), state.question);
+    // The GTM block is the first thing on screen, so it is the first thing in
+    // the paste too — a pasted detail that omits it reads as if the container
+    // was never looked at.
+    const gtm = gtmModel(currentReport());
+    const gtmText = !gtm ? '' : 'GTM setup at a glance\n' + gtm.containers.map((c) =>
+      c.containerId + (c.meta ? ' (' + c.meta + ')' : '') + ' ships ' + c.ships + '\n' +
+      (c.empty ? '  ' + c.empty + '\n' : '') +
+      c.tags.map((t) => '  ' + t.title + '\n' + (t.note ? '    ' + t.note + '\n' : '') +
+        t.rows.map((r) => '    ' + r.label + ': ' + r.value).join('\n')).join('\n')
+    ).join('\n') + '\n\n';
+    const text = d.title + '\n\n' + gtmText +
+      d.checks.map((c) => '[' + c.statusLabel + '] ' + c.title + ' — ' + c.detail + '\n  ' + c.evidence).join('\n') +
+      '\n\n' + d.raw;
+    return copyText(text, (ok) => set({ copied: ok, copyFailed: !ok }));
+  }
+});
+// The panel's close button advertises Esc, so Esc has to work.
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && state.detailOpen) set({ detailOpen: false });
+});
+document.getElementById('app').addEventListener('input', (e) => {
+  const el = e.target.closest('[data-act]');
+  if (!el) return;
+  // Written straight to state without a full re-render: re-rendering on every
+  // keystroke would replace the input the caret is in. The list and its
+  // heading are the only things a search changes, so they are patched here.
+  if (el.dataset.act === 'new-slug') { state.newSlug = el.value; return; }
+  if (el.dataset.act === 'new-url') { state.newUrl = el.value; return; }
+  if (el.dataset.act === 'search') {
+    state.search = el.value;
+    const list = document.querySelector('.site-list');
+    if (list) list.innerHTML = siteListHtml();
+    const heading = document.querySelector('.side-search .eyebrow');
+    if (heading) heading.textContent = listHeading();
+  }
+});
+render();
+</script>
+</body>
+</html>