@mushi-mushi/web 0.1.0 → 0.2.0

package/README.md

@@ -32,6 +32,13 @@ Auto-detects conditions that should prompt the user:
 - **Rage click** — 3+ clicks in < 500ms on same element
 - **Long task** — > 5s main thread block (PerformanceObserver)
 - **API cascade** — 3+ failed requests in 10s window
+- **Error boundary** — global `window.error` and `unhandledrejection` events (opt-in via `errorBoundary: true`)
+
+Each trigger respects its config flag — set `rageClick: false` to disable rage click detection, etc.
+
+## Known Limitations
+
+**Screenshot capture** uses canvas/SVG `foreignObject` serialization. This does not work with cross-origin iframes, tainted `<canvas>` elements, or pages with strict CSP. Best-effort on single-origin SPAs.
 
 ## Bundle Size
 
@@ -52,6 +59,28 @@ Mushi.init({
 
 ### With Proactive Triggers
 
+Proactive triggers are wired into `Mushi.init()` automatically when `config.proactive` is provided. The SDK opens the widget when a trigger fires, gated by fatigue prevention:
+
+```typescript
+Mushi.init({
+  projectId: 'proj_xxx',
+  apiKey: 'your-api-key',
+  proactive: {
+    rageClick: true,
+    longTask: true,
+    apiCascade: true,
+    errorBoundary: true,
+    cooldown: {
+      maxProactivePerSession: 2,
+      dismissCooldownHours: 24,
+      suppressAfterDismissals: 3,
+    },
+  },
+});
+```
+
+For manual composition (advanced), the lower-level APIs are also exported:
+
 ```typescript
 import { createProactiveManager, setupProactiveTriggers } from '@mushi-mushi/web';
 
@@ -60,7 +89,7 @@ const manager = createProactiveManager({ maxProactivePerSession: 2 });
 setupProactiveTriggers({
   onTrigger: (type, context) => {
     if (manager.shouldShow(type)) {
-      // Open widget with pre-filled context
+      // Custom handling
     }
   },
 });

package/dist/index.cjs

@@ -551,15 +551,21 @@ var MushiWidget = class {
     document.body.appendChild(this.host);
     this.render();
   }
-  open() {
+  open(options) {
     if (this.isOpen) return;
     this.isOpen = true;
-    this.step = "category";
-    this.selectedCategory = null;
-    this.selectedIntent = null;
     this.screenshotAttached = false;
     this.elementSelected = false;
     this.submitting = false;
+    if (options?.category) {
+      this.selectedCategory = options.category;
+      this.selectedIntent = null;
+      this.step = "intent";
+    } else {
+      this.selectedCategory = null;
+      this.selectedIntent = null;
+      this.step = "category";
+    }
     this.render();
     this.callbacks.onOpen();
   }
@@ -775,9 +781,10 @@ var MushiWidget = class {
       const textarea = panel.querySelector(".mushi-textarea");
       const description = textarea?.value?.trim() ?? "";
       const errorEl = panel.querySelector(".mushi-error");
-      if (description.length < 5) {
+      const MIN_DESCRIPTION_LENGTH = 20;
+      if (description.length < MIN_DESCRIPTION_LENGTH) {
         if (errorEl) {
-          errorEl.textContent = t.widget.error;
+          errorEl.textContent = `${t.widget.error} (${description.length}/${MIN_DESCRIPTION_LENGTH})`;
           errorEl.style.display = "block";
         }
         return;
@@ -1199,6 +1206,167 @@ function captureSentryContext(_config) {
   return context;
 }
 
+// src/proactive-triggers.ts
+function setupProactiveTriggers(callbacks, config = {}) {
+  const cleanups = [];
+  if (config.rageClick !== false) {
+    let handleClick2 = function(e) {
+      const now = Date.now();
+      if (e.target === lastClickTarget) {
+        clickTimes.push(now);
+        clickTimes = clickTimes.filter((t) => now - t < 500);
+        if (clickTimes.length >= 3) {
+          const el = e.target;
+          callbacks.onTrigger("rage_click", {
+            element: el.tagName,
+            id: el.id,
+            text: el.textContent?.slice(0, 50)
+          });
+          clickTimes = [];
+        }
+      } else {
+        lastClickTarget = e.target;
+        clickTimes = [now];
+      }
+    };
+    let clickTimes = [];
+    let lastClickTarget = null;
+    document.addEventListener("click", handleClick2, true);
+    cleanups.push(() => document.removeEventListener("click", handleClick2, true));
+  }
+  if (config.longTask !== false && typeof PerformanceObserver !== "undefined") {
+    try {
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.duration > 5e3) {
+            callbacks.onTrigger("long_task", {
+              duration: Math.round(entry.duration),
+              startTime: Math.round(entry.startTime)
+            });
+          }
+        }
+      });
+      observer.observe({ entryTypes: ["longtask"] });
+      cleanups.push(() => observer.disconnect());
+    } catch {
+    }
+  }
+  if (config.apiCascade !== false) {
+    const failedRequests = [];
+    const origFetch = globalThis.fetch;
+    globalThis.fetch = async function(...args) {
+      try {
+        const res = await origFetch.apply(this, args);
+        if (!res.ok && res.status >= 400) {
+          const now = Date.now();
+          failedRequests.push(now);
+          const recentFailures = failedRequests.filter((t) => now - t < 1e4);
+          if (recentFailures.length >= 3) {
+            callbacks.onTrigger("api_cascade", {
+              failureCount: recentFailures.length,
+              windowMs: 1e4
+            });
+            failedRequests.length = 0;
+          }
+        }
+        return res;
+      } catch (err) {
+        const now = Date.now();
+        failedRequests.push(now);
+        const recentFailures = failedRequests.filter((t) => now - t < 1e4);
+        if (recentFailures.length >= 3) {
+          callbacks.onTrigger("api_cascade", {
+            failureCount: recentFailures.length,
+            windowMs: 1e4
+          });
+          failedRequests.length = 0;
+        }
+        throw err;
+      }
+    };
+    cleanups.push(() => {
+      globalThis.fetch = origFetch;
+    });
+  }
+  if (config.errorBoundary) {
+    let handleError2 = function(event) {
+      callbacks.onTrigger("error_boundary", {
+        message: event.message,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno
+      });
+    }, handleUnhandledRejection2 = function(event) {
+      callbacks.onTrigger("error_boundary", {
+        message: event.reason instanceof Error ? event.reason.message : String(event.reason),
+        type: "unhandled_rejection"
+      });
+    };
+    window.addEventListener("error", handleError2);
+    window.addEventListener("unhandledrejection", handleUnhandledRejection2);
+    cleanups.push(() => {
+      window.removeEventListener("error", handleError2);
+      window.removeEventListener("unhandledrejection", handleUnhandledRejection2);
+    });
+  }
+  return {
+    destroy() {
+      cleanups.forEach((fn) => fn());
+    }
+  };
+}
+
+// src/proactive-manager.ts
+var STORAGE_KEY_LAST_DISMISS = "mushi:lastDismiss";
+var STORAGE_KEY_CONSEC_DISMISS = "mushi:consecDismiss";
+function readStorage(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function createProactiveManager(config = {}) {
+  const maxPerSession = config.maxProactivePerSession ?? 2;
+  const cooldownHours = config.dismissCooldownHours ?? 24;
+  const suppressThreshold = config.suppressAfterDismissals ?? 3;
+  let sessionPromptCount = 0;
+  const sessionTriggerTypes = /* @__PURE__ */ new Set();
+  function shouldShow(triggerType) {
+    const consecDismissals = parseInt(readStorage(STORAGE_KEY_CONSEC_DISMISS) ?? "0", 10);
+    if (consecDismissals >= suppressThreshold) return false;
+    const lastDismiss = readStorage(STORAGE_KEY_LAST_DISMISS);
+    if (lastDismiss) {
+      const elapsed = Date.now() - parseInt(lastDismiss, 10);
+      if (elapsed < cooldownHours * 60 * 60 * 1e3) return false;
+    }
+    if (sessionPromptCount >= maxPerSession) return false;
+    if (sessionTriggerTypes.has(triggerType)) return false;
+    sessionTriggerTypes.add(triggerType);
+    sessionPromptCount++;
+    return true;
+  }
+  function recordDismissal() {
+    writeStorage(STORAGE_KEY_LAST_DISMISS, String(Date.now()));
+    const current = parseInt(readStorage(STORAGE_KEY_CONSEC_DISMISS) ?? "0", 10);
+    writeStorage(STORAGE_KEY_CONSEC_DISMISS, String(current + 1));
+  }
+  function recordSubmission() {
+    writeStorage(STORAGE_KEY_CONSEC_DISMISS, "0");
+  }
+  function reset() {
+    sessionPromptCount = 0;
+    sessionTriggerTypes.clear();
+  }
+  return { shouldShow, recordDismissal, recordSubmission, reset };
+}
+
 // src/mushi.ts
 var instance = null;
 var Mushi = class {
@@ -1234,7 +1402,7 @@ function createInstance(config) {
   const apiClient = core.createApiClient({
     projectId: config.projectId,
     apiKey: config.apiKey,
-    apiEndpoint: config.apiEndpoint ?? "https://api.mushimushi.dev"
+    ...config.apiEndpoint ? { apiEndpoint: config.apiEndpoint } : {}
   });
   const preFilter = core.createPreFilter(config.preFilter);
   const offlineQueue = core.createOfflineQueue(config.offline);
@@ -1253,9 +1421,11 @@ function createInstance(config) {
   const customMetadata = {};
   let pendingScreenshot = null;
   let pendingElement = null;
+  let pendingProactiveTrigger = null;
   const widget = new MushiWidget(config.widget, {
     onSubmit: async ({ category, description, intent }) => {
       log.info("Report submitted", { category, intent });
+      proactiveManager?.recordSubmission();
       await submitReport(category, description, intent);
     },
     onOpen: () => {
@@ -1264,8 +1434,13 @@ function createInstance(config) {
     },
     onClose: () => {
       log.debug("Widget closed");
+      if (pendingProactiveTrigger) {
+        proactiveManager?.recordDismissal();
+        emit("proactive:dismissed", { type: pendingProactiveTrigger });
+      }
       pendingScreenshot = null;
       pendingElement = null;
+      pendingProactiveTrigger = null;
       emit("widget:closed");
     },
     onScreenshotRequest: async () => {
@@ -1292,6 +1467,39 @@ function createInstance(config) {
       widget.mount();
     }
   }
+  let proactiveTriggers = null;
+  let proactiveManager = null;
+  const proactiveCfg = config.proactive;
+  const hasAnyProactive = proactiveCfg && (proactiveCfg.rageClick !== false || proactiveCfg.longTask !== false || proactiveCfg.apiCascade !== false || proactiveCfg.errorBoundary === true);
+  if (hasAnyProactive && typeof document !== "undefined") {
+    proactiveManager = createProactiveManager(proactiveCfg?.cooldown);
+    proactiveTriggers = setupProactiveTriggers(
+      {
+        onTrigger: (type, context) => {
+          if (!proactiveManager.shouldShow(type)) {
+            log.debug("Proactive trigger suppressed by fatigue prevention", { type });
+            return;
+          }
+          log.info("Proactive trigger fired", { type, context });
+          pendingProactiveTrigger = type;
+          emit("proactive:triggered", { type, context });
+          widget.open();
+        }
+      },
+      {
+        rageClick: proactiveCfg?.rageClick,
+        longTask: proactiveCfg?.longTask,
+        apiCascade: proactiveCfg?.apiCascade,
+        errorBoundary: proactiveCfg?.errorBoundary
+      }
+    );
+    log.debug("Proactive triggers enabled", {
+      rageClick: proactiveCfg?.rageClick !== false,
+      longTask: proactiveCfg?.longTask !== false,
+      apiCascade: proactiveCfg?.apiCascade !== false,
+      errorBoundary: proactiveCfg?.errorBoundary === true
+    });
+  }
   offlineQueue.startAutoSync(apiClient);
   offlineQueue.flush(apiClient).then((result) => {
     if (result.sent > 0) log.info("Synced offline reports", { sent: result.sent });
@@ -1303,6 +1511,34 @@ function createInstance(config) {
       log.info("Report blocked by pre-filter", { reason: filterResult.reason });
       return;
     }
+    const wasm = config.preFilter?.wasmClassifier;
+    if (wasm) {
+      try {
+        const verdict = await wasm.classify({
+          description,
+          category,
+          url: typeof location !== "undefined" ? location.href : void 0,
+          hasScreenshot: pendingScreenshot !== null,
+          hasSelectedElement: pendingElement !== null,
+          hasNetworkErrors: networkCap?.getEntries()?.some((e) => e.status >= 400 || !!e.error) ?? false,
+          hasConsoleErrors: consoleCap?.getEntries()?.some((e) => e.level === "error") ?? false,
+          proactiveTrigger: pendingProactiveTrigger ?? void 0
+        });
+        if (verdict.verdict === "block") {
+          log.info("Report blocked by on-device classifier", {
+            modelId: verdict.modelId,
+            confidence: verdict.confidence,
+            reason: verdict.reason
+          });
+          return;
+        }
+        log.debug("On-device classifier verdict", { ...verdict });
+      } catch (err) {
+        log.warn("On-device classifier threw \u2014 falling through to server", {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    }
     if (!rateLimiter.tryConsume()) {
       log.warn("Report throttled \u2014 rate limit exceeded");
       return;
@@ -1329,6 +1565,7 @@ function createInstance(config) {
       sessionId: core.getSessionId(),
       reporterToken: core.getReporterToken(),
       appVersion: config.integrations?.vercel?.analyticsId,
+      proactiveTrigger: pendingProactiveTrigger ?? void 0,
       sentryEventId: sentryCtx?.eventId,
       sentryReplayId: sentryCtx?.replayId,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
@@ -1365,10 +1602,11 @@ function createInstance(config) {
     }
     pendingScreenshot = null;
     pendingElement = null;
+    pendingProactiveTrigger = null;
   }
   const sdk = {
-    report() {
-      widget.open();
+    report(options) {
+      widget.open(options);
     },
     on(event, handler) {
       if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
@@ -1391,6 +1629,8 @@ function createInstance(config) {
       widget.close();
     },
     destroy() {
+      proactiveTriggers?.destroy();
+      proactiveManager?.reset();
       widget.destroy();
       consoleCap?.destroy();
       networkCap?.destroy();
@@ -1425,142 +1665,6 @@ function createNoopInstance() {
   };
 }
 
-// src/proactive-manager.ts
-var STORAGE_KEY_LAST_DISMISS = "mushi:lastDismiss";
-var STORAGE_KEY_CONSEC_DISMISS = "mushi:consecDismiss";
-function readStorage(key) {
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-function writeStorage(key, value) {
-  try {
-    localStorage.setItem(key, value);
-  } catch {
-  }
-}
-function createProactiveManager(config = {}) {
-  const maxPerSession = config.maxProactivePerSession ?? 2;
-  const cooldownHours = config.dismissCooldownHours ?? 24;
-  const suppressThreshold = config.suppressAfterDismissals ?? 3;
-  let sessionPromptCount = 0;
-  const sessionTriggerTypes = /* @__PURE__ */ new Set();
-  function shouldShow(triggerType) {
-    const consecDismissals = parseInt(readStorage(STORAGE_KEY_CONSEC_DISMISS) ?? "0", 10);
-    if (consecDismissals >= suppressThreshold) return false;
-    const lastDismiss = readStorage(STORAGE_KEY_LAST_DISMISS);
-    if (lastDismiss) {
-      const elapsed = Date.now() - parseInt(lastDismiss, 10);
-      if (elapsed < cooldownHours * 60 * 60 * 1e3) return false;
-    }
-    if (sessionPromptCount >= maxPerSession) return false;
-    if (sessionTriggerTypes.has(triggerType)) return false;
-    sessionTriggerTypes.add(triggerType);
-    sessionPromptCount++;
-    return true;
-  }
-  function recordDismissal() {
-    writeStorage(STORAGE_KEY_LAST_DISMISS, String(Date.now()));
-    const current = parseInt(readStorage(STORAGE_KEY_CONSEC_DISMISS) ?? "0", 10);
-    writeStorage(STORAGE_KEY_CONSEC_DISMISS, String(current + 1));
-  }
-  function recordSubmission() {
-    writeStorage(STORAGE_KEY_CONSEC_DISMISS, "0");
-  }
-  function reset() {
-    sessionPromptCount = 0;
-    sessionTriggerTypes.clear();
-  }
-  return { shouldShow, recordDismissal, recordSubmission, reset };
-}
-
-// src/proactive-triggers.ts
-function setupProactiveTriggers(callbacks) {
-  const cleanups = [];
-  let clickTimes = [];
-  let lastClickTarget = null;
-  function handleClick(e) {
-    const now = Date.now();
-    if (e.target === lastClickTarget) {
-      clickTimes.push(now);
-      clickTimes = clickTimes.filter((t) => now - t < 500);
-      if (clickTimes.length >= 3) {
-        const el = e.target;
-        callbacks.onTrigger("rage_click", {
-          element: el.tagName,
-          id: el.id,
-          text: el.textContent?.slice(0, 50)
-        });
-        clickTimes = [];
-      }
-    } else {
-      lastClickTarget = e.target;
-      clickTimes = [now];
-    }
-  }
-  document.addEventListener("click", handleClick, true);
-  cleanups.push(() => document.removeEventListener("click", handleClick, true));
-  if (typeof PerformanceObserver !== "undefined") {
-    try {
-      const observer = new PerformanceObserver((list) => {
-        for (const entry of list.getEntries()) {
-          if (entry.duration > 5e3) {
-            callbacks.onTrigger("long_task", {
-              duration: Math.round(entry.duration),
-              startTime: Math.round(entry.startTime)
-            });
-          }
-        }
-      });
-      observer.observe({ entryTypes: ["longtask"] });
-      cleanups.push(() => observer.disconnect());
-    } catch {
-    }
-  }
-  const failedRequests = [];
-  const origFetch = globalThis.fetch;
-  globalThis.fetch = async function(...args) {
-    try {
-      const res = await origFetch.apply(this, args);
-      if (!res.ok && res.status >= 400) {
-        const now = Date.now();
-        failedRequests.push(now);
-        const recentFailures = failedRequests.filter((t) => now - t < 1e4);
-        if (recentFailures.length >= 3) {
-          callbacks.onTrigger("api_cascade", {
-            failureCount: recentFailures.length,
-            windowMs: 1e4
-          });
-          failedRequests.length = 0;
-        }
-      }
-      return res;
-    } catch (err) {
-      const now = Date.now();
-      failedRequests.push(now);
-      const recentFailures = failedRequests.filter((t) => now - t < 1e4);
-      if (recentFailures.length >= 3) {
-        callbacks.onTrigger("api_cascade", {
-          failureCount: recentFailures.length,
-          windowMs: 1e4
-        });
-        failedRequests.length = 0;
-      }
-      throw err;
-    }
-  };
-  cleanups.push(() => {
-    globalThis.fetch = origFetch;
-  });
-  return {
-    destroy() {
-      cleanups.forEach((fn) => fn());
-    }
-  };
-}
-
 exports.Mushi = Mushi;
 exports.MushiWidget = MushiWidget;
 exports.createConsoleCapture = createConsoleCapture;