@mhosaic/feedback 0.19.0 → 0.21.0

package/dist/qa-meter.mjs

@@ -0,0 +1,1614 @@
+// src/qa-meter/mount.tsx
+import { h as h5, render } from "preact";
+import { useCallback, useEffect as useEffect2, useState as useState3 } from "preact/hooks";
+
+// src/qa-meter/i18n.ts
+var QA_STRINGS_FR = {
+  "pastille.label": "Suivi des tests",
+  "pastille.loading": "Chargement\u2026",
+  "pastille.unavailable": "Statuts indisponibles",
+  "pastille.unknownPage": "Page inconnue",
+  "pastille.unknownPageHint": "Cette route n\u2019est pas encore au plan du site des tests.",
+  "panel.freshness": "Statuts g\xE9n\xE9r\xE9s le {date} \xB7 version {version} \xB7 env {env}",
+  "panel.noScenarios": "Aucun sc\xE9nario li\xE9 \xE0 cette page.",
+  "panel.openSitemap": "Voir le plan du site",
+  "panel.sitemapLink": "Plan du site",
+  "panel.scenarioCountOne": "{count} sc\xE9nario",
+  "panel.scenarioCountMany": "{count} sc\xE9narios",
+  "panel.laneAutomated": "Automatis\xE9",
+  "panel.laneDev": "D\xE9v",
+  "panel.laneClient": "Client",
+  "lane.notTested": "Non test\xE9",
+  "lane.validatedBy": "Valid\xE9 par {by}",
+  "lane.rejectedBy": "Rejet\xE9 par {by}",
+  "lane.stale": "Valid\xE9 en v{version}, version actuelle v{current}",
+  "lane.clientPending": "Non test\xE9 \u2014 plateforme requise",
+  "lane.bot": "Automatis\xE9 (bot)",
+  "lane.code": "D\xE9veloppeur (code)",
+  "lane.human": "Humain",
+  "laneState.ok": "\xC0 jour",
+  "laneState.issue": "Probl\xE8me",
+  "laneState.none": "Non fait / p\xE9rim\xE9",
+  "color.green": "Valid\xE9",
+  "color.yellow": "En attente",
+  "color.red": "En \xE9chec",
+  "color.gray": "Non couvert",
+  "automated.passing": "R\xE9ussi",
+  "automated.failing": "En \xE9chec",
+  "automated.flaky": "Instable",
+  "automated.neverRun": "Jamais ex\xE9cut\xE9",
+  "source.testgen": "g\xE9n\xE9r\xE9",
+  "source.testgenHint": "Sc\xE9nario g\xE9n\xE9r\xE9 automatiquement (testgen)",
+  "suite.cases": "{count} cas",
+  "case.covered": "auto",
+  "case.manual": "manuel",
+  "case.blocked": "bloqu\xE9",
+  "case.openQuestion": "question produit",
+  "grounding.verified": "attendu v\xE9rifi\xE9",
+  "grounding.confirmLive": "\xE0 confirmer en live",
+  "grounding.productQuestion": "d\xE9cision produit",
+  "modal.title": "Plan du site \u2014 suivi des tests",
+  "modal.close": "Fermer",
+  "modal.tabPages": "Pages",
+  "modal.tabScenarios": "Sc\xE9narios",
+  "modal.youAreHere": "vous \xEAtes ici",
+  "modal.search": "Filtrer les sc\xE9narios\u2026",
+  "modal.noMatch": "Aucun sc\xE9nario ne correspond au filtre.",
+  "modal.traversed": "Travers\xE9es",
+  "modal.appliesTo": "{count} pages",
+  "modal.kpiPagesCovered": "Pages avec \u2265 1 sc\xE9nario",
+  "modal.kpiScenariosPassing": "Sc\xE9narios passants",
+  // New keys (not in donor)
+  "panel.noTests": "Aucun test ne couvre encore cette page.",
+  "panel.unknownPage": "Page inconnue du registre QA."
+};
+var QA_STRINGS_EN = {
+  "pastille.label": "Test tracking",
+  "pastille.loading": "Loading\u2026",
+  "pastille.unavailable": "Statuses unavailable",
+  "pastille.unknownPage": "Unknown page",
+  "pastille.unknownPageHint": "This route isn\u2019t in the test sitemap yet.",
+  "panel.freshness": "Statuses generated on {date} \xB7 version {version} \xB7 env {env}",
+  "panel.noScenarios": "No scenario linked to this page.",
+  "panel.openSitemap": "View sitemap",
+  "panel.sitemapLink": "Sitemap",
+  "panel.scenarioCountOne": "{count} scenario",
+  "panel.scenarioCountMany": "{count} scenarios",
+  "panel.laneAutomated": "Automated",
+  "panel.laneDev": "Dev",
+  "panel.laneClient": "Client",
+  "lane.notTested": "Not tested",
+  "lane.validatedBy": "Validated by {by}",
+  "lane.rejectedBy": "Rejected by {by}",
+  "lane.stale": "Validated in v{version}, current version v{current}",
+  "lane.clientPending": "Not tested \u2014 platform required",
+  "lane.bot": "Automated (bot)",
+  "lane.code": "Developer (code)",
+  "lane.human": "Human",
+  "laneState.ok": "Up to date",
+  "laneState.issue": "Issue",
+  "laneState.none": "Not done / stale",
+  "color.green": "Validated",
+  "color.yellow": "Pending",
+  "color.red": "Failing",
+  "color.gray": "Not covered",
+  "automated.passing": "Passing",
+  "automated.failing": "Failing",
+  "automated.flaky": "Flaky",
+  "automated.neverRun": "Never run",
+  "source.testgen": "generated",
+  "source.testgenHint": "Auto-generated scenario (testgen)",
+  "suite.cases": "{count} cases",
+  "case.covered": "auto",
+  "case.manual": "manual",
+  "case.blocked": "blocked",
+  "case.openQuestion": "product question",
+  "grounding.verified": "expected verified",
+  "grounding.confirmLive": "confirm live",
+  "grounding.productQuestion": "product decision",
+  "modal.title": "Sitemap \u2014 test tracking",
+  "modal.close": "Close",
+  "modal.tabPages": "Pages",
+  "modal.tabScenarios": "Scenarios",
+  "modal.youAreHere": "you are here",
+  "modal.search": "Filter scenarios\u2026",
+  "modal.noMatch": "No scenario matches the filter.",
+  "modal.traversed": "Traversed",
+  "modal.appliesTo": "{count} pages",
+  "modal.kpiPagesCovered": "Pages with \u2265 1 scenario",
+  "modal.kpiScenariosPassing": "Passing scenarios",
+  // New keys (not in donor)
+  "panel.noTests": "No tests cover this page yet.",
+  "panel.unknownPage": "Page unknown to the QA registry."
+};
+function resolveStrings(locale) {
+  return locale === "en" ? QA_STRINGS_EN : QA_STRINGS_FR;
+}
+
+// src/qa-meter/resolver.ts
+function normalizePattern(pattern) {
+  if (!pattern) return "/";
+  let n = pattern.startsWith("/") ? pattern : `/${pattern}`;
+  n = n.replace(/\/{2,}/g, "/");
+  if (n.length > 1) n = n.replace(/\/+$/, "");
+  return n.length > 0 ? n : "/";
+}
+var segments = (p) => p.split("/").filter(Boolean);
+function matchesPattern(pathSegs, patternSegs) {
+  let required = patternSegs.length;
+  while (required > 0) {
+    const last = patternSegs[required - 1];
+    if (last !== void 0 && last.startsWith(":") && last.endsWith("?")) required--;
+    else break;
+  }
+  if (pathSegs.length < required || pathSegs.length > patternSegs.length) return false;
+  return pathSegs.every((seg, i) => {
+    const pat = patternSegs[i];
+    return pat !== void 0 && (pat.startsWith(":") || pat === seg);
+  });
+}
+function resolvePage(pathname, patterns) {
+  const pathSegs = segments(normalizePattern(pathname));
+  let best = null;
+  let bestScore = -1;
+  for (const pattern of patterns) {
+    const patSegs = segments(pattern);
+    if (!matchesPattern(pathSegs, patSegs)) continue;
+    const statics = patSegs.filter((s) => !s.startsWith(":")).length;
+    const score = statics * 100 + patSegs.length;
+    if (score > bestScore) {
+      best = pattern;
+      bestScore = score;
+    }
+  }
+  return best;
+}
+
+// src/qa-meter/styles.ts
+var QA_METER_STYLES = `
+:host {
+  --mqa-z-index: 2147483639;
+  --mqa-z-panel: 2147483638;
+
+  /* Color tokens */
+  --mqa-green: #16a34a;
+  --mqa-yellow: #eab308;
+  --mqa-red: #dc2626;
+  --mqa-gray: #9ca3af;
+
+  /* Surface */
+  --mqa-bg: #ffffff;
+  --mqa-surface: #f9fafb;
+  --mqa-border: #e5e7eb;
+  --mqa-text: #111827;
+  --mqa-text-muted: #6b7280;
+  --mqa-primary: #3b82f6;
+  --mqa-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.12);
+  --mqa-shadow-xl: 0 24px 56px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10);
+
+  /* Font */
+  --mqa-font: system-ui, -apple-system, sans-serif;
+  --mqa-radius: 8px;
+
+  all: initial;
+  font-family: var(--mqa-font);
+  color: var(--mqa-text);
+  position: fixed;
+  z-index: var(--mqa-z-index);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --mqa-bg: #1e293b;
+    --mqa-surface: #0f172a;
+    --mqa-border: #334155;
+    --mqa-text: #f8fafc;
+    --mqa-text-muted: #94a3b8;
+    --mqa-shadow-xl: 0 24px 56px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.40);
+  }
+}
+
+/* \u2500\u2500 Semaphore modifier classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa--green  { background: var(--mqa-green); }
+.qa--yellow { background: var(--mqa-yellow); }
+.qa--red    { background: var(--mqa-red); }
+.qa--gray   { background: var(--mqa-gray); }
+
+/* Priority modifiers (color only \u2014 components set sizing). */
+.qa-prio--p0 { color: var(--mqa-red); }
+.qa-prio--p1 { color: var(--mqa-yellow); }
+.qa-prio--p2 { color: var(--mqa-green); }
+.qa-prio--p3 { color: var(--mqa-gray); }
+
+/* \u2500\u2500 Pastille (FAB circle) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-pastille {
+  position: fixed;
+  right: var(--mqa-right, 1.5rem);
+  bottom: var(--mqa-bottom, 1.5rem);
+  z-index: var(--mqa-z-index);
+}
+
+.qa-pastille__dot {
+  width: 48px;
+  height: 48px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--mqa-shadow);
+  color: rgba(0, 0, 0, 0.5);
+  animation: qa-heartbeat 2.4s ease-in-out infinite;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  border: none;
+}
+
+.qa-pastille__dot:hover {
+  transform: scale(1.12);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+}
+
+.qa-pastille__ecg {
+  width: 30px;
+  height: 15px;
+}
+
+/* Secondary size: half-scale pastille for the integrated second-FAB use. */
+:host([data-mqa-size="sm"]) .qa-pastille__dot { width: 24px; height: 24px; }
+:host([data-mqa-size="sm"]) .qa-pastille__ecg { width: 15px; height: 8px; }
+
+.qa-pastille__panel {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  right: 0;
+  z-index: var(--mqa-z-panel);
+}
+
+/* Color overrides: on colored backgrounds the ECG trace needs a dark stroke. */
+.qa-pastille__dot.qa--green,
+.qa-pastille__dot.qa--yellow,
+.qa-pastille__dot.qa--red {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.qa-pastille__dot.qa--gray {
+  background: rgba(156, 163, 175, 0.35);
+  color: rgba(0, 0, 0, 0.45);
+}
+
+@keyframes qa-heartbeat {
+  0%, 100% { transform: scale(1); }
+  8%        { transform: scale(1.1); }
+  16%       { transform: scale(1); }
+  24%       { transform: scale(1.06); }
+}
+
+.qa-fade-enter-active,
+.qa-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.qa-fade-enter-from,
+.qa-fade-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qa-pastille__dot { animation: none; transition: none; }
+}
+
+/* \u2500\u2500 Test panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-panel {
+  background: var(--mqa-bg);
+  border-radius: var(--mqa-radius);
+  border: 1px solid var(--mqa-border);
+  box-shadow: var(--mqa-shadow-xl);
+  width: 340px;
+  max-height: 60vh;
+  overflow: hidden auto;
+  font-size: 0.8125rem;
+  color: var(--mqa-text);
+}
+
+.qa-panel__empty {
+  padding: 0.75rem;
+  opacity: 0.7;
+}
+
+.qa-panel__list,
+.qa-panel__groups {
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style: none;
+}
+
+.qa-panel__foot {
+  border-top: 1px solid var(--mqa-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  position: sticky;
+  bottom: 0;
+  background: var(--mqa-bg);
+}
+
+.qa-panel__count {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 0.6875rem;
+  opacity: 0.65;
+}
+
+.qa-panel__link {
+  flex: none;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--mqa-primary);
+  background: none;
+  border: none;
+  font: inherit;
+}
+
+.qa-panel__link:hover { text-decoration: underline; }
+
+/* \u2500\u2500 Suite groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-suite + .qa-suite { border-top: 1px solid var(--mqa-border); }
+
+.qa-suite__head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+}
+
+.qa-suite__head:hover { background: var(--mqa-surface); }
+
+.qa-suite__chev {
+  flex: none;
+  font-size: 0.625rem;
+  opacity: 0.6;
+  transition: transform 0.12s ease;
+}
+
+.qa-suite__chev.is-open { transform: rotate(90deg); }
+
+.qa-suite__key {
+  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  background: var(--mqa-surface);
+  border-radius: 4px;
+}
+
+.qa-suite__label {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qa-suite__count {
+  flex: none;
+  font-size: 0.6875rem;
+  opacity: 0.55;
+}
+
+.qa-suite__list {
+  background: var(--mqa-surface);
+  margin: 0;
+  padding: 0 0 0.25rem;
+  list-style: none;
+}
+
+/* \u2500\u2500 Scenario rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.qa-row + .qa-row { border-top: 1px solid var(--mqa-border); }
+
+.qa-row__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.qa-row__name {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qa-suite__list .qa-row { padding-left: 1.5rem; }
+
+.qa-tag {
+  flex: none;
+  font-size: 0.625rem;
+  padding: 0 0.25rem;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  opacity: 0.8;
+  background: var(--mqa-surface);
+  border-radius: 9999px;
+}
+
+/* \u2500\u2500 Lane icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-lanes {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  flex: none;
+  padding: 0.1875rem 0.4375rem;
+  border-radius: 9999px;
+  background: rgba(17, 24, 39, 0.06);
+}
+
+.qa-lanes--sm { font-size: 0.875rem; }
+.qa-lanes--md { font-size: 1rem; }
+
+.qa-lanes__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(17, 24, 39, 0.4);
+}
+
+.qa-lanes__svg {
+  width: 1em;
+  height: 1em;
+  display: block;
+}
+
+.qa-lanes__icon.qa--green  { color: var(--mqa-green); background: none; }
+.qa-lanes__icon.qa--yellow { color: var(--mqa-yellow); background: none; }
+.qa-lanes__icon.qa--gray   { color: rgba(17, 24, 39, 0.4); background: none; }
+
+/* \u2500\u2500 Sitemap modal backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-modal__backdrop {
+  background-color: rgba(17, 24, 39, 0.4);
+  backdrop-filter: blur(1px);
+  position: fixed;
+  inset: 0;
+  z-index: var(--mqa-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+/* \u2500\u2500 Sitemap modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-modal {
+  background: var(--mqa-bg);
+  border-radius: var(--mqa-radius);
+  box-shadow: var(--mqa-shadow-xl);
+  border: 1px solid var(--mqa-border);
+  width: min(720px, 92vw);
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--mqa-text);
+}
+
+.qa-modal__head {
+  background: var(--mqa-primary);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+}
+
+.qa-modal__head h3 {
+  font-weight: 700;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.qa-modal__close {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: #ffffff;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--mqa-radius);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+
+.qa-modal__close:hover { background: var(--mqa-red); }
+
+.qa-modal__freshness {
+  background: var(--mqa-surface);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.6875rem;
+  opacity: 0.8;
+}
+
+.qa-modal__body {
+  overflow: auto;
+  padding: 0.5rem 0;
+}
+
+/* \u2500\u2500 KPI strip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-kpi {
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.625rem 0.75rem;
+}
+
+.qa-kpi__item {
+  display: flex;
+  flex-direction: column;
+}
+
+.qa-kpi__value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.qa-kpi__label {
+  font-size: 0.6875rem;
+  opacity: 0.7;
+}
+
+/* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-tabs {
+  border-bottom: 1px solid var(--mqa-border);
+  display: flex;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+}
+
+.qa-tabs__tab {
+  padding: 0.375rem 0.75rem;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.6;
+  background: none;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  font: inherit;
+  color: inherit;
+}
+
+.qa-tabs__tab--active {
+  color: var(--mqa-primary);
+  border-bottom-color: var(--mqa-primary);
+  opacity: 1;
+}
+
+/* \u2500\u2500 Sitemap page tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.8125rem;
+}
+
+.qa-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-right: 0.75rem;
+}
+
+.qa-tree__row--here { background: var(--mqa-surface); }
+
+.qa-tree__caret {
+  width: 1rem;
+  text-align: center;
+  cursor: pointer;
+  opacity: 0.6;
+  font-size: 0.6875rem;
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+}
+
+.qa-tree__caret--leaf { cursor: default; }
+
+.qa-tree__title { flex: 1; }
+.qa-tree__title--structural { font-style: italic; opacity: 0.75; }
+
+.qa-tree__here {
+  color: var(--mqa-primary);
+  font-size: 0.625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.qa-tree__count {
+  background: var(--mqa-surface);
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+/* \u2500\u2500 Scenarios tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-scenarios { padding: 0 0.75rem; }
+
+.qa-scenarios__search {
+  border: 1px solid var(--mqa-border);
+  border-radius: var(--mqa-radius);
+  width: 100%;
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.8125rem;
+  margin-bottom: 0.5rem;
+  background: var(--mqa-bg);
+  color: var(--mqa-text);
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.qa-scenarios__empty {
+  opacity: 0.7;
+  padding: 0.5rem 0;
+}
+
+.qa-scenarios__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.qa-scenarios__item {
+  border-top: 1px solid var(--mqa-border);
+  padding: 0.5rem 0;
+}
+
+.qa-scenarios__line {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.qa-scenarios__title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.8125rem;
+}
+
+.qa-scenarios__pages {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 0.6875rem;
+  opacity: 0.7;
+  margin-top: 0.125rem;
+  padding-left: 1rem;
+}
+
+/* \u2500\u2500 Scenario dot (color indicator) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  flex: none;
+  background: rgba(17, 24, 39, 0.6);
+}
+
+/* Override modifier background for dot \u2014 dot uses background not text color. */
+.qa-dot.qa--green  { background: var(--mqa-green); }
+.qa-dot.qa--yellow { background: var(--mqa-yellow); }
+.qa-dot.qa--red    { background: var(--mqa-red); }
+.qa-dot.qa--gray   { background: var(--mqa-gray); }
+
+/* \u2500\u2500 Suite key badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.qa-suitekey {
+  flex: none;
+  font-size: 0.625rem;
+  font-weight: 700;
+  padding: 0 0.3125rem;
+  line-height: 1.4;
+  background: var(--mqa-surface);
+  border-radius: 4px;
+}
+`;
+
+// src/qa-meter/Pastille.tsx
+import { h } from "preact";
+
+// src/qa-meter/ui.ts
+var QA_COLOR_MODIFIER = {
+  green: "qa--green",
+  yellow: "qa--yellow",
+  red: "qa--red",
+  gray: "qa--gray"
+};
+var QA_COLOR_LABEL_KEY = {
+  green: "color.green",
+  yellow: "color.yellow",
+  red: "color.red",
+  gray: "color.gray"
+};
+var QA_PRIORITY_MODIFIER = {
+  P0: "qa-prio--p0",
+  P1: "qa-prio--p1",
+  P2: "qa-prio--p2",
+  P3: "qa-prio--p3"
+};
+var QA_CASE_STATUS_LABEL_KEY = {
+  covered: "case.covered",
+  manual: "case.manual",
+  blocked: "case.blocked",
+  "open-question": "case.openQuestion"
+};
+var QA_GROUNDING_LABEL_KEY = {
+  verified: "grounding.verified",
+  "confirm-live": "grounding.confirmLive",
+  "product-question": "grounding.productQuestion"
+};
+function botTriColor(lane) {
+  if (lane.status === "passing") {
+    return "green";
+  }
+  if (lane.status === "failing" || lane.status === "flaky") {
+    return "yellow";
+  }
+  return "gray";
+}
+function humanTriColor(lane) {
+  if (lane.rejected) {
+    return "yellow";
+  }
+  if (lane.validated) {
+    return lane.stale ? "gray" : "green";
+  }
+  return "gray";
+}
+function aggregateTri(colors) {
+  if (colors.some((c) => c === "yellow")) {
+    return "yellow";
+  }
+  if (colors.length > 0 && colors.every((c) => c === "green")) {
+    return "green";
+  }
+  return "gray";
+}
+function formatQaDate(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return new Intl.DateTimeFormat("fr-CA", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(date);
+}
+function shortVersion(version) {
+  if (!version) {
+    return "";
+  }
+  return version.length > 19 ? `${version.slice(0, 19)}\u2026` : version;
+}
+
+// src/qa-meter/Pastille.tsx
+function Pastille({ color, state, strings, onOpenModal, onHover }) {
+  const base = strings["pastille.label"];
+  let detail = strings[QA_COLOR_LABEL_KEY[color]];
+  if (state === "no-tests") {
+    detail = strings["panel.noTests"];
+  } else if (state === "unknown-page") {
+    detail = strings["pastille.unknownPage"];
+  }
+  const label = `${base} \u2014 ${detail}`;
+  return h(
+    "div",
+    { class: "qa-pastille" },
+    h(
+      "button",
+      {
+        type: "button",
+        "data-testid": "qa-pastille",
+        class: `qa-pastille__dot ${QA_COLOR_MODIFIER[color]}`,
+        "aria-label": label,
+        title: label,
+        onClick: onOpenModal,
+        onMouseEnter: onHover,
+        onFocus: onHover
+      },
+      h(
+        "svg",
+        { class: "qa-pastille__ecg", viewBox: "0 0 24 12", "aria-hidden": "true" },
+        h("polyline", {
+          points: "1,6 7,6 9,2 12,10 15,4 17,6 23,6",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linejoin": "round",
+          "stroke-linecap": "round"
+        })
+      )
+    )
+  );
+}
+
+// src/qa-meter/TestPanel.tsx
+import { h as h3 } from "preact";
+import { useState } from "preact/hooks";
+
+// src/qa-meter/LaneIcons.tsx
+import { h as h2 } from "preact";
+var TRI_MODIFIER = {
+  green: "qa--green",
+  yellow: "qa--yellow",
+  gray: "qa--gray"
+};
+function LaneIcons({ dev, bot, human, strings }) {
+  return h2(
+    "span",
+    { class: "qa-lanes", "data-testid": "qa-lane-icons" },
+    // dev — chevrons </>
+    h2(
+      "span",
+      {
+        class: `qa-lanes__icon qa-lane ${TRI_MODIFIER[dev]}`,
+        title: strings["lane.code"],
+        "aria-label": strings["lane.code"],
+        "data-testid": "qa-lane-dev",
+        "data-state": dev
+      },
+      h2(
+        "svg",
+        { class: "qa-lanes__svg", viewBox: "0 0 24 24", "aria-hidden": "true" },
+        h2("path", {
+          d: "M8 7l-5 5 5 5M16 7l5 5-5 5",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2.2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        })
+      )
+    ),
+    // bot — robot head
+    h2(
+      "span",
+      {
+        class: `qa-lanes__icon qa-lane ${TRI_MODIFIER[bot]}`,
+        title: strings["lane.bot"],
+        "aria-label": strings["lane.bot"],
+        "data-testid": "qa-lane-bot",
+        "data-state": bot
+      },
+      h2(
+        "svg",
+        {
+          class: "qa-lanes__svg",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        h2("rect", { x: "4.5", y: "8.5", width: "15", height: "10.5", rx: "2.5" }),
+        h2("path", { d: "M12 4.5v4" }),
+        h2("circle", { cx: "12", cy: "3.4", r: "1.3", fill: "currentColor", stroke: "none" }),
+        h2("path", { d: "M2.5 12.5v3M21.5 12.5v3" }),
+        h2("circle", { cx: "9", cy: "13.5", r: "1.2", fill: "currentColor", stroke: "none" }),
+        h2("circle", { cx: "15", cy: "13.5", r: "1.2", fill: "currentColor", stroke: "none" })
+      )
+    ),
+    // client — person
+    h2(
+      "span",
+      {
+        class: `qa-lanes__icon qa-lane ${TRI_MODIFIER[human]}`,
+        title: strings["lane.human"],
+        "aria-label": strings["lane.human"],
+        "data-testid": "qa-lane-client",
+        "data-state": human
+      },
+      h2(
+        "svg",
+        {
+          class: "qa-lanes__svg",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        h2("circle", { cx: "12", cy: "8", r: "3.6" }),
+        h2("path", { d: "M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" })
+      )
+    )
+  );
+}
+
+// src/qa-meter/TestPanel.tsx
+function laneTriColor(scenario) {
+  return {
+    dev: humanTriColor(scenario.dev),
+    bot: botTriColor(scenario.automated),
+    human: humanTriColor(scenario.client)
+  };
+}
+function groupScenarios(scenarios) {
+  const map = /* @__PURE__ */ new Map();
+  for (const scenario of scenarios) {
+    const key = scenario.group?.key ?? "\xB7";
+    const bucket = map.get(key) ?? [];
+    bucket.push(scenario);
+    map.set(key, bucket);
+  }
+  const keys = [...map.keys()].sort((a, b) => a === "X" ? 1 : b === "X" ? -1 : a.localeCompare(b));
+  return keys.map((key) => {
+    const bucket = map.get(key);
+    return { key, label: bucket[0]?.group?.label ?? "", scenarios: bucket };
+  });
+}
+function interpolate(template, params) {
+  return template.replace(/\{(\w+)\}/g, (_, k) => String(params[k] ?? ""));
+}
+function ScenarioRow({ scenario, strings }) {
+  const lanes = laneTriColor(scenario);
+  const provenance = scenario.automated.provenance;
+  return h3(
+    "li",
+    { class: "qa-row", "data-testid": "qa-scenario-row" },
+    h3(
+      "span",
+      { class: "qa-row__title" },
+      scenario.priority ? h3(
+        "span",
+        { class: `qa-tag ${QA_PRIORITY_MODIFIER[scenario.priority]}`, "data-testid": "qa-priority" },
+        scenario.priority
+      ) : null,
+      h3("span", { class: "qa-row__name" }, scenario.title),
+      scenario.source === "testgen" ? h3("span", { class: "qa-tag", title: strings["source.testgenHint"] }, strings["source.testgen"]) : null,
+      scenario.caseStatus ? h3("span", { class: "qa-tag" }, strings[QA_CASE_STATUS_LABEL_KEY[scenario.caseStatus]]) : null,
+      scenario.grounding ? h3("span", { class: "qa-tag" }, strings[QA_GROUNDING_LABEL_KEY[scenario.grounding]]) : null,
+      provenance ? h3("span", { class: "qa-tag", "data-testid": "qa-provenance" }, provenance) : null
+    ),
+    h3(LaneIcons, { dev: lanes.dev, bot: lanes.bot, human: lanes.human, strings })
+  );
+}
+function TestPanel({ page, state, meta, strings }) {
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  const toggleGroup = (key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  const freshness = interpolate(strings["panel.freshness"], {
+    date: formatQaDate(meta.generated_at),
+    version: shortVersion(meta.app_version),
+    env: meta.environment
+  });
+  let body;
+  if (state === "no-tests") {
+    body = h3("p", { class: "qa-panel__empty" }, strings["panel.noTests"]);
+  } else if (state === "unknown-page") {
+    body = h3("p", { class: "qa-panel__empty" }, strings["panel.unknownPage"]);
+  } else {
+    const scenarios = page?.scenarios ?? [];
+    const hasGroups = scenarios.some((s) => s.group);
+    if (scenarios.length === 0) {
+      body = h3("p", { class: "qa-panel__empty" }, strings["panel.noScenarios"]);
+    } else if (!hasGroups) {
+      body = h3(
+        "ul",
+        { class: "qa-panel__list" },
+        scenarios.map((scenario) => h3(ScenarioRow, { key: scenario.id, scenario, strings }))
+      );
+    } else {
+      const groups = groupScenarios(scenarios);
+      body = h3(
+        "ul",
+        { class: "qa-panel__groups", "data-testid": "qa-suite-groups" },
+        groups.map((group) => {
+          const isOpen = expanded.has(group.key);
+          const agg = {
+            dev: aggregateTri(group.scenarios.map((s) => humanTriColor(s.dev))),
+            bot: aggregateTri(group.scenarios.map((s) => botTriColor(s.automated))),
+            human: aggregateTri(group.scenarios.map((s) => humanTriColor(s.client)))
+          };
+          return h3(
+            "li",
+            { key: group.key, class: "qa-suite", "data-testid": "qa-panel-group" },
+            h3(
+              "button",
+              {
+                type: "button",
+                class: "qa-suite__head",
+                "aria-expanded": isOpen,
+                "data-testid": "qa-suite-group",
+                onClick: () => toggleGroup(group.key)
+              },
+              h3(
+                "span",
+                { class: `qa-suite__chev ${isOpen ? "is-open" : ""}`, "aria-hidden": "true" },
+                "\u25B8"
+              ),
+              h3("span", { class: "qa-suite__key" }, group.key),
+              h3("span", { class: "qa-suite__label" }, group.label),
+              h3(
+                "span",
+                { class: "qa-suite__count" },
+                interpolate(strings["suite.cases"], { count: group.scenarios.length })
+              ),
+              h3(LaneIcons, { dev: agg.dev, bot: agg.bot, human: agg.human, strings })
+            ),
+            isOpen ? h3(
+              "ul",
+              { class: "qa-suite__list" },
+              group.scenarios.map(
+                (scenario) => h3(ScenarioRow, { key: scenario.id, scenario, strings })
+              )
+            ) : null
+          );
+        })
+      );
+    }
+  }
+  return h3(
+    "section",
+    { class: "qa-panel", "data-testid": "qa-panel" },
+    body,
+    h3(
+      "footer",
+      { class: "qa-panel__foot" },
+      h3(
+        "span",
+        { class: "qa-panel__count", title: freshness, "data-testid": "qa-panel-freshness" },
+        freshness
+      )
+    )
+  );
+}
+
+// src/qa-meter/SitemapModal.tsx
+import { h as h4 } from "preact";
+import { useEffect, useMemo, useState as useState2 } from "preact/hooks";
+function buildTree(nodes) {
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const bucket = childrenByParent.get(node.parent_id) ?? [];
+    bucket.push(node);
+    childrenByParent.set(node.parent_id, bucket);
+  }
+  for (const bucket of childrenByParent.values()) {
+    bucket.sort((a, b) => a.order - b.order);
+  }
+  const out = [];
+  const visit = (parentId, depth) => {
+    for (const node of childrenByParent.get(parentId) ?? []) {
+      const children = childrenByParent.get(node.id) ?? [];
+      out.push({ node, depth, hasChildren: children.length > 0 });
+      if (children.length > 0) {
+        visit(node.id, depth + 1);
+      }
+    }
+  };
+  visit(null, 0);
+  return out;
+}
+function dedupeScenarios(artifact) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const page of artifact.pages) {
+    for (const scenario of page.scenarios) {
+      const key = scenario.external_key ?? scenario.id;
+      const entry = byKey.get(key) ?? { scenario, primaries: /* @__PURE__ */ new Set(), traversed: /* @__PURE__ */ new Set() };
+      for (const ref of scenario.pages ?? []) {
+        ;
+        (ref.role === "primary" ? entry.primaries : entry.traversed).add(ref.pattern);
+      }
+      byKey.set(key, entry);
+    }
+  }
+  const rank = (p) => p ? Number(p.slice(1)) : 9;
+  return [...byKey.values()].sort((a, b) => {
+    const ga = a.scenario.group?.key ?? "~";
+    const gb = b.scenario.group?.key ?? "~";
+    if (ga !== gb) {
+      return ga.localeCompare(gb);
+    }
+    return rank(a.scenario.priority) - rank(b.scenario.priority) || a.scenario.title.localeCompare(b.scenario.title);
+  });
+}
+function interpolate2(template, params) {
+  return template.replace(/\{(\w+)\}/g, (_, k) => String(params[k] ?? ""));
+}
+function formatPct(pct) {
+  return `${Math.round(pct)}%`;
+}
+function SitemapModal({ artifact, currentPattern, strings, onClose }) {
+  const [activeTab, setActiveTab] = useState2("pages");
+  const [search, setSearch] = useState2("");
+  useEffect(() => {
+    const onKeydown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKeydown);
+    return () => window.removeEventListener("keydown", onKeydown);
+  }, [onClose]);
+  const here = currentPattern ? normalizePattern(currentPattern) : null;
+  const tree = useMemo(() => buildTree(artifact.sitemap), [artifact]);
+  const cases = useMemo(() => dedupeScenarios(artifact), [artifact]);
+  const titleByPattern = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const node of artifact.sitemap) {
+      map.set(node.path_pattern, node.title);
+    }
+    return map;
+  }, [artifact]);
+  const patternTitle = (pattern) => titleByPattern.get(pattern) ?? pattern;
+  const query = search.trim().toLowerCase();
+  const filteredCases = query ? cases.filter(
+    (c) => c.scenario.title.toLowerCase().includes(query) || (c.scenario.group?.label ?? "").toLowerCase().includes(query)
+  ) : cases;
+  const freshness = interpolate2(strings["panel.freshness"], {
+    date: formatQaDate(artifact.generated_at),
+    version: shortVersion(artifact.app_version),
+    env: artifact.environment
+  });
+  return h4(
+    "div",
+    {
+      class: "qa-modal__backdrop",
+      "data-testid": "qa-sitemap-modal",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      }
+    },
+    h4(
+      "div",
+      { class: "qa-modal", role: "dialog", "aria-modal": "true" },
+      h4(
+        "header",
+        { class: "qa-modal__head" },
+        h4("h3", null, strings["modal.title"]),
+        h4(
+          "button",
+          {
+            type: "button",
+            class: "qa-modal__close",
+            title: strings["modal.close"],
+            "aria-label": strings["modal.close"],
+            "data-testid": "qa-modal-close",
+            onClick: onClose
+          },
+          "\xD7"
+        )
+      ),
+      h4("div", { class: "qa-modal__freshness" }, freshness),
+      // Dual metric (doc 01 D12) — rendered as rounded percentages.
+      h4(
+        "div",
+        { class: "qa-kpi", "data-testid": "qa-kpi" },
+        h4(
+          "div",
+          { class: "qa-kpi__item" },
+          h4("span", { class: "qa-kpi__value" }, formatPct(artifact.metric.pages_with_scenarios_pct)),
+          h4("span", { class: "qa-kpi__label" }, strings["modal.kpiPagesCovered"])
+        ),
+        h4(
+          "div",
+          { class: "qa-kpi__item" },
+          h4("span", { class: "qa-kpi__value" }, formatPct(artifact.metric.scenarios_passing_pct)),
+          h4("span", { class: "qa-kpi__label" }, strings["modal.kpiScenariosPassing"])
+        )
+      ),
+      h4(
+        "nav",
+        { class: "qa-tabs" },
+        h4(
+          "button",
+          {
+            type: "button",
+            class: `qa-tabs__tab ${activeTab === "pages" ? "qa-tabs__tab--active" : ""}`,
+            "data-testid": "qa-tab-pages",
+            onClick: () => setActiveTab("pages")
+          },
+          strings["modal.tabPages"]
+        ),
+        h4(
+          "button",
+          {
+            type: "button",
+            class: `qa-tabs__tab ${activeTab === "scenarios" ? "qa-tabs__tab--active" : ""}`,
+            "data-testid": "qa-tab-scenarios",
+            onClick: () => setActiveTab("scenarios")
+          },
+          strings["modal.tabScenarios"]
+        )
+      ),
+      h4(
+        "div",
+        { class: "qa-modal__body" },
+        activeTab === "pages" ? h4(
+          "ul",
+          { class: "qa-tree" },
+          tree.map((row) => {
+            const isHere = here !== null && row.node.path_pattern === here;
+            return h4(
+              "li",
+              {
+                key: row.node.id,
+                class: `qa-tree__row ${isHere ? "qa-tree__row--here" : ""}`,
+                "data-testid": isHere ? "qa-tree-current" : "qa-sitemap-node",
+                style: { paddingLeft: `${0.5 + row.depth * 1.1}rem` }
+              },
+              h4(
+                "span",
+                {
+                  class: `qa-dot ${QA_COLOR_MODIFIER[row.node.color]}`,
+                  "aria-hidden": "true"
+                }
+              ),
+              h4(
+                "span",
+                {
+                  class: `qa-tree__title ${row.node.structural ? "qa-tree__title--structural" : ""}`
+                },
+                row.node.title || row.node.path_pattern
+              ),
+              isHere ? h4("span", { class: "qa-tree__here" }, ` ${row.node.path_pattern} `) : null,
+              isHere ? h4("span", { class: "qa-tree__here" }, strings["modal.youAreHere"]) : null,
+              h4("span", { class: "qa-tree__count" }, String(row.node.counts.scenarios))
+            );
+          })
+        ) : h4(
+          "div",
+          { class: "qa-scenarios" },
+          h4("input", {
+            type: "search",
+            class: "qa-scenarios__search",
+            placeholder: strings["modal.search"],
+            "data-testid": "qa-scenarios-search",
+            value: search,
+            onInput: (e) => setSearch(e.target.value)
+          }),
+          filteredCases.length === 0 ? h4("p", { class: "qa-scenarios__empty" }, strings["modal.noMatch"]) : h4(
+            "ul",
+            { class: "qa-scenarios__list" },
+            filteredCases.map((entry) => {
+              const scenario = entry.scenario;
+              const lanes = {
+                dev: humanTriColor(scenario.dev),
+                bot: botTriColor(scenario.automated),
+                human: humanTriColor(scenario.client)
+              };
+              const traversed = [...entry.traversed].map(patternTitle);
+              return h4(
+                "li",
+                {
+                  key: scenario.external_key ?? scenario.id,
+                  class: "qa-scenarios__item",
+                  "data-testid": "qa-scenario-row"
+                },
+                h4(
+                  "div",
+                  { class: "qa-scenarios__line" },
+                  h4("span", { class: `qa-dot ${QA_COLOR_MODIFIER[scenario.color]}`, "aria-hidden": "true" }),
+                  scenario.group?.key ? h4("span", { class: "qa-suitekey" }, scenario.group.key) : null,
+                  h4("span", { class: "qa-scenarios__title" }, scenario.title),
+                  scenario.source === "testgen" ? h4("span", { class: "qa-tag" }, strings["source.testgen"]) : null,
+                  h4(LaneIcons, { dev: lanes.dev, bot: lanes.bot, human: lanes.human, strings })
+                ),
+                h4(
+                  "div",
+                  { class: "qa-scenarios__pages" },
+                  entry.primaries.size ? h4(
+                    "span",
+                    { class: "qa-scenarios__primary" },
+                    interpolate2(strings["modal.appliesTo"], { count: entry.primaries.size })
+                  ) : null,
+                  traversed.length ? h4(
+                    "span",
+                    { class: "qa-scenarios__traversed" },
+                    `${strings["modal.traversed"]}: ${traversed.join(", ")}`
+                  ) : null
+                )
+              );
+            })
+          )
+        )
+      )
+    )
+  );
+}
+
+// src/qa-meter/mount.tsx
+var LOCATION_CHANGE_EVENT = "mqa:locationchange";
+var historyPatched = false;
+var historyRefCount = 0;
+var originalPushState = null;
+var originalReplaceState = null;
+function patchHistory() {
+  historyRefCount++;
+  if (historyPatched) return;
+  historyPatched = true;
+  originalPushState = history.pushState;
+  originalReplaceState = history.replaceState;
+  const fire = () => {
+    window.dispatchEvent(new CustomEvent(LOCATION_CHANGE_EVENT));
+  };
+  history.pushState = function patchedPushState(...args) {
+    const ret = originalPushState.apply(this, args);
+    fire();
+    return ret;
+  };
+  history.replaceState = function patchedReplaceState(...args) {
+    const ret = originalReplaceState.apply(this, args);
+    fire();
+    return ret;
+  };
+}
+function unpatchHistory() {
+  if (historyRefCount > 0) historyRefCount--;
+  if (historyRefCount > 0 || !historyPatched) return;
+  historyPatched = false;
+  if (originalPushState) history.pushState = originalPushState;
+  if (originalReplaceState) history.replaceState = originalReplaceState;
+  originalPushState = null;
+  originalReplaceState = null;
+}
+var QA_ARTIFACT_FORMAT = 1;
+function isValidArtifact(value) {
+  return typeof value === "object" && value !== null && value.format === QA_ARTIFACT_FORMAT;
+}
+var warnedBadFormat = false;
+function warnBadFormatOnce() {
+  if (warnedBadFormat) return;
+  warnedBadFormat = true;
+  if (typeof console !== "undefined") {
+    console.warn(
+      "[mqa] QA Meter artifact has an unsupported `format` \u2014 refusing to mount."
+    );
+  }
+}
+var NOOP_HANDLE = {
+  open() {
+  },
+  close() {
+  },
+  dispose() {
+  }
+};
+function patternsFromArtifact(artifact) {
+  const set = /* @__PURE__ */ new Set();
+  for (const page of artifact.pages) {
+    if (page.page) set.add(page.page.path_pattern);
+  }
+  for (const node of artifact.sitemap) {
+    set.add(node.path_pattern);
+  }
+  return [...set];
+}
+var UNKNOWN = { state: "unknown-page", color: "gray", pattern: null, page: null };
+function resolveCurrent(artifact, pattern) {
+  if (!artifact || !pattern) return UNKNOWN;
+  const page = artifact.pages.find((p) => p.page && p.page.path_pattern === pattern);
+  if (page && page.page) {
+    return { state: "known", color: page.color, pattern, page };
+  }
+  const inSitemap = artifact.sitemap.some((n) => n.path_pattern === pattern);
+  if (inSitemap) {
+    return { state: "no-tests", color: "gray", pattern, page: null };
+  }
+  return { state: "unknown-page", color: "gray", pattern, page: null };
+}
+function createQaMeter(options) {
+  const { source } = options;
+  const strings = resolveStrings(options.locale ?? "fr");
+  const inlineArtifact = typeof source === "object" ? source : null;
+  if (inlineArtifact && !isValidArtifact(inlineArtifact)) {
+    warnBadFormatOnce();
+    return NOOP_HANDLE;
+  }
+  let artifact = inlineArtifact;
+  let loadStarted = false;
+  let loadPromise = null;
+  function load() {
+    if (artifact || loadStarted) return;
+    loadStarted = true;
+    const got = typeof source === "function" ? source() : typeof source === "string" ? fetch(source).then((r) => r.json()) : Promise.resolve(source);
+    loadPromise = got.then((value) => {
+      if (isValidArtifact(value)) {
+        artifact = value;
+        forceRender();
+      } else {
+        warnBadFormatOnce();
+      }
+    }).catch(() => {
+    });
+  }
+  const host = document.createElement("div");
+  host.setAttribute("data-mqa-host", "");
+  host.setAttribute("data-mqa-size", options.size ?? "md");
+  if (options.position?.right !== void 0) {
+    host.style.setProperty("--mqa-right", `${options.position.right}px`);
+  }
+  if (options.position?.bottom !== void 0) {
+    host.style.setProperty("--mqa-bottom", `${options.position.bottom}px`);
+  }
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = QA_METER_STYLES;
+  shadow.appendChild(style);
+  const mountPoint = document.createElement("div");
+  shadow.appendChild(mountPoint);
+  let forceRender = () => {
+  };
+  function getCurrentPattern() {
+    if (options.getCurrentPage) return options.getCurrentPage();
+    if (!artifact) return null;
+    return resolvePage(window.location.pathname, patternsFromArtifact(artifact));
+  }
+  function Container() {
+    const [tick, setTick] = useState3(0);
+    void tick;
+    const bump = useCallback(() => setTick((n) => n + 1), []);
+    forceRender = bump;
+    const resolved = resolveCurrent(artifact, getCurrentPattern());
+    const meta = artifact ? {
+      generated_at: artifact.generated_at,
+      app_version: artifact.app_version,
+      environment: artifact.environment
+    } : { generated_at: "", app_version: "", environment: "" };
+    const onHover = useCallback(() => {
+      load();
+    }, []);
+    const onOpenModal = useCallback(() => {
+      load();
+      uiOpen = true;
+      bump();
+    }, []);
+    const closeModal = useCallback(() => {
+      uiOpen = false;
+      bump();
+    }, []);
+    useEffect2(() => {
+      const onNav = () => bump();
+      window.addEventListener("popstate", onNav);
+      window.addEventListener(LOCATION_CHANGE_EVENT, onNav);
+      return () => {
+        window.removeEventListener("popstate", onNav);
+        window.removeEventListener(LOCATION_CHANGE_EVENT, onNav);
+      };
+    }, []);
+    return h5(
+      "div",
+      {
+        class: "qa-pastille-wrap",
+        onMouseLeave: () => {
+          uiHover = false;
+          bump();
+        }
+      },
+      uiHover ? h5(TestPanel, { page: resolved.page, state: resolved.state, meta, strings }) : null,
+      h5(Pastille, {
+        color: resolved.color,
+        state: resolved.state,
+        strings,
+        onHover: () => {
+          uiHover = true;
+          onHover();
+          bump();
+        },
+        onOpenModal
+      }),
+      uiOpen && artifact ? h5(SitemapModal, {
+        artifact,
+        currentPattern: resolved.pattern,
+        strings,
+        onClose: closeModal
+      }) : null
+    );
+  }
+  let uiOpen = false;
+  let uiHover = false;
+  function mountTree() {
+    render(h5(Container, {}), mountPoint);
+  }
+  mountTree();
+  patchHistory();
+  let disposed = false;
+  return {
+    open() {
+      if (disposed) return;
+      load();
+      uiOpen = true;
+      forceRender();
+    },
+    close() {
+      if (disposed) return;
+      uiOpen = false;
+      forceRender();
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      render(null, mountPoint);
+      host.remove();
+      unpatchHistory();
+      void loadPromise;
+    }
+  };
+}
+
+// src/qa-meter/index.ts
+function createQaMeter2(options) {
+  return createQaMeter(options);
+}
+export {
+  createQaMeter2 as createQaMeter
+};
+//# sourceMappingURL=qa-meter.mjs.map