@mushi-mushi/web 1.0.0 → 1.1.0

package/dist/index.js

@@ -933,6 +933,236 @@ function getWidgetStyles(theme) {
       letter-spacing: 0.02em;
     }
 
+    /* \u2500\u2500 Rewards nudge (category step) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .mushi-rewards-nudge {
+      border-top: 1px solid ${rule};
+      padding: 10px 0 4px;
+      margin-top: 6px;
+    }
+    .mushi-rewards-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    .mushi-tier-pip {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .mushi-rewards-tier-name {
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: ${ink};
+    }
+    .mushi-rewards-pts-count {
+      font-family: ${fontMono};
+      font-size: 11px;
+      color: ${inkMuted};
+      margin-right: auto;
+    }
+    .mushi-rewards-pts-earn {
+      font-family: ${fontMono};
+      font-size: 10px;
+      color: ${vermillion};
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+    }
+    .mushi-tier-bar-track {
+      height: 3px;
+      background: ${ruleStrong};
+      border-radius: 2px;
+      overflow: hidden;
+      margin-bottom: 5px;
+    }
+    .mushi-tier-bar-fill {
+      height: 100%;
+      background: ${vermillion};
+      border-radius: 2px;
+      transition: width 600ms ${easeStamp};
+    }
+    .mushi-rewards-next-label {
+      font-family: ${fontMono};
+      font-size: 10px;
+      color: ${inkMuted};
+      text-align: right;
+      letter-spacing: 0.02em;
+    }
+
+    /* \u2500\u2500 Rewards on success step \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .mushi-success-rewards {
+      margin-top: 14px;
+      padding-top: 12px;
+      border-top: 1px solid ${rule};
+      width: 100%;
+    }
+    .mushi-success-pts-award {
+      font-family: ${fontMono};
+      font-size: 22px;
+      font-weight: 700;
+      color: ${vermillion};
+      text-align: center;
+      letter-spacing: 0.06em;
+      margin-bottom: 10px;
+      opacity: 0;
+      animation: mushi-pts-pop 420ms ${easeStamp} 900ms forwards;
+    }
+    .success-bar { margin: 0 0 5px; }
+
+    @keyframes mushi-pts-pop {
+      from { opacity: 0; transform: scale(0.75) translateY(6px); }
+      to   { opacity: 1; transform: scale(1) translateY(0); }
+    }
+
+    /* \u2500\u2500\u2500 Beta mode strip (category step) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+    .mushi-beta-strip {
+      margin: 0 16px 2px;
+      padding: 9px 12px;
+      background: rgba(99, 102, 241, 0.07);
+      border: 1px solid rgba(99, 102, 241, 0.18);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .mushi-beta-strip-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .mushi-beta-tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 1px 6px;
+      border-radius: 4px;
+      background: rgba(245, 158, 11, 0.15);
+      border: 1px solid rgba(245, 158, 11, 0.35);
+      color: #b45309;
+      font-family: var(--mushi-font-mono);
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      line-height: 1.6;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .mushi-beta-tag {
+        background: rgba(245, 158, 11, 0.12);
+        border-color: rgba(245, 158, 11, 0.28);
+        color: #fbbf24;
+      }
+    }
+
+    .mushi-beta-msg {
+      font-size: 11px;
+      color: var(--mushi-text-dim);
+      line-height: 1.45;
+    }
+
+    .mushi-beta-contact-hint {
+      font-size: 10px;
+      color: var(--mushi-text-dim);
+      opacity: 0.72;
+      font-family: var(--mushi-font-mono);
+    }
+
+    .mushi-beta-perks {
+      list-style: none;
+      margin: 2px 0 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .mushi-beta-perks li {
+      font-size: 10.5px;
+      color: #4f46e5;
+      font-weight: 500;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .mushi-beta-perks li {
+        color: #818cf8;
+      }
+    }
+
+    /* \u2500\u2500\u2500 Beta changelog (collapsible What's new) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+    .mushi-changelog {
+      margin-top: 5px;
+    }
+
+    .mushi-changelog-summary {
+      font-size: 10.5px;
+      color: var(--mushi-text-dim);
+      cursor: pointer;
+      list-style: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      user-select: none;
+    }
+
+    .mushi-changelog-summary::before {
+      content: '\u25B6';
+      font-size: 7px;
+      opacity: 0.6;
+      transition: transform 0.15s ease;
+    }
+
+    .mushi-changelog[open] .mushi-changelog-summary::before {
+      transform: rotate(90deg);
+    }
+
+    .mushi-changelog-list {
+      margin: 5px 0 0 4px;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .mushi-changelog-list li {
+      font-size: 10.5px;
+      color: var(--mushi-text-dim);
+      line-height: 1.5;
+    }
+
+    /* \u2500\u2500\u2500 Beta success footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+    .mushi-beta-success-footer {
+      margin-top: 14px;
+      padding: 10px 14px;
+      background: rgba(99, 102, 241, 0.06);
+      border: 1px solid rgba(99, 102, 241, 0.14);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      text-align: left;
+    }
+
+    .mushi-beta-success-line {
+      font-size: 11px;
+      color: var(--mushi-text-dim);
+      line-height: 1.5;
+    }
+
+    .mushi-beta-success-dim {
+      opacity: 0.65;
+      font-size: 10.5px;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
@@ -943,6 +1173,7 @@ function getWidgetStyles(theme) {
       }
       .mushi-success-stamp circle { stroke-dashoffset: 0; }
       .mushi-success-stamp-label { opacity: 1; }
+      .mushi-success-pts-award { opacity: 1; }
     }
   `;
 }
@@ -998,7 +1229,8 @@ var MushiWidget = class {
       smartHide: config.smartHide ?? false,
       draggable: config.draggable ?? false,
       brandFooter: config.brandFooter ?? true,
-      outdatedBanner: config.outdatedBanner ?? "auto"
+      outdatedBanner: config.outdatedBanner ?? "auto",
+      betaMode: config.betaMode ?? {}
     };
     this.callbacks = callbacks;
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
@@ -1042,6 +1274,7 @@ var MushiWidget = class {
    *  root) for up to ~3.3s after destroy. */
   successTimer = null;
   autoCloseTimer = null;
+  rewardsState = null;
   mount() {
     if (this.host.isConnected) return;
     document.body.appendChild(this.host);
@@ -1073,7 +1306,8 @@ var MushiWidget = class {
       ...config.smartHide !== void 0 ? { smartHide: config.smartHide } : {},
       ...config.draggable !== void 0 ? { draggable: config.draggable } : {},
       ...config.brandFooter !== void 0 ? { brandFooter: config.brandFooter } : {},
-      ...config.outdatedBanner !== void 0 ? { outdatedBanner: config.outdatedBanner } : {}
+      ...config.outdatedBanner !== void 0 ? { outdatedBanner: config.outdatedBanner } : {},
+      ...config.betaMode !== void 0 ? { betaMode: config.betaMode } : {}
     };
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
     this.syncAttachedLaunchers();
@@ -1148,6 +1382,10 @@ var MushiWidget = class {
     this.sdkFreshness = info;
     if (this.isOpen) this.render();
   }
+  setRewardsState(state) {
+    this.rewardsState = state;
+    if (this.isOpen) this.render();
+  }
   destroy() {
     if (this.successTimer !== null) {
       clearTimeout(this.successTimer);
@@ -1392,6 +1630,7 @@ var MushiWidget = class {
       `).join("");
     return `
       ${this.renderHeader({ title: t.step1.heading, step: STEP_NUMBER.category })}
+      ${this.config.betaMode?.enabled ? this.renderBetaStrip() : ""}
       <div class="mushi-body" role="radiogroup" aria-label="${t.step1.heading}">
         <button type="button" class="mushi-option-btn mushi-reports-entry" data-action="reports">
           <span class="mushi-option-icon" aria-hidden="true">\u{1F4EC}</span>
@@ -1402,10 +1641,52 @@ var MushiWidget = class {
           <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
         </button>
         ${categories}
+        ${this.rewardsState ? this.renderRewardsNudge() : ""}
       </div>
       ${this.renderStepIndicator(STEP_NUMBER.category)}
     `;
   }
+  /** Collapsible "What's new" changelog row. Closes the reporter feedback loop. */
+  renderBetaChangelog() {
+    const entries = this.config.betaMode?.changelogItems;
+    if (!entries?.length) return "";
+    const latest = entries[0];
+    const items = latest.items.map((item) => `<li>\u2022 ${escapeHtml(item)}</li>`).join("");
+    const label = latest.date ? `What\u2019s new in ${escapeHtml(latest.version)} \xB7 ${escapeHtml(latest.date)}` : `What\u2019s new in ${escapeHtml(latest.version)}`;
+    return `
+      <details class="mushi-changelog">
+        <summary class="mushi-changelog-summary">${label}</summary>
+        <ul class="mushi-changelog-list">${items}</ul>
+      </details>
+    `;
+  }
+  /**
+   * Discreet beta status strip: communicates "work in progress", invites
+   * feedback, and sets expectations — reducing user frustration while
+   * nudging the reciprocity instinct ("your reports help us build this").
+   */
+  renderBetaStrip() {
+    const beta = this.config.betaMode;
+    const appName = escapeHtml(beta.appName ?? "This app");
+    const message = beta.message ? escapeHtml(beta.message) : `${appName} is in early development \u2014 updates ship weekly`;
+    const email = beta.contactEmail ? escapeHtml(beta.contactEmail) : null;
+    const perks = beta.perks ?? [];
+    return `
+      <div class="mushi-beta-strip" role="note" aria-label="Beta status">
+        <div class="mushi-beta-strip-row">
+          <span class="mushi-beta-tag" aria-hidden="true">BETA</span>
+          <span class="mushi-beta-msg">${message}</span>
+        </div>
+        ${email ? `<div class="mushi-beta-contact-hint">Reports go to ${email} \xB7 reviewed by the team</div>` : ""}
+        ${perks.length > 0 ? `
+          <ul class="mushi-beta-perks" aria-label="Beta tester perks">
+            ${perks.map((p) => `<li>\u2713 ${escapeHtml(p)}</li>`).join("")}
+          </ul>
+        ` : ""}
+        ${this.renderBetaChangelog()}
+      </div>
+    `;
+  }
   renderReportsStep() {
     const reports = this.reporterReports.map((report) => `
       <button type="button" class="mushi-report-row" data-report-id="${escapeHtml(report.id)}">
@@ -1526,7 +1807,92 @@ var MushiWidget = class {
           </div>
           <div class="mushi-success-headline">${t.widget.submitted}</div>
           <div class="mushi-success-meta">REPORT \xB7 ${time}</div>
+          ${this.rewardsState ? this.renderSuccessRewards() : ""}
+          ${this.config.betaMode?.enabled ? this.renderBetaSuccessFooter() : ""}
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Reciprocity footer on the success step: closes the feedback loop by
+   * attributing where the report goes, sets a response expectation, and
+   * reinforces the "beta tester" identity (Peak-End Rule — the last thing
+   * the user sees shapes their entire impression of the interaction).
+   */
+  renderBetaSuccessFooter() {
+    const beta = this.config.betaMode;
+    const email = beta.contactEmail ? escapeHtml(beta.contactEmail) : null;
+    const appName = escapeHtml(beta.appName ?? "the team");
+    return `
+      <div class="mushi-beta-success-footer" role="note" aria-label="Beta feedback acknowledgement">
+        ${email ? `<div class="mushi-beta-success-line">\u{1F4EC} Sent to ${email}</div>` : `<div class="mushi-beta-success-line">\u{1F4EC} Sent to ${appName}</div>`}
+        <div class="mushi-beta-success-line mushi-beta-success-dim">We aim to review within 48h \xB7 thank you for helping build this</div>
+      </div>
+    `;
+  }
+  tierColor(slug) {
+    const colors = {
+      free: "#6b7280",
+      explorer: "#3b82f6",
+      contributor: "#8b5cf6",
+      champion: "#f59e0b"
+    };
+    return colors[slug] ?? "#6c47ff";
+  }
+  /** Compact rewards nudge rendered at the bottom of the category-step body. */
+  renderRewardsNudge() {
+    const { tier, nextTier, totalPoints, pointsForReport } = this.rewardsState;
+    const tierName = tier?.displayName ?? "Free";
+    const tierSlug = tier?.slug ?? "free";
+    const color = this.tierColor(tierSlug);
+    let pct = 100;
+    let nextLabel = "";
+    if (nextTier) {
+      const base = tier?.pointsThreshold ?? 0;
+      const ceiling = nextTier.pointsThreshold;
+      pct = ceiling > base ? Math.round(Math.min(1, (totalPoints - base) / (ceiling - base)) * 100) : 100;
+      const remaining = Math.max(0, ceiling - totalPoints);
+      nextLabel = `${remaining.toLocaleString()} pts to ${escapeHtml(nextTier.displayName)}`;
+    }
+    return `
+      <div class="mushi-rewards-nudge" aria-label="Rewards progress">
+        <div class="mushi-rewards-row">
+          <span class="mushi-tier-pip" style="background:${color}" aria-hidden="true"></span>
+          <span class="mushi-rewards-tier-name">${escapeHtml(tierName)}</span>
+          <span class="mushi-rewards-pts-count">${totalPoints.toLocaleString()} pts</span>
+          <span class="mushi-rewards-pts-earn">+${pointsForReport} pts for a report</span>
         </div>
+        ${nextTier ? `
+          <div class="mushi-tier-bar-track" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100" aria-label="Progress to ${escapeHtml(nextTier.displayName)}">
+            <div class="mushi-tier-bar-fill" style="width:${pct}%"></div>
+          </div>
+          <div class="mushi-rewards-next-label">${nextLabel}</div>
+        ` : ""}
+      </div>
+    `;
+  }
+  /** Points earned + tier progress shown on the success step. */
+  renderSuccessRewards() {
+    const { tier, nextTier, totalPoints, pointsForReport } = this.rewardsState;
+    const projected = totalPoints + pointsForReport;
+    let pctAfter = 100;
+    let nextLabel = "";
+    if (nextTier) {
+      const base = tier?.pointsThreshold ?? 0;
+      const ceiling = nextTier.pointsThreshold;
+      pctAfter = ceiling > base ? Math.round(Math.min(1, (projected - base) / (ceiling - base)) * 100) : 100;
+      const remaining = Math.max(0, ceiling - projected);
+      nextLabel = remaining > 0 ? `${remaining.toLocaleString()} pts to ${escapeHtml(nextTier.displayName)}` : `\u{1F389} ${escapeHtml(nextTier.displayName)} reached!`;
+    }
+    return `
+      <div class="mushi-success-rewards">
+        <div class="mushi-success-pts-award">+${pointsForReport} pts</div>
+        ${nextTier ? `
+          <div class="mushi-tier-bar-track success-bar" role="progressbar" aria-valuenow="${pctAfter}" aria-valuemin="0" aria-valuemax="100" aria-label="Progress to ${escapeHtml(nextTier.displayName)}">
+            <div class="mushi-tier-bar-fill" style="width:${pctAfter}%"></div>
+          </div>
+          <div class="mushi-rewards-next-label">${nextLabel}</div>
+        ` : ""}
       </div>
     `;
   }
@@ -1690,6 +2056,304 @@ var MushiWidget = class {
   }
 };
 
+// src/rewards.ts
+var MIN_FLUSH_INTERVAL = 3e4;
+var DEFAULT_FLUSH_INTERVAL = 3e5;
+var DWELL_SAMPLE_INTERVAL = 6e4;
+var MAX_SESSION_MINUTES_PER_DAY = 60;
+var DAILY_RESET_KEY_PREFIX = "mushi_session_min_day_";
+var pendingEvents = [];
+var flushTimer = null;
+var dwellTimer = null;
+var currentUserId = null;
+var currentUserTraits = null;
+var reporterTokenHash = null;
+var apiClient = null;
+var optedIn = false;
+var tierCache = null;
+var tierCacheTime = 0;
+var TIER_CACHE_TTL = 5 * 60 * 1e3;
+var seenRoutes = /* @__PURE__ */ new Set();
+function getConsentKey(projectId) {
+  return `mushi_rewards_consent_${projectId}`;
+}
+function isConsentGranted(projectId) {
+  try {
+    return localStorage.getItem(getConsentKey(projectId)) === "1";
+  } catch {
+    return false;
+  }
+}
+function setConsentGranted(projectId, granted) {
+  try {
+    if (granted) {
+      localStorage.setItem(getConsentKey(projectId), "1");
+    } else {
+      localStorage.removeItem(getConsentKey(projectId));
+    }
+    optedIn = granted;
+    apiClient?.submitActivity(currentUserId ?? "", [], { optedIn: granted }).catch(() => {
+    });
+  } catch {
+  }
+}
+function getTodayKey() {
+  return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+function getSessionMinutesToday(projectId) {
+  try {
+    const val = sessionStorage.getItem(`${DAILY_RESET_KEY_PREFIX}${projectId}_${getTodayKey()}`);
+    return val ? parseInt(val, 10) : 0;
+  } catch {
+    return 0;
+  }
+}
+function incrementSessionMinutes(projectId) {
+  const today = getTodayKey();
+  const key = `${DAILY_RESET_KEY_PREFIX}${projectId}_${today}`;
+  try {
+    const next = getSessionMinutesToday(projectId) + 1;
+    sessionStorage.setItem(key, String(next));
+    return next;
+  } catch {
+    return 99;
+  }
+}
+function initRewards(ctx) {
+  apiClient = ctx.client;
+  currentUserId = ctx.userId;
+  currentUserTraits = ctx.traits ?? null;
+  reporterTokenHash = ctx.reporterToken ?? null;
+  const { projectId } = ctx;
+  const flushMs = Math.max(
+    MIN_FLUSH_INTERVAL,
+    ctx.config.flushIntervalMs ?? DEFAULT_FLUSH_INTERVAL
+  );
+  if (ctx.config.consentMode === "auto") {
+    optedIn = true;
+    setConsentGranted(projectId, true);
+  } else {
+    optedIn = isConsentGranted(projectId);
+  }
+  if (ctx.config.trackActivity) {
+    installActivityListeners(projectId);
+  }
+  if (flushTimer) clearInterval(flushTimer);
+  flushTimer = setInterval(() => flush(ctx), flushMs);
+  if (dwellTimer) clearInterval(dwellTimer);
+  dwellTimer = setInterval(() => {
+    if (!optedIn || !currentUserId) return;
+    const minutes = getSessionMinutesToday(projectId);
+    if (minutes < MAX_SESSION_MINUTES_PER_DAY) {
+      incrementSessionMinutes(projectId);
+      enqueue({ action: "session_minute", metadata: { minutes_today: minutes + 1 } });
+    }
+  }, DWELL_SAMPLE_INTERVAL);
+  if (ctx.config.showInWidget) {
+    fetchAndCacheTier(currentUserId).then((tier) => {
+      if (tier) renderTierBadge(tier, ctx.config);
+    });
+  }
+  if (ctx.config.consentMode !== "auto" && !optedIn) {
+    renderConsentBanner(projectId, ctx.config);
+  }
+}
+function updateRewardsUser(userId, traits) {
+  currentUserId = userId;
+  currentUserTraits = traits ?? null;
+  tierCache = null;
+  tierCacheTime = 0;
+}
+function enqueue(event) {
+  if (!optedIn || !currentUserId) return;
+  pendingEvents.push({ ...event, queuedAt: Date.now() });
+}
+async function flush(ctx) {
+  if (!optedIn || !currentUserId || pendingEvents.length === 0) return;
+  let hostJwt = null;
+  if (ctx.config.verifyUserToken) {
+    try {
+      hostJwt = await ctx.config.verifyUserToken();
+    } catch {
+    }
+  }
+  const batch = pendingEvents.splice(0, 100);
+  try {
+    await ctx.client.submitActivity(currentUserId, batch, {
+      userTraits: currentUserTraits ?? void 0,
+      reporterTokenHash: reporterTokenHash ?? void 0,
+      optedIn: true,
+      hostJwt: hostJwt ?? void 0
+    });
+  } catch {
+    pendingEvents.unshift(...batch.slice(0, 50));
+  }
+}
+async function getTier(userId) {
+  const now = Date.now();
+  if (tierCache && now - tierCacheTime < TIER_CACHE_TTL) return tierCache;
+  return fetchAndCacheTier(userId);
+}
+async function fetchAndCacheTier(userId) {
+  if (!apiClient) return null;
+  const res = await apiClient.getMyTier(userId);
+  if (res.ok && res.data) {
+    tierCache = res.data;
+    tierCacheTime = Date.now();
+    return tierCache;
+  }
+  return null;
+}
+var routeObserver = null;
+var clickHandler = null;
+var origPushState = null;
+var lastRoute = "";
+function installActivityListeners(projectId) {
+  const emitRoute = () => {
+    const route = location.pathname;
+    if (route === lastRoute) return;
+    lastRoute = route;
+    const isNewToday = !seenRoutes.has(`${projectId}:${route}`);
+    if (isNewToday) {
+      seenRoutes.add(`${projectId}:${route}`);
+      enqueue({ action: "screen_view_unique_per_day", metadata: { route } });
+    }
+  };
+  origPushState = history.pushState.bind(history);
+  history.pushState = function(...args) {
+    origPushState(...args);
+    emitRoute();
+  };
+  window.addEventListener("popstate", emitRoute);
+  emitRoute();
+  routeObserver = new MutationObserver(() => emitRoute());
+  const main = document.querySelector("main") ?? document.body;
+  routeObserver.observe(main, { childList: true, subtree: false });
+  clickHandler = (e) => {
+    const target = e.target.closest("[data-testid]");
+    if (!target) return;
+    const testid = target.dataset.testid;
+    if (!testid) return;
+    enqueue({ action: "element_selected", metadata: { testid, route: location.pathname } });
+  };
+  document.addEventListener("click", clickHandler, { capture: true, passive: true });
+}
+var badgeHost = null;
+function renderTierBadge(tier, config) {
+  if (!config.showInWidget) return;
+  if (badgeHost) badgeHost.remove();
+  badgeHost = document.createElement("div");
+  badgeHost.id = "mushi-tier-badge";
+  Object.assign(badgeHost.style, {
+    position: "fixed",
+    bottom: "56px",
+    // above the widget button
+    right: "16px",
+    zIndex: "2147483645",
+    fontFamily: "system-ui, sans-serif"
+  });
+  const shadow = badgeHost.attachShadow({ mode: "closed" });
+  shadow.innerHTML = `
+    <style>
+      :host { display: block; }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border-radius: 999px;
+        background: rgba(0,0,0,0.75);
+        color: #fff;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        backdrop-filter: blur(6px);
+        cursor: default;
+        user-select: none;
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #6c47ff;
+        flex-shrink: 0;
+      }
+    </style>
+    <div class="badge">
+      <span class="dot"></span>
+      <span>${tier.displayName}</span>
+    </div>
+  `;
+  document.body.appendChild(badgeHost);
+}
+var consentHost = null;
+function renderConsentBanner(projectId, config) {
+  if (consentHost) return;
+  consentHost = document.createElement("div");
+  consentHost.id = "mushi-consent-banner";
+  Object.assign(consentHost.style, {
+    position: "fixed",
+    bottom: "80px",
+    right: "16px",
+    zIndex: "2147483646",
+    maxWidth: "280px",
+    fontFamily: "system-ui, sans-serif"
+  });
+  const shadow = consentHost.attachShadow({ mode: "closed" });
+  shadow.innerHTML = `
+    <style>
+      :host { display: block; }
+      .banner {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+        padding: 14px 16px;
+        font-size: 13px;
+        line-height: 1.5;
+        color: #374151;
+      }
+      .title { font-weight: 700; margin-bottom: 6px; color: #111827; }
+      .actions { display: flex; gap: 8px; margin-top: 10px; }
+      button {
+        flex: 1;
+        padding: 6px 10px;
+        border-radius: 6px;
+        border: none;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .accept { background: #6c47ff; color: #fff; }
+      .decline { background: #f3f4f6; color: #374151; }
+    </style>
+    <div class="banner">
+      <div class="title">\u{1F3AF} Earn rewards</div>
+      <div>Help improve this app and earn points, badges, and perks for your contributions.</div>
+      <div class="actions">
+        <button class="accept" id="accept">Enable</button>
+        <button class="decline" id="decline">No thanks</button>
+      </div>
+    </div>
+  `;
+  shadow.getElementById("accept")?.addEventListener("click", () => {
+    setConsentGranted(projectId, true);
+    consentHost?.remove();
+    consentHost = null;
+    if (config.showInWidget && currentUserId) {
+      fetchAndCacheTier(currentUserId).then((tier) => {
+        if (tier) renderTierBadge(tier, config);
+      });
+    }
+  });
+  shadow.getElementById("decline")?.addEventListener("click", () => {
+    setConsentGranted(projectId, false);
+    consentHost?.remove();
+    consentHost = null;
+  });
+  document.body.appendChild(consentHost);
+}
+
 // src/capture/console.ts
 var MAX_ENTRIES = 50;
 var MAX_MESSAGE_LENGTH = 500;
@@ -2847,7 +3511,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.0.0" ;
+var MUSHI_SDK_VERSION = "1.1.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -2886,7 +3550,7 @@ function createInstance(config) {
   const bootstrapConfig = applyPresetConfig(config);
   let activeConfig = bootstrapConfig;
   const log = config.debug ?? false ? createLogger({ scope: "mushi", level: "debug", format: "pretty" }) : noopLogger;
-  const apiClient = createApiClient({
+  const apiClient2 = createApiClient({
     projectId: bootstrapConfig.projectId,
     apiKey: bootstrapConfig.apiKey,
     ...bootstrapConfig.apiEndpoint ? { apiEndpoint: bootstrapConfig.apiEndpoint } : {}
@@ -2995,7 +3659,7 @@ function createInstance(config) {
         getUserId: () => userInfo?.id ?? null,
         getSessionId,
         onEvent: (event) => {
-          void apiClient.postDiscoveryEvent({
+          void apiClient2.postDiscoveryEvent({
             ...event,
             sdk_version: MUSHI_SDK_VERSION
           }).catch((err) => {
@@ -3071,17 +3735,17 @@ function createInstance(config) {
       }
     },
     async onReporterReportsRequest() {
-      const result = await apiClient.listReporterReports(getReporterToken());
+      const result = await apiClient2.listReporterReports(getReporterToken());
       if (!result.ok) throw new Error(result.error?.message ?? "Could not load reports");
       return result.data?.reports ?? [];
     },
     async onReporterCommentsRequest(reportId) {
-      const result = await apiClient.listReporterComments(reportId, getReporterToken());
+      const result = await apiClient2.listReporterComments(reportId, getReporterToken());
       if (!result.ok) throw new Error(result.error?.message ?? "Could not load thread");
       return result.data?.comments ?? [];
     },
     async onReporterReply(reportId, body) {
-      const result = await apiClient.replyToReporterReport(reportId, getReporterToken(), body);
+      const result = await apiClient2.replyToReporterReport(reportId, getReporterToken(), body);
       if (!result.ok) throw new Error(result.error?.message ?? "Could not send reply");
     }
   }, MUSHI_SDK_VERSION);
@@ -3127,8 +3791,8 @@ function createInstance(config) {
       errorBoundary: proactiveCfg?.errorBoundary === true
     });
   }
-  offlineQueue.startAutoSync(apiClient);
-  offlineQueue.flush(apiClient).then((result) => {
+  offlineQueue.startAutoSync(apiClient2);
+  offlineQueue.flush(apiClient2).then((result) => {
     if (result.sent > 0) log.info("Synced offline reports", { sent: result.sent });
   });
   function applyRuntimeConfig(runtime) {
@@ -3149,7 +3813,7 @@ function createInstance(config) {
   if (shouldUseRuntimeConfig(config)) {
     const cached = readCachedRuntimeConfig(config.projectId);
     if (cached) applyRuntimeConfig(cached);
-    apiClient.getSdkConfig().then((result) => {
+    apiClient2.getSdkConfig().then((result) => {
       if (result.ok && result.data) {
         cacheRuntimeConfig(config.projectId, result.data);
         applyRuntimeConfig(result.data);
@@ -3168,7 +3832,7 @@ function createInstance(config) {
     if (activeConfig.widget?.outdatedBanner === "off") return;
     const cached = readCachedSdkVersion(MUSHI_SDK_PACKAGE);
     if (cached) applySdkFreshness(cached);
-    const result = await apiClient.getLatestSdkVersion(MUSHI_SDK_PACKAGE);
+    const result = await apiClient2.getLatestSdkVersion(MUSHI_SDK_PACKAGE);
     if (!result.ok || !result.data) return;
     cacheSdkVersion(MUSHI_SDK_PACKAGE, result.data);
     applySdkFreshness(result.data);
@@ -3310,7 +3974,7 @@ function createInstance(config) {
       emit("report:queued", { reportId: report.id });
       return;
     }
-    const result = await apiClient.submitReport(report);
+    const result = await apiClient2.submitReport(report);
     if (result.ok) {
       log.info("Report sent", { reportId: result.data?.reportId });
       emit("report:sent", { reportId: result.data?.reportId });
@@ -3319,6 +3983,10 @@ function createInstance(config) {
         level: "info",
         message: `Mushi report sent (${result.data?.reportId ?? report.id})`
       });
+      enqueue({
+        action: "report_submit",
+        metadata: { category, reportId: result.data?.reportId ?? report.id }
+      });
       try {
         if (config.sentry && result.data?.reportId) {
           tagSentryScope(result.data.reportId);
@@ -3464,7 +4132,7 @@ function createInstance(config) {
         emit("report:queued", { reportId: report.id });
         return null;
       }
-      const res = await apiClient.submitReport(report);
+      const res = await apiClient2.submitReport(report);
       if (res.ok) {
         emit("report:sent", { reportId: res.data?.reportId });
         try {
@@ -3516,6 +4184,33 @@ function createInstance(config) {
         level: "info",
         message: `Mushi.identify(${userId})`
       });
+      if (activeConfig.rewards?.enabled) {
+        const rewardsCtx = {
+          client: apiClient2,
+          config: activeConfig.rewards,
+          projectId: bootstrapConfig.projectId,
+          userId,
+          traits: traits ? { email: traits.email, name: traits.name, provider: traits.provider } : void 0
+        };
+        if (userInfo.id === userId) {
+          initRewards(rewardsCtx);
+        } else {
+          updateRewardsUser(userId, rewardsCtx.traits);
+        }
+        if (activeConfig.rewards.showInWidget !== false) {
+          void apiClient2.getMyPoints(userId).then((res) => {
+            if (!res.ok) return;
+            const d = res.data;
+            widget.setRewardsState({
+              tier: d.tier ? { slug: d.tier.slug ?? "free", displayName: d.tier.display_name ?? "Free", pointsThreshold: d.tier.points_threshold ?? 0 } : null,
+              nextTier: d.next_tier ? { displayName: d.next_tier.display_name ?? "", pointsThreshold: d.next_tier.points_threshold ?? 0 } : null,
+              totalPoints: d.total_points ?? 0,
+              pointsForReport: d.report_submit_pts ?? 50
+            });
+          }).catch(() => {
+          });
+        }
+      }
     },
     addBreadcrumb(crumb) {
       breadcrumbs.add(crumb);
@@ -3541,6 +4236,27 @@ function createInstance(config) {
         return;
       }
       for (const k of Object.keys(stickyTags)) delete stickyTags[k];
+    },
+    // ─── Rewards program (P1) ──────────────────────────────────
+    async getReputation() {
+      if (!userInfo?.id) return null;
+      const res = await apiClient2.getMyPoints(userInfo.id);
+      if (!res.ok) return null;
+      return {
+        totalPoints: res.data.total_points ?? 0,
+        points30d: res.data.points_30d ?? 0,
+        reputation: 1,
+        confirmedBugs: 0,
+        totalReports: 0
+      };
+    },
+    async getTier() {
+      if (!userInfo?.id) return null;
+      return getTier(userInfo.id);
+    },
+    recordActivity(action, metadata) {
+      if (!activeConfig.rewards?.enabled) return;
+      enqueue({ action, metadata });
     }
   };
   return sdk;
@@ -3553,7 +4269,10 @@ function mergeRuntimeConfig(config, runtime) {
     widget: {
       ...config.widget,
       ...runtime.widget,
-      ...widgetTrigger ? { trigger: widgetTrigger } : {}
+      ...widgetTrigger ? { trigger: widgetTrigger } : {},
+      // betaMode is local-only: set by the host app, not the dashboard.
+      // Restore it after the runtime spread so it is never silently cleared.
+      ...config.widget?.betaMode ? { betaMode: config.widget.betaMode } : {}
     },
     capture: {
       ...config.capture,
@@ -3789,6 +4508,10 @@ function createNoopInstance() {
     setTags: () => {
     },
     clearTag: () => {
+    },
+    getReputation: async () => null,
+    getTier: async () => null,
+    recordActivity: () => {
     }
   };
 }