@kirrosh/zond 0.26.1 → 0.27.1

package/src/core/exporter/html-report/index.ts

@@ -1,479 +0,0 @@
-import type { RunRecord, StoredStepResult } from "../../../db/queries.ts";
-import type { FailureClass } from "../../diagnostics/failure-class.ts";
-import type { CoverageMatrix, ReasonCode, StatusClass } from "../../coverage/reasons.ts";
-import { REPO_URL } from "../../../cli/version.ts";
-import { escapeHtml, tryPrettyJson } from "./escape.ts";
-import { buildCurl } from "../curl.ts";
-import { STYLES } from "./styles.ts";
-import { SCRIPT } from "./script.ts";
-
-export interface RenderOptions {
-  run: RunRecord;
-  results: StoredStepResult[];
-  zondVersion: string;
-  generatedAt: Date;
-  /** Optional collection name for the title. */
-  collectionName?: string | null;
-  /** Optional resolved base_url (currently best-effort from results). */
-  baseUrl?: string | null;
-  /** Optional spec-aware coverage matrix with reason codes (TASK-109).
-   *  When supplied, replaces the URL-only coverage map. */
-  coverageMatrix?: CoverageMatrix;
-  /** TASK-164 (m-9 P8): truncate request/response bodies to N bytes
-   *  before rendering. Set to 0 (or omit) to keep full bodies. The
-   *  default in the CLI wrapper is 8 KB. */
-  bodyCapBytes?: number;
-}
-
-const REASON_LABEL: Record<ReasonCode, string> = {
-  "covered": "covered",
-  "partial-failed": "partial",
-  "not-generated": "not generated",
-  "no-spec": "not in spec",
-  "deprecated": "deprecated",
-  "no-fixtures": "missing fixtures",
-  "ephemeral-only": "ephemeral-only",
-  "auth-scope-mismatch": "no auth token",
-  "tag-filtered": "filtered",
-};
-
-const FAILURE_CLASS_META: Record<FailureClass, { label: string; cls: string; emoji: string }> = {
-  definitely_bug: { label: "Definitely bug", cls: "fail", emoji: "🐞" },
-  likely_bug: { label: "Likely bug", cls: "warn", emoji: "⚠️" },
-  quirk: { label: "Quirk", cls: "info", emoji: "·" },
-  env_issue: { label: "Env issue", cls: "info", emoji: "🌐" },
-  cascade: { label: "Cascade", cls: "info", emoji: "↳" },
-};
-
-const STATUS_LABEL: Record<string, { label: string; cls: string }> = {
-  pass: { label: "PASS", cls: "solid-pass" },
-  fail: { label: "FAIL", cls: "solid-fail" },
-  error: { label: "ERROR", cls: "solid-fail" },
-  skip: { label: "SKIP", cls: "" },
-};
-
-function formatDate(iso: string | null | undefined): string {
-  if (!iso) return "—";
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return iso;
-  return d.toLocaleString();
-}
-
-function formatDuration(ms: number | null | undefined): string {
-  if (ms == null) return "—";
-  if (ms < 1000) return `${ms} ms`;
-  return `${(ms / 1000).toFixed(2)} s`;
-}
-
-function pickBaseUrl(results: StoredStepResult[]): string | null {
-  for (const r of results) {
-    if (!r.request_url) continue;
-    try {
-      const u = new URL(r.request_url);
-      return `${u.protocol}//${u.host}`;
-    } catch {
-      // not absolute
-    }
-  }
-  return null;
-}
-
-interface CoverageRow {
-  endpoint: string;
-  buckets: Record<string, "ok" | "4xx" | "5xx" | "err" | undefined>;
-}
-
-const METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"] as const;
-
-function buildCoverage(results: StoredStepResult[]): CoverageRow[] {
-  // Group by request_url path × method, pick worst observed status per cell.
-  const rows = new Map<string, CoverageRow>();
-  for (const r of results) {
-    if (!r.request_url || !r.request_method) continue;
-    let path: string;
-    try {
-      path = new URL(r.request_url).pathname;
-    } catch {
-      path = r.request_url;
-    }
-    const method = r.request_method.toUpperCase();
-    if (!METHODS.includes(method as typeof METHODS[number])) continue;
-    let row = rows.get(path);
-    if (!row) {
-      row = { endpoint: path, buckets: {} };
-      rows.set(path, row);
-    }
-    const status = r.response_status;
-    let cell: "ok" | "4xx" | "5xx" | "err";
-    if (r.status === "error" || status == null) cell = "err";
-    else if (status >= 500) cell = "5xx";
-    else if (status >= 400) cell = "4xx";
-    else cell = "ok";
-    const existing = row.buckets[method];
-    // Worst-of-cell precedence: err/5xx > 4xx > ok
-    const rank = { ok: 0, "4xx": 1, "5xx": 2, err: 3 } as const;
-    if (!existing || rank[cell] > rank[existing]) {
-      row.buckets[method] = cell;
-    }
-  }
-  return [...rows.values()].sort((a, b) => a.endpoint.localeCompare(b.endpoint));
-}
-
-function badgeForStatus(status: number | null): string {
-  if (status == null) return `<span class="badge fail">no resp</span>`;
-  const cls = status >= 500 ? "fail" : status >= 400 ? "warn" : "pass";
-  return `<span class="badge ${cls}">${status}</span>`;
-}
-
-function failureClassBadge(fc: FailureClass | null, reason: string | null): string {
-  if (!fc) return "";
-  const meta = FAILURE_CLASS_META[fc];
-  const title = reason ? ` title="${escapeHtml(reason)}"` : "";
-  return `<span class="badge ${meta.cls}"${title}>${meta.emoji} ${meta.label}</span>`;
-}
-
-function renderProvenance(prov: StoredStepResult["provenance"]): string {
-  if (!prov) return "";
-  const parts: string[] = [];
-  if (prov.type) parts.push(`<span class="badge">${escapeHtml(prov.type)}</span>`);
-  if (prov.generator) parts.push(`<span class="mono" style="font-size:11px;color:var(--fg-muted)">${escapeHtml(prov.generator)}</span>`);
-  if (prov.endpoint) parts.push(`<span class="mono" style="font-size:11px">${escapeHtml(prov.endpoint)}</span>`);
-  if (prov.response_branch) parts.push(`<span class="badge info">→ ${escapeHtml(prov.response_branch)}</span>`);
-  return parts.length > 0 ? `<div style="display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px">${parts.join("")}</div>` : "";
-}
-
-function renderSpecSnippet(pointer: string | null, excerpt: string | null): string {
-  if (!pointer && !excerpt) return "";
-  const ptrBlock = pointer
-    ? `<div class="code-label">Spec pointer</div><pre class="code">${escapeHtml(pointer)}</pre>`
-    : "";
-  const exBlock = excerpt
-    ? `<div class="code-label">Spec excerpt</div><pre class="code" data-lang="json">${escapeHtml(tryPrettyJson(excerpt))}</pre>`
-    : "";
-  return ptrBlock + exBlock;
-}
-
-function renderAssertions(asserts: StoredStepResult["assertions"]): string {
-  if (asserts.length === 0) {
-    return `<div class="empty" style="padding:16px">No assertions recorded.</div>`;
-  }
-  return `<ul class="asserts">${asserts.map((a) => {
-    const cls = a.passed ? "passed" : "failed";
-    const expected = a.expected !== undefined ? escapeHtml(JSON.stringify(a.expected)) : "";
-    const actual = a.actual !== undefined ? escapeHtml(JSON.stringify(a.actual)) : "";
-    const diff = !a.passed && (a.expected !== undefined || a.actual !== undefined)
-      ? `<div class="a-diff">
-           <div><span class="lbl">expected:</span> ${expected}</div>
-           <div><span class="lbl">actual:</span> ${actual}</div>
-         </div>`
-      : "";
-    return `<li class="${cls}">
-      <div class="a-head">
-        <span class="badge ${a.passed ? "pass" : "fail"} dot">${escapeHtml(a.rule || "assertion")}</span>
-        ${a.field ? `<span class="mono" style="font-size:11px;color:var(--fg-muted)">${escapeHtml(a.field)}</span>` : ""}
-      </div>
-      ${diff}
-    </li>`;
-  }).join("")}</ul>`;
-}
-
-function renderHeaders(rawJson: string | null): string {
-  if (!rawJson) return `<div class="empty" style="padding:16px">No headers.</div>`;
-  return `<pre class="code" data-lang="json">${escapeHtml(tryPrettyJson(rawJson))}</pre>`;
-}
-
-/**
- * TASK-164 (m-9 P8): truncate body to N bytes when a positive cap is
- * supplied. Returns the original string when cap ≤ 0 or content fits.
- * Marker mirrors the existing DB-truncation marker so users see one
- * consistent format.
- */
-export function capBody(content: string | null, capBytes: number | undefined): string | null {
-  if (!content) return content;
-  if (!capBytes || capBytes <= 0 || content.length <= capBytes) return content;
-  const head = content.slice(0, capBytes);
-  const dropped = content.length - capBytes;
-  return `${head}\n[truncated ${dropped} bytes; first ${capBytes} shown; full body in run DB]`;
-}
-
-function renderBody(label: string, content: string | null, capBytes?: number): string {
-  if (!content) return `<div class="code-label">${label}</div><div class="empty" style="padding:12px;font-size:11px">empty</div>`;
-  const capped = capBody(content, capBytes) ?? content;
-  const isJson = (() => { try { JSON.parse(capped); return true; } catch { return false; } })();
-  const lang = isJson ? "json" : "text";
-  const display = isJson ? tryPrettyJson(capped) : capped;
-  return `<div class="code-label">${label}</div><pre class="code" data-lang="${lang}">${escapeHtml(display)}</pre>`;
-}
-
-function buildIssueMarkdown(step: StoredStepResult, run: RunRecord): string {
-  const fc = step.failure_class ? FAILURE_CLASS_META[step.failure_class].label : "Unclassified";
-  const lines: string[] = [];
-  lines.push(`## ${step.test_name}`);
-  lines.push("");
-  lines.push(`**Endpoint:** \`${step.request_method ?? "?"} ${step.request_url ?? "?"}\`  `);
-  lines.push(`**Status:** ${step.response_status ?? "—"} · **Result:** ${step.status} · **Class:** ${fc}`);
-  if (step.failure_class_reason) {
-    lines.push(`**Reason:** ${step.failure_class_reason}`);
-  }
-  lines.push(`**Run:** zond run #${run.id} (${run.started_at})`);
-  lines.push("");
-  lines.push("### Reproduce");
-  lines.push("```sh");
-  lines.push(buildCurl(step));
-  lines.push("```");
-  if (step.response_body) {
-    lines.push("");
-    lines.push("### Response body");
-    lines.push("```json");
-    lines.push(tryPrettyJson(step.response_body));
-    lines.push("```");
-  }
-  if (step.spec_pointer) {
-    lines.push("");
-    lines.push(`**OpenAPI pointer:** \`${step.spec_pointer}\``);
-  }
-  const failedA = step.assertions.filter((a) => !a.passed);
-  if (failedA.length > 0) {
-    lines.push("");
-    lines.push("### Failed assertions");
-    for (const a of failedA) {
-      lines.push(`- \`${a.rule}\` at \`${a.field}\`: expected ${JSON.stringify(a.expected)}, got ${JSON.stringify(a.actual)}`);
-    }
-  }
-  lines.push("");
-  lines.push("---");
-  lines.push(`_Generated by [zond](${REPO_URL})._`);
-  return lines.join("\n");
-}
-
-function renderFailureCard(step: StoredStepResult, run: RunRecord, capBytes?: number): string {
-  const method = (step.request_method ?? "—").toUpperCase();
-  const fcKey = step.failure_class ?? "unclassified";
-  const curl = buildCurl(step);
-  const issueMd = buildIssueMarkdown(step, run);
-
-  return `<li class="card" data-fclass="${escapeHtml(fcKey)}">
-    <button type="button" class="head">
-      <svg class="chev" viewBox="0 0 16 16" fill="currentColor"><path d="M5.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06L6.28 11.78a.75.75 0 0 1-1.06-1.06L7.94 8 5.22 5.28a.75.75 0 0 1 0-1.06Z"/></svg>
-      <span class="method ${method}">${escapeHtml(method)}</span>
-      <span class="name" title="${escapeHtml(step.test_name)}">${escapeHtml(step.test_name)}</span>
-      <span class="badges">
-        ${failureClassBadge(step.failure_class, step.failure_class_reason)}
-        ${badgeForStatus(step.response_status)}
-        <span class="badge ${STATUS_LABEL[step.status]?.cls ?? ""}">${STATUS_LABEL[step.status]?.label ?? step.status}</span>
-      </span>
-    </button>
-    <div class="body">
-      <div class="actions">
-        <button class="btn" data-copy="curl">📋 Copy curl</button>
-        <button class="btn" data-copy="issue">🐙 Copy as GitHub issue</button>
-      </div>
-      <div class="tabs">
-        <button class="active" data-tab="response">Response</button>
-        <button data-tab="request">Request</button>
-        <button data-tab="assertions">Assertions (${step.assertions.length})</button>
-        <button data-tab="source">Source</button>
-      </div>
-      <div class="panel active" data-tab="response">
-        <dl class="kv">
-          <dt>Status</dt><dd>${step.response_status ?? "—"}</dd>
-          <dt>Duration</dt><dd>${formatDuration(step.duration_ms)}</dd>
-          ${step.error_message ? `<dt>Error</dt><dd style="color:var(--fail)">${escapeHtml(step.error_message)}</dd>` : ""}
-        </dl>
-        <div class="code-label">Headers</div>${renderHeaders(step.response_headers)}
-        ${renderBody("Body", step.response_body, capBytes)}
-      </div>
-      <div class="panel" data-tab="request">
-        <dl class="kv">
-          <dt>Method</dt><dd class="mono">${escapeHtml(method)}</dd>
-          <dt>URL</dt><dd class="mono">${escapeHtml(step.request_url ?? "—")}</dd>
-        </dl>
-        ${renderBody("Body", step.request_body, capBytes)}
-      </div>
-      <div class="panel" data-tab="assertions">${renderAssertions(step.assertions)}</div>
-      <div class="panel" data-tab="source">
-        ${renderProvenance(step.provenance)}
-        ${renderSpecSnippet(step.spec_pointer, step.spec_excerpt)}
-        ${!step.provenance && !step.spec_pointer && !step.spec_excerpt ? `<div class="empty" style="padding:16px">No source metadata recorded.</div>` : ""}
-      </div>
-      <pre data-payload="curl" hidden>${escapeHtml(curl)}</pre>
-      <pre data-payload="issue" hidden>${escapeHtml(issueMd)}</pre>
-    </div>
-  </li>`;
-}
-
-function renderRing(passRate: number, totalLabel: string): string {
-  const r = 56;
-  const C = 2 * Math.PI * r;
-  const offset = C * (1 - passRate / 100);
-  const color = passRate >= 90 ? "var(--pass)" : passRate >= 60 ? "var(--warn)" : "var(--fail)";
-  return `<div class="ring">
-    <svg viewBox="0 0 140 140">
-      <circle class="track" cx="70" cy="70" r="${r}" fill="none" stroke-width="12"/>
-      <circle class="fill" cx="70" cy="70" r="${r}" fill="none" stroke-width="12"
-        stroke="${color}" stroke-linecap="round"
-        stroke-dasharray="${C.toFixed(2)}" stroke-dashoffset="${offset.toFixed(2)}"/>
-    </svg>
-    <div class="label"><div class="pct">${passRate.toFixed(0)}%</div><div class="lbl">${totalLabel}</div></div>
-  </div>`;
-}
-
-function renderCoverage(rows: CoverageRow[]): string {
-  if (rows.length === 0) return "";
-  const cellCls: Record<NonNullable<CoverageRow["buckets"][string]>, string> = {
-    ok: "s2",
-    "4xx": "s4",
-    "5xx": "s5",
-    err: "serr",
-  };
-  const cellLabel: Record<NonNullable<CoverageRow["buckets"][string]>, string> = {
-    ok: "2xx",
-    "4xx": "4xx",
-    "5xx": "5xx",
-    err: "ERR",
-  };
-  const header = `<div class="cov-row">
-    <div class="cov-cell head path">Endpoint</div>
-    ${METHODS.map((m) => `<div class="cov-cell head">${m}</div>`).join("")}
-  </div>`;
-  const body = rows.map((row) => {
-    const cells = METHODS.map((m) => {
-      const v = row.buckets[m];
-      return v
-        ? `<div class="cov-cell ${cellCls[v]}">${cellLabel[v]}</div>`
-        : `<div class="cov-cell empty">·</div>`;
-    }).join("");
-    return `<div class="cov-row"><div class="cov-cell path mono" title="${escapeHtml(row.endpoint)}">${escapeHtml(row.endpoint)}</div>${cells}</div>`;
-  }).join("");
-  return `<section>
-    <h2>Coverage map <span class="count">${rows.length} endpoint${rows.length === 1 ? "" : "s"} touched</span></h2>
-    <div class="cov-grid">${header}${body}</div>
-  </section>`;
-}
-
-function renderCoverageWithReasons(matrix: CoverageMatrix): string {
-  if (matrix.rows.length === 0) return "";
-  const classes: StatusClass[] = ["2xx", "4xx", "5xx"];
-  const cellCls = (s: "covered" | "partial" | "uncovered") =>
-    s === "covered" ? "s2" : s === "partial" ? "s4" : "su";
-  const header = `<div class="cov-row reasons">
-    <div class="cov-cell head path">Endpoint</div>
-    ${classes.map((c) => `<div class="cov-cell head">${c}</div>`).join("")}
-  </div>`;
-  const body = matrix.rows.map((row) => {
-    const cells = classes.map((c) => {
-      const cell = row.cells[c];
-      const reasonChips = cell.reasons.map((r) =>
-        `<span class="rchip" title="${escapeHtml(r)}">${escapeHtml(REASON_LABEL[r])}</span>`,
-      ).join("");
-      return `<div class="cov-cell ${cellCls(cell.status)} reasons">${reasonChips}</div>`;
-    }).join("");
-    const tagBadges = row.tags.length > 0
-      ? row.tags.map((t) => `<span class="badge muted">${escapeHtml(t)}</span>`).join("")
-      : "";
-    const deprecated = row.deprecated ? `<span class="badge warn">deprecated</span>` : "";
-    return `<div class="cov-row reasons">
-      <div class="cov-cell path mono"><span class="method-mini">${escapeHtml(row.method)}</span> ${escapeHtml(row.path)} ${deprecated}${tagBadges}</div>
-      ${cells}
-    </div>`;
-  }).join("");
-  const t = matrix.totals;
-  const pct = t.cells === 0 ? 0 : Math.round((t.covered / t.cells) * 1000) / 10;
-  return `<section>
-    <h2>Coverage map <span class="count">${pct}% covered · ${t.endpoints} endpoint${t.endpoints === 1 ? "" : "s"} × 3 classes</span></h2>
-    <div class="cov-grid wide">${header}${body}</div>
-  </section>`;
-}
-
-export function renderHtmlReport(opts: RenderOptions): string {
-  const { run, results, zondVersion, generatedAt, collectionName } = opts;
-  const failures = results.filter((r) => r.status !== "pass" && r.status !== "skip");
-  const passed = results.filter((r) => r.status === "pass").length;
-  const total = results.length;
-  const passRate = total > 0 ? (passed / total) * 100 : 0;
-  const baseUrl = opts.baseUrl ?? pickBaseUrl(results);
-  const errored = results.filter((r) => r.status === "error").length;
-  const coverage = buildCoverage(results);
-
-  // Failure-class breakdown
-  const fcCounts: Record<string, number> = {};
-  for (const f of failures) {
-    const k = f.failure_class ?? "unclassified";
-    fcCounts[k] = (fcCounts[k] ?? 0) + 1;
-  }
-  const fcKeys = Object.keys(fcCounts);
-
-  const title = collectionName
-    ? `${collectionName} · Run #${run.id}`
-    : `zond Run #${run.id}`;
-
-  const filterButtons = `<div class="filters">
-    <button class="active" data-filter="all">All (${failures.length})</button>
-    ${fcKeys.map((k) => {
-      const meta = k === "unclassified"
-        ? { label: "Unclassified", emoji: "?" }
-        : { label: FAILURE_CLASS_META[k as FailureClass].label, emoji: FAILURE_CLASS_META[k as FailureClass].emoji };
-      return `<button data-filter="${escapeHtml(k)}">${meta.emoji} ${meta.label} (${fcCounts[k]})</button>`;
-    }).join("")}
-  </div>`;
-
-  const failuresSection = failures.length === 0
-    ? `<section>
-        <h2>Failures</h2>
-        <div class="empty">🎉 All ${total} step${total === 1 ? "" : "s"} passed — nothing to investigate.</div>
-      </section>`
-    : `<section>
-        <h2>Failures <span class="count">${failures.length} of ${total} step${total === 1 ? "" : "s"}</span></h2>
-        ${fcKeys.length > 0 ? filterButtons : ""}
-        <ul class="cards">
-          ${failures.map((f) => renderFailureCard(f, run, opts.bodyCapBytes)).join("")}
-        </ul>
-      </section>`;
-
-  return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escapeHtml(title)}</title>
-<meta name="generator" content="zond ${escapeHtml(zondVersion)}">
-<style>${STYLES}</style>
-</head>
-<body>
-<div class="container">
-  <header class="hero">
-    <div>
-      <h1>${escapeHtml(title)}</h1>
-      <div class="sub">${escapeHtml(run.environment ?? "no environment")} ${baseUrl ? `· <span class="mono">${escapeHtml(baseUrl)}</span>` : ""}</div>
-      <dl class="meta">
-        <div><dt>Started</dt><dd>${formatDate(run.started_at)}</dd></div>
-        <div><dt>Finished</dt><dd>${formatDate(run.finished_at)}</dd></div>
-        <div><dt>Duration</dt><dd>${formatDuration(run.duration_ms)}</dd></div>
-        <div><dt>Trigger</dt><dd>${escapeHtml(run.trigger ?? "—")}</dd></div>
-        <div><dt>Branch</dt><dd>${escapeHtml(run.branch ?? "—")}</dd></div>
-        <div><dt>Commit</dt><dd class="mono">${escapeHtml(run.commit_sha?.slice(0, 8) ?? "—")}</dd></div>
-      </dl>
-    </div>
-    ${renderRing(passRate, total === 0 ? "no tests" : `${passed}/${total} pass`)}
-  </header>
-
-  <div class="kpis">
-    <div class="kpi"><div class="n">${total}</div><div class="l">Total</div></div>
-    <div class="kpi pass"><div class="n">${passed}</div><div class="l">Passed</div></div>
-    <div class="kpi fail"><div class="n">${run.failed}</div><div class="l">Failed</div></div>
-    ${errored > 0 ? `<div class="kpi warn"><div class="n">${errored}</div><div class="l">Errored</div></div>` : ""}
-    ${run.skipped > 0 ? `<div class="kpi"><div class="n">${run.skipped}</div><div class="l">Skipped</div></div>` : ""}
-  </div>
-
-  ${failuresSection}
-  ${opts.coverageMatrix ? renderCoverageWithReasons(opts.coverageMatrix) : renderCoverage(coverage)}
-
-  <footer>
-    <span>zond <span class="mono">${escapeHtml(zondVersion)}</span> · generated ${escapeHtml(generatedAt.toISOString())}</span>
-    <span><a href="${escapeHtml(REPO_URL)}">${escapeHtml(REPO_URL.replace(/^https?:\/\//, ""))}</a></span>
-  </footer>
-</div>
-<script>${SCRIPT}</script>
-</body>
-</html>`;
-}

package/src/core/exporter/html-report/script.ts

@@ -1,100 +0,0 @@
-// Inline JS for the report. No external deps. Uses RegExp() with string args
-// to dodge backslash-escaping headaches inside the TS template literal.
-
-export const SCRIPT = `
-(() => {
-  // JSON highlighter: build regex from a string source.
-  var src = '("(?:\\\\\\\\.|[^"\\\\\\\\])*")(\\\\s*:)?|\\\\b(true|false|null)\\\\b|-?\\\\d+(?:\\\\.\\\\d+)?(?:[eE][+-]?\\\\d+)?';
-  var reJson = new RegExp(src, 'g');
-  function highlight(str) {
-    return str.replace(reJson, function (m, quoted, colon, kw) {
-      if (quoted) {
-        return colon
-          ? '<span class="j-key">' + quoted + '</span>' + colon
-          : '<span class="j-str">' + quoted + '</span>';
-      }
-      if (kw === 'true' || kw === 'false') return '<span class="j-bool">' + kw + '</span>';
-      if (kw === 'null') return '<span class="j-null">null</span>';
-      return '<span class="j-num">' + m + '</span>';
-    });
-  }
-  document.querySelectorAll('pre.code[data-lang="json"]').forEach(function (el) {
-    if (el.dataset.hl === '1') return;
-    el.dataset.hl = '1';
-    el.innerHTML = highlight(el.textContent || '');
-  });
-
-  // Card expand/collapse.
-  document.querySelectorAll('.card .head').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      btn.closest('.card').classList.toggle('open');
-    });
-  });
-
-  // Tabs (per card).
-  document.querySelectorAll('.tabs').forEach(function (tabs) {
-    tabs.querySelectorAll('button').forEach(function (btn) {
-      btn.addEventListener('click', function () {
-        var target = btn.dataset.tab;
-        var card = btn.closest('.card');
-        card.querySelectorAll('.tabs button').forEach(function (b) {
-          b.classList.toggle('active', b === btn);
-        });
-        card.querySelectorAll('.panel').forEach(function (p) {
-          p.classList.toggle('active', p.dataset.tab === target);
-        });
-      });
-    });
-  });
-
-  function flash(btn, ok) {
-    var orig = btn.dataset.label || btn.textContent;
-    btn.dataset.label = orig;
-    btn.textContent = ok ? '✓ Copied' : '✗ Failed';
-    btn.classList.add('copied');
-    setTimeout(function () {
-      btn.textContent = orig;
-      btn.classList.remove('copied');
-    }, 1500);
-  }
-  function copyText(text, btn) {
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(text).then(
-        function () { flash(btn, true); },
-        function () { fallbackCopy(text, btn); },
-      );
-    } else {
-      fallbackCopy(text, btn);
-    }
-  }
-  function fallbackCopy(text, btn) {
-    var ta = document.createElement('textarea');
-    ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
-    document.body.appendChild(ta); ta.select();
-    try { document.execCommand('copy'); flash(btn, true); }
-    catch (e) { flash(btn, false); }
-    finally { document.body.removeChild(ta); }
-  }
-  document.querySelectorAll('[data-copy]').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      var sel = btn.dataset.copy;
-      var src = btn.closest('.card').querySelector('[data-payload="' + sel + '"]');
-      var text = src ? (src.textContent || '') : '';
-      copyText(text, btn);
-    });
-  });
-
-  // Failure-class filter.
-  var filterBtns = document.querySelectorAll('.filters [data-filter]');
-  filterBtns.forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      var f = btn.dataset.filter;
-      filterBtns.forEach(function (b) { b.classList.toggle('active', b === btn); });
-      document.querySelectorAll('.cards .card').forEach(function (c) {
-        var fc = c.dataset.fclass || 'unclassified';
-        c.classList.toggle('hidden', f !== 'all' && fc !== f);
-      });
-    });
-  });
-})();
-`;