@tokenoftrust/storefront-runner 1.4.2-rc.0 → 2.0.0

package/apps/storefront/src/lib/apps/gtmMigrationReport.ts

@@ -0,0 +1,367 @@
+/**
+ * Pure, transport-free builder for the admin "Migrate from GTM" report.
+ *
+ * Runs the SAFE `@tot/public-runtime` pipeline (`parseGtmExport` →
+ * `buildMigrationGraph` → `classifyMigration`) over an uploaded, untrusted GTM
+ * container export and turns the result into a REDACTED, inert report object.
+ *
+ * READ-ONLY / NON-EXECUTING CONTRACT (a reviewer WILL reject violations):
+ *   - Nothing here executes, evaluates, interprets, or renders any part of the
+ *     export — it only reads the inert typed model the parser produced.
+ *   - It emits NO markup, NO script, NO network effect, NO event listener, and
+ *     has NO live authority. It builds a plain DATA object and returns it.
+ *   - The full inert `raw` field bag of every record is DROPPED — the report
+ *     carries only accounting, dispositions, a redacted node/edge graph,
+ *     findings, and recommendations. Code-bearing GTM fields never leave here.
+ *   - Every emitted string field is run through {@link redactText}, so a
+ *     secret-shaped value that rode in on a name/id/reference is masked.
+ *   - Foreign / other-tenant ids in the upload are reflected back verbatim (or
+ *     redacted if secret-shaped) and are never cross-referenced against this
+ *     tenant — the report discloses nothing about the requesting tenant.
+ */
+import {
+  parseGtmExport,
+  buildMigrationGraph,
+  classifyMigration,
+  REASON_CATALOG,
+  type GtmContainer,
+  type GtmParseAccounting,
+  type GtmViolation,
+  type MigrationGraph,
+  type GtmObjectKind,
+  type GtmEdgeKind,
+  type DispositionReport,
+  type DispositionClass,
+  type ObjectDisposition,
+  type DanglingDisposition,
+  type ReasonCode,
+} from "@tot/public-runtime";
+
+/** Report schema version — bumped when the emitted shape changes. */
+export const GTM_MIGRATION_REPORT_VERSION = "1";
+
+// ── Redaction ────────────────────────────────────────────────────────────────
+
+/** Recognized secret prefixes (Google API key, Stripe, GitHub PAT, Slack, JWT). */
+const SECRET_PREFIX_RE =
+  /^(AIza[0-9A-Za-z_-]{10,}|sk_[A-Za-z0-9]{16,}|pk_[A-Za-z0-9]{16,}|ghp_[A-Za-z0-9]{20,}|xox[baprs]-[A-Za-z0-9-]{10,}|eyJ[A-Za-z0-9_-]{10,})$/;
+
+/** A single token looks secret-shaped: a known prefix, or long + high-entropy. */
+function looksSecret(token: string): boolean {
+  if (SECRET_PREFIX_RE.test(token)) return true;
+  // Long opaque token with both letters and digits and only token-safe chars —
+  // a measurement id like `G-ABC123` (short) never trips this; an API key does.
+  return (
+    token.length >= 24 &&
+    /[0-9]/.test(token) &&
+    /[A-Za-z]/.test(token) &&
+    /^[A-Za-z0-9_+/=.-]+$/.test(token)
+  );
+}
+
+/** Candidate opaque tokens inside free text (min length keeps human words out). */
+const TOKEN_RE = /[A-Za-z0-9_+/=.-]{12,}/g;
+
+/**
+ * Mask every secret-shaped token inside a string, leaving ordinary human text
+ * (names, labels, short ids, sentences) untouched. `null` passes through.
+ */
+export function redactText(value: string | null): string | null {
+  if (value == null) return value;
+  return value.replace(TOKEN_RE, (m) => (looksSecret(m) ? "[redacted]" : m));
+}
+
+// ── Emitted shape ──────────────────────────────────────────────────────────────
+
+export interface GtmReportNode {
+  readonly key: string;
+  readonly kind: GtmObjectKind;
+  readonly id: string | null;
+  readonly name: string | null;
+  readonly type: string | null;
+}
+
+export interface GtmReportEdge {
+  readonly from: string;
+  readonly to: string;
+  readonly kind: GtmEdgeKind;
+  readonly via: string | null;
+}
+
+export interface GtmReportDangling {
+  readonly from: string;
+  readonly kind: string;
+  readonly ref: string;
+}
+
+/** One classified object, redacted (no `raw` bag). */
+export interface GtmReportObject {
+  readonly nodeKey: string;
+  readonly kind: GtmObjectKind;
+  readonly id: string | null;
+  readonly name: string | null;
+  readonly type: string | null;
+  readonly disposition: DispositionClass;
+  readonly reasonCode: string;
+  readonly explanation: string;
+}
+
+/** One classified dangling reference, redacted. */
+export interface GtmReportDanglingDisposition {
+  readonly from: string;
+  readonly refKind: string;
+  readonly ref: string;
+  readonly disposition: DispositionClass;
+  readonly reasonCode: string;
+  readonly explanation: string;
+}
+
+export interface GtmRecommendation {
+  readonly reasonCode: string;
+  readonly disposition: DispositionClass;
+  readonly count: number;
+  readonly explanation: string;
+  readonly nextStep: string;
+}
+
+export interface GtmMigrationReport {
+  readonly provenance: {
+    readonly correlationId: string;
+    readonly generatedAt: string;
+    readonly reportVersion: string;
+    /** The REQUESTING tenant (this tenant's own id) — never a lookup key. */
+    readonly tenantId: string;
+    readonly exportFormatVersion: number;
+    readonly container: {
+      readonly containerId: string | null;
+      readonly publicId: string | null;
+      readonly path: string | null;
+      readonly name: string | null;
+    };
+    readonly redacted: true;
+  };
+  readonly counts: {
+    readonly parse: {
+      readonly counts: Record<string, number>;
+      readonly unknownTopLevelKeys: string[];
+      readonly unknownContainerKeys: string[];
+      readonly truncatedStrings: number;
+      readonly quarantinedKeys: number;
+      readonly totalNodes: number;
+    };
+    readonly graph: {
+      readonly nodeCount: number;
+      readonly perKind: Record<GtmObjectKind, number>;
+      readonly edgeCount: number;
+      readonly perEdgeKind: Record<GtmEdgeKind, number>;
+      readonly danglingCount: number;
+      readonly builtInVariablesReferenced: string[];
+      readonly tokensCapped: boolean;
+    };
+    readonly accounting: DispositionReport["accounting"];
+  };
+  readonly dispositionSummary: DispositionReport["summary"];
+  readonly dispositions: GtmReportObject[];
+  readonly dangling: GtmReportDanglingDisposition[];
+  readonly graph: {
+    readonly nodes: GtmReportNode[];
+    readonly edges: GtmReportEdge[];
+    readonly danglingReferences: GtmReportDangling[];
+  };
+  readonly findings: {
+    readonly dangling: GtmReportDanglingDisposition[];
+    readonly unsupported: GtmReportObject[];
+  };
+  readonly recommendations: GtmRecommendation[];
+}
+
+// ── Builder ──────────────────────────────────────────────────────────────────
+
+/** Human next-step per disposition class — the actionable half of a recommendation. */
+const NEXT_STEP_BY_CLASS: Record<DispositionClass, string> = {
+  "automatically-portable": "Moves automatically during migration; no action needed.",
+  "portable-with-review": "Review and confirm the native mapping before migrating.",
+  "requires-redesign": "Rebuild this capability with a native design; there is no direct mapping.",
+  "unsupported-by-design": "Not supported; rebuild the intent as a native integration, or drop it.",
+  retire: "Retire it; there is no migration target.",
+};
+
+function redactObject(o: ObjectDisposition): GtmReportObject {
+  return {
+    nodeKey: o.nodeKey,
+    kind: o.kind,
+    id: redactText(o.id),
+    name: redactText(o.name),
+    type: o.type,
+    disposition: o.disposition,
+    reasonCode: o.reasonCode,
+    explanation: redactText(o.explanation) ?? "",
+  };
+}
+
+function redactDangling(d: DanglingDisposition): GtmReportDanglingDisposition {
+  return {
+    from: d.from,
+    refKind: d.refKind,
+    ref: redactText(d.ref) ?? "",
+    disposition: d.disposition,
+    reasonCode: d.reasonCode,
+    explanation: redactText(d.explanation) ?? "",
+  };
+}
+
+/** Aggregate recommendations from the catalog for every reason code that appears. */
+function buildRecommendations(disposition: DispositionReport): GtmRecommendation[] {
+  const counts = new Map<string, number>();
+  for (const o of disposition.objects) counts.set(o.reasonCode, (counts.get(o.reasonCode) ?? 0) + 1);
+  for (const d of disposition.dangling) counts.set(d.reasonCode, (counts.get(d.reasonCode) ?? 0) + 1);
+
+  const recs: GtmRecommendation[] = [];
+  // Stable order: the catalog's own key order.
+  for (const reasonCode of Object.keys(REASON_CATALOG) as ReasonCode[]) {
+    const count = counts.get(reasonCode);
+    if (!count) continue;
+    const entry = REASON_CATALOG[reasonCode];
+    recs.push({
+      reasonCode,
+      disposition: entry.disposition,
+      count,
+      explanation: entry.explanation,
+      nextStep: NEXT_STEP_BY_CLASS[entry.disposition],
+    });
+  }
+  return recs;
+}
+
+/**
+ * Build the redacted report from an already-parsed container + its downstream
+ * graph and disposition report. Pure and deterministic.
+ */
+export function buildGtmMigrationReport(args: {
+  container: GtmContainer;
+  accounting: GtmParseAccounting;
+  graph: MigrationGraph;
+  disposition: DispositionReport;
+  correlationId: string;
+  generatedAt: string;
+  tenantId: string;
+}): GtmMigrationReport {
+  const { container, accounting, graph, disposition } = args;
+  const cv = container.containerVersion;
+
+  const dispositions = disposition.objects.map(redactObject);
+  const dangling = disposition.dangling.map(redactDangling);
+
+  return {
+    provenance: {
+      correlationId: args.correlationId,
+      generatedAt: args.generatedAt,
+      reportVersion: GTM_MIGRATION_REPORT_VERSION,
+      tenantId: args.tenantId,
+      exportFormatVersion: container.exportFormatVersion,
+      container: {
+        containerId: redactText(cv.containerId),
+        publicId: redactText(cv.publicId),
+        path: redactText(cv.path),
+        name: redactText(cv.name),
+      },
+      redacted: true,
+    },
+    counts: {
+      parse: {
+        counts: accounting.counts,
+        unknownTopLevelKeys: accounting.unknownTopLevelKeys,
+        unknownContainerKeys: accounting.unknownContainerKeys,
+        truncatedStrings: accounting.truncatedStrings,
+        quarantinedKeys: accounting.quarantinedKeys,
+        totalNodes: accounting.totalNodes,
+      },
+      graph: {
+        nodeCount: graph.accounting.nodeCount,
+        perKind: graph.accounting.perKind,
+        edgeCount: graph.accounting.edgeCount,
+        perEdgeKind: graph.accounting.perEdgeKind,
+        danglingCount: graph.accounting.danglingCount,
+        builtInVariablesReferenced: graph.accounting.builtInVariablesReferenced,
+        tokensCapped: graph.accounting.tokensCapped,
+      },
+      accounting: disposition.accounting,
+    },
+    dispositionSummary: disposition.summary,
+    dispositions,
+    dangling,
+    graph: {
+      // Node `record` (the full inert bag) is deliberately DROPPED here.
+      nodes: graph.nodes.map((n) => ({
+        key: n.key,
+        kind: n.kind,
+        id: redactText(n.id),
+        name: redactText(n.name),
+        type: n.type,
+      })),
+      edges: graph.edges.map((e) => ({
+        from: e.from,
+        to: e.to,
+        kind: e.kind,
+        via: redactText(e.via ?? null),
+      })),
+      danglingReferences: graph.danglingReferences.map((d) => ({
+        from: d.from,
+        kind: d.kind,
+        ref: redactText(d.ref) ?? "",
+      })),
+    },
+    findings: {
+      dangling,
+      unsupported: dispositions.filter((o) => o.disposition === "unsupported-by-design"),
+    },
+    recommendations: buildRecommendations(disposition),
+  };
+}
+
+// ── Analyze entry point ────────────────────────────────────────────────────────
+
+export interface GtmAnalyzeOk {
+  readonly ok: true;
+  readonly correlationId: string;
+  readonly report: GtmMigrationReport;
+}
+
+export interface GtmAnalyzeErr {
+  readonly ok: false;
+  readonly correlationId: string;
+  readonly error: string;
+  readonly violations: GtmViolation[];
+}
+
+/**
+ * Parse + graph + classify an uploaded export into a redacted report, or return
+ * the structured parse violations with a stable, safe error and the correlation
+ * id. NEVER throws on bad input, NEVER executes any part of the export.
+ */
+export function analyzeGtmExport(
+  input: string | Uint8Array,
+  opts: { tenantId: string; correlationId: string; generatedAt: string },
+): GtmAnalyzeOk | GtmAnalyzeErr {
+  const parsed = parseGtmExport(input);
+  if (!parsed.ok) {
+    return {
+      ok: false,
+      correlationId: opts.correlationId,
+      error: "The uploaded file is not a valid GTM container export.",
+      violations: parsed.violations,
+    };
+  }
+  const graph = buildMigrationGraph(parsed.container);
+  const disposition = classifyMigration(graph);
+  const report = buildGtmMigrationReport({
+    container: parsed.container,
+    accounting: parsed.accounting,
+    graph,
+    disposition,
+    correlationId: opts.correlationId,
+    generatedAt: opts.generatedAt,
+    tenantId: opts.tenantId,
+  });
+  return { ok: true, correlationId: opts.correlationId, report };
+}

package/apps/storefront/src/lib/apps/gtmMigrationTab.ts

@@ -0,0 +1,315 @@
+/**
+ * "Migrate from GTM" client controller — the hydration behind the analyze panel
+ * inside the `/admin#integrations` surface. It binds a file-input upload to the
+ * READ-ONLY analyze route and renders the redacted report, with no mock data:
+ *
+ *   - POST /api/apps/admin/gtm-migration              → the redacted report JSON
+ *     (inventory counts, dependency graph, dispositions by class, unresolved
+ *     findings, recommendations).
+ *   - POST /api/apps/admin/gtm-migration?format=bundle → the same report as a
+ *     downloadable JSON support bundle (Content-Disposition attachment).
+ *
+ * Analyzing is a pure diagnostic: uploading and rendering the report adds NO
+ * markup, CSP origin, network-to-third-parties, or event listener to the
+ * storefront runtime, and can never publish or activate anything. Every render
+ * helper below is a pure DOM builder, exported so the panel is unit-testable in
+ * a DOM environment with no network.
+ */
+import type {
+  GtmMigrationReport,
+  GtmReportObject,
+  GtmRecommendation,
+} from "./gtmMigrationReport";
+
+interface AnalyzeOkBody {
+  ok: true;
+  correlationId: string;
+  report: GtmMigrationReport;
+}
+interface AnalyzeErrBody {
+  ok?: false;
+  correlationId?: string;
+  error?: string;
+  violations?: Array<{ path?: string; code?: string; message?: string }>;
+}
+
+// ── Pure DOM helpers ───────────────────────────────────────────────────────────
+
+function el(tag: string, className?: string, text?: string): HTMLElement {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+const CLASS_LABEL: Record<string, string> = {
+  "automatically-portable": "Automatically portable",
+  "portable-with-review": "Portable with review",
+  "requires-redesign": "Requires redesign",
+  "unsupported-by-design": "Unsupported by design",
+  retire: "Retire",
+};
+
+/** Inventory counts: one small stat card per object kind that has any objects. */
+export function renderInventory(container: HTMLElement, report: GtmMigrationReport): void {
+  container.textContent = "";
+  const perKind = report.counts.graph.perKind;
+  const grid = el("div", "gtm-stat-grid");
+  grid.appendChild(statCard("Objects", String(report.counts.graph.nodeCount)));
+  grid.appendChild(statCard("Dependencies", String(report.counts.graph.edgeCount)));
+  grid.appendChild(statCard("Broken references", String(report.counts.graph.danglingCount)));
+  for (const [kind, count] of Object.entries(perKind)) {
+    if (!count) continue;
+    grid.appendChild(statCard(kind, String(count)));
+  }
+  container.appendChild(grid);
+}
+
+function statCard(label: string, value: string): HTMLElement {
+  const card = el("div", "gtm-stat");
+  card.appendChild(el("strong", undefined, value));
+  card.appendChild(el("span", undefined, label));
+  return card;
+}
+
+/** Dispositions grouped by class, each object with its explanation. */
+export function renderDispositions(container: HTMLElement, report: GtmMigrationReport): void {
+  container.textContent = "";
+  const byClass = new Map<string, GtmReportObject[]>();
+  for (const o of report.dispositions) {
+    const list = byClass.get(o.disposition) ?? [];
+    list.push(o);
+    byClass.set(o.disposition, list);
+  }
+  for (const [cls, count] of Object.entries(report.dispositionSummary.byClass)) {
+    if (!count) continue;
+    const group = el("div", "gtm-disposition-group");
+    const head = el("h4");
+    head.appendChild(el("span", undefined, CLASS_LABEL[cls] ?? cls));
+    head.appendChild(el("span", "chip", String(count)));
+    group.appendChild(head);
+    const items = byClass.get(cls) ?? [];
+    const ul = el("ul", "gtm-list");
+    for (const o of items) {
+      const li = el("li");
+      li.appendChild(el("strong", undefined, o.name ?? o.id ?? o.nodeKey));
+      li.appendChild(el("span", "subtle", ` ${o.kind}${o.type ? ` · ${o.type}` : ""}`));
+      li.appendChild(el("p", "note", o.explanation));
+      ul.appendChild(li);
+    }
+    group.appendChild(ul);
+    container.appendChild(group);
+  }
+}
+
+/** Dependency graph as a readable edge list (no heavy viz). */
+export function renderGraph(container: HTMLElement, report: GtmMigrationReport): void {
+  container.textContent = "";
+  const nameByKey = new Map<string, string>();
+  for (const n of report.graph.nodes) nameByKey.set(n.key, n.name ?? n.id ?? n.key);
+  if (report.graph.edges.length === 0) {
+    container.appendChild(el("p", "subtle", "No dependencies resolved between objects."));
+    return;
+  }
+  const ul = el("ul", "gtm-list");
+  for (const e of report.graph.edges) {
+    const li = el("li");
+    li.appendChild(
+      el(
+        "span",
+        undefined,
+        `${nameByKey.get(e.from) ?? e.from} → ${nameByKey.get(e.to) ?? e.to}`,
+      ),
+    );
+    li.appendChild(el("span", "chip", e.kind));
+    ul.appendChild(li);
+  }
+  container.appendChild(ul);
+}
+
+/** Unresolved findings: broken references + unsupported objects. */
+export function renderFindings(container: HTMLElement, report: GtmMigrationReport): void {
+  container.textContent = "";
+  const { dangling, unsupported } = report.findings;
+  if (dangling.length === 0 && unsupported.length === 0) {
+    container.appendChild(el("p", "subtle", "No unresolved findings."));
+    return;
+  }
+  if (unsupported.length > 0) {
+    container.appendChild(el("h4", undefined, `Unsupported by design (${unsupported.length})`));
+    const ul = el("ul", "gtm-list");
+    for (const o of unsupported) {
+      const li = el("li");
+      li.appendChild(el("strong", undefined, o.name ?? o.id ?? o.nodeKey));
+      li.appendChild(el("p", "note", o.explanation));
+      ul.appendChild(li);
+    }
+    container.appendChild(ul);
+  }
+  if (dangling.length > 0) {
+    container.appendChild(el("h4", undefined, `Broken references (${dangling.length})`));
+    const ul = el("ul", "gtm-list");
+    for (const d of dangling) {
+      const li = el("li");
+      li.appendChild(el("span", undefined, `${d.from} → ${d.refKind} "${d.ref}"`));
+      li.appendChild(el("p", "note", d.explanation));
+      ul.appendChild(li);
+    }
+    container.appendChild(ul);
+  }
+}
+
+/** Recommendations derived from the reason catalog. */
+export function renderRecommendations(
+  container: HTMLElement,
+  recommendations: GtmRecommendation[],
+): void {
+  container.textContent = "";
+  if (recommendations.length === 0) {
+    container.appendChild(el("p", "subtle", "No recommendations."));
+    return;
+  }
+  const ul = el("ul", "gtm-list");
+  for (const r of recommendations) {
+    const li = el("li");
+    const head = el("div");
+    head.appendChild(el("strong", undefined, CLASS_LABEL[r.disposition] ?? r.disposition));
+    head.appendChild(el("span", "chip", `${r.count}`));
+    head.appendChild(el("span", "subtle", ` ${r.reasonCode}`));
+    li.appendChild(head);
+    li.appendChild(el("p", "note", r.nextStep));
+    ul.appendChild(li);
+  }
+  container.appendChild(ul);
+}
+
+/** Render the whole report into the results region. Pure over the DOM. */
+export function renderReport(root: HTMLElement, report: GtmMigrationReport): void {
+  root.hidden = false;
+  const inventory = root.querySelector<HTMLElement>("[data-gtm-inventory]");
+  const graph = root.querySelector<HTMLElement>("[data-gtm-graph]");
+  const dispositions = root.querySelector<HTMLElement>("[data-gtm-dispositions]");
+  const findings = root.querySelector<HTMLElement>("[data-gtm-findings]");
+  const recommendations = root.querySelector<HTMLElement>("[data-gtm-recommendations]");
+  if (inventory) renderInventory(inventory, report);
+  if (graph) renderGraph(graph, report);
+  if (dispositions) renderDispositions(dispositions, report);
+  if (findings) renderFindings(findings, report);
+  if (recommendations) renderRecommendations(recommendations, report.recommendations);
+}
+
+// ── Controller ───────────────────────────────────────────────────────────────
+
+function withTenant(base: string, tenant: string | undefined, extra?: Record<string, string>): string {
+  const qs = new URLSearchParams();
+  if (tenant) qs.set("tenant", tenant);
+  for (const [k, v] of Object.entries(extra ?? {})) qs.set(k, v);
+  const suffix = qs.toString();
+  return suffix ? `${base}?${suffix}` : base;
+}
+
+async function readJson<T>(res: Response): Promise<T> {
+  try {
+    return (await res.json()) as T;
+  } catch {
+    return {} as T;
+  }
+}
+
+export function initGtmMigrationTab(): void {
+  const panel = document.querySelector<HTMLElement>("[data-gtm-migration-panel]");
+  if (!panel) return;
+
+  const endpoint = panel.dataset.gtmEndpoint;
+  if (!endpoint) return;
+  const tenant = panel.dataset.targetTenant || undefined;
+
+  const fileInput = panel.querySelector<HTMLInputElement>("[data-gtm-file]");
+  const analyzeBtn = panel.querySelector<HTMLButtonElement>("[data-gtm-analyze]");
+  const downloadBtn = panel.querySelector<HTMLButtonElement>("[data-gtm-download]");
+  const statusLine = panel.querySelector<HTMLElement>("[data-gtm-status]");
+  const results = panel.querySelector<HTMLElement>("[data-gtm-results]");
+
+  const setStatus = (message: string, tone: "" | "error" = ""): void => {
+    if (!statusLine) return;
+    statusLine.textContent = message;
+    statusLine.dataset.tone = tone;
+  };
+
+  const selectedFile = (): File | null => {
+    const f = fileInput?.files?.[0];
+    return f ?? null;
+  };
+
+  async function analyze(): Promise<void> {
+    const file = selectedFile();
+    if (!file) {
+      setStatus("Choose a GTM export file to analyze.", "error");
+      return;
+    }
+    setStatus(`Analyzing ${file.name}…`);
+    if (downloadBtn) downloadBtn.disabled = true;
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch(withTenant(endpoint!, tenant), { method: "POST", body: form });
+      if (!res.ok) {
+        const err = await readJson<AnalyzeErrBody>(res);
+        const detail =
+          err.violations && err.violations.length > 0
+            ? `: ${err.violations.map((v) => `${v.path ?? "(input)"} ${v.message ?? v.code ?? ""}`.trim()).join("; ")}`
+            : "";
+        setStatus(`${err.error ?? `Analyze failed (${res.status}).`}${detail}`, "error");
+        if (results) results.hidden = true;
+        return;
+      }
+      const body = await readJson<AnalyzeOkBody>(res);
+      if (!body.report) {
+        setStatus("The analyze response was empty.", "error");
+        return;
+      }
+      if (results) renderReport(results, body.report);
+      if (downloadBtn) downloadBtn.disabled = false;
+      const total = body.report.dispositionSummary.total;
+      setStatus(`Analyzed ${total} object(s). Correlation ${body.correlationId}.`);
+    } catch {
+      setStatus("Could not reach the analyze service.", "error");
+    }
+  }
+
+  async function download(): Promise<void> {
+    const file = selectedFile();
+    if (!file) {
+      setStatus("Choose and analyze a GTM export before downloading the bundle.", "error");
+      return;
+    }
+    setStatus("Preparing support bundle…");
+    try {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch(withTenant(endpoint!, tenant, { format: "bundle" }), {
+        method: "POST",
+        body: form,
+      });
+      if (!res.ok) {
+        setStatus(`Could not build the support bundle (${res.status}).`, "error");
+        return;
+      }
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = `gtm-migration-report.json`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+      setStatus("Support bundle downloaded.");
+    } catch {
+      setStatus("Could not reach the analyze service to build the bundle.", "error");
+    }
+  }
+
+  analyzeBtn?.addEventListener("click", () => void analyze());
+  downloadBtn?.addEventListener("click", () => void download());
+}