@drip-apex/sdk 0.1.0

package/src/qa-assistant-view.ts

@@ -0,0 +1,768 @@
+// QA Assistant panel view — vanilla DOM inside a shadow root, rendered from
+// QaAssistantState. Pixel spec: the "Operator QA Assistant" Claude Design
+// canvas (opqa-*.jsx). Sentence case; monospace only inside real code blocks.
+
+import type {
+  QaAssistantState,
+  QaAssistantStore,
+  QaEventModel,
+  QaExperimentModel,
+  QaTransactionsModel,
+} from "./qa-assistant-state";
+
+export const QA_ASSISTANT_HOST_ID = "drip-qa-assistant-host";
+
+type TabId = "exp" | "ev" | "tx";
+
+type ViewState = {
+  tab: TabId;
+  minimized: boolean;
+  expanded: Set<string>;
+  codeOpen: Set<string>;
+  pageFilter: "all" | "on" | "off";
+  statusFilter: "all" | "accepted" | "rejected" | "forced";
+  search: string;
+  firstMount: boolean;
+};
+
+const MINIMIZED_KEY = "drip_qa_assistant_min";
+
+/* ── icons (Lucide-style paths from the design's icon set) ─────────────── */
+const P = {
+  check: "M5 13l4 4L19 7",
+  x: "M18 6L6 18M6 6l12 12",
+  minus: "M5 12h14",
+  alert:
+    "M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0zM12 9v4M12 17h.01",
+  chevR: "M9 6l6 6-6 6",
+  chevD: "M6 9l6 6 6-6",
+  chevUp: "M18 15l-6-6-6 6",
+  bolt: "M13 2L3 14h7l-1 8 10-12h-7l1-8z",
+  eyeOff:
+    "M17.9 17.9A10 10 0 016.1 6.1M9.9 4.2A10.6 10.6 0 0122 12a17 17 0 01-3.2 3.7M3 3l18 18M14.1 14.1a3 3 0 01-4.2-4.2M2 12a17 17 0 013.8-4.3",
+  clock: "M12 22a10 10 0 100-20 10 10 0 000 20zM12 7v5l3 2",
+  store:
+    "M3 9l1.5-5h15L21 9M4 9v10a1 1 0 001 1h14a1 1 0 001-1V9M3 9h18M9 20v-6h6v6",
+  target:
+    "M12 2a10 10 0 100 20 10 10 0 000-20zM12 7a5 5 0 100 10 5 5 0 000-10zM12 11a1 1 0 100 2 1 1 0 000-2z",
+  checkSquare:
+    "M9 11l3 3L20 6M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11",
+  help:
+    "M12 22a10 10 0 100-20 10 10 0 000 20zM9.2 9.2a3 3 0 015.6 1.3c0 2-3 2.5-3 4M12 17.5h.01",
+  activity: "M22 12h-4l-3 8L9 4l-3 8H2",
+  code: "M16 18l6-6-6-6M8 6l-6 6 6 6",
+};
+
+function svg(d: string, size: number, sw = 1.6): string {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="${d}"/></svg>`;
+}
+
+/* ── safety ─────────────────────────────────────────────────────────────── */
+function esc(value: string | null | undefined): string {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/* ── copy helpers ───────────────────────────────────────────────────────── */
+const REASON_WORDS: Record<string, string> = {
+  url_mismatch: "page rules",
+  url_exclude_matched: "page rules",
+  page_rule_failed: "page rules",
+  segment_mismatch: "the audience rule",
+  segment_and_failed: "the audience rule",
+  attribute_mismatch: "the audience rule",
+  js_false: "the custom JS trigger",
+  js_error: "the custom JS trigger",
+};
+
+function humanizeSkipDetail(detail: string | null): string | null {
+  if (!detail) return detail;
+  return detail.replace(/Skipped — (\S+) failed first/, (whole, reason: string) => {
+    const words = REASON_WORDS[reason];
+    return words ? `Skipped — ${words} failed first` : "Skipped — an earlier rule failed first";
+  });
+}
+
+function formatTime(at: number): string {
+  const d = new Date(at);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+/* ── stylesheet (exact TK/QAT values from the design) ───────────────────── */
+const CSS = `
+:host { all: initial; }
+* { box-sizing: border-box; margin: 0; }
+.root {
+  --bg1: #0A0A0C; --panel: #0C0C10; --raised: #141419; --inset: #0B0B0E;
+  --bd: rgba(255,255,255,0.06); --bd-hi: rgba(255,255,255,0.10); --bd-px: rgba(255,255,255,0.14);
+  --t1: #FAFAFA; --t2: rgba(255,255,255,0.66); --t3: rgba(255,255,255,0.42); --t4: rgba(255,255,255,0.26);
+  --p500: #5B29FF; --p400: #7C54FF; --p200: #C8B4FF;
+  --p-soft: rgba(91,41,255,0.14); --p-bd: rgba(124,84,255,0.34);
+  --pos: #3DD68C; --pos-soft: rgba(61,214,140,0.14); --pos-bd: rgba(61,214,140,0.26);
+  --warn: #F59E0B; --warn-soft: rgba(245,158,11,0.12); --warn-bd: rgba(245,158,11,0.26);
+  --neg: #EB5252; --neg-soft: rgba(235,82,82,0.10); --neg-bd: rgba(235,82,82,0.26);
+  --info: #1DDFEC; --info-soft: rgba(29,223,236,0.10); --info-bd: rgba(29,223,236,0.22);
+  font-family: Inter, system-ui, sans-serif;
+  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
+  color: var(--t1); font-size: 12px; line-height: 1.45; letter-spacing: -0.01em;
+  -webkit-font-smoothing: antialiased;
+}
+button { font-family: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
+.panel {
+  width: 380px; max-height: min(72vh, 640px); display: flex; flex-direction: column;
+  border-radius: 14px; background: var(--panel); border: 1px solid var(--bd-px);
+  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4); overflow: hidden;
+}
+.hdr { padding: 11px 12px 10px 14px; border-bottom: 1px solid var(--bd); flex-shrink: 0; }
+.hdr-row { display: flex; align-items: center; gap: 9px; }
+.mark { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(135deg,#1A1A21,#0E0E12);
+  border: 1px solid var(--bd-hi); display: flex; align-items: center; justify-content: center; }
+.hdr-title { font-size: 13px; font-weight: 600; white-space: nowrap; }
+.hdr-sub { font-size: 11px; color: var(--t3); margin-top: 6px; }
+.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
+.chip { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 6, ; border-radius: 6px;
+  font-size: 10.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
+.chip::before { content: ""; width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; }
+.chip-applied { background: var(--pos-soft); border: 1px solid var(--pos-bd); color: var(--pos); }
+.chip-off { background: rgba(255,255,255,0.05); border: 1px solid var(--bd-hi); color: var(--t3); }
+.chip-forced { background: var(--p-soft); border: 1px solid var(--p-bd); color: var(--p200); }
+.btn-ghost { height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--bd-hi); color: var(--t2);
+  font-size: 11px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; }
+.btn-icon { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--t3); }
+.btn-icon:hover, .btn-ghost:hover { background: rgba(255,255,255,0.05); }
+.forced-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--p-soft);
+  border-bottom: 1px solid var(--p-bd); flex-shrink: 0; color: var(--p200); }
+.forced-bar .txt { font-size: 11px; font-weight: 600; flex: 1; min-width: 0; }
+.forced-bar .reset { font-size: 11px; font-weight: 600; color: var(--t1); white-space: nowrap; }
+.tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--bd); background: rgba(255,255,255,0.015); flex-shrink: 0; }
+.tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 9px 9px; font-size: 12px; font-weight: 600;
+  color: var(--t3); white-space: nowrap; }
+.tab[data-on="true"] { color: var(--t1); box-shadow: inset 0 -2px 0 var(--p400); }
+.tab .n { font-size: 10px; font-weight: 600; color: var(--t4); }
+.tab[data-on="true"] .n { color: var(--p200); }
+.body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.ftr { display: flex; align-items: center; padding: 8px 14px; border-top: 1px solid var(--bd); background: var(--bg1); flex-shrink: 0; }
+.ftr .hide { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); font-weight: 600; }
+.ftr .reset { margin-left: auto; font-size: 11px; color: var(--p200); font-weight: 600; white-space: nowrap; }
+.grp { display: flex; align-items: baseline; gap: 6px; padding: 10px 14px 5px; }
+.grp .l { font-size: 11px; font-weight: 600; color: var(--t3); }
+.grp .n { font-size: 10.5px; color: var(--t4); }
+.exp { border-bottom: 1px solid var(--bd); }
+.exp:last-child { border-bottom: 0; }
+.exp-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; width: 100%; }
+.exp-head[data-open="true"] { background: rgba(255,255,255,0.02); }
+.exp-head .cv { color: var(--t4); display: inline-flex; }
+.exp-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.exp-sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
+.rule-pill { font-size:9.5px; color:var(--t3); border:1px solid var(--bd); border-radius:999px; padding:2px 6px; }
+.rule-pill[data-state="accepted"], .rule-pill[data-state="forced"] { color:var(--pos); border-color:var(--pos-bd); }
+.rule-pill[data-state="rejected"], .rule-pill[data-state="outside traffic %"], .rule-pill[data-state="not running"], .rule-pill[data-state="excluded by overlap"] { color:var(--neg); border-color:var(--neg-bd); }
+.filters { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--bd); flex-wrap:wrap; }
+.filters select,.filters input { background:var(--inset); color:var(--t2); border:1px solid var(--bd); border-radius:7px; height:28px; padding:0 8px; font-size:10.5px; }
+.filters input { flex:1; min-width:110px; }
+.cond-group { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--t4); margin-top:10px; }
+.exp-main { flex: 1; min-width: 0; }
+.exp-detail { padding: 0 14px 11px 33px; }
+.cond { padding: 5px 0; }
+.cond-row { display: flex; align-items: center; gap: 8px; }
+.cond-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
+.cond-text { font-size: 11.5px; flex: 1; min-width: 0; }
+.cond-state { font-size: 10.5px; font-weight: 600; flex-shrink: 0; }
+.cond-detail { font-size: 10.5px; color: var(--t3); margin: 3px 0 0 24px; }
+.codeblk { margin: 6px 0 2px 24px; border-radius: 8px; background: var(--inset); border: 1px solid var(--bd); overflow: hidden; }
+.codeblk-head { display: flex; align-items: center; gap: 6px; padding: 5px 9px; width: 100%; color: var(--t3); }
+.codeblk-head .t { font-size: 10.5px; font-weight: 600; }
+.codeblk-head .cv { margin-left: auto; color: var(--t4); display: inline-flex; }
+.codeblk pre { padding: 8px 10px; border-top: 1px solid var(--bd);
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.6;
+  color: var(--t2); white-space: pre-wrap; word-break: break-word; }
+.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
+.act-btn { margin-top: 8px; height: 26px; padding: 0 11px; border-radius: 7px; display: inline-flex; align-items: center;
+  background: var(--p-soft); border: 1px solid var(--p-bd); color: var(--p200); font-size: 11px; font-weight: 600; white-space: nowrap; }
+.varpick { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; }
+.varopt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bd); width: 100%; }
+.varopt[data-on="true"] { background: var(--p-soft); border-color: var(--p-bd); }
+.varopt .radio { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--t4); }
+.varopt[data-on="true"] .radio { border: 4.5px solid var(--p400); background: #fff; }
+.varopt .nm { font-size: 11.5px; font-weight: 600; color: var(--t2); flex: 1; }
+.varopt[data-on="true"] .nm { color: var(--t1); }
+.varopt .note { font-size: 10.5px; color: var(--t4); white-space: nowrap; }
+.varopt[data-on="true"] .note { color: var(--p200); }
+.note-line { font-size: 10.5px; color: var(--t3); margin-top: 7px; line-height: 1.5; }
+.sumline { display: flex; align-items: center; gap: 7px; padding: 10px 14px 4px; font-size: 11.5px; color: var(--t2); }
+.live { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--bd); }
+.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 6px var(--pos); }
+.live .t { font-size: 11px; color: var(--t3); }
+.live .clear { margin-left: auto; font-size: 11px; color: var(--t4); font-weight: 600; }
+.ev { padding: 8px 14px; border-bottom: 1px solid var(--bd); }
+.ev:last-child { border-bottom: 0; }
+.ev[data-dup="true"] { background: rgba(245,158,11,0.05); box-shadow: inset 2px 0 0 var(--warn); }
+.ev-row { display: flex; align-items: center; gap: 8px; }
+.ev-t { font-size: 10.5px; color: var(--t4); width: 48px; flex-shrink: 0; }
+.ev-type { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; flex-shrink: 0;
+  font-size: 10px; font-weight: 600; white-space: nowrap; }
+.ev-label { font-size: 11.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ev-val { font-size: 11.5px; font-weight: 600; flex-shrink: 0; }
+.qatag { height: 16px; padding: 0 5px; border-radius: 5px; background: var(--p-soft); border: 1px solid var(--p-bd);
+  color: var(--p200); font-size: 9.5px; font-weight: 600; display: inline-flex; align-items: center; flex-shrink: 0; }
+.ev-dup { display: flex; align-items: center; gap: 6px; margin: 5px 0 0 56px; font-size: 10.5px; color: var(--warn); }
+.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 32px 40px; }
+.empty .icon { width: 36px; height: 36px; border-radius: 10px; background: var(--raised); border: 1px solid var(--bd);
+  display: flex; align-items: center; justify-content: center; color: var(--t3); }
+.empty .h { font-size: 12.5px; font-weight: 600; margin-top: 12px; }
+.empty .s { font-size: 11px; color: var(--t3); margin-top: 5px; line-height: 1.55; max-width: 250px; }
+.tx { padding: 12px 14px; }
+.tx-card { border-radius: 10px; background: var(--raised); border: 1px solid var(--bd); padding: 11px 12px; }
+.tx-card .row { display: flex; align-items: center; gap: 8px; }
+.tx-card .h { font-size: 12.5px; font-weight: 600; flex: 1; }
+.tx-card .meta { font-size: 10.5px; color: var(--t3); margin-top: 5px; }
+.tx-card .attr { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--bd); font-size: 12px; }
+.attr-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bd); }
+.attr-row:last-child { border-bottom: 0; }
+.attr-row .nm { font-size: 11.5px; color: var(--t2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.attr-row .vr { font-size: 11.5px; font-weight: 600; color: var(--p200); white-space: nowrap; }
+.attr-row .vr[data-none="true"] { color: var(--t4); }
+.receipt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; margin-top: 10px; }
+.receipt.ok { background: var(--pos-soft); border: 1px solid var(--pos-bd); }
+.receipt.pending { background: var(--warn-soft); border: 1px solid var(--warn-bd); }
+.receipt .h { font-size: 11.5px; font-weight: 600; }
+.receipt.ok .h { color: var(--pos); }
+.receipt.pending .h { color: var(--warn); }
+.receipt .s { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
+.infonote { display: flex; gap: 8px; padding: 9px 12px; border-radius: 9px; margin-top: 10px;
+  background: var(--p-soft); border: 1px solid var(--p-bd); }
+.infonote .t { font-size: 10.5px; color: var(--t2); line-height: 1.55; }
+.pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 9px; border-radius: 999px;
+  background: rgba(10,10,14,0.85); border: 1px solid var(--bd-px); backdrop-filter: blur(14px);
+  box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
+.pill .t { font-size: 12px; font-weight: 600; white-space: nowrap; }
+@media (max-width: 560px) {
+  .root { right: 0; bottom: 0; left: 0; }
+  .panel { width: 100%; max-height: 78vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
+  .exp-head { padding: 13px 16px; min-height: 44px; }
+  .tab { padding: 12px 10px 11px; font-size: 12.5px; }
+  .root .pill-dock { position: absolute; right: 16px; bottom: 16px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .panel[data-enter="true"] { animation: qa-in 220ms cubic-bezier(0.22, 1, 0.36, 1); }
+  @keyframes qa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+}
+`;
+
+/* ── renderers ──────────────────────────────────────────────────────────── */
+function chip(label: string, tone: "applied" | "off" | "forced"): string {
+  return `<span class="chip chip-${tone}">${esc(label)}</span>`;
+}
+
+function condRow(
+  expId: string,
+  c: QaExperimentModel["conditions"][number],
+  codeOpen: Set<string>,
+): string {
+  const m = {
+    pass: { d: P.check, cls: "var(--pos)", bg: "var(--pos-soft)", label: "Passed" },
+    fail: { d: P.x, cls: "var(--neg)", bg: "var(--neg-soft)", label: "Failed" },
+    skip: { d: P.minus, cls: "var(--t4)", bg: "rgba(255,255,255,0.05)", label: "Skipped" },
+    error: { d: P.alert, cls: "var(--neg)", bg: "var(--neg-soft)", label: "Error" },
+  }[c.state];
+  const key = `${expId}:${c.id}`;
+  const detail = c.state === "skip" ? humanizeSkipDetail(c.detail) : c.detail;
+  let codeBlock = "";
+  if (c.rawCode) {
+    const open = codeOpen.has(key);
+    codeBlock = `
+      <div class="codeblk">
+        <button class="codeblk-head" data-action="toggle-code" data-key="${esc(key)}">
+          ${svg(P.code, 10.5)}<span class="t">Custom JS trigger — raw code</span>
+          <span class="cv">${svg(open ? P.chevUp : P.chevD, 10)}</span>
+        </button>
+        ${open ? `<pre>${esc(c.rawCode)}</pre>` : ""}
+      </div>`;
+  }
+  return `
+    <div class="cond">
+      <div class="cond-row">
+        <span class="cond-dot" style="background:${m.bg};color:${m.cls}">${svg(m.d, 9, 2.4)}</span>
+        <span class="cond-text">${esc(c.text)}</span>
+        <span class="cond-state" style="color:${m.cls}">${m.label}</span>
+      </div>
+      ${detail ? `<div class="cond-detail">${esc(detail)}</div>` : ""}
+      ${codeBlock}
+    </div>`;
+}
+
+function experimentRow(e: QaExperimentModel, view: ViewState): string {
+  const open = view.expanded.has(e.id);
+  const chipHtml = e.forced
+    ? chip("Forced", "forced")
+    : e.applied
+      ? chip("Applied", "applied")
+      : chip("Not applied", "off");
+  let detail = "";
+  if (open) {
+    let forceControls = "";
+    if (e.forced) {
+      const options = e.variations
+        .map(
+          (v) => `
+        <button class="varopt" data-on="${v.isCurrent}" data-action="pick-variation" data-exp="${esc(e.id)}" data-var="${esc(v.id)}">
+          <span class="radio"></span>
+          <span class="nm">${esc(v.name)}</span>
+          <span class="note">${v.isCurrent ? "Forced now" : v.isReal ? "Your real assignment" : ""}</span>
+        </button>`,
+        )
+        .join("");
+      forceControls = `
+          <div class="varpick">${options}</div>
+          <div class="note-line">Forcing only changes what you see — it never writes to results.</div>
+          <button class="act-btn" data-action="reset-force" data-exp="${esc(e.id)}">Reset to real assignment</button>`;
+    } else {
+      forceControls =
+        e.variations.length > 1
+          ? `<button class="act-btn" data-action="open-force" data-exp="${esc(e.id)}">Force this variation</button>`
+          : "";
+    }
+    const pages = e.conditions.filter((c) => c.group === "pages").map((c) => condRow(e.id, c, view.codeOpen)).join("");
+    const audience = e.conditions.filter((c) => c.group === "audience").map((c) => condRow(e.id, c, view.codeOpen)).join("");
+    detail = `<div class="exp-detail">
+      <div class="cond-group">Pages · Trigger</div>${pages || `<div class="cond-detail">${e.triggerPill === "not evaluated" ? "Not evaluated" : e.triggerPill === "accepted" ? "Matched on this page (rule detail unavailable)" : e.triggerPill === "rejected" ? "Did not match this page (rule detail unavailable)" : "All pages"}</div>`}
+      <div class="cond-group">Audience · Segment</div>${audience || `<div class="cond-detail">${e.segmentPill === "not evaluated" ? "Not evaluated" : e.segmentPill === "accepted" ? "Matched for this visitor (rule detail unavailable)" : e.segmentPill === "rejected" ? "Did not match this visitor (rule detail unavailable)" : "All visitors"}</div>`}
+      <div class="cond-group">Display frequency</div><div class="cond-detail">${esc(e.displayFrequencyPill)}</div>
+      ${forceControls}</div>`;
+  }
+  return `
+    <div class="exp">
+      <button class="exp-head" data-open="${open}" data-action="toggle-exp" data-exp="${esc(e.id)}">
+        <span class="cv">${svg(open ? P.chevD : P.chevR, 11)}</span>
+        <span class="exp-main">
+          <span class="exp-name" style="display:block">${esc(e.name)}</span>
+          <span class="exp-sub" style="display:block">${esc(e.subline)}</span>
+          <span class="pills">
+            <span class="rule-pill" data-state="${esc(e.triggerPill)}">Trigger: ${esc(e.triggerPill)}</span>
+            <span class="rule-pill" data-state="${esc(e.segmentPill)}">Segment: ${esc(e.segmentPill)}</span>
+            <span class="rule-pill" data-state="${esc(e.displayFrequencyPill)}">Display: ${esc(e.displayFrequencyPill)}</span>
+          </span>
+        </span>
+        ${chipHtml}
+      </button>
+      ${detail}
+    </div>`;
+}
+
+function experimentsBody(state: QaAssistantState, view: ViewState): string {
+  const query = view.search.trim().toLowerCase();
+  const visible = state.experiments.filter((e) => {
+    const pageOk = view.pageFilter === "all" || (view.pageFilter === "on" ? e.triggerPill === "accepted" || e.triggerPill === "all pages" : e.triggerPill === "rejected");
+    const statusOk = view.statusFilter === "all" || (view.statusFilter === "forced" ? e.forced : view.statusFilter === "accepted" ? e.applied && !e.forced : !e.applied && !e.forced);
+    return pageOk && statusOk && (!query || e.name.toLowerCase().includes(query) || e.id.toLowerCase().includes(query));
+  });
+  const applied = visible.filter((e) => e.applied || e.forced);
+  const rejected = visible.filter((e) => !e.applied && !e.forced);
+  const filters = `<div class="filters">
+    <select data-action="page-filter"><option value="all">On or off this page</option><option value="on" ${view.pageFilter === "on" ? "selected" : ""}>On this page</option><option value="off" ${view.pageFilter === "off" ? "selected" : ""}>Not on this page</option></select>
+    <select data-action="status-filter"><option value="all">All</option><option value="accepted" ${view.statusFilter === "accepted" ? "selected" : ""}>Applied</option><option value="rejected" ${view.statusFilter === "rejected" ? "selected" : ""}>Not applied</option><option value="forced" ${view.statusFilter === "forced" ? "selected" : ""}>Forced</option></select>
+    <input data-action="search" aria-label="Search campaigns" placeholder="Search name or ID" value="${esc(view.search)}">
+  </div>`;
+  // Summary lines describe the whole campaign set, never the filtered view —
+  // a filter that hides rejected rows must not make "all apply" claims.
+  const totalRejected = state.experiments.filter((e) => !e.applied && !e.forced).length;
+  let summary = "";
+  if (state.experiments.length > 0 && totalRejected === 0) {
+    summary = `<div class="sumline" style="color:var(--t2)"><span style="color:var(--pos);display:inline-flex">${svg(P.check, 12, 2.2)}</span>All ${state.experiments.length} experiment${state.experiments.length === 1 ? "" : "s"} apply on this page.</div>`;
+  } else if (state.experiments.length > 0 && totalRejected === state.experiments.length) {
+    summary = `<div class="sumline" style="color:var(--t2)"><span style="color:var(--warn);display:inline-flex">${svg(P.alert, 12)}</span>Nothing runs on this page — every experiment was rejected.</div>`;
+  } else if (state.experiments.length === 0) {
+    return filters + `<div class="empty">
+      <div class="icon">${svg(P.target, 16)}</div>
+      <div class="h">No experiments on this shop yet</div>
+      <div class="s">Running and draft experiments show up here when the QA link opens a page they could target.</div>
+    </div>`;
+  }
+  const appliedHtml = applied.length
+    ? `<div class="grp"><span class="l">Applied</span><span class="n">${applied.length}</span></div>` +
+      applied.map((e) => experimentRow(e, view)).join("")
+    : "";
+  const rejectedHtml = rejected.length
+    ? `<div class="grp"><span class="l">Not applied</span><span class="n">${rejected.length}</span></div>` +
+      rejected.map((e) => experimentRow(e, view)).join("")
+    : "";
+  return filters + summary + appliedHtml + rejectedHtml;
+}
+
+function eventRow(ev: QaEventModel): string {
+  const tones: Record<QaEventModel["type"], { fg: string; bg: string; bd: string; label: string }> = {
+    exposure: { fg: "var(--p200)", bg: "var(--p-soft)", bd: "var(--p-bd)", label: "Exposure" },
+    goal: { fg: "var(--info)", bg: "var(--info-soft)", bd: "var(--info-bd)", label: "Goal" },
+    revenue: { fg: "var(--pos)", bg: "var(--pos-soft)", bd: "var(--pos-bd)", label: "Revenue" },
+    pageview: { fg: "var(--t3)", bg: "rgba(255,255,255,0.05)", bd: "var(--bd-hi)", label: "Pageview" },
+  };
+  const t = tones[ev.type];
+  const dup = ev.duplicateOf != null;
+  return `
+    <div class="ev" data-dup="${dup}">
+      <div class="ev-row">
+        <span class="ev-t">${formatTime(ev.at)}</span>
+        <span class="ev-type" style="color:${t.fg};background:${t.bg};border:1px solid ${t.bd}">${t.label}</span>
+        <span class="ev-label">${esc(ev.label)}</span>
+        ${ev.value ? `<span class="ev-val">${esc(ev.value)}</span>` : ""}
+        <span class="qatag">QA</span>
+      </div>
+      ${dup ? `<div class="ev-dup">${svg(P.alert, 11)}Fired twice within a second — likely a double-bound click handler</div>` : ""}
+    </div>`;
+}
+
+function eventsBody(state: QaAssistantState): string {
+  const live = `
+    <div class="live">
+      <span class="dot"></span>
+      <span class="t">Live · this browser only · every event is QA-tagged</span>
+      <button class="clear" data-action="clear-events">Clear</button>
+    </div>`;
+  if (state.events.length === 0) {
+    return (
+      live +
+      `<div class="empty">
+        <div class="icon">${svg(P.activity, 16)}</div>
+        <div class="h">No events yet</div>
+        <div class="s">Click around the page — exposures, goals and revenue show up here the moment they fire.</div>
+      </div>`
+    );
+  }
+  const rows = [...state.events]
+    .sort((a, b) => b.at - a.at)
+    .slice(0, 80)
+    .map(eventRow)
+    .join("");
+  return live + rows;
+}
+
+function attributionRows(list: Array<{ experimentName: string; variationName: string | null }>): string {
+  if (!list.length) return "";
+  return `
+    <div class="grp"><span class="l">Attribution by experiment</span></div>
+    <div style="padding:0 2px">
+      ${list
+        .map(
+          (a) => `
+        <div class="attr-row">
+          <span class="nm">${esc(a.experimentName)}</span>
+          <span class="vr" data-none="${a.variationName == null}">${esc(a.variationName ?? "Not in experiment")}</span>
+        </div>`,
+        )
+        .join("")}
+    </div>`;
+}
+
+function transactionsBody(tx: QaTransactionsModel): string {
+  if (tx.kind === "unsupported") return "";
+  if (tx.kind === "shopify") {
+    const head = tx.cartStamped
+      ? `Your cart is stamped with <span style="color:var(--p200)">${esc(tx.variationName ?? "your variation")}</span>`
+      : "No cart stamp yet — add something to the cart first";
+    const meta = tx.stampedAt ? `Cart attribute written ${formatTime(tx.stampedAt)}` : "The stamp is written when the cart updates";
+    return `
+      <div class="tx">
+        <div class="tx-card">
+          <div class="row"><span style="color:var(--p200);display:inline-flex">${svg(P.checkSquare, 14)}</span><span class="h">${head}</span></div>
+          <div class="meta">${esc(meta)}</div>
+        </div>
+        ${attributionRows(tx.attribution)}
+        <div class="infonote">
+          <span style="color:var(--p200);display:inline-flex;margin-top:1px">${svg(P.help, 13)}</span>
+          <span class="t">Shopify’s checkout runs in a sandbox we can’t see into. Your final order confirmation appears in the dashboard once Shopify sends the order back.</span>
+        </div>
+      </div>`;
+  }
+  const receipt =
+    tx.serverReceipt === "confirmed"
+      ? `<div class="receipt ok">${svg(P.check, 13, 2.4)}<div><div class="h">Server receipt · Confirmed</div><div class="s">Our backend received this order.</div></div></div>`
+      : `<div class="receipt pending">${svg(P.clock, 13)}<div><div class="h">Server receipt · Pending…</div><div class="s">Waiting for our backend to receive this order.</div></div></div>`;
+  const orderHead = tx.orderNumber
+    ? `Order ${esc(tx.orderNumber)}`
+    : "Waiting for your test checkout";
+  return `
+    <div class="tx">
+      <div class="tx-card">
+        <div class="row"><span style="color:var(--t3);display:inline-flex">${svg(P.store, 14)}</span><span class="h">${orderHead}</span>${tx.orderNumber ? chip("Detected", "applied") : ""}</div>
+        <div class="meta">${tx.orderNumber ? "Your test checkout on this browser" : "Complete a checkout in this browser and it shows up here"}</div>
+      </div>
+      ${attributionRows(tx.attribution)}
+      ${tx.orderNumber ? receipt : ""}
+    </div>`;
+}
+
+/* ── shell ──────────────────────────────────────────────────────────────── */
+function buildTabs(state: QaAssistantState): Array<{ id: TabId; label: string; count: number }> {
+  const hideTx = state.transactions.kind === "unsupported";
+  return [
+    { id: "exp", label: "Campaigns", count: state.experiments.length },
+    { id: "ev", label: "Events", count: state.events.length },
+    ...(hideTx ? [] : [{ id: "tx" as TabId, label: "Transactions", count: state.transactions.kind === "order" && state.transactions.orderNumber ? 1 : 0 }]),
+  ];
+}
+
+function tabsHtml(tabs: Array<{ id: TabId; label: string; count: number }>, activeTab: TabId): string {
+  return tabs
+    .map((t) => `<button class="tab" data-on="${t.id === activeTab}" data-action="tab" data-tab="${t.id}">${t.label}<span class="n">${t.count}</span></button>`)
+    .join("");
+}
+
+function panelHtml(state: QaAssistantState, view: ViewState): string {
+  const hideTx = state.transactions.kind === "unsupported";
+  const tabs = buildTabs(state);
+  const activeTab: TabId = hideTx && view.tab === "tx" ? "exp" : view.tab;
+  const body =
+    activeTab === "exp"
+      ? experimentsBody(state, view)
+      : activeTab === "ev"
+        ? eventsBody(state)
+        : transactionsBody(state.transactions);
+  return `
+    <div class="panel" data-enter="${view.firstMount}" role="dialog" aria-label="Apex QA assistant">
+      <div class="hdr">
+        <div class="hdr-row">
+          <span class="mark">${operatorMarkSvg(14)}</span>
+          <span class="hdr-title">Apex QA</span>
+          ${chip("QA mode", "forced")}
+          <span class="hdr-actions">
+            <button class="btn-ghost" data-action="exit-qa">Exit QA</button>
+            <button class="btn-icon" data-action="minimize" title="Minimize" aria-label="Minimize">${svg(P.minus, 13)}</button>
+          </span>
+        </div>
+        <div class="hdr-sub">You’re previewing as QA — nothing here counts toward results.</div>
+      </div>
+      <div data-region="forced">${forcedBarHtml(state)}</div>
+      <div class="tabs" data-region="tabs">
+        ${tabsHtml(tabs, activeTab)}
+      </div>
+      <div class="body">${body}</div>
+      <div class="ftr">
+        <button class="hide" data-action="minimize">${svg(P.eyeOff, 12)}Hide panel</button>
+        <button class="reset" data-action="reset-force">Reset to real assignment</button>
+      </div>
+    </div>`;
+}
+
+function forcedBarHtml(state: QaAssistantState): string {
+  return state.forcedSummary
+    ? `<div class="forced-bar">${svg(P.bolt, 12)}<span class="txt">${esc(state.forcedSummary)}</span><button class="reset" data-action="reset-force">Reset</button></div>`
+    : "";
+}
+
+function pillHtml(state: QaAssistantState): string {
+  const n = state.experiments.length;
+  return `
+    <button class="pill" data-action="restore" aria-label="Restore Apex QA panel">
+      <span class="mark" style="width:22px;height:22px">${operatorMarkSvg(13)}</span>
+      <span class="t">Apex QA · ${n} experiment${n === 1 ? "" : "s"}</span>
+      ${svg(P.chevUp, 12)}
+    </button>`;
+}
+
+function operatorMarkSvg(size: number): string {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 120 120" fill="none" style="flex-shrink:0">
+    <defs><mask id="qa-op-cut"><rect width="120" height="120" fill="#fff"/><rect x="0" y="68" width="120" height="6" fill="#000"/></mask></defs>
+    <path d="M60 14 C92 14 106 36 106 60 C106 84 92 106 60 106 C28 106 14 84 14 60 C14 36 28 14 60 14 Z M60 38 C46 38 38 48 38 60 C38 72 46 82 60 82 C74 82 82 72 82 60 C82 48 74 38 60 38 Z" fill="#fff" fill-rule="evenodd" mask="url(#qa-op-cut)"/>
+    <rect x="92" y="92" width="14" height="14" rx="2" fill="#5B29FF"/>
+  </svg>`;
+}
+
+/* ── controller ─────────────────────────────────────────────────────────── */
+export type QaAssistantView = { destroy(): void };
+
+export function mountQaAssistantView(store: QaAssistantStore): QaAssistantView {
+  const existing = document.getElementById(QA_ASSISTANT_HOST_ID);
+  if (existing) existing.remove();
+
+  const host = document.createElement("div");
+  host.id = QA_ASSISTANT_HOST_ID;
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = CSS;
+  const root = document.createElement("div");
+  root.className = "root";
+  shadow.append(style, root);
+  document.body.appendChild(host);
+
+  let minimized = false;
+  try {
+    minimized = sessionStorage.getItem(MINIMIZED_KEY) === "1";
+  } catch {
+    // storage unavailable — start expanded
+  }
+  const view: ViewState = {
+    tab: "exp", minimized, expanded: new Set(), codeOpen: new Set(),
+    pageFilter: "all", statusFilter: "all", search: "", firstMount: true,
+  };
+  // Events cleared locally: hide everything at or before this timestamp.
+  let clearedBefore = 0;
+
+  let mounted = false;
+  let renderTimer: ReturnType<typeof setTimeout> | null = null;
+  let lastSignature = "";
+  let composingSearch = false;
+
+  const currentState = (): QaAssistantState => {
+    const raw = store.getState();
+    return clearedBefore
+      ? { ...raw, events: raw.events.filter((e) => e.at > clearedBefore) }
+      : raw;
+  };
+
+  const signature = (state: QaAssistantState): string => JSON.stringify({
+    experiments: state.experiments,
+    forcedSummary: state.forcedSummary,
+    transactions: state.transactions,
+    events: view.tab === "ev" ? state.events : undefined,
+    view: [view.tab, view.minimized, [...view.expanded], [...view.codeOpen], view.pageFilter, view.statusFilter, view.search],
+  });
+
+  const render = (immediate = false) => {
+    if (!immediate) {
+      if (renderTimer) clearTimeout(renderTimer);
+      renderTimer = setTimeout(() => render(true), 100);
+      return;
+    }
+    if (renderTimer) clearTimeout(renderTimer);
+    renderTimer = null;
+    if (composingSearch) {
+      renderTimer = setTimeout(() => render(true), 100);
+      return;
+    }
+    const state = currentState();
+    const nextSignature = signature(state);
+    if (mounted && nextSignature === lastSignature) {
+      const eventsBadge = root.querySelector<HTMLElement>('.tab[data-tab="ev"] .n');
+      if (eventsBadge) eventsBadge.textContent = String(state.events.length);
+      return;
+    }
+    lastSignature = nextSignature;
+    if (!mounted || view.minimized || !root.querySelector(".panel")) {
+      root.innerHTML = view.minimized ? pillHtml(state) : panelHtml(state, view);
+      mounted = true;
+      view.firstMount = false;
+      return;
+    }
+    const body = root.querySelector<HTMLElement>(".body");
+    const scrollTop = body?.scrollTop ?? 0;
+    const focused = shadow.activeElement as HTMLInputElement | null;
+    const focusedAction = focused?.dataset.action;
+    const selection = focusedAction === "search" && focused
+      ? [focused.selectionStart, focused.selectionEnd] as const
+      : null;
+    const activeTab = state.transactions.kind === "unsupported" && view.tab === "tx" ? "exp" : view.tab;
+    if (body) {
+      body.innerHTML = activeTab === "exp" ? experimentsBody(state, view) : activeTab === "ev" ? eventsBody(state) : transactionsBody(state.transactions);
+      body.scrollTop = scrollTop;
+      if (focusedAction) {
+        const replacement = body.querySelector<HTMLInputElement>(`[data-action="${focusedAction}"]`);
+        replacement?.focus();
+        if (replacement && selection?.[0] != null && selection[1] != null) replacement.setSelectionRange(selection[0], selection[1]);
+      }
+    }
+    const forced = root.querySelector<HTMLElement>('[data-region="forced"]');
+    if (forced) forced.innerHTML = forcedBarHtml(state);
+    const tabsRegion = root.querySelector<HTMLElement>('[data-region="tabs"]');
+    if (tabsRegion) {
+      tabsRegion.innerHTML = tabsHtml(buildTabs(state), activeTab);
+    }
+  };
+
+  root.addEventListener("click", (event) => {
+    const target = (event.target as HTMLElement | null)?.closest?.("[data-action]") as HTMLElement | null;
+    if (!target) return;
+    const action = target.dataset.action;
+    const expId = target.dataset.exp;
+    if (action === "minimize") {
+      view.minimized = true;
+      try {
+        sessionStorage.setItem(MINIMIZED_KEY, "1");
+      } catch { /* ignore */ }
+    } else if (action === "restore") {
+      view.minimized = false;
+      try {
+        sessionStorage.removeItem(MINIMIZED_KEY);
+      } catch { /* ignore */ }
+    } else if (action === "tab") {
+      view.tab = (target.dataset.tab as TabId) ?? "exp";
+    } else if (action === "toggle-exp" && expId) {
+      if (view.expanded.has(expId)) view.expanded.delete(expId);
+      else view.expanded.add(expId);
+    } else if (action === "toggle-code") {
+      const key = target.dataset.key ?? "";
+      if (view.codeOpen.has(key)) view.codeOpen.delete(key);
+      else view.codeOpen.add(key);
+    } else if (action === "open-force" && expId) {
+      // Entering force mode pins the current variation as forced, which flips
+      // the row into the picker so QA can switch or reset from there.
+      const experiment = store.getState().experiments.find((e) => e.id === expId);
+      const current = experiment?.variations.find((v) => v.isCurrent) ?? experiment?.variations[0];
+      if (experiment && current) store.forceVariation(experiment.id, current.id);
+      view.expanded.add(expId);
+    } else if (action === "pick-variation" && expId) {
+      const varId = target.dataset.var;
+      if (varId) store.forceVariation(expId, varId);
+    } else if (action === "reset-force") {
+      store.resetForce(expId || undefined);
+    } else if (action === "exit-qa") {
+      store.exitQa();
+      host.remove();
+      return;
+    } else if (action === "clear-events") {
+      clearedBefore = Date.now();
+    }
+    render(true);
+  });
+
+  root.addEventListener("change", (event) => {
+    const target = event.target as HTMLInputElement | HTMLSelectElement;
+    if (target.dataset.action === "page-filter") view.pageFilter = target.value as ViewState["pageFilter"];
+    else if (target.dataset.action === "status-filter") view.statusFilter = target.value as ViewState["statusFilter"];
+    else if (target.dataset.action === "search") view.search = target.value;
+    else return;
+    render(true);
+  });
+
+  // Keep in-progress search text in ViewState on every keystroke — a
+  // store-driven refresh between "input" and "change" would otherwise rebuild
+  // the field from a stale value and wipe the user's query.
+  root.addEventListener("input", (event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.dataset?.action !== "search") return;
+    view.search = target.value;
+    if (composingSearch) return;
+    render(true);
+  });
+
+  root.addEventListener("compositionstart", (event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.dataset?.action === "search") composingSearch = true;
+  });
+
+  root.addEventListener("compositionend", (event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.dataset?.action !== "search") return;
+    composingSearch = false;
+    view.search = target.value;
+    render(true);
+  });
+
+  const unsubscribe = store.subscribe(() => {
+    render();
+  });
+
+  render(true);
+
+  return {
+    destroy() {
+      unsubscribe();
+      if (renderTimer) clearTimeout(renderTimer);
+      host.remove();
+    },
+  };
+}