@mushi-mushi/web 0.9.0 → 1.1.0

package/dist/index.cjs

@@ -935,6 +935,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,
@@ -945,6 +1175,7 @@ function getWidgetStyles(theme) {
       }
       .mushi-success-stamp circle { stroke-dashoffset: 0; }
       .mushi-success-stamp-label { opacity: 1; }
+      .mushi-success-pts-award { opacity: 1; }
     }
   `;
 }
@@ -1000,7 +1231,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);
@@ -1044,6 +1276,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);
@@ -1075,7 +1308,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();
@@ -1150,6 +1384,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);
@@ -1394,6 +1632,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>
@@ -1404,10 +1643,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)}">
@@ -1528,7 +1809,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>
     `;
   }
@@ -1692,6 +2058,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;
@@ -2468,42 +3132,211 @@ function createDiscoveryCapture(opts) {
 // src/sentry.ts
 function getSentryGlobal() {
   try {
-    const win = globalThis;
-    if (win.__SENTRY__) {
-      const sentry = win.__SENTRY__;
-      const hub = sentry.hub;
-      return hub;
+    const w = globalThis;
+    if (w.Sentry) return w.Sentry;
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function getSentryReplayGlobal() {
+  try {
+    const w = globalThis;
+    return w.__SENTRY_REPLAY__;
+  } catch {
+    return void 0;
+  }
+}
+function detectSentrySdkFamily() {
+  try {
+    const w = globalThis;
+    const meta = w.__SENTRY__;
+    const sentry = w.Sentry;
+    if (meta?.version === "9" || sentry && typeof sentry.lastEventId === "function") {
+      return meta?.version === "9" ? "v9" : "v8";
+    }
+    if (meta?.version === "8") return "v8";
+    if (sentry && typeof sentry.getCurrentHub === "function") return "v7";
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+function captureSentryContext(_config, options = {}) {
+  const limit = Math.max(0, options.breadcrumbsLimit ?? 30);
+  const out = {};
+  const sentry = getSentryGlobal();
+  if (!sentry) return out;
+  out.sdk = detectSentrySdkFamily();
+  try {
+    const v8 = sentry;
+    if (typeof v8.lastEventId === "function") {
+      out.eventId = v8.lastEventId() ?? void 0;
+    } else {
+      const v7 = sentry;
+      const scope2 = v7.getCurrentHub?.()?.getScope?.();
+      out.eventId = scope2?.getLastEventId?.() ?? void 0;
+    }
+  } catch {
+  }
+  let scope;
+  try {
+    const v8 = sentry;
+    if (typeof v8.getCurrentScope === "function") {
+      scope = v8.getCurrentScope();
+    } else {
+      const v7 = sentry;
+      scope = v7.getCurrentHub?.()?.getScope?.();
+    }
+  } catch {
+  }
+  if (scope) {
+    try {
+      const user = scope.getUser?.();
+      if (user) {
+        out.user = {
+          id: typeof user.id === "string" ? user.id : void 0,
+          email: typeof user.email === "string" ? user.email : void 0,
+          username: typeof user.username === "string" ? user.username : void 0,
+          ip_address: typeof user.ip_address === "string" ? user.ip_address : void 0
+        };
+      }
+    } catch {
+    }
+    try {
+      const tags = scope.getTags?.();
+      if (tags && typeof tags === "object") {
+        const pruned = {};
+        for (const [k, v] of Object.entries(tags)) {
+          if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+            pruned[k] = v;
+          }
+        }
+        if (Object.keys(pruned).length > 0) out.tags = pruned;
+      }
+    } catch {
+    }
+    try {
+      out.transactionName = scope.getTransactionName?.() ?? scope.getTransaction?.()?.name ?? void 0;
+    } catch {
+    }
+    try {
+      out.sessionId = scope.getSession?.()?.sid ?? void 0;
+    } catch {
+    }
+    try {
+      const raw = scope.getBreadcrumbs?.() ?? scope._breadcrumbs ?? [];
+      if (Array.isArray(raw) && raw.length > 0) {
+        const sliced = raw.slice(-limit);
+        out.breadcrumbs = sliced.map((b) => {
+          const r = b;
+          return {
+            timestamp: typeof r.timestamp === "number" ? (
+              // Sentry stores breadcrumb timestamps in seconds; convert
+              // to ms so the field is comparable to Mushi's own.
+              r.timestamp < 1e12 ? Math.round(r.timestamp * 1e3) : r.timestamp
+            ) : void 0,
+            category: typeof r.category === "string" ? r.category : void 0,
+            level: typeof r.level === "string" ? r.level : void 0,
+            message: typeof r.message === "string" ? r.message : void 0,
+            type: typeof r.type === "string" ? r.type : void 0,
+            data: r.data && typeof r.data === "object" ? r.data : void 0
+          };
+        });
+      }
+    } catch {
+    }
+  }
+  try {
+    const v8 = sentry;
+    let span;
+    if (typeof v8.getActiveSpan === "function") {
+      span = v8.getActiveSpan();
+    } else if (scope?.getSpan) {
+      span = scope.getSpan();
+    }
+    if (span) {
+      const ctx = span.spanContext?.();
+      out.traceId = ctx?.traceId ?? span.traceId ?? void 0;
+      out.spanId = ctx?.spanId ?? span.spanId ?? void 0;
     }
-    if (win.Sentry) {
-      return win.Sentry;
+  } catch {
+  }
+  let client;
+  try {
+    const v8 = sentry;
+    if (typeof v8.getClient === "function") {
+      client = v8.getClient();
+    } else {
+      const v7 = sentry;
+      client = v7.getCurrentHub?.()?.getClient?.();
+    }
+  } catch {
+  }
+  if (client) {
+    try {
+      const opts = client.getOptions?.();
+      if (opts?.release) out.release = opts.release;
+      if (opts?.environment) out.environment = opts.environment;
+    } catch {
     }
+    try {
+      const dsn = client.getDsn?.();
+      if (dsn?.host && dsn?.projectId && out.eventId) {
+        const orgHost = dsn.host.replace(/^o\d+\./, "");
+        out.issueUrl = `https://${orgHost}/issues/?query=${encodeURIComponent(out.eventId)}`;
+      }
+    } catch {
+    }
+  }
+  try {
+    const v8 = sentry;
+    const replay = v8.getReplay?.() ?? getSentryReplayGlobal();
+    out.replayId = replay?.getReplayId?.() ?? void 0;
   } catch {
   }
-  return void 0;
+  return out;
 }
-function captureSentryContext(_config) {
-  const context = {};
+function tagSentryScope(reportId, options = {}) {
+  const sentry = getSentryGlobal();
+  if (!sentry) return;
   try {
-    const hub = getSentryGlobal();
-    if (!hub) return context;
-    const scope = hub.getScope?.();
-    if (scope) {
-      context.eventId = scope.getLastEventId?.() ?? void 0;
+    const v8 = sentry;
+    if (typeof v8.setTag === "function") {
+      v8.setTag("mushi.report_id", reportId);
+      if (options.reportUrl) v8.setTag("mushi.report_url", options.reportUrl);
+    }
+    if (typeof v8.setContext === "function") {
+      v8.setContext("mushi_report", {
+        id: reportId,
+        ...options.reportUrl ? { url: options.reportUrl } : {},
+        captured_at: (/* @__PURE__ */ new Date()).toISOString()
+      });
     }
-    const client = hub.getClient?.();
-    if (client) {
-      const options = client.getOptions?.();
-      context.release = options?.release;
-      context.environment = options?.environment;
+    if (typeof v8.addBreadcrumb === "function") {
+      v8.addBreadcrumb({
+        category: "mushi",
+        type: "info",
+        level: "info",
+        message: `Mushi report submitted (${reportId})`,
+        data: { report_id: reportId, ...options.reportUrl ? { url: options.reportUrl } : {} }
+      });
     }
-    const win = globalThis;
-    if (win.__SENTRY_REPLAY__) {
-      const replay = win.__SENTRY_REPLAY__;
-      context.replayId = replay.getReplayId?.() ?? void 0;
+  } catch {
+  }
+  try {
+    const v7 = sentry;
+    const scope = v7.getCurrentHub?.()?.getScope?.();
+    if (scope) {
+      scope.setTag?.("mushi.report_id", reportId);
+      if (options.reportUrl) scope.setTag?.("mushi.report_url", options.reportUrl);
+      scope.setContext?.("mushi_report", {
+        id: reportId,
+        ...options.reportUrl ? { url: options.reportUrl } : {}
+      });
     }
   } catch {
   }
-  return context;
 }
 
 // src/proactive-triggers.ts
@@ -2680,7 +3513,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "0.9.0" ;
+var MUSHI_SDK_VERSION = "1.1.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -2719,7 +3552,7 @@ function createInstance(config) {
   const bootstrapConfig = applyPresetConfig(config);
   let activeConfig = bootstrapConfig;
   const log = config.debug ?? false ? core.createLogger({ scope: "mushi", level: "debug", format: "pretty" }) : core.noopLogger;
-  const apiClient = core.createApiClient({
+  const apiClient2 = core.createApiClient({
     projectId: bootstrapConfig.projectId,
     apiKey: bootstrapConfig.apiKey,
     ...bootstrapConfig.apiEndpoint ? { apiEndpoint: bootstrapConfig.apiEndpoint } : {}
@@ -2728,6 +3561,30 @@ function createInstance(config) {
   const offlineQueue = core.createOfflineQueue(bootstrapConfig.offline);
   const rateLimiter = core.createRateLimiter({ maxBurst: 10, refillRate: 1, refillIntervalMs: 5e3 });
   const piiScrubber = core.createPiiScrubber();
+  function scrubBreadcrumbsForWire(crumbs) {
+    return crumbs.map((c) => {
+      const next = { ...c };
+      if (typeof c.message === "string") {
+        next.message = piiScrubber.scrub(c.message);
+      }
+      if (c.data && typeof c.data === "object") {
+        const cleaned = {};
+        for (const [k, v] of Object.entries(c.data)) {
+          cleaned[k] = typeof v === "string" ? piiScrubber.scrub(v) : v;
+        }
+        next.data = cleaned;
+      }
+      return next;
+    });
+  }
+  function scrubTagsForWire(tags) {
+    if (!tags) return void 0;
+    const out = {};
+    for (const [k, v] of Object.entries(tags)) {
+      out[k] = typeof v === "string" ? piiScrubber.scrub(v) : v;
+    }
+    return out;
+  }
   let consoleCap = null;
   let networkCap = null;
   let perfCap = null;
@@ -2804,7 +3661,7 @@ function createInstance(config) {
         getUserId: () => userInfo?.id ?? null,
         getSessionId: core.getSessionId,
         onEvent: (event) => {
-          void apiClient.postDiscoveryEvent({
+          void apiClient2.postDiscoveryEvent({
             ...event,
             sdk_version: MUSHI_SDK_VERSION
           }).catch((err) => {
@@ -2827,6 +3684,16 @@ function createInstance(config) {
   let runtimeConfigLoaded = false;
   let userInfo = null;
   const customMetadata = {};
+  const stickyTags = {};
+  const breadcrumbs = core.createBreadcrumbBuffer({ max: 50 });
+  breadcrumbs.add({
+    category: "lifecycle",
+    level: "info",
+    message: "Mushi SDK init",
+    data: { projectId: bootstrapConfig.projectId, sdkVersion: MUSHI_SDK_VERSION }
+  });
+  let detachAutoBreadcrumbs = null;
+  detachAutoBreadcrumbs = installAutoBreadcrumbs(breadcrumbs);
   widget = new MushiWidget(bootstrapConfig.widget, {
     onSubmit: async ({ category, description, intent }) => {
       log.info("Report submitted", { category, intent });
@@ -2870,17 +3737,17 @@ function createInstance(config) {
       }
     },
     async onReporterReportsRequest() {
-      const result = await apiClient.listReporterReports(core.getReporterToken());
+      const result = await apiClient2.listReporterReports(core.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, core.getReporterToken());
+      const result = await apiClient2.listReporterComments(reportId, core.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, core.getReporterToken(), body);
+      const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), body);
       if (!result.ok) throw new Error(result.error?.message ?? "Could not send reply");
     }
   }, MUSHI_SDK_VERSION);
@@ -2926,8 +3793,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) {
@@ -2948,7 +3815,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);
@@ -2967,7 +3834,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);
@@ -3036,6 +3903,15 @@ function createInstance(config) {
     const fingerprintHash = await core.getDeviceFingerprintHash().catch(() => null);
     const consoleLogs = activeConfig.capture?.console === false ? void 0 : consoleCap?.getEntries();
     const networkLogs = activeConfig.capture?.network === false ? void 0 : networkCap?.getEntries();
+    const reportBreadcrumbs = scrubBreadcrumbsForWire(breadcrumbs.getAll());
+    const stickyTagSnapshot = scrubTagsForWire(
+      Object.keys(stickyTags).length > 0 ? { ...stickyTags } : void 0
+    );
+    const sentryCtxScrubbed = sentryCtx ? {
+      ...sentryCtx,
+      ...sentryCtx.breadcrumbs ? { breadcrumbs: scrubBreadcrumbsForWire(sentryCtx.breadcrumbs) } : {},
+      ...sentryCtx.tags ? { tags: scrubTagsForWire(sentryCtx.tags) } : {}
+    } : void 0;
     const report = {
       id: crypto.randomUUID?.() ?? `mushi_${Date.now()}_${Math.random().toString(36).slice(2)}`,
       projectId: config.projectId,
@@ -3061,10 +3937,24 @@ function createInstance(config) {
       sdkPackage: MUSHI_SDK_PACKAGE,
       sdkVersion: MUSHI_SDK_VERSION,
       proactiveTrigger: pendingProactiveTrigger ?? void 0,
+      // Top-level Sentry-grade observability fields. Breadcrumbs are
+      // surfaced separately from `consoleLogs` because they're the
+      // higher-signal "what just happened" trail (vs. the high-volume
+      // raw console mirror), and the admin /reports drawer shows them
+      // in different panes.
+      ...reportBreadcrumbs.length > 0 ? { breadcrumbs: reportBreadcrumbs } : {},
+      ...stickyTagSnapshot ? { tags: stickyTagSnapshot } : {},
+      ...sentryCtxScrubbed ? { sentryContext: sentryCtxScrubbed } : {},
       sentryEventId: sentryCtx?.eventId,
       sentryReplayId: sentryCtx?.replayId,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
+    breadcrumbs.add({
+      category: "lifecycle",
+      level: "info",
+      message: `Mushi report submitting (${category})`,
+      data: { reportId: report.id, category }
+    });
     if (config.integrations?.custom) {
       const builder = {
         addMetadata(key, value) {
@@ -3086,14 +3976,34 @@ 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 });
+      breadcrumbs.add({
+        category: "lifecycle",
+        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);
+        }
+      } catch {
+      }
     } else {
       log.warn("Report failed, queuing for retry", { reportId: report.id, error: result.error });
       await offlineQueue.enqueue(report);
       emit("report:failed", { reportId: report.id, error: result.error });
+      breadcrumbs.add({
+        category: "lifecycle",
+        level: "warning",
+        message: `Mushi report queued for retry (${report.id})`
+      });
     }
     pendingScreenshot = null;
     pendingElement = null;
@@ -3165,6 +4075,9 @@ function createInstance(config) {
       discoveryCap?.destroy();
       discoveryCap = null;
       offlineQueue.stopAutoSync();
+      detachAutoBreadcrumbs?.();
+      detachAutoBreadcrumbs = null;
+      breadcrumbs.clear();
       listeners.clear();
       instance = null;
       log.debug("Destroyed");
@@ -3179,6 +4092,16 @@ function createInstance(config) {
       }
       const description = piiScrubber.scrub(preFilter.truncate(input.description));
       const category = input.category ?? "bug";
+      const sentryCtx = config.sentry ? captureSentryContext(config.sentry) : void 0;
+      const captureBreadcrumbs = scrubBreadcrumbsForWire(breadcrumbs.getAll());
+      const mergedTags = scrubTagsForWire(
+        Object.keys(stickyTags).length === 0 && !input.tags ? void 0 : { ...stickyTags, ...input.tags ?? {} }
+      );
+      const sentryCtxScrubbed = sentryCtx ? {
+        ...sentryCtx,
+        ...sentryCtx.breadcrumbs ? { breadcrumbs: scrubBreadcrumbsForWire(sentryCtx.breadcrumbs) } : {},
+        ...sentryCtx.tags ? { tags: scrubTagsForWire(sentryCtx.tags) } : {}
+      } : void 0;
       const report = {
         id: crypto.randomUUID?.() ?? `mushi_${Date.now()}_${Math.random().toString(36).slice(2)}`,
         projectId: config.projectId,
@@ -3189,16 +4112,20 @@ function createInstance(config) {
         metadata: {
           ...input.metadata ?? {},
           ...userInfo ? { user: userInfo } : {},
-          ...input.tags ? { tags: input.tags } : {},
           ...input.error ? { error: input.error } : {},
           ...input.severity ? { severity: input.severity } : {},
           ...input.component ? { component: input.component } : {},
           ...input.source ? { source: input.source } : { source: "captureEvent" }
         },
+        ...captureBreadcrumbs.length > 0 ? { breadcrumbs: captureBreadcrumbs } : {},
+        ...mergedTags && Object.keys(mergedTags).length > 0 ? { tags: mergedTags } : {},
+        ...sentryCtxScrubbed ? { sentryContext: sentryCtxScrubbed } : {},
         sessionId: core.getSessionId(),
         reporterToken: core.getReporterToken(),
         sdkPackage: MUSHI_SDK_PACKAGE,
         sdkVersion: MUSHI_SDK_VERSION,
+        sentryEventId: sentryCtx?.eventId,
+        sentryReplayId: sentryCtx?.replayId,
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       emit("report:submitted", { reportId: report.id });
@@ -3207,15 +4134,46 @@ 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 {
+          if (config.sentry && res.data?.reportId) tagSentryScope(res.data.reportId);
+        } catch {
+        }
         return res.data?.reportId ?? null;
       }
       await offlineQueue.enqueue(report);
       emit("report:failed", { reportId: report.id, error: res.error });
       return null;
     },
+    async captureException(error, options) {
+      const normalised = core.normaliseThrown(error);
+      breadcrumbs.add({
+        category: "lifecycle",
+        level: "error",
+        message: `Mushi.captureException(${normalised.name}): ${normalised.message}`,
+        ...normalised.stack ? { data: { stack: normalised.stack.slice(0, 500) } } : {}
+      });
+      const description = options?.description?.trim() || `${normalised.name}: ${normalised.message}` || "Uncaught exception";
+      return sdk.captureEvent({
+        description,
+        category: options?.category ?? "bug",
+        severity: options?.severity ?? "high",
+        ...options?.component ? { component: options.component } : {},
+        ...options?.tags ? { tags: options.tags } : {},
+        source: options?.source ?? "captureException",
+        error: {
+          name: normalised.name,
+          message: normalised.message,
+          ...normalised.stack ? { stack: normalised.stack } : {}
+        },
+        metadata: {
+          ...options?.metadata ?? {},
+          ...normalised.cause ? { cause: normalised.cause } : {}
+        }
+      });
+    },
     identify(userId, traits) {
       userInfo = { id: userId, ...traits?.email ? { email: traits.email } : {}, ...traits?.name ? { name: traits.name } : {} };
       if (traits) {
@@ -3223,6 +4181,84 @@ function createInstance(config) {
           if (k !== "email" && k !== "name") customMetadata[`user.${k}`] = v;
         }
       }
+      breadcrumbs.add({
+        category: "lifecycle",
+        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);
+    },
+    getBreadcrumbs() {
+      return breadcrumbs.getAll();
+    },
+    setTag(key, value) {
+      if (typeof key !== "string" || key.length === 0) return;
+      stickyTags[key] = value;
+    },
+    setTags(tags) {
+      if (!tags || typeof tags !== "object") return;
+      for (const [k, v] of Object.entries(tags)) {
+        if (typeof k === "string" && k.length > 0) {
+          stickyTags[k] = v;
+        }
+      }
+    },
+    clearTag(key) {
+      if (typeof key === "string" && key.length > 0) {
+        delete stickyTags[key];
+        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;
@@ -3235,7 +4271,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,
@@ -3460,10 +4499,148 @@ function createNoopInstance() {
       instance = null;
     },
     captureEvent: async () => null,
+    captureException: async () => null,
     identify: () => {
+    },
+    addBreadcrumb: () => {
+    },
+    getBreadcrumbs: () => [],
+    setTag: () => {
+    },
+    setTags: () => {
+    },
+    clearTag: () => {
+    },
+    getReputation: async () => null,
+    getTier: async () => null,
+    recordActivity: () => {
     }
   };
 }
+function installAutoBreadcrumbs(buffer) {
+  if (typeof window === "undefined") return () => {
+  };
+  const cleanups = [];
+  try {
+    const dispatchRouteChange = (kind) => {
+      buffer.add({
+        category: "navigation",
+        level: "info",
+        message: `${kind}: ${window.location.pathname}`,
+        data: { url: window.location.href, kind }
+      });
+    };
+    const onPop = () => dispatchRouteChange("popstate");
+    window.addEventListener("popstate", onPop, { passive: true });
+    cleanups.push(() => window.removeEventListener("popstate", onPop));
+    const origPush = window.history.pushState;
+    const origReplace = window.history.replaceState;
+    window.history.pushState = function patched(...args) {
+      const ret = origPush.apply(this, args);
+      try {
+        dispatchRouteChange("pushState");
+      } catch {
+      }
+      return ret;
+    };
+    window.history.replaceState = function patched(...args) {
+      const ret = origReplace.apply(this, args);
+      try {
+        dispatchRouteChange("replaceState");
+      } catch {
+      }
+      return ret;
+    };
+    cleanups.push(() => {
+      window.history.pushState = origPush;
+      window.history.replaceState = origReplace;
+    });
+  } catch {
+  }
+  try {
+    const origError = console.error;
+    const origWarn = console.warn;
+    console.error = function(...args) {
+      try {
+        buffer.add({
+          category: "console",
+          level: "error",
+          message: args.map(stringifyConsoleArg).join(" ")
+        });
+      } catch {
+      }
+      return origError.apply(this, args);
+    };
+    console.warn = function(...args) {
+      try {
+        buffer.add({
+          category: "console",
+          level: "warning",
+          message: args.map(stringifyConsoleArg).join(" ")
+        });
+      } catch {
+      }
+      return origWarn.apply(this, args);
+    };
+    cleanups.push(() => {
+      console.error = origError;
+      console.warn = origWarn;
+    });
+  } catch {
+  }
+  try {
+    const onClick = (ev) => {
+      try {
+        const target = ev.target;
+        if (!(target instanceof Element)) return;
+        let cur = target;
+        let hops = 0;
+        while (cur && hops < 10) {
+          const tid = cur.getAttribute("data-testid");
+          if (tid) {
+            const text = (cur.textContent ?? "").trim().slice(0, 80);
+            buffer.add({
+              category: "ui.click",
+              level: "info",
+              message: `clicked ${tid}${text ? ` \u2014 ${text}` : ""}`,
+              data: { testid: tid, tag: cur.tagName.toLowerCase() }
+            });
+            return;
+          }
+          cur = cur.parentElement;
+          hops++;
+        }
+      } catch {
+      }
+    };
+    document.addEventListener("click", onClick, { passive: true, capture: true });
+    cleanups.push(() => document.removeEventListener("click", onClick, true));
+  } catch {
+  }
+  return () => {
+    for (const c of cleanups) {
+      try {
+        c();
+      } catch {
+      }
+    }
+  };
+}
+function stringifyConsoleArg(arg) {
+  try {
+    if (arg instanceof Error) {
+      return `${arg.name}: ${arg.message}`;
+    }
+    if (typeof arg === "object" && arg !== null) {
+      const json = JSON.stringify(arg);
+      return json.length > 200 ? `${json.slice(0, 200)}\u2026` : json;
+    }
+    const s = String(arg);
+    return s.length > 200 ? `${s.slice(0, 200)}\u2026` : s;
+  } catch {
+    return `[${typeof arg}]`;
+  }
+}
 
 exports.Mushi = Mushi;
 exports.MushiWidget = MushiWidget;