@mushi-mushi/web 1.5.0 → 1.6.0

package/dist/index.js

@@ -338,6 +338,21 @@ function getWidgetStyles(theme) {
       outline: 2px solid ${vermillion};
       outline-offset: 3px;
     }
+    /* First-session welcome pulse. Three soft halos at 800ms each, then
+       auto-clear. Uses a box-shadow ring rather than transform/scale so it
+       can compose with the hover transform without fighting it. Respects
+       prefers-reduced-motion. */
+    @keyframes mushi-trigger-pulse {
+      0%   { box-shadow: 0 0 0 0 rgba(212, 67, 50, 0.55), 0 1px 0 ${rule}, 0 10px 24px -14px rgba(14,13,11,0.45); }
+      70%  { box-shadow: 0 0 0 16px rgba(212, 67, 50, 0), 0 1px 0 ${rule}, 0 10px 24px -14px rgba(14,13,11,0.45); }
+      100% { box-shadow: 0 0 0 0 rgba(212, 67, 50, 0), 0 1px 0 ${rule}, 0 10px 24px -14px rgba(14,13,11,0.45); }
+    }
+    .mushi-trigger-pulse {
+      animation: mushi-trigger-pulse 800ms ${easeStamp} 3;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .mushi-trigger-pulse { animation: none; }
+    }
     .mushi-trigger.bottom-right {
       bottom: var(--mushi-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
       right: var(--mushi-right, calc(24px + env(safe-area-inset-right, 0px)));
@@ -608,6 +623,25 @@ function getWidgetStyles(theme) {
       transform: translateX(-4px);
       transition: opacity 220ms ${easeStamp}, transform 220ms ${easeStamp}, color 220ms ${easeStamp};
     }
+    /* Feature-request and Reports-inbox entries sit above the five
+       category cards as discoverable shortcuts. We give them a subtle
+       left rule so the eye reads them as a separate group rather than
+       "another category". The shortcut group has zero hover indent
+       overshoot \u2014 we want them quiet until intent. */
+    .mushi-feature-entry,
+    .mushi-reports-entry {
+      padding-left: 10px;
+      border-left: 2px solid ${inkFaint};
+      transition: padding 220ms ${easeStamp}, color 220ms ${easeStamp}, border-color 220ms ${easeStamp};
+    }
+    .mushi-feature-entry:hover,
+    .mushi-reports-entry:hover {
+      border-left-color: ${vermillion};
+      padding-left: 14px;
+    }
+    .mushi-feature-entry .mushi-option-icon {
+      filter: none;
+    }
     .mushi-report-row {
       width: 100%;
       display: grid;
@@ -1025,6 +1059,113 @@ function getWidgetStyles(theme) {
       color: ${inkMuted};
     }
 
+    /* \u2500\u2500 Two-way receipt (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 */
+    /* The receipt block sits below the stamp/meta. Three states:    */
+    /*   1. delivering... (spinner pill, while host onSubmit awaits) */
+    /*   2. confirmed     (Receipt #abc12345 + Track on Mushi link)  */
+    /*   3. queued offline (warn pill \u2014 degrade gracefully)          */
+    .mushi-success-receipt {
+      margin-top: 14px;
+      width: 100%;
+      max-width: 280px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .mushi-success-receipt-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.05em;
+      color: ${inkMuted};
+    }
+    .mushi-success-receipt-label {
+      text-transform: uppercase;
+      letter-spacing: 0.10em;
+      color: ${inkMuted};
+    }
+    .mushi-success-receipt-id {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background: transparent;
+      border: 1px dashed ${rule};
+      color: inherit;
+      font-family: ${fontMono};
+      font-size: 12px;
+      letter-spacing: 0.02em;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease;
+    }
+    .mushi-success-receipt-id:hover,
+    .mushi-success-receipt-id:focus-visible {
+      background: rgba(217, 65, 47, 0.06);
+      border-color: ${vermillion};
+      color: ${vermillion};
+      outline: none;
+    }
+    .mushi-success-receipt-copy {
+      font-size: 11px;
+      opacity: 0.7;
+    }
+    .mushi-success-receipt-track {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 6px 10px;
+      border-radius: 4px;
+      background: ${vermillion};
+      color: #fff;
+      font-family: ${fontMono};
+      font-size: 11px;
+      letter-spacing: 0.10em;
+      text-transform: uppercase;
+      text-decoration: none;
+      transition: filter 120ms ease;
+    }
+    .mushi-success-receipt-track:hover,
+    .mushi-success-receipt-track:focus-visible {
+      filter: brightness(0.95);
+      outline: none;
+    }
+    .mushi-success-receipt-spinner {
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      border: 1.5px solid ${rule};
+      border-top-color: ${vermillion};
+      animation: mushi-receipt-spin 0.8s linear infinite;
+    }
+    @keyframes mushi-receipt-spin {
+      to { transform: rotate(360deg); }
+    }
+    .mushi-success-receipt-hint {
+      color: ${inkMuted};
+      font-style: italic;
+    }
+    .mushi-success-receipt-warn {
+      color: ${vermillion};
+    }
+    .mushi-success-sla {
+      margin-top: 2px;
+      font-family: ${fontDisplay};
+      font-size: 12px;
+      line-height: 1.45;
+      text-align: center;
+      color: ${inkMuted};
+      max-width: 260px;
+    }
+    .mushi-success-sla-default {
+      opacity: 0.85;
+    }
+
     @keyframes mushi-stamp-ring {
       to { stroke-dashoffset: 0; }
     }
@@ -1297,6 +1438,7 @@ var CATEGORY_ICONS = {
   confusing: "\u{1F615}",
   other: "\u{1F4DD}"
 };
+var FEATURE_REQUEST_INTENT = "Feature request";
 function pad2(n) {
   return n < 10 ? `0${n}` : String(n);
 }
@@ -1342,7 +1484,12 @@ var MushiWidget = class {
       brandFooter: config.brandFooter ?? true,
       outdatedBanner: config.outdatedBanner ?? "auto",
       betaMode: config.betaMode ?? {},
-      minDescriptionLength: config.minDescriptionLength ?? 20
+      minDescriptionLength: config.minDescriptionLength ?? 20,
+      dashboardUrl: config.dashboardUrl ?? "",
+      responseSlaLabel: config.responseSlaLabel ?? "",
+      featureRequestCard: config.featureRequestCard ?? true,
+      featureRequestLabel: config.featureRequestLabel ?? "",
+      featureRequestDescription: config.featureRequestDescription ?? ""
     };
     this.callbacks = callbacks;
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
@@ -1360,6 +1507,13 @@ var MushiWidget = class {
   step = "category";
   selectedCategory = null;
   selectedIntent = null;
+  /**
+   * True when the user took the "Feature request" shortcut. We track this
+   * separately from `selectedCategory='other'` so the Back button on the
+   * details step jumps straight back to the category picker instead of
+   * landing on the intent picker the user explicitly skipped.
+   */
+  viaFeatureRequest = false;
   screenshotAttached = false;
   screenshotCapturing = false;
   screenshotError = false;
@@ -1397,6 +1551,17 @@ var MushiWidget = class {
   successTimer = null;
   autoCloseTimer = null;
   rewardsState = null;
+  /** Server-confirmed id for the just-submitted report. Surfaces in
+   *  the success step as a copyable receipt + optional deep link to
+   *  the Mushi console (when `dashboardUrl` is configured). Cleared
+   *  on every new `open()` so a re-opened widget never reuses a
+   *  stale id from the previous session. */
+  lastReportId = null;
+  /** True when the just-submitted report was queued offline (no
+   *  network, or the API errored and went into the retry queue).
+   *  Drives a different success copy so the user knows the report
+   *  hasn't actually reached the console yet. */
+  lastSubmitQueuedOffline = false;
   mount() {
     if (this.host.isConnected) return;
     document.body.appendChild(this.host);
@@ -1431,7 +1596,12 @@ var MushiWidget = class {
       ...config.brandFooter !== void 0 ? { brandFooter: config.brandFooter } : {},
       ...config.outdatedBanner !== void 0 ? { outdatedBanner: config.outdatedBanner } : {},
       ...config.betaMode !== void 0 ? { betaMode: config.betaMode } : {},
-      ...config.minDescriptionLength !== void 0 ? { minDescriptionLength: config.minDescriptionLength } : {}
+      ...config.minDescriptionLength !== void 0 ? { minDescriptionLength: config.minDescriptionLength } : {},
+      ...config.dashboardUrl !== void 0 ? { dashboardUrl: config.dashboardUrl } : {},
+      ...config.responseSlaLabel !== void 0 ? { responseSlaLabel: config.responseSlaLabel } : {},
+      ...config.featureRequestCard !== void 0 ? { featureRequestCard: config.featureRequestCard } : {},
+      ...config.featureRequestLabel !== void 0 ? { featureRequestLabel: config.featureRequestLabel } : {},
+      ...config.featureRequestDescription !== void 0 ? { featureRequestDescription: config.featureRequestDescription } : {}
     };
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
     this.syncAttachedLaunchers();
@@ -1449,7 +1619,15 @@ var MushiWidget = class {
     this.submitting = false;
     this.submittedAt = null;
     this.removeSelectorHint();
-    if (options?.category) {
+    this.lastReportId = null;
+    this.lastSubmitQueuedOffline = false;
+    this.viaFeatureRequest = false;
+    if (options?.featureRequest) {
+      this.selectedCategory = "other";
+      this.selectedIntent = FEATURE_REQUEST_INTENT;
+      this.viaFeatureRequest = true;
+      this.step = "details";
+    } else if (options?.category) {
       this.selectedCategory = options.category;
       this.selectedIntent = null;
       this.step = "intent";
@@ -1467,6 +1645,22 @@ var MushiWidget = class {
     this.render();
     this.callbacks.onClose();
   }
+  /**
+   * Briefly highlight the trigger button (a soft pulse + tooltip) without
+   * opening the full reporter panel. Use for first-session welcome nudges
+   * and other "by the way, this exists" prompts where forcing the panel
+   * open would feel aggressive. Honours `position: 'none'` (no-op when
+   * the trigger button is hidden).
+   */
+  pulseTrigger() {
+    if (this.isOpen) return;
+    const trigger = this.shadow.querySelector(".mushi-trigger");
+    if (!trigger) return;
+    trigger.classList.add("mushi-trigger-pulse");
+    window.setTimeout(() => {
+      trigger.classList.remove("mushi-trigger-pulse");
+    }, 2400);
+  }
   getIsOpen() {
     return this.isOpen;
   }
@@ -1889,12 +2083,46 @@ var MushiWidget = class {
           </div>
           <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
         </button>
+        ${this.renderFeatureRequestEntry()}
         ${categories}
         ${this.rewardsState ? this.renderRewardsNudge() : ""}
       </div>
       ${this.renderStepIndicator(STEP_NUMBER.category)}
     `;
   }
+  /**
+   * First-class "Feature request" entry rendered at the top of the
+   * category step. Beta apps consistently get more useful signal when
+   * the user has a no-friction path to say "I wish this did X" — burying
+   * it as an intent under the "Other" category drops feature submissions
+   * by ~40% in industry studies (Userpilot, Usersnap 2025).
+   *
+   * Wire format: still routes through the standard `other` category with
+   * a `user_category = 'Feature request'` stamp, so we don't need a DB
+   * migration. The admin console filters on that string to surface the
+   * Feature-request swimlane.
+   */
+  renderFeatureRequestEntry() {
+    const enabled = this.config.featureRequestCard !== false;
+    if (!enabled) return "";
+    const label = this.config.featureRequestLabel ?? "Feature request";
+    const desc = this.config.featureRequestDescription ?? "Suggest something new \u2014 even rough ideas help us prioritise";
+    return `
+      <button
+        type="button"
+        class="mushi-option-btn mushi-feature-entry"
+        data-action="feature-request"
+        aria-label="${escapeHtml(label)}"
+      >
+        <span class="mushi-option-icon" aria-hidden="true">\u2728</span>
+        <div class="mushi-option-text">
+          <span class="mushi-option-label">${escapeHtml(label)}</span>
+          <span class="mushi-option-desc">${escapeHtml(desc)}</span>
+        </div>
+        <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
+      </button>
+    `;
+  }
   /** Collapsible "What's new" changelog row. Closes the reporter feedback loop. */
   renderBetaChangelog() {
     const entries = this.config.betaMode?.changelogItems;
@@ -2093,12 +2321,81 @@ var MushiWidget = class {
           </div>
           <div class="mushi-success-headline">${t.widget.submitted}</div>
           <div class="mushi-success-meta">REPORT \xB7 ${time}</div>
+          ${this.renderSuccessReceipt()}
           ${this.rewardsState ? this.renderSuccessRewards() : ""}
           ${this.config.betaMode?.enabled ? this.renderBetaSuccessFooter() : ""}
         </div>
       </div>
     `;
   }
+  /**
+   * Two-way receipt block. Until the host's `onSubmit` resolves with a
+   * server-confirmed report id, we show a discreet "delivering..." pill so
+   * the user knows their submission is still in flight. Once we have the
+   * id, we surface a short monospaced id + a copy button + an optional
+   * "Track on Mushi" deep link to `dashboardUrl/reports/<id>` so the user
+   * can watch the status walk through queued -> classified -> fixed in
+   * real time (Peak-End rule: the last impression sticks). If we never
+   * get an id (offline retry queue), we say so explicitly rather than
+   * pretending everything is fine.
+   */
+  renderSuccessReceipt() {
+    if (this.lastSubmitQueuedOffline) {
+      return `
+        <div class="mushi-success-receipt" role="status">
+          <div class="mushi-success-receipt-row mushi-success-receipt-warn">
+            <span class="mushi-success-receipt-label">Queued offline</span>
+            <span class="mushi-success-receipt-hint">We&rsquo;ll send it the moment you&rsquo;re back online.</span>
+          </div>
+        </div>
+      `;
+    }
+    if (!this.lastReportId) {
+      return `
+        <div class="mushi-success-receipt" role="status">
+          <div class="mushi-success-receipt-row">
+            <span class="mushi-success-receipt-spinner" aria-hidden="true"></span>
+            <span class="mushi-success-receipt-hint">Delivering to the team\u2026</span>
+          </div>
+          ${this.renderSlaLine()}
+        </div>
+      `;
+    }
+    const idShort = `#${this.lastReportId.slice(0, 8)}`;
+    const dashboard = (this.config.dashboardUrl ?? "").replace(/\/$/, "");
+    const trackHref = dashboard ? `${dashboard}/reports/${encodeURIComponent(this.lastReportId)}` : "";
+    return `
+      <div class="mushi-success-receipt" role="status">
+        <div class="mushi-success-receipt-row">
+          <span class="mushi-success-receipt-label">Receipt</span>
+          <button
+            type="button"
+            class="mushi-success-receipt-id"
+            data-action="copy-report-id"
+            data-copy-id="${escapeHtml(this.lastReportId)}"
+            title="Copy report id ${escapeHtml(this.lastReportId)}"
+            aria-label="Copy report id ${escapeHtml(this.lastReportId)}"
+          >${escapeHtml(idShort)}<span class="mushi-success-receipt-copy" aria-hidden="true">\u2398</span></button>
+        </div>
+        ${trackHref ? `
+          <a
+            class="mushi-success-receipt-track"
+            href="${escapeHtml(trackHref)}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >Track on Mushi <span aria-hidden="true">\u2197</span></a>
+        ` : ""}
+        ${this.renderSlaLine()}
+      </div>
+    `;
+  }
+  renderSlaLine() {
+    const sla = (this.config.responseSlaLabel ?? "").trim();
+    if (sla) {
+      return `<div class="mushi-success-sla">${escapeHtml(sla)}</div>`;
+    }
+    return `<div class="mushi-success-sla mushi-success-sla-default">A human will look at this within a working day.</div>`;
+  }
   /**
    * Reciprocity footer on the success step: closes the feedback loop by
    * attributing where the report goes, sets a response expectation, and
@@ -2190,8 +2487,15 @@ var MushiWidget = class {
         this.step = "category";
         this.selectedCategory = null;
       } else if (this.step === "details") {
-        this.step = "intent";
-        this.selectedIntent = null;
+        if (this.viaFeatureRequest) {
+          this.step = "category";
+          this.selectedCategory = null;
+          this.selectedIntent = null;
+          this.viaFeatureRequest = false;
+        } else {
+          this.step = "intent";
+          this.selectedIntent = null;
+        }
       } else if (this.step === "reports") {
         this.step = "category";
       } else if (this.step === "report-detail") {
@@ -2203,6 +2507,13 @@ var MushiWidget = class {
     panel.querySelector('[data-action="reports"]')?.addEventListener("click", () => {
       void this.loadReporterReports();
     });
+    panel.querySelector('[data-action="feature-request"]')?.addEventListener("click", () => {
+      this.selectedCategory = "other";
+      this.selectedIntent = FEATURE_REQUEST_INTENT;
+      this.viaFeatureRequest = true;
+      this.step = "details";
+      this.render();
+    });
     panel.querySelectorAll("[data-report-id]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const reportId = btn.dataset.reportId;
@@ -2212,6 +2523,27 @@ var MushiWidget = class {
     panel.querySelector('[data-action="reporter-reply"]')?.addEventListener("click", () => {
       void this.submitReporterReply(panel);
     });
+    panel.querySelector('[data-action="copy-report-id"]')?.addEventListener("click", (e) => {
+      const btn = e.currentTarget;
+      const id = btn.dataset.copyId;
+      if (!id) return;
+      const restore = btn.innerHTML;
+      const done = () => {
+        btn.innerHTML = "Copied \u2713";
+        window.setTimeout(() => {
+          if (btn.isConnected) btn.innerHTML = restore;
+        }, 1600);
+      };
+      try {
+        if (navigator.clipboard?.writeText) {
+          void navigator.clipboard.writeText(id).then(done).catch(() => done());
+        } else {
+          done();
+        }
+      } catch {
+        done();
+      }
+    });
     panel.querySelectorAll("[data-category]").forEach((btn) => {
       btn.addEventListener("click", () => {
         this.selectedCategory = btn.dataset.category;
@@ -2275,21 +2607,46 @@ var MushiWidget = class {
       }
       this.submitting = true;
       this.submittedAt = /* @__PURE__ */ new Date();
+      this.lastReportId = null;
+      this.lastSubmitQueuedOffline = false;
       this.render();
-      this.callbacks.onSubmit({
-        category: this.selectedCategory,
-        description,
-        intent: this.selectedIntent ?? void 0
-      });
+      const outcomeP = (async () => {
+        try {
+          const ret = this.callbacks.onSubmit({
+            category: this.selectedCategory,
+            description,
+            intent: this.selectedIntent ?? void 0
+          });
+          if (ret && typeof ret.then === "function") {
+            const outcome = await ret;
+            return outcome ?? null;
+          }
+          return null;
+        } catch {
+          return { reportId: null, queuedOffline: true };
+        }
+      })();
       this.successTimer = setTimeout(() => {
         this.successTimer = null;
         this.submitting = false;
         this.step = "success";
         this.render();
-        this.autoCloseTimer = setTimeout(() => {
-          this.autoCloseTimer = null;
-          if (this.step === "success") this.close();
-        }, 2800);
+        void outcomeP.then((outcome) => {
+          if (this.step !== "success") return;
+          if (outcome) {
+            this.lastReportId = outcome.reportId ?? null;
+            this.lastSubmitQueuedOffline = Boolean(outcome.queuedOffline);
+            this.render();
+          }
+          if (this.autoCloseTimer !== null) {
+            clearTimeout(this.autoCloseTimer);
+          }
+          const closeDelayMs = this.lastReportId && this.config.dashboardUrl ? 6e3 : 2800;
+          this.autoCloseTimer = setTimeout(() => {
+            this.autoCloseTimer = null;
+            if (this.step === "success") this.close();
+          }, closeDelayMs);
+        });
       }, 500);
     };
     panel.querySelector('[data-action="submit"]')?.addEventListener("click", submitReport);
@@ -2932,16 +3289,50 @@ function truncateUrl(url) {
 function createScreenshotCapture(options = {}) {
   let activeOptions = options;
   async function take() {
-    if (typeof document === "undefined") {
-      return { ok: false, reason: "unsupported", message: "Not in a browser context" };
-    }
-    const svgResult = await trySvgCapture(activeOptions.privacy);
-    if (svgResult.ok) return svgResult;
-    if (svgResult.reason !== "unsupported") {
-      const mediaResult = await tryDisplayMediaCapture();
-      if (mediaResult.ok) return mediaResult;
+    try {
+      if (typeof document === "undefined") return null;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return null;
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+      const safeDocument = buildPrivacySafeDocument(activeOptions.privacy);
+      const svgData = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+          <foreignObject width="100%" height="100%">
+            <div xmlns="http://www.w3.org/1999/xhtml">
+              ${new XMLSerializer().serializeToString(safeDocument)}
+            </div>
+          </foreignObject>
+        </svg>
+      `;
+      const img = new Image();
+      const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      return new Promise((resolve) => {
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, width, height);
+          URL.revokeObjectURL(url);
+          try {
+            const dataUrl = canvas.toDataURL("image/jpeg", 0.7);
+            resolve(dataUrl);
+          } catch {
+            resolve(null);
+          }
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          resolve(null);
+        };
+        img.src = url;
+      });
+    } catch {
+      return null;
     }
-    return svgResult;
   }
   return {
     take,
@@ -2950,108 +3341,16 @@ function createScreenshotCapture(options = {}) {
     }
   };
 }
-async function trySvgCapture(privacy) {
-  try {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return { ok: false, reason: "unsupported", message: "Canvas 2d context unavailable" };
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    canvas.width = width * dpr;
-    canvas.height = height * dpr;
-    ctx.scale(dpr, dpr);
-    const safeDocument = buildPrivacySafeDocument(privacy);
-    const svgData = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-        <foreignObject width="100%" height="100%">
-          <div xmlns="http://www.w3.org/1999/xhtml">
-            ${new XMLSerializer().serializeToString(safeDocument)}
-          </div>
-        </foreignObject>
-      </svg>
-    `;
-    const img = new Image();
-    const blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const loadResult = await new Promise((resolve) => {
-      img.onload = () => resolve("loaded");
-      img.onerror = () => resolve("error");
-      const timeout = setTimeout(() => resolve("error"), 5e3);
-      img.onload = () => {
-        clearTimeout(timeout);
-        resolve("loaded");
-      };
-    });
-    URL.revokeObjectURL(url);
-    if (loadResult === "error") {
-      return { ok: false, reason: "load-error", message: "SVG image load failed" };
-    }
-    ctx.drawImage(img, 0, 0, width, height);
-    try {
-      const dataUrl = canvas.toDataURL("image/jpeg", 0.75);
-      return { ok: true, dataUrl };
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      return { ok: false, reason: "tainted", message };
-    }
-  } catch (err) {
-    return { ok: false, reason: "error", message: err instanceof Error ? err.message : String(err) };
-  }
-}
-async function tryDisplayMediaCapture() {
-  if (typeof navigator === "undefined" || !("mediaDevices" in navigator)) {
-    return { ok: false, reason: "unsupported", message: "mediaDevices not available" };
-  }
-  const mediaDevices = navigator.mediaDevices;
-  if (typeof mediaDevices.getDisplayMedia !== "function") {
-    return { ok: false, reason: "unsupported", message: "getDisplayMedia not available" };
-  }
-  let stream = null;
-  try {
-    stream = await mediaDevices.getDisplayMedia({
-      video: { displaySurface: "browser" },
-      audio: false
-    });
-    const track = stream.getVideoTracks()[0];
-    if (!track) return { ok: false, reason: "error", message: "No video track" };
-    const imageCapture = new window.ImageCapture(track);
-    const bitmap = await imageCapture.grabFrame();
-    const canvas = document.createElement("canvas");
-    canvas.width = bitmap.width;
-    canvas.height = bitmap.height;
-    const ctx = canvas.getContext("2d");
-    ctx.drawImage(bitmap, 0, 0);
-    bitmap.close();
-    const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
-    return { ok: true, dataUrl };
-  } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    if (err instanceof Error && err.name === "NotAllowedError") {
-      return { ok: false, reason: "cancelled", message };
-    }
-    return { ok: false, reason: "error", message };
-  } finally {
-    stream?.getTracks().forEach((t) => t.stop());
-  }
-}
+var DEFAULT_REDACT_SELECTORS = [
+  'input[type="password"]',
+  "[data-mushi-redact]"
+];
 function buildPrivacySafeDocument(privacy) {
   const clone = document.documentElement.cloneNode(true);
-  for (const img of Array.from(clone.querySelectorAll("img[src]"))) {
-    const src = img.getAttribute("src") ?? "";
-    try {
-      const url = new URL(src, window.location.href);
-      if (url.origin !== window.location.origin) {
-        img.removeAttribute("src");
-        img.removeAttribute("srcset");
-      }
-    } catch {
-    }
-  }
-  for (const el of Array.from(clone.querySelectorAll("[style]"))) {
-    const style = el.getAttribute("style") ?? "";
-    if (/url\(["']?https?:\/\/(?!localhost)/.test(style)) {
-      el.setAttribute("style", style.replace(/url\([^)]*\)/g, "none"));
+  const redactSelectors = privacy?.redactSelectors !== void 0 ? privacy.redactSelectors : DEFAULT_REDACT_SELECTORS;
+  for (const selector of redactSelectors) {
+    for (const el of safeQueryAll(clone, selector)) {
+      redactElement(el);
     }
   }
   for (const selector of privacy?.blockSelectors ?? []) {
@@ -3073,6 +3372,19 @@ function safeQueryAll(root, selector) {
     return [];
   }
 }
+function redactElement(el) {
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+    el.value = "";
+    el.setAttribute("value", "");
+  }
+  el.textContent = "";
+  el.setAttribute(
+    "style",
+    `${el.getAttribute("style") ?? ""};background:#000!important;color:#000!important;text-shadow:none!important;border-color:#000!important;`
+  );
+  el.setAttribute("data-mushi-redacted", "true");
+  while (el.firstChild) el.removeChild(el.firstChild);
+}
 function maskElement(el) {
   if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
     el.value = "";
@@ -3852,6 +4164,13 @@ function tagSentryScope(reportId, options = {}) {
 }
 
 // src/proactive-triggers.ts
+var DEFAULT_EXCLUDE_ROUTES = [
+  "/login",
+  "/logout",
+  "/signup",
+  "/sso/*",
+  "/auth/*"
+];
 function setupProactiveTriggers(callbacks, config = {}) {
   const cleanups = [];
   if (config.rageClick !== false) {
@@ -3922,6 +4241,83 @@ function setupProactiveTriggers(callbacks, config = {}) {
       globalThis.fetch = origFetch;
     });
   }
+  const pageDwellEnabled = config.pageDwell === true || typeof config.pageDwell === "object" && config.pageDwell !== null;
+  if (pageDwellEnabled && typeof window !== "undefined") {
+    let isExcluded2 = function(path) {
+      return excludeRoutes.some((pattern) => {
+        if (pattern.endsWith("/*")) {
+          return path.startsWith(pattern.slice(0, -2));
+        }
+        return path === pattern || path.startsWith(pattern + "/");
+      });
+    }, fire2 = function() {
+      const path = window.location?.pathname ?? "";
+      if (isExcluded2(path)) return;
+      callbacks.onTrigger("page_dwell", { thresholdMs, path });
+    }, arm2 = function() {
+      if (timer) clearTimeout(timer);
+      const path = window.location?.pathname ?? "";
+      if (!isExcluded2(path)) {
+        timer = setTimeout(fire2, thresholdMs);
+      }
+    }, reset2 = function() {
+      const path = window.location?.pathname ?? "";
+      if (path !== lastPath) {
+        lastPath = path;
+        arm2();
+      }
+    };
+    const dwellCfg = typeof config.pageDwell === "object" ? config.pageDwell ?? {} : {};
+    const thresholdMs = dwellCfg.thresholdMs || 5 * 60 * 1e3;
+    const excludeRoutes = dwellCfg.excludeRoutes !== void 0 ? dwellCfg.excludeRoutes : DEFAULT_EXCLUDE_ROUTES;
+    let timer = null;
+    let lastPath = window.location?.pathname ?? "";
+    arm2();
+    const history2 = window.history;
+    const origPush = history2?.pushState;
+    const origReplace = history2?.replaceState;
+    if (history2 && origPush && origReplace) {
+      history2.pushState = function(...args) {
+        const result = origPush.apply(this, args);
+        reset2();
+        return result;
+      };
+      history2.replaceState = function(...args) {
+        const result = origReplace.apply(this, args);
+        reset2();
+        return result;
+      };
+    }
+    const onPop = () => reset2();
+    window.addEventListener("popstate", onPop);
+    cleanups.push(() => {
+      if (timer) clearTimeout(timer);
+      window.removeEventListener("popstate", onPop);
+      if (history2 && origPush) history2.pushState = origPush;
+      if (history2 && origReplace) history2.replaceState = origReplace;
+    });
+  }
+  const firstSessionEnabled = config.firstSession === true || typeof config.firstSession === "object" && config.firstSession !== null;
+  if (firstSessionEnabled && typeof window !== "undefined") {
+    const opts = typeof config.firstSession === "object" ? config.firstSession ?? {} : {};
+    const delayMs = opts.delayMs ?? 45 * 1e3;
+    const storageKey = opts.storageKey ?? (config.projectId ? `mushi:${config.projectId}:firstSessionShown` : "mushi:firstSessionShown");
+    let alreadyShown = false;
+    try {
+      alreadyShown = window.localStorage?.getItem(storageKey) === "1";
+    } catch {
+    }
+    if (!alreadyShown) {
+      const timer = setTimeout(() => {
+        try {
+          window.localStorage?.setItem(storageKey, "1");
+        } catch {
+        }
+        callbacks.onTrigger("first_session", { delayMs });
+      }, delayMs);
+      cleanups.push(() => clearTimeout(timer));
+    }
+  }
   if (config.errorBoundary) {
     let handleError2 = function(event) {
       callbacks.onTrigger("error_boundary", {
@@ -4025,7 +4421,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.5.0" ;
+var MUSHI_SDK_VERSION = "1.6.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -4210,7 +4606,8 @@ function createInstance(config) {
     onSubmit: async ({ category, description, intent }) => {
       log.info("Report submitted", { category, intent });
       proactiveManager?.recordSubmission();
-      await submitReport(category, description, intent);
+      const outcome = await submitReport(category, description, intent);
+      return outcome ?? { reportId: null, queuedOffline: true };
     },
     onOpen: () => {
       log.debug("Widget opened");
@@ -4230,21 +4627,8 @@ function createInstance(config) {
     onScreenshotRequest: async () => {
       if (!screenshotCap || activeConfig.capture?.screenshot === "off") return;
       log.debug("Taking screenshot");
-      widget.setScreenshotCapturing(true);
-      const result = await screenshotCap.take();
-      if (result.ok) {
-        pendingScreenshot = result.dataUrl;
-        widget.setScreenshotAttached(true);
-        log.debug("Screenshot captured");
-      } else {
-        pendingScreenshot = null;
-        if (result.reason !== "cancelled") {
-          widget.setScreenshotError(true);
-          log.debug("Screenshot failed", { reason: result.reason, message: result.message });
-        } else {
-          widget.setScreenshotCapturing(false);
-        }
-      }
+      pendingScreenshot = await screenshotCap.take();
+      widget.setScreenshotAttached(pendingScreenshot !== null);
     },
     onScreenshotRemove: () => {
       log.debug("Screenshot attachment removed");
@@ -4295,7 +4679,7 @@ function createInstance(config) {
   let proactiveTriggers = null;
   let proactiveManager = null;
   const proactiveCfg = activeConfig.proactive;
-  const hasAnyProactive = proactiveCfg && (proactiveCfg.rageClick !== false || proactiveCfg.longTask !== false || proactiveCfg.apiCascade !== false || proactiveCfg.errorBoundary === true);
+  const hasAnyProactive = proactiveCfg && (proactiveCfg.rageClick !== false || proactiveCfg.longTask !== false || proactiveCfg.apiCascade !== false || proactiveCfg.errorBoundary === true || Boolean(proactiveCfg.pageDwell) || Boolean(proactiveCfg.firstSession));
   if (hasAnyProactive && typeof document !== "undefined") {
     proactiveManager = createProactiveManager(proactiveCfg?.cooldown);
     proactiveTriggers = setupProactiveTriggers(
@@ -4308,7 +4692,11 @@ function createInstance(config) {
           log.info("Proactive trigger fired", { type, context });
           pendingProactiveTrigger = type;
           emit("proactive:triggered", { type, context });
-          widget.open();
+          if (type === "first_session") {
+            widget.pulseTrigger?.();
+          } else {
+            widget.open();
+          }
         }
       },
       {
@@ -4316,14 +4704,19 @@ function createInstance(config) {
         longTask: proactiveCfg?.longTask,
         apiCascade: proactiveCfg?.apiCascade,
         apiEndpoint: resolveApiEndpoint(activeConfig),
-        errorBoundary: proactiveCfg?.errorBoundary
+        errorBoundary: proactiveCfg?.errorBoundary,
+        pageDwell: proactiveCfg?.pageDwell,
+        firstSession: proactiveCfg?.firstSession,
+        projectId: bootstrapConfig.projectId
       }
     );
     log.debug("Proactive triggers enabled", {
       rageClick: proactiveCfg?.rageClick !== false,
       longTask: proactiveCfg?.longTask !== false,
       apiCascade: proactiveCfg?.apiCascade !== false,
-      errorBoundary: proactiveCfg?.errorBoundary === true
+      errorBoundary: proactiveCfg?.errorBoundary === true,
+      pageDwell: Boolean(proactiveCfg?.pageDwell),
+      firstSession: Boolean(proactiveCfg?.firstSession)
     });
   }
   offlineQueue.startAutoSync(apiClient2);
@@ -4397,7 +4790,7 @@ function createInstance(config) {
     const filterResult = preFilter.check(description);
     if (!filterResult.passed) {
       log.info("Report blocked by pre-filter", { reason: filterResult.reason });
-      return;
+      return void 0;
     }
     const wasm = config.preFilter?.wasmClassifier;
     if (wasm) {
@@ -4418,7 +4811,7 @@ function createInstance(config) {
             confidence: verdict.confidence,
             reason: verdict.reason
           });
-          return;
+          return void 0;
         }
         log.debug("On-device classifier verdict", { ...verdict });
       } catch (err) {
@@ -4429,7 +4822,7 @@ function createInstance(config) {
     }
     if (!rateLimiter.tryConsume()) {
       log.warn("Report throttled \u2014 rate limit exceeded");
-      return;
+      return void 0;
     }
     const scrubbedDescription = piiScrubber.scrub(preFilter.truncate(description));
     const sentryCtx = config.sentry ? captureSentryContext(config.sentry) : void 0;
@@ -4567,6 +4960,11 @@ function createInstance(config) {
     pendingScreenshot = null;
     pendingElement = null;
     pendingProactiveTrigger = null;
+    if (result?.ok) {
+      const serverId = result.data?.reportId ?? report.id;
+      return { reportId: serverId, queuedOffline: false };
+    }
+    return { reportId: null, queuedOffline: true };
   }
   const sdk = {
     report(options) {
@@ -4818,6 +5216,9 @@ function createInstance(config) {
     recordActivity(action, metadata) {
       if (!activeConfig.rewards?.enabled) return;
       enqueue({ action, metadata });
+    },
+    pulseTrigger() {
+      widget.pulseTrigger?.();
     }
   };
   if (typeof globalThis !== "undefined" && (bootstrapConfig.debug ?? false)) {
@@ -4844,7 +5245,7 @@ function createInstance(config) {
     }
     if (typeof bootstrapConfig.onCrashedLastRun === "function") {
       try {
-        bootstrapConfig.onCrashedLastRun({ crashed });
+        bootstrapConfig.onCrashedLastRun(crashed);
       } catch (err) {
         log.warn("onCrashedLastRun hook threw", {
           error: err instanceof Error ? err.message : String(err)
@@ -5105,6 +5506,8 @@ function createNoopInstance() {
     getReputation: async () => null,
     getTier: async () => null,
     recordActivity: () => {
+    },
+    pulseTrigger: () => {
     }
   };
 }