@mushi-mushi/web 1.10.0 → 1.12.0

package/dist/index.cjs

@@ -2,7 +2,41 @@
 
 var core = require('@mushi-mushi/core');
 
-// src/mushi.ts
+// src/capture/compress-screenshot.ts
+async function compressScreenshotDataUrl(dataUrl, maxBytes = core.MAX_SCREENSHOT_DATA_URL_BYTES) {
+  if (!dataUrl.startsWith("data:image/")) return dataUrl;
+  if (estimateDataUrlBytes(dataUrl) <= maxBytes) return dataUrl;
+  if (typeof document === "undefined") return null;
+  const img = new Image();
+  await new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => reject(new Error("screenshot_decode_failed"));
+    img.src = dataUrl;
+  });
+  const qualities = [0.65, 0.5, 0.35, 0.25];
+  const scales = [1, 0.85, 0.7, 0.55, 0.4];
+  for (const scale of scales) {
+    const canvas = document.createElement("canvas");
+    const w = Math.max(1, Math.round(img.naturalWidth * scale));
+    const h = Math.max(1, Math.round(img.naturalHeight * scale));
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) continue;
+    ctx.drawImage(img, 0, 0, w, h);
+    for (const q of qualities) {
+      const candidate = canvas.toDataURL("image/jpeg", q);
+      if (estimateDataUrlBytes(candidate) <= maxBytes) return candidate;
+    }
+  }
+  return null;
+}
+function estimateDataUrlBytes(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  if (comma < 0) return dataUrl.length;
+  const b64 = dataUrl.slice(comma + 1);
+  return Math.ceil(b64.length * 3 / 4);
+}
 
 // src/i18n/en.ts
 var en = {
@@ -1005,6 +1039,19 @@ function getWidgetStyles(theme) {
       outline: 2px solid ${widgetAccent};
       outline-offset: 2px;
     }
+    .mushi-annotate-host {
+      flex-basis: 100%;
+      margin-top: 8px;
+    }
+    .mushi-annotate-host:empty {
+      margin-top: 0;
+    }
+    .mushi-annotate-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
     @keyframes mushi-spin {
       to { transform: rotate(360deg); }
     }
@@ -1834,7 +1881,11 @@ function reporterStatusLabel(status) {
     case "fixed":
     case "resolved":
     case "completed":
-      return "Fixed";
+      return "Fixed \u2014 confirm?";
+    case "verified":
+      return "Verified";
+    case "reopened":
+      return "Reopened";
     case "dismissed":
       return "Closed";
     default:
@@ -1859,6 +1910,10 @@ function reporterStatusTone(status) {
     case "resolved":
     case "completed":
       return "fixed";
+    case "verified":
+      return "fixed";
+    case "reopened":
+      return "fixing";
     case "dismissed":
       return "closed";
     default:
@@ -1978,6 +2033,7 @@ var MushiWidget = class _MushiWidget {
   nudgeTimer = null;
   sdkFreshness = null;
   reporterReports = [];
+  featureBoard = [];
   reporterComments = [];
   selectedReportId = null;
   reporterLoading = false;
@@ -2697,6 +2753,8 @@ var MushiWidget = class _MushiWidget {
         return this.renderReportDetailStep();
       case "leaderboard":
         return this.renderLeaderboardStep();
+      case "roadmap":
+        return this.renderRoadmapStep();
     }
   }
   renderOutdatedBanner() {
@@ -2784,6 +2842,15 @@ var MushiWidget = class _MushiWidget {
           <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
         </button>
         ${this.renderFeatureRequestEntry()}
+        ${this.callbacks.onFeatureBoardRequest ? `
+        <button type="button" class="mushi-option-btn" data-action="roadmap">
+          <span class="mushi-option-icon" aria-hidden="true">\u{1F5F3}\uFE0F</span>
+          <div class="mushi-option-text">
+            <span class="mushi-option-label">Community ideas</span>
+            <span class="mushi-option-desc">Vote on features and see what shipped</span>
+          </div>
+          <span class="mushi-option-arrow" aria-hidden="true">\u2192</span>
+        </button>` : ""}
         ${categories}
         ${this.rewardsState ? this.renderRewardsNudge() : ""}
       </div>
@@ -2894,6 +2961,38 @@ var MushiWidget = class _MushiWidget {
       </div>
     `;
   }
+  renderRoadmapStep() {
+    const rows = this.featureBoard.map((ticket) => {
+      const id = String(ticket.id ?? "");
+      const subject = escapeHtml(String(ticket.subject ?? "Untitled idea"));
+      const votes = Number(ticket.vote_count ?? 0);
+      const shipped = Boolean(ticket.shipped_at);
+      const voted = Boolean(ticket.my_vote);
+      const status = shipped ? "Shipped" : String(ticket.status_label ?? ticket.status ?? "open");
+      return `
+        <div class="mushi-report-row mushi-roadmap-row">
+          <div class="mushi-report-main">
+            <span class="mushi-report-title">${subject}</span>
+            <span class="mushi-report-meta">
+              <span class="mushi-report-status">${escapeHtml(status)}</span>
+              <span class="mushi-report-when">${votes} vote${votes === 1 ? "" : "s"}</span>
+            </span>
+          </div>
+          ${this.callbacks.onFeatureBoardVote ? `
+            <button type="button" class="mushi-vote-btn" data-vote-id="${escapeHtml(id)}" aria-pressed="${voted}">
+              ${voted ? "Voted" : "Vote"}
+            </button>` : ""}
+        </div>`;
+    }).join("");
+    return `
+      ${this.renderHeader({ title: "Community ideas", showBack: true, eyebrow: "Mushi \xB7 Roadmap" })}
+      <div class="mushi-body">
+        ${this.reporterLoading ? '<p class="mushi-muted">Loading ideas\u2026</p>' : ""}
+        ${this.reporterError ? `<p class="mushi-error-inline">${escapeHtml(this.reporterError)}</p>` : ""}
+        ${rows || (!this.reporterLoading ? '<p class="mushi-muted">No community ideas yet. Be the first to suggest one.</p>' : "")}
+      </div>
+    `;
+  }
   renderLeaderboardStep() {
     const myRank = this.rewardsState && this.leaderboardEntries ? this.leaderboardEntries.findIndex((e) => e.display_name === "You") + 1 : 0;
     const rows = (this.leaderboardEntries ?? []).map((e, i) => `
@@ -2939,6 +3038,12 @@ var MushiWidget = class _MushiWidget {
         <div class="mushi-thread">
           ${this.reporterLoading ? '<p class="mushi-muted">Loading thread\u2026</p>' : comments || '<p class="mushi-muted">No developer replies yet.</p>'}
         </div>
+        ${["fixed", "resolved", "verified"].includes(status) ? `
+          <div class="mushi-verify-actions" role="group" aria-label="Fix verification">
+            <button type="button" class="mushi-intent-btn" data-action="reporter-confirms">Yes, fixed for me</button>
+            <button type="button" class="mushi-intent-btn" data-action="reporter-not-fixed">Not fixed yet</button>
+          </div>
+        ` : ""}
         <textarea class="mushi-textarea" data-role="reporter-reply" rows="3" placeholder="Reply to the developer\u2026"></textarea>
         <button type="button" class="mushi-submit" data-action="reporter-reply">
           <span>Reply</span><span class="mushi-submit-arrow" aria-hidden="true">\u2192</span>
@@ -3018,6 +3123,7 @@ var MushiWidget = class _MushiWidget {
             ${escapeHtml(screenshotLabel)}
           </button>
           ${this.screenshotAttached && this.allowScreenshotRemove ? '<button type="button" class="mushi-attach-btn danger" data-action="remove-screenshot" aria-label="Remove screenshot">\u2715 Remove</button>' : ""}
+          ${this.screenshotAttached ? '<button type="button" class="mushi-attach-btn" data-action="annotate-screenshot" aria-label="Mark up screenshot">\u270F Mark up</button><div class="mushi-annotate-host" data-role="annotate-host"></div>' : ""}
           <button type="button" class="${elementClass}"
             data-action="element"
             ${this.elementCapturing ? "disabled" : ""}
@@ -3243,12 +3349,23 @@ var MushiWidget = class _MushiWidget {
         this.selectedReportId = null;
       } else if (this.step === "leaderboard") {
         this.step = "reports";
+      } else if (this.step === "roadmap") {
+        this.step = "category";
       }
       this.render();
     });
     panel.querySelector('[data-action="reports"]')?.addEventListener("click", () => {
       void this.loadReporterReports();
     });
+    panel.querySelector('[data-action="roadmap"]')?.addEventListener("click", () => {
+      void this.loadFeatureBoard();
+    });
+    panel.querySelectorAll("[data-vote-id]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const requestId = btn.dataset.voteId;
+        if (requestId) void this.voteFeatureBoard(requestId);
+      });
+    });
     panel.querySelector('[data-action="feature-request"]')?.addEventListener("click", () => {
       this.selectedCategory = "other";
       this.selectedIntent = FEATURE_REQUEST_INTENT;
@@ -3270,6 +3387,12 @@ var MushiWidget = class _MushiWidget {
     panel.querySelector('[data-action="reporter-reply"]')?.addEventListener("click", () => {
       void this.submitReporterReply(panel);
     });
+    panel.querySelector('[data-action="reporter-confirms"]')?.addEventListener("click", () => {
+      void this.submitReporterFeedback("confirms");
+    });
+    panel.querySelector('[data-action="reporter-not-fixed"]')?.addEventListener("click", () => {
+      void this.submitReporterReopen();
+    });
     panel.querySelector('[data-action="copy-report-id"]')?.addEventListener("click", (e) => {
       const btn = e.currentTarget;
       const id = btn.dataset.copyId;
@@ -3335,6 +3458,12 @@ var MushiWidget = class _MushiWidget {
     panel.querySelector('[data-action="remove-screenshot"]')?.addEventListener("click", () => {
       this.callbacks.onScreenshotRemove?.();
     });
+    panel.querySelector('[data-action="annotate-screenshot"]')?.addEventListener("click", () => {
+      const host = panel.querySelector('[data-role="annotate-host"]');
+      if (host && this.callbacks.onScreenshotAnnotateRequest) {
+        void this.callbacks.onScreenshotAnnotateRequest(host);
+      }
+    });
     panel.querySelector('[data-action="element"]')?.addEventListener("click", () => {
       this.callbacks.onElementSelectorRequest?.();
     });
@@ -3422,6 +3551,53 @@ var MushiWidget = class _MushiWidget {
   unreadCount() {
     return this.reporterReports.reduce((sum, report) => sum + (report.unread_count ?? 0), 0);
   }
+  async loadFeatureBoard() {
+    this.step = "roadmap";
+    this.reporterLoading = true;
+    this.reporterError = null;
+    this.render();
+    try {
+      this.featureBoard = await this.callbacks.onFeatureBoardRequest?.() ?? [];
+    } catch (err) {
+      this.reporterError = err instanceof Error ? err.message : "Could not load community ideas.";
+    } finally {
+      this.reporterLoading = false;
+      this.render();
+    }
+  }
+  async voteFeatureBoard(requestId) {
+    if (!this.callbacks.onFeatureBoardVote || this.reporterLoading) return;
+    this.reporterLoading = true;
+    this.render();
+    try {
+      await this.callbacks.onFeatureBoardVote(requestId);
+      this.featureBoard = await this.callbacks.onFeatureBoardRequest?.() ?? this.featureBoard;
+    } catch (err) {
+      this.reporterError = err instanceof Error ? err.message : "Could not update vote.";
+    } finally {
+      this.reporterLoading = false;
+      this.render();
+    }
+  }
+  async submitReporterReopen() {
+    const reportId = this.selectedReportId;
+    if (!reportId || this.reporterLoading) return;
+    this.reporterLoading = true;
+    this.render();
+    try {
+      if (this.callbacks.onReporterReopen) {
+        await this.callbacks.onReporterReopen(reportId, "Not fixed for me");
+      } else {
+        await this.callbacks.onReporterFeedback?.(reportId, "not_fixed", "Not fixed for me");
+      }
+      await this.loadReporterReports();
+    } catch (err) {
+      this.reporterError = err instanceof Error ? err.message : "Could not reopen report.";
+    } finally {
+      this.reporterLoading = false;
+      this.render();
+    }
+  }
   async loadReporterReports() {
     this.step = "reports";
     this.reporterLoading = true;
@@ -3451,6 +3627,21 @@ var MushiWidget = class _MushiWidget {
       this.render();
     }
   }
+  async submitReporterFeedback(signal) {
+    const reportId = this.selectedReportId;
+    if (!reportId || this.reporterLoading) return;
+    this.reporterLoading = true;
+    this.render();
+    try {
+      await this.callbacks.onReporterFeedback?.(reportId, signal);
+      await this.loadReporterReports();
+      if (reportId) await this.loadReporterComments(reportId);
+    } catch (err) {
+      this.reporterError = err instanceof Error ? err.message : "Could not send feedback.";
+      this.reporterLoading = false;
+      this.render();
+    }
+  }
   async submitReporterReply(panel) {
     const reportId = this.selectedReportId;
     const textarea = panel.querySelector('[data-role="reporter-reply"]');
@@ -4821,6 +5012,256 @@ function createDiscoveryCapture(opts) {
   };
 }
 
+// src/capture/replay.ts
+var DEFAULT_MAX_MS = 3e4;
+var MAX_EVENTS = 400;
+var RRWEB_META = 4;
+var RRWEB_FULL_SNAPSHOT = 2;
+function trimReplayBuffer(events, maxMs, maxEvents) {
+  const ts = (e) => e.timestamp;
+  const isFullSnapshot = (e) => e.type === RRWEB_FULL_SNAPSHOT;
+  const isMeta = (e) => e.type === RRWEB_META;
+  const cutoff = Date.now() - maxMs;
+  let baseIndex = 0;
+  for (let i = 0; i < events.length; i++) {
+    const t = ts(events[i]);
+    if (typeof t === "number" && t >= cutoff) break;
+    if (isFullSnapshot(events[i])) baseIndex = isMeta(events[i - 1]) ? i - 1 : i;
+  }
+  if (events.length - baseIndex > maxEvents) {
+    for (let i = baseIndex + 1; i < events.length; i++) {
+      if (isFullSnapshot(events[i]) && events.length - i <= maxEvents) {
+        baseIndex = isMeta(events[i - 1]) ? i - 1 : i;
+        break;
+      }
+    }
+  }
+  if (baseIndex > 0) events.splice(0, baseIndex);
+}
+function createLiteReplay(maxMs) {
+  const events = [];
+  let active = false;
+  const onClick = (ev) => {
+    if (!active) return;
+    const target = ev.target instanceof Element ? ev.target : null;
+    const tag = target?.tagName?.toLowerCase() ?? "unknown";
+    const testId = target?.closest("[data-testid]")?.getAttribute("data-testid") ?? void 0;
+    events.push({ type: "lite_click", timestamp: Date.now(), data: { tag, testId } });
+    if (events.length > MAX_EVENTS) events.shift();
+  };
+  const stop = () => {
+    active = false;
+    document.removeEventListener("click", onClick, true);
+  };
+  return {
+    start() {
+      if (active) return;
+      active = true;
+      document.addEventListener("click", onClick, true);
+    },
+    stop,
+    flush() {
+      const cutoff = Date.now() - maxMs;
+      return events.filter((e) => e.timestamp >= cutoff);
+    },
+    destroy() {
+      stop();
+      events.length = 0;
+    }
+  };
+}
+var rrwebModule = null;
+async function loadRrweb() {
+  if (rrwebModule) return rrwebModule;
+  try {
+    const specifier = "rrweb";
+    rrwebModule = await import(
+      /* @vite-ignore */
+      specifier
+    );
+    return rrwebModule;
+  } catch {
+    return null;
+  }
+}
+async function createReplayCapture(opts) {
+  const maxMs = opts.maxDurationMs ?? DEFAULT_MAX_MS;
+  const rrweb = await loadRrweb();
+  if (!rrweb?.record) {
+    return createLiteReplay(maxMs);
+  }
+  const record = rrweb.record;
+  const events = [];
+  let stopFn = null;
+  let recording = false;
+  const maskSelectors = ['input[type="password"]', ...opts.redactSelectors ?? []];
+  const stop = () => {
+    stopFn?.();
+    stopFn = null;
+    recording = false;
+  };
+  return {
+    start() {
+      if (recording) return;
+      recording = true;
+      stopFn = record({
+        emit(event) {
+          events.push(event);
+          trimReplayBuffer(events, maxMs, MAX_EVENTS);
+        },
+        maskAllInputs: true,
+        // Mask rendered DOM text too — without this, rrweb records every
+        // visible label (emails, names) as plaintext. Hosts that need richer
+        // capture can opt out via their own rrweb integration.
+        maskAllText: true,
+        maskTextSelector: maskSelectors.join(","),
+        // Re-emit a full snapshot roughly once per retained window so trimming
+        // never leaves incrementals without a base snapshot.
+        checkoutEveryNms: maxMs,
+        sampling: { mousemove: false, mouseInteraction: true, scroll: 150, media: 800 }
+      }) ?? null;
+    },
+    stop,
+    flush() {
+      trimReplayBuffer(events, maxMs, MAX_EVENTS);
+      return [...events];
+    },
+    destroy() {
+      stop();
+      events.length = 0;
+    }
+  };
+}
+
+// src/capture/screenshot-annotation.ts
+function createScreenshotAnnotation(imageDataUrl, container) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const wrap = document.createElement("div");
+      wrap.style.position = "relative";
+      wrap.style.display = "inline-block";
+      wrap.style.maxWidth = "100%";
+      const base = document.createElement("canvas");
+      const overlay = document.createElement("canvas");
+      const scale = Math.min(1, 720 / img.width);
+      const w = Math.round(img.width * scale);
+      const h = Math.round(img.height * scale);
+      for (const c of [base, overlay]) {
+        c.width = w;
+        c.height = h;
+        c.style.width = "100%";
+        c.style.height = "auto";
+        c.style.display = "block";
+      }
+      overlay.style.position = "absolute";
+      overlay.style.left = "0";
+      overlay.style.top = "0";
+      overlay.style.cursor = "crosshair";
+      const bctx = base.getContext("2d");
+      const octx = overlay.getContext("2d");
+      if (!bctx || !octx) {
+        reject(new Error("Canvas not supported"));
+        return;
+      }
+      bctx.drawImage(img, 0, 0, w, h);
+      wrap.appendChild(base);
+      wrap.appendChild(overlay);
+      container.appendChild(wrap);
+      let tool = "highlight";
+      let drawing = false;
+      let start = null;
+      const strokes = [];
+      const toLocal = (ev) => {
+        const rect = overlay.getBoundingClientRect();
+        const touch = "touches" in ev ? ev.touches[0] ?? ev.changedTouches[0] : null;
+        const clientX = touch ? touch.clientX : ev.clientX;
+        const clientY = touch ? touch.clientY : ev.clientY;
+        return {
+          x: (clientX - rect.left) / rect.width * w,
+          y: (clientY - rect.top) / rect.height * h
+        };
+      };
+      const redraw = () => {
+        octx.clearRect(0, 0, w, h);
+        for (const s of strokes) {
+          if (s.tool === "highlight" && s.points.length >= 2) {
+            const [a, b] = s.points;
+            octx.fillStyle = "rgba(255, 230, 0, 0.35)";
+            octx.fillRect(
+              Math.min(a.x, b.x),
+              Math.min(a.y, b.y),
+              Math.abs(b.x - a.x),
+              Math.abs(b.y - a.y)
+            );
+          } else if (s.tool === "arrow" && s.points.length >= 2) {
+            const [a, b] = s.points;
+            octx.strokeStyle = "#ef4444";
+            octx.lineWidth = 3;
+            octx.beginPath();
+            octx.moveTo(a.x, a.y);
+            octx.lineTo(b.x, b.y);
+            octx.stroke();
+          }
+        }
+      };
+      const onDown = (ev) => {
+        drawing = true;
+        start = toLocal(ev);
+      };
+      const onUp = (ev) => {
+        if (!drawing || !start) return;
+        drawing = false;
+        const end = toLocal(ev);
+        if (tool === "blur") {
+          const x = Math.min(start.x, end.x);
+          const y = Math.min(start.y, end.y);
+          const bw = Math.abs(end.x - start.x);
+          const bh = Math.abs(end.y - start.y);
+          if (bw >= 1 && bh >= 1) {
+            bctx.filter = "blur(8px)";
+            bctx.drawImage(base, x, y, bw, bh, x, y, bw, bh);
+            bctx.filter = "none";
+          }
+        } else {
+          strokes.push({ tool, points: [start, end] });
+        }
+        start = null;
+        redraw();
+      };
+      overlay.addEventListener("mousedown", onDown);
+      overlay.addEventListener("mouseup", onUp);
+      overlay.addEventListener("touchstart", onDown, { passive: true });
+      overlay.addEventListener("touchend", onUp);
+      resolve({
+        canvas: base,
+        setTool(t) {
+          tool = t;
+        },
+        getDataUrl() {
+          const out = document.createElement("canvas");
+          out.width = w;
+          out.height = h;
+          const ctx = out.getContext("2d");
+          if (!ctx) return imageDataUrl;
+          ctx.drawImage(base, 0, 0);
+          ctx.drawImage(overlay, 0, 0);
+          return out.toDataURL("image/jpeg", 0.85);
+        },
+        destroy() {
+          overlay.removeEventListener("mousedown", onDown);
+          overlay.removeEventListener("mouseup", onUp);
+          overlay.removeEventListener("touchstart", onDown);
+          overlay.removeEventListener("touchend", onUp);
+          wrap.remove();
+        }
+      });
+    };
+    img.onerror = () => reject(new Error("Failed to load screenshot"));
+    img.src = imageDataUrl;
+  });
+}
+
 // src/sentry.ts
 function getSentryGlobal() {
   try {
@@ -5304,7 +5745,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.10.0" ;
+var MUSHI_SDK_VERSION = "1.12.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -5383,6 +5824,8 @@ function createInstance(config) {
   let elementSelector = null;
   let discoveryCap = null;
   const timelineCap = createTimelineCapture();
+  let replayCap = null;
+  let replayGeneration = 0;
   let widget;
   function syncCaptureModules() {
     if (activeConfig.capture?.console !== false) {
@@ -5466,6 +5909,25 @@ function createInstance(config) {
       discoveryCap?.destroy();
       discoveryCap = null;
     }
+    const replayMode = activeConfig.capture?.replay ?? "off";
+    if (replayMode === "rrweb" || replayMode === "lite") {
+      const generation = ++replayGeneration;
+      void createReplayCapture({
+        redactSelectors: activeConfig.privacy?.redactSelectors
+      }).then((cap) => {
+        if (generation !== replayGeneration) {
+          cap.destroy();
+          return;
+        }
+        replayCap?.destroy();
+        replayCap = cap;
+        replayCap.start();
+      });
+    } else {
+      replayGeneration++;
+      replayCap?.destroy();
+      replayCap = null;
+    }
   }
   const listeners = /* @__PURE__ */ new Map();
   function emit(type, data) {
@@ -5527,6 +5989,7 @@ function createInstance(config) {
     onOpen: () => {
       log.debug("Widget opened");
       void autoCaptureScreenshot("open");
+      replayCap?.start();
       emit("widget:opened");
     },
     onClose: () => {
@@ -5551,6 +6014,55 @@ function createInstance(config) {
       pendingScreenshot = null;
       widget.setScreenshotAttached(false);
     },
+    onScreenshotAnnotateRequest: async (container) => {
+      if (!pendingScreenshot) return;
+      if (container.childElementCount > 0) return;
+      let session;
+      try {
+        session = await createScreenshotAnnotation(pendingScreenshot, container);
+      } catch (err) {
+        log.warn("Screenshot annotation failed", {
+          error: err instanceof Error ? err.message : String(err)
+        });
+        return;
+      }
+      const toolbar = document.createElement("div");
+      toolbar.className = "mushi-annotate-toolbar";
+      const finish = (commit) => {
+        {
+          pendingScreenshot = session.getDataUrl();
+          widget.setScreenshotAttached(true);
+        }
+        session.destroy();
+        toolbar.remove();
+      };
+      const tools = [
+        { id: "highlight", label: "\u270F\uFE0F Highlight" },
+        { id: "blur", label: "\u{1F512} Blur" },
+        { id: "arrow", label: "\u2197\uFE0F Arrow" }
+      ];
+      for (const toolDef of tools) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "mushi-attach-btn";
+        btn.dataset.tool = toolDef.id;
+        btn.textContent = toolDef.label;
+        btn.addEventListener("click", () => {
+          session.setTool(toolDef.id);
+          toolbar.querySelectorAll("button[data-tool]").forEach((b) => b.classList.remove("active"));
+          btn.classList.add("active");
+        });
+        toolbar.appendChild(btn);
+      }
+      toolbar.querySelector('button[data-tool="highlight"]')?.classList.add("active");
+      const doneBtn = document.createElement("button");
+      doneBtn.type = "button";
+      doneBtn.className = "mushi-attach-btn";
+      doneBtn.textContent = "\u2713 Done";
+      doneBtn.addEventListener("click", () => finish());
+      toolbar.appendChild(doneBtn);
+      container.insertBefore(toolbar, container.firstChild);
+    },
     onElementSelectorRequest: async () => {
       if (!elementSelector || activeConfig.capture?.elementSelector === false) return;
       log.debug("Element selector activated");
@@ -5583,6 +6095,26 @@ function createInstance(config) {
       const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), body);
       if (!result.ok) throw new Error(result.error?.message ?? "Could not send reply");
     },
+    async onReporterFeedback(reportId, signal, note) {
+      const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), note ?? "", signal);
+      if (!result.ok) throw new Error(result.error?.message ?? "Could not send feedback");
+      return result.data?.feedback ?? null;
+    },
+    async onReporterReopen(reportId, note) {
+      const result = await apiClient2.reopenReporterReport(reportId, core.getReporterToken(), note);
+      if (!result.ok) throw new Error(result.error?.message ?? "Could not reopen report");
+      return result.data?.outcome ?? null;
+    },
+    async onFeatureBoardRequest() {
+      const result = await apiClient2.listReporterFeatureBoard(core.getReporterToken());
+      if (!result.ok) throw new Error(result.error?.message ?? "Could not load community ideas");
+      return result.data?.tickets ?? [];
+    },
+    async onFeatureBoardVote(requestId) {
+      const result = await apiClient2.voteReporterFeatureBoard(requestId, core.getReporterToken());
+      if (!result.ok) throw new Error(result.error?.message ?? "Could not vote");
+      return result.data ?? { voted: true, action: "added" };
+    },
     onLeaderboardOpen() {
       widget.setLeaderboard(null, true);
       void fetchLeaderboard(10).then((entries) => {
@@ -5760,6 +6292,10 @@ function createInstance(config) {
       ...sentryCtx.breadcrumbs ? { breadcrumbs: scrubBreadcrumbsForWire(sentryCtx.breadcrumbs) } : {},
       ...sentryCtx.tags ? { tags: scrubTagsForWire(sentryCtx.tags) } : {}
     } : void 0;
+    const screenshotForWire = pendingScreenshot ? await compressScreenshotDataUrl(pendingScreenshot).catch(() => null) : null;
+    if (pendingScreenshot && !screenshotForWire) {
+      log.warn("Screenshot dropped \u2014 could not compress under wire budget");
+    }
     const report = {
       id: core.newUuid(),
       projectId: config.projectId,
@@ -5771,8 +6307,9 @@ function createInstance(config) {
       networkLogs,
       performanceMetrics: activeConfig.capture?.performance === false ? void 0 : perfCap?.getMetrics(),
       timeline: timelineCap.getEntries({ consoleLogs, networkLogs }),
-      screenshotDataUrl: pendingScreenshot ?? void 0,
+      screenshotDataUrl: screenshotForWire ?? void 0,
       selectedElement: pendingElement ?? void 0,
+      ...replayCap ? { replayEvents: replayCap.flush() } : {},
       metadata: {
         ...customMetadata,
         ...userInfo ? { user: userInfo } : {},
@@ -5846,7 +6383,23 @@ function createInstance(config) {
       emit("report:queued", { reportId: finalReport.id });
       return { reportId: null, queuedOffline: true };
     }
-    const result = await apiClient2.submitReport(finalReport);
+    let result = await apiClient2.submitReport(finalReport);
+    if (!result.ok && result.error?.code === "PAYLOAD_TOO_LARGE") {
+      if (Array.isArray(finalReport.replayEvents) && finalReport.replayEvents.length > 0) {
+        log.warn("Report too large \u2014 dropping replay buffer and retrying", {
+          reportId: finalReport.id
+        });
+        finalReport = { ...finalReport, replayEvents: void 0 };
+        result = await apiClient2.submitReport(finalReport);
+      }
+      if (!result.ok && result.error?.code === "PAYLOAD_TOO_LARGE" && finalReport.screenshotDataUrl) {
+        log.warn("Report still too large \u2014 dropping screenshot and retrying", {
+          reportId: finalReport.id
+        });
+        finalReport = { ...finalReport, screenshotDataUrl: void 0 };
+        result = await apiClient2.submitReport(finalReport);
+      }
+    }
     if (result.ok) {
       log.info("Report sent", { reportId: result.data?.reportId });
       emit("report:sent", { reportId: result.data?.reportId });
@@ -5869,6 +6422,17 @@ function createInstance(config) {
         }
       } catch {
       }
+    } else if (result.error?.code === "PAYLOAD_TOO_LARGE" || result.error?.code === "SERIALIZE_FAILED") {
+      log.warn("Report exceeds size limit after degradation \u2014 dropping", {
+        reportId: finalReport.id,
+        error: result.error
+      });
+      emit("report:failed", { reportId: finalReport.id, error: result.error });
+      breadcrumbs.add({
+        category: "lifecycle",
+        level: "error",
+        message: `Mushi report dropped \u2014 payload too large (${finalReport.id})`
+      });
     } else {
       log.warn("Report failed, queuing for retry", { reportId: finalReport.id, error: result.error });
       await offlineQueue.enqueue(finalReport);
@@ -5954,6 +6518,8 @@ function createInstance(config) {
       timelineCap.destroy();
       discoveryCap?.destroy();
       discoveryCap = null;
+      replayCap?.destroy();
+      replayCap = null;
       offlineQueue.stopAutoSync();
       detachAutoBreadcrumbs?.();
       detachAutoBreadcrumbs = null;
@@ -6159,6 +6725,19 @@ function createInstance(config) {
       if (!result.ok) return null;
       return result.data?.comment ?? null;
     },
+    async submitFeedbackSignal(reportId, signal, note) {
+      const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), note ?? "", signal);
+      if (!result.ok) return null;
+      return result.data?.feedback ?? null;
+    },
+    async reopenReport(reportId, note) {
+      const result = await apiClient2.reopenReporterReport(reportId, core.getReporterToken(), note);
+      if (!result.ok) return null;
+      return result.data?.outcome ?? null;
+    },
+    openMyReports() {
+      widget.recorderOpenMyReports();
+    },
     async getHallOfFame(limit = 20) {
       const result = await apiClient2.getHallOfFame(limit);
       if (!result.ok) return [];
@@ -6485,6 +7064,10 @@ function createNoopInstance() {
     listMyReports: async () => [],
     listMyComments: async () => [],
     replyToReport: async () => null,
+    submitFeedbackSignal: async () => null,
+    reopenReport: async () => null,
+    openMyReports: () => {
+    },
     getHallOfFame: async () => []
   };
 }