@mushi-mushi/web 1.2.1 → 1.5.0

package/dist/index.js

@@ -45,10 +45,20 @@ var en = {
     heading: "Tell us more",
     descriptionPlaceholder: "Describe what happened\u2026",
     screenshotButton: "Attach Screenshot",
-    screenshotAttached: "Screenshot attached",
+    screenshotAttached: "Screenshot attached \u2713",
+    screenshotCapturing: "Taking screenshot\u2026",
+    screenshotFailed: "Couldn't capture \u2014 describe it instead",
     elementButton: "Select Element",
-    elementSelected: "Element selected",
-    optional: "(optional)"
+    elementSelected: "Element selected \u2713",
+    elementCapturing: "Click anything on the page\u2026",
+    elementSelectorHint: "Click any element \xB7 Esc to cancel",
+    optional: "(optional)",
+    tooShort: "A bit more detail helps us fix it faster",
+    examplePrompts: [
+      "The save button does nothing",
+      "Page froze for 10 seconds",
+      "Layout looks broken here"
+    ]
   }
 };
 
@@ -95,10 +105,20 @@ var ja = {
     heading: "\u8A73\u7D30\u3092\u6559\u3048\u3066\u304F\u3060\u3055\u3044",
     descriptionPlaceholder: "\u4F55\u304C\u8D77\u304D\u305F\u304B\u8AAC\u660E\u3057\u3066\u304F\u3060\u3055\u3044\u2026",
     screenshotButton: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30B7\u30E7\u30C3\u30C8\u6DFB\u4ED8",
-    screenshotAttached: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30B7\u30E7\u30C3\u30C8\u6DFB\u4ED8\u6E08\u307F",
+    screenshotAttached: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30B7\u30E7\u30C3\u30C8\u6DFB\u4ED8\u6E08\u307F \u2713",
+    screenshotCapturing: "\u30B9\u30AF\u30EA\u30FC\u30F3\u30B7\u30E7\u30C3\u30C8\u64AE\u5F71\u4E2D\u2026",
+    screenshotFailed: "\u53D6\u5F97\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F \u2014 \u6587\u5B57\u3067\u6559\u3048\u3066\u304F\u3060\u3055\u3044",
     elementButton: "\u8981\u7D20\u3092\u9078\u629E",
-    elementSelected: "\u8981\u7D20\u9078\u629E\u6E08\u307F",
-    optional: "\uFF08\u4EFB\u610F\uFF09"
+    elementSelected: "\u8981\u7D20\u9078\u629E\u6E08\u307F \u2713",
+    elementCapturing: "\u30DA\u30FC\u30B8\u4E0A\u306E\u8981\u7D20\u3092\u30AF\u30EA\u30C3\u30AF\u2026",
+    elementSelectorHint: "\u8981\u7D20\u3092\u30AF\u30EA\u30C3\u30AF \xB7 Esc \u3067\u30AD\u30E3\u30F3\u30BB\u30EB",
+    optional: "\uFF08\u4EFB\u610F\uFF09",
+    tooShort: "\u3082\u3046\u5C11\u3057\u8A73\u3057\u304F\u6559\u3048\u3066\u304F\u3060\u3055\u3044",
+    examplePrompts: [
+      "\u4FDD\u5B58\u30DC\u30BF\u30F3\u304C\u53CD\u5FDC\u3057\u306A\u3044",
+      "\u30DA\u30FC\u30B8\u304C10\u79D2\u56FA\u307E\u3063\u305F",
+      "\u30EC\u30A4\u30A2\u30A6\u30C8\u304C\u5D29\u308C\u3066\u3044\u308B"
+    ]
   }
 };
 
@@ -145,10 +165,20 @@ var th = {
     heading: "\u0E1A\u0E2D\u0E01\u0E40\u0E23\u0E32\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21",
     descriptionPlaceholder: "\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E2A\u0E34\u0E48\u0E07\u0E17\u0E35\u0E48\u0E40\u0E01\u0E34\u0E14\u0E02\u0E36\u0E49\u0E19\u2026",
     screenshotButton: "\u0E41\u0E19\u0E1A\u0E2A\u0E01\u0E23\u0E35\u0E19\u0E0A\u0E47\u0E2D\u0E15",
-    screenshotAttached: "\u0E41\u0E19\u0E1A\u0E2A\u0E01\u0E23\u0E35\u0E19\u0E0A\u0E47\u0E2D\u0E15\u0E41\u0E25\u0E49\u0E27",
+    screenshotAttached: "\u0E41\u0E19\u0E1A\u0E2A\u0E01\u0E23\u0E35\u0E19\u0E0A\u0E47\u0E2D\u0E15\u0E41\u0E25\u0E49\u0E27 \u2713",
+    screenshotCapturing: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E16\u0E48\u0E32\u0E22\u0E2A\u0E01\u0E23\u0E35\u0E19\u0E0A\u0E47\u0E2D\u0E15\u2026",
+    screenshotFailed: "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E16\u0E48\u0E32\u0E22\u0E20\u0E32\u0E1E\u0E44\u0E14\u0E49 \u2014 \u0E42\u0E1B\u0E23\u0E14\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E41\u0E17\u0E19",
     elementButton: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A",
-    elementSelected: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E41\u0E25\u0E49\u0E27",
-    optional: "(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)"
+    elementSelected: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E41\u0E25\u0E49\u0E27 \u2713",
+    elementCapturing: "\u0E04\u0E25\u0E34\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32\u2026",
+    elementSelectorHint: "\u0E04\u0E25\u0E34\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E1B\u0E23\u0E30\u0E01\u0E2D\u0E1A\u0E43\u0E14\u0E01\u0E47\u0E44\u0E14\u0E49 \xB7 Esc \u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
+    optional: "(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)",
+    tooShort: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E43\u0E2B\u0E49\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21",
+    examplePrompts: [
+      "\u0E1B\u0E38\u0E48\u0E21\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E44\u0E21\u0E48\u0E17\u0E33\u0E07\u0E32\u0E19",
+      "\u0E2B\u0E19\u0E49\u0E32\u0E04\u0E49\u0E32\u0E07\u0E19\u0E32\u0E19 10 \u0E27\u0E34\u0E19\u0E32\u0E17\u0E35",
+      "\u0E40\u0E25\u0E22\u0E4C\u0E40\u0E2D\u0E32\u0E15\u0E4C\u0E1E\u0E31\u0E07"
+    ]
   }
 };
 
@@ -195,18 +225,29 @@ var es = {
     heading: "Cu\xE9ntanos m\xE1s",
     descriptionPlaceholder: "Describe lo que pas\xF3\u2026",
     screenshotButton: "Adjuntar captura",
-    screenshotAttached: "Captura adjunta",
+    screenshotAttached: "Captura adjunta \u2713",
+    screenshotCapturing: "Tomando captura\u2026",
+    screenshotFailed: "No se pudo capturar \u2014 descr\xEDbelo en su lugar",
     elementButton: "Seleccionar elemento",
-    elementSelected: "Elemento seleccionado",
-    optional: "(opcional)"
+    elementSelected: "Elemento seleccionado \u2713",
+    elementCapturing: "Haz clic en cualquier elemento\u2026",
+    elementSelectorHint: "Clic en cualquier elemento \xB7 Esc para cancelar",
+    optional: "(opcional)",
+    tooShort: "Un poco m\xE1s de detalle nos ayuda a resolverlo",
+    examplePrompts: [
+      "El bot\xF3n guardar no responde",
+      "La p\xE1gina se congel\xF3 10 segundos",
+      "El dise\xF1o se ve roto aqu\xED"
+    ]
   }
 };
 
 // src/i18n/index.ts
 var locales = { en, ja, th, es };
 function getLocale(code) {
-  if (!code) return en;
-  const base = code.split("-")[0].toLowerCase();
+  const resolved = code && code !== "auto" ? code : typeof navigator !== "undefined" ? navigator.language ?? navigator.languages?.[0] : void 0;
+  if (!resolved) return en;
+  const base = resolved.split("-")[0].toLowerCase();
   return locales[base] ?? en;
 }
 function getAvailableLocales() {
@@ -239,6 +280,7 @@ function getWidgetStyles(theme) {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       font-feature-settings: 'ss01', 'cv11'; /* nicer system-ui glyphs where supported */
+      --mushi-ok: ${isDark ? "#4ade80" : "#16a34a"};
     }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     button { font-family: inherit; }
@@ -691,6 +733,51 @@ function getWidgetStyles(theme) {
       box-shadow: inset 2px 0 0 ${vermillion};
     }
 
+    /* Example starter chips \u2014 reduce first-report activation energy */
+    .mushi-example-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 10px;
+    }
+    .mushi-example-chip {
+      padding: 4px 10px;
+      border: 1px solid ${rule};
+      border-radius: 12px;
+      background: transparent;
+      color: ${inkMuted};
+      font-family: ${fontBody};
+      font-size: 11px;
+      cursor: pointer;
+      transition: color 150ms ${easeStamp}, border-color 150ms ${easeStamp}, background 150ms ${easeStamp};
+      white-space: nowrap;
+    }
+    .mushi-example-chip:hover {
+      color: ${ink};
+      border-color: ${inkMuted};
+      background: ${isDark ? "rgba(242,235,221,0.06)" : "rgba(14,13,11,0.04)"};
+    }
+    .mushi-example-chip:focus-visible {
+      outline: 2px solid ${vermillion};
+      outline-offset: 2px;
+    }
+
+    /* Textarea wrapper to position char counter */
+    .mushi-textarea-wrap {
+      position: relative;
+    }
+    .mushi-char-counter {
+      position: absolute;
+      bottom: 4px;
+      right: 0;
+      font-family: ${fontMono};
+      font-size: 10px;
+      letter-spacing: 0.04em;
+      color: ${inkFaint};
+      pointer-events: none;
+      transition: color 200ms ${easeStamp};
+    }
+
     .mushi-textarea {
       width: 100%;
       min-height: 96px;
@@ -753,10 +840,34 @@ function getWidgetStyles(theme) {
       border-color: ${vermillion};
       background: ${vermillionWash};
     }
+    .mushi-attach-btn.loading {
+      opacity: 0.7;
+      cursor: wait;
+    }
+    .mushi-attach-btn.error {
+      color: ${vermillion};
+      border-color: ${vermillionWash};
+    }
     .mushi-attach-btn:focus-visible {
       outline: 2px solid ${vermillion};
       outline-offset: 2px;
     }
+    @keyframes mushi-spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes mushi-fade-in {
+      from { opacity: 0; transform: translateY(4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .mushi-spinner {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border: 1.5px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: mushi-spin 0.7s linear infinite;
+    }
 
     .mushi-footer {
       padding: 14px 22px 16px;
@@ -1230,7 +1341,8 @@ var MushiWidget = class {
       draggable: config.draggable ?? false,
       brandFooter: config.brandFooter ?? true,
       outdatedBanner: config.outdatedBanner ?? "auto",
-      betaMode: config.betaMode ?? {}
+      betaMode: config.betaMode ?? {},
+      minDescriptionLength: config.minDescriptionLength ?? 20
     };
     this.callbacks = callbacks;
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
@@ -1249,12 +1361,22 @@ var MushiWidget = class {
   selectedCategory = null;
   selectedIntent = null;
   screenshotAttached = false;
+  screenshotCapturing = false;
+  screenshotError = false;
   allowScreenshotRemove = true;
   elementSelected = false;
+  elementCapturing = false;
   submitting = false;
+  /** Hint element injected outside the shadow DOM during element selection. */
+  selectorHint = null;
   triggerVisible = true;
   triggerShrunk = false;
   triggerHiddenByScroll = false;
+  /** Milliseconds since mount — used for the 30s first-time nudge gate. */
+  mountedAt = null;
+  nudgeShown = false;
+  nudgeEl = null;
+  nudgeTimer = null;
   sdkFreshness = null;
   reporterReports = [];
   reporterComments = [];
@@ -1281,6 +1403,7 @@ var MushiWidget = class {
     this.syncAttachedLaunchers();
     this.syncSmartHide();
     this.render();
+    this.mountedAt = Date.now();
   }
   getIsMounted() {
     return this.host.isConnected;
@@ -1307,7 +1430,8 @@ var MushiWidget = class {
       ...config.draggable !== void 0 ? { draggable: config.draggable } : {},
       ...config.brandFooter !== void 0 ? { brandFooter: config.brandFooter } : {},
       ...config.outdatedBanner !== void 0 ? { outdatedBanner: config.outdatedBanner } : {},
-      ...config.betaMode !== void 0 ? { betaMode: config.betaMode } : {}
+      ...config.betaMode !== void 0 ? { betaMode: config.betaMode } : {},
+      ...config.minDescriptionLength !== void 0 ? { minDescriptionLength: config.minDescriptionLength } : {}
     };
     this.locale = getLocale(this.config.locale === "auto" ? void 0 : this.config.locale);
     this.syncAttachedLaunchers();
@@ -1318,9 +1442,13 @@ var MushiWidget = class {
     if (this.isOpen) return;
     this.isOpen = true;
     this.screenshotAttached = false;
+    this.screenshotCapturing = false;
+    this.screenshotError = false;
     this.elementSelected = false;
+    this.elementCapturing = false;
     this.submitting = false;
     this.submittedAt = null;
+    this.removeSelectorHint();
     if (options?.category) {
       this.selectedCategory = options.category;
       this.selectedIntent = null;
@@ -1376,8 +1504,114 @@ var MushiWidget = class {
   }
   setElementSelected(selected) {
     this.elementSelected = selected;
+    this.elementCapturing = false;
+    this.removeSelectorHint();
     if (this.isOpen) this.render();
   }
+  setScreenshotCapturing(capturing) {
+    this.screenshotCapturing = capturing;
+    this.screenshotError = false;
+    if (this.isOpen) this.render();
+  }
+  setScreenshotError(failed) {
+    this.screenshotError = failed;
+    this.screenshotCapturing = false;
+    if (this.isOpen) this.render();
+  }
+  setElementCapturing(capturing) {
+    this.elementCapturing = capturing;
+    if (capturing) {
+      this.showSelectorHint();
+    } else {
+      this.removeSelectorHint();
+    }
+    if (this.isOpen) this.render();
+  }
+  /** Hide the widget panel (but keep the host element) during element selection
+   *  so the user can click any element on the page without the panel
+   *  intercepting the event. */
+  hidePanel() {
+    const panel = this.shadow.querySelector(".mushi-panel");
+    if (panel) panel.style.display = "none";
+  }
+  showPanel() {
+    const panel = this.shadow.querySelector(".mushi-panel");
+    if (panel) panel.style.display = "";
+  }
+  showSelectorHint() {
+    this.removeSelectorHint();
+    const hint = document.createElement("div");
+    hint.id = "mushi-selector-hint";
+    hint.setAttribute("role", "status");
+    hint.setAttribute("aria-live", "polite");
+    hint.style.cssText = `
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2147483646;
+      background: rgba(17,17,17,0.92);
+      color: #fff;
+      font-family: ui-monospace, SFMono-Regular, monospace;
+      font-size: 12px;
+      letter-spacing: 0.04em;
+      padding: 8px 16px;
+      border-radius: 20px;
+      pointer-events: none;
+      white-space: nowrap;
+      backdrop-filter: blur(4px);
+      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
+    `;
+    hint.textContent = this.locale.step3.elementSelectorHint;
+    document.body.appendChild(hint);
+    this.selectorHint = hint;
+  }
+  removeSelectorHint() {
+    this.selectorHint?.remove();
+    this.selectorHint = null;
+    document.getElementById("mushi-selector-hint")?.remove();
+  }
+  showNudge() {
+    if (this.nudgeShown || this.nudgeEl) return;
+    this.nudgeShown = true;
+    const trigger = this.shadow.querySelector(".mushi-trigger");
+    const rect = trigger?.getBoundingClientRect();
+    const nudge = document.createElement("div");
+    nudge.id = "mushi-nudge-bubble";
+    nudge.setAttribute("role", "tooltip");
+    const isRight = this.config.position.includes("right");
+    nudge.style.cssText = `
+      position: fixed;
+      z-index: 2147483645;
+      ${rect ? `bottom: ${window.innerHeight - rect.top + 8}px; ${isRight ? `right: ${window.innerWidth - rect.right}px;` : `left: ${rect.left}px;`}` : "bottom: 80px; right: 24px;"}
+      background: rgba(17,17,17,0.92);
+      color: #fff;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      font-size: 12px;
+      line-height: 1.4;
+      padding: 8px 12px;
+      border-radius: 8px;
+      max-width: 200px;
+      pointer-events: none;
+      backdrop-filter: blur(4px);
+      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
+      animation: mushi-fade-in 0.15s ease forwards;
+    `;
+    nudge.textContent = this.locale.step3.tooShort.startsWith("A bit") ? "Found a bug? One sentence is enough \u{1F41B}" : "\u30D0\u30B0\u3092\u898B\u3064\u3051\u305F\uFF1F\u4E00\u884C\u3067\u5927\u4E08\u592B\u3067\u3059 \u{1F41B}";
+    document.body.appendChild(nudge);
+    this.nudgeEl = nudge;
+    if (this.nudgeTimer !== null) clearTimeout(this.nudgeTimer);
+    this.nudgeTimer = setTimeout(() => this.removeNudge(), 5e3);
+  }
+  removeNudge() {
+    if (this.nudgeTimer !== null) {
+      clearTimeout(this.nudgeTimer);
+      this.nudgeTimer = null;
+    }
+    this.nudgeEl?.remove();
+    this.nudgeEl = null;
+    document.getElementById("mushi-nudge-bubble")?.remove();
+  }
   setSdkFreshness(info) {
     this.sdkFreshness = info;
     if (this.isOpen) this.render();
@@ -1403,6 +1637,8 @@ var MushiWidget = class {
     this.smartHideCleanup = null;
     this.attachedLaunchers.forEach((cleanup) => cleanup());
     this.attachedLaunchers = [];
+    this.removeSelectorHint();
+    this.removeNudge();
     this.host.remove();
   }
   syncAttachedLaunchers() {
@@ -1498,9 +1734,22 @@ var MushiWidget = class {
       trigger.style.zIndex = String(this.config.zIndex);
       this.applyInsetVars(trigger);
       trigger.addEventListener("click", () => {
+        this.removeNudge();
         if (this.isOpen) this.close();
         else this.open();
       });
+      trigger.addEventListener("mouseenter", () => {
+        const onPageMs = this.mountedAt ? Date.now() - this.mountedAt : 0;
+        if (!this.nudgeShown && !this.isOpen && onPageMs >= 3e4) {
+          this.showNudge();
+        }
+      });
+      trigger.addEventListener("mouseleave", () => {
+        if (this.nudgeEl) {
+          if (this.nudgeTimer !== null) clearTimeout(this.nudgeTimer);
+          this.nudgeTimer = setTimeout(() => this.removeNudge(), 2e3);
+        }
+      });
       this.shadow.appendChild(trigger);
     }
     const panel = document.createElement("div");
@@ -1752,25 +2001,62 @@ var MushiWidget = class {
       ${this.renderStepIndicator(STEP_NUMBER.intent)}
     `;
   }
+  effectiveMinLength() {
+    const base = this.config.minDescriptionLength ?? 20;
+    const lang = this.config.locale === "auto" ? typeof navigator !== "undefined" ? navigator.language ?? "" : "" : this.config.locale ?? "";
+    const isCjk = /^(ja|zh|ko)/i.test(lang);
+    return isCjk ? Math.max(4, Math.floor(base / 2)) : base;
+  }
   renderDetailsStep() {
     const t = this.locale;
+    const minLen = this.effectiveMinLength();
+    const screenshotLabel = this.screenshotCapturing ? t.step3.screenshotCapturing : this.screenshotError ? t.step3.screenshotFailed : this.screenshotAttached ? t.step3.screenshotAttached : t.step3.screenshotButton;
+    const screenshotClass = [
+      "mushi-attach-btn",
+      this.screenshotAttached ? "active" : "",
+      this.screenshotError ? "error" : "",
+      this.screenshotCapturing ? "loading" : ""
+    ].filter(Boolean).join(" ");
+    const elementLabel = this.elementCapturing ? t.step3.elementCapturing : this.elementSelected ? t.step3.elementSelected : t.step3.elementButton;
+    const elementClass = [
+      "mushi-attach-btn",
+      this.elementSelected ? "active" : "",
+      this.elementCapturing ? "loading" : ""
+    ].filter(Boolean).join(" ");
+    const exampleChips = t.step3.examplePrompts.map((p) => `<button type="button" class="mushi-example-chip" data-example="${escapeHtml(p)}">${escapeHtml(p)}</button>`).join("");
     return `
       ${this.renderHeader({ title: t.step3.heading, showBack: true, step: STEP_NUMBER.details })}
       <div class="mushi-body">
-        <textarea
-          class="mushi-textarea"
-          placeholder="${t.step3.descriptionPlaceholder}"
-          rows="4"
-          aria-label="${t.step3.heading}"
-          autofocus
-        ></textarea>
+        <div class="mushi-example-chips" aria-label="Example prompts">${exampleChips}</div>
+        <div class="mushi-textarea-wrap">
+          <textarea
+            class="mushi-textarea"
+            placeholder="${t.step3.descriptionPlaceholder}"
+            rows="4"
+            aria-label="${t.step3.heading}"
+            autofocus
+          ></textarea>
+          <div class="mushi-char-counter" data-role="char-counter" aria-hidden="true">
+            <span data-role="char-current">0</span>/<span data-role="char-min">${minLen}</span>
+          </div>
+        </div>
         <div class="mushi-attachments">
-          <button type="button" class="mushi-attach-btn${this.screenshotAttached ? " active" : ""}" data-action="screenshot">
-            \u{1F4F8} ${this.screenshotAttached ? t.step3.screenshotAttached : t.step3.screenshotButton}
+          <button type="button" class="${screenshotClass}"
+            data-action="screenshot"
+            ${this.screenshotCapturing ? "disabled" : ""}
+            aria-label="${escapeHtml(screenshotLabel)}"
+          >
+            ${this.screenshotCapturing ? '<span class="mushi-spinner" aria-hidden="true"></span>' : "\u{1F4F8}"}
+            ${escapeHtml(screenshotLabel)}
           </button>
-          ${this.screenshotAttached && this.allowScreenshotRemove ? '<button type="button" class="mushi-attach-btn danger" data-action="remove-screenshot">\u2715 Remove screenshot</button>' : ""}
-          <button type="button" class="mushi-attach-btn${this.elementSelected ? " active" : ""}" data-action="element">
-            \u{1F3AF} ${this.elementSelected ? t.step3.elementSelected : t.step3.elementButton}
+          ${this.screenshotAttached && this.allowScreenshotRemove ? '<button type="button" class="mushi-attach-btn danger" data-action="remove-screenshot" aria-label="Remove screenshot">\u2715 Remove</button>' : ""}
+          <button type="button" class="${elementClass}"
+            data-action="element"
+            ${this.elementCapturing ? "disabled" : ""}
+            aria-label="${escapeHtml(elementLabel)}"
+          >
+            ${this.elementCapturing ? '<span class="mushi-spinner" aria-hidden="true"></span>' : "\u{1F3AF}"}
+            ${escapeHtml(elementLabel)}
           </button>
         </div>
         <div class="mushi-error" style="display:none" role="alert"></div>
@@ -1940,6 +2226,30 @@ var MushiWidget = class {
         this.render();
       });
     });
+    const textarea = panel.querySelector(".mushi-textarea");
+    const charCurrentEl = panel.querySelector('[data-role="char-current"]');
+    if (textarea && charCurrentEl) {
+      const minLen = this.effectiveMinLength();
+      const updateCounter = () => {
+        const len = textarea.value.trim().length;
+        charCurrentEl.textContent = String(len);
+        const counterEl = panel.querySelector('[data-role="char-counter"]');
+        if (counterEl) {
+          counterEl.style.color = len >= minLen ? "var(--mushi-ok, #22c55e)" : "";
+        }
+      };
+      textarea.addEventListener("input", updateCounter);
+    }
+    panel.querySelectorAll("[data-example]").forEach((chip) => {
+      chip.addEventListener("click", () => {
+        const example = chip.dataset.example ?? "";
+        if (textarea) {
+          textarea.value = example;
+          textarea.focus();
+          textarea.dispatchEvent(new Event("input"));
+        }
+      });
+    });
     panel.querySelector('[data-action="screenshot"]')?.addEventListener("click", () => {
       this.callbacks.onScreenshotRequest();
     });
@@ -1950,14 +2260,16 @@ var MushiWidget = class {
       this.callbacks.onElementSelectorRequest?.();
     });
     const submitReport = () => {
-      const textarea = panel.querySelector(".mushi-textarea");
-      const description = textarea?.value?.trim() ?? "";
+      const textarea2 = panel.querySelector(".mushi-textarea");
+      const description = textarea2?.value?.trim() ?? "";
       const errorEl = panel.querySelector(".mushi-error");
-      const MIN_DESCRIPTION_LENGTH = 20;
-      if (description.length < MIN_DESCRIPTION_LENGTH) {
+      const minLen = this.effectiveMinLength();
+      if (description.length < minLen) {
         if (errorEl) {
-          errorEl.textContent = `${t.widget.error} (${description.length}/${MIN_DESCRIPTION_LENGTH})`;
+          const msg = `${t.step3.tooShort} (${description.length}/${minLen})`;
+          errorEl.textContent = msg;
           errorEl.style.display = "block";
+          textarea2?.focus();
         }
         return;
       }
@@ -2620,50 +2932,16 @@ function truncateUrl(url) {
 function createScreenshotCapture(options = {}) {
   let activeOptions = options;
   async function take() {
-    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;
+    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;
     }
+    return svgResult;
   }
   return {
     take,
@@ -2672,8 +2950,110 @@ 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());
+  }
+}
 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"));
+    }
+  }
   for (const selector of privacy?.blockSelectors ?? []) {
     for (const el of safeQueryAll(clone, selector)) {
       el.remove();
@@ -2708,6 +3088,15 @@ function maskElement(el) {
 }
 
 // src/capture/performance.ts
+var INP_DURATION_THRESHOLD_MS = 40;
+function describeElement(target) {
+  if (!target || !target.tagName) return void 0;
+  const el = target;
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const cls = el.classList && el.classList.length > 0 ? `.${el.classList[0]}` : "";
+  return `${tag}${id}${cls}`;
+}
 function createPerformanceCapture() {
   const metrics = {};
   const observers = [];
@@ -2759,6 +3148,53 @@ function createPerformanceCapture() {
       observers.push(longTaskObserver);
     } catch {
     }
+    try {
+      const seenInteractions = /* @__PURE__ */ new Map();
+      const inpObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          const interactionId = entry.interactionId;
+          if (!interactionId) continue;
+          const prev = seenInteractions.get(interactionId) ?? 0;
+          if (entry.duration > prev) {
+            seenInteractions.set(interactionId, entry.duration);
+          }
+          if (entry.duration > (metrics.inp ?? 0)) {
+            metrics.inp = entry.duration;
+            const inputDelay = entry.processingStart - entry.startTime;
+            const processingDuration = entry.processingEnd - entry.processingStart;
+            const presentationDelay = entry.startTime + entry.duration - entry.processingEnd;
+            metrics.inpAttribution = {
+              eventType: entry.name,
+              targetSelector: describeElement(entry.target),
+              inputDelay: Math.max(0, inputDelay),
+              processingDuration: Math.max(0, processingDuration),
+              presentationDelay: Math.max(0, presentationDelay)
+            };
+          }
+        }
+      });
+      inpObserver.observe({
+        type: "event",
+        // `durationThreshold` filters out fast (< 40 ms) interactions
+        // that sit below human perception. Spec-recommended floor.
+        durationThreshold: INP_DURATION_THRESHOLD_MS,
+        buffered: true
+      });
+      observers.push(inpObserver);
+    } catch {
+    }
+    try {
+      const fidObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (metrics.fid === void 0) {
+            metrics.fid = entry.processingStart - entry.startTime;
+          }
+        }
+      });
+      fidObserver.observe({ type: "first-input", buffered: true });
+      observers.push(fidObserver);
+    } catch {
+    }
   }
   if (typeof performance !== "undefined" && performance.getEntriesByType) {
     try {
@@ -2870,6 +3306,11 @@ function createElementSelector() {
     e.stopPropagation();
     const target = e.target;
     if (target === overlay) return;
+    const path = e.composedPath ? e.composedPath() : [];
+    const hitsMushiHost = path.some(
+      (node) => node instanceof Element && node.id === "mushi-mushi-widget"
+    );
+    if (hitsMushiHost) return;
     const captured = captureElement(target);
     finish(captured);
   }
@@ -3584,7 +4025,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.2.1" ;
+var MUSHI_SDK_VERSION = "1.5.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -3789,8 +4230,21 @@ function createInstance(config) {
     onScreenshotRequest: async () => {
       if (!screenshotCap || activeConfig.capture?.screenshot === "off") return;
       log.debug("Taking screenshot");
-      pendingScreenshot = await screenshotCap.take();
-      widget.setScreenshotAttached(pendingScreenshot !== null);
+      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);
+        }
+      }
     },
     onScreenshotRemove: () => {
       log.debug("Screenshot attachment removed");
@@ -3800,11 +4254,19 @@ function createInstance(config) {
     onElementSelectorRequest: async () => {
       if (!elementSelector || activeConfig.capture?.elementSelector === false) return;
       log.debug("Element selector activated");
-      const el = await elementSelector.activate();
-      if (el) {
-        pendingElement = el;
-        widget.setElementSelected(true);
-        log.debug("Element selected", { tagName: el.tagName, xpath: el.xpath });
+      widget.setElementCapturing(true);
+      widget.hidePanel();
+      try {
+        const el = await elementSelector.activate();
+        if (el) {
+          pendingElement = el;
+          widget.setElementSelected(true);
+          log.debug("Element selected", { tagName: el.tagName, xpath: el.xpath });
+        } else {
+          widget.setElementCapturing(false);
+        }
+      } finally {
+        widget.showPanel();
       }
     },
     async onReporterReportsRequest() {
@@ -4040,17 +4502,43 @@ function createInstance(config) {
       };
       config.integrations.custom(builder);
     }
-    emit("report:submitted", { reportId: report.id });
+    let finalReport = report;
+    if (config.beforeSendFeedback) {
+      try {
+        const hookResult = await Promise.race([
+          Promise.resolve(config.beforeSendFeedback(report)),
+          // 2s timeout — async hooks must not block the user's "submit"
+          // for longer than the network would. Falls back to original.
+          new Promise(
+            (resolve) => setTimeout(() => resolve(report), 2e3)
+          )
+        ]);
+        if (hookResult === null) {
+          log.info("Report dropped by beforeSendFeedback hook", { reportId: report.id });
+          return;
+        }
+        finalReport = hookResult;
+      } catch (err) {
+        log.warn("beforeSendFeedback hook threw \u2014 sending unmodified report", {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    }
+    emit("report:submitted", { reportId: finalReport.id });
     if (typeof navigator !== "undefined" && !navigator.onLine) {
-      await offlineQueue.enqueue(report);
-      log.info("Offline \u2014 report queued", { reportId: report.id });
-      emit("report:queued", { reportId: report.id });
+      await offlineQueue.enqueue(finalReport);
+      log.info("Offline \u2014 report queued", { reportId: finalReport.id });
+      emit("report:queued", { reportId: finalReport.id });
       return;
     }
-    const result = await apiClient2.submitReport(report);
+    const result = await apiClient2.submitReport(finalReport);
     if (result.ok) {
       log.info("Report sent", { reportId: result.data?.reportId });
       emit("report:sent", { reportId: result.data?.reportId });
+      if (result.data?.cursorAgentId) {
+        const d = result.data;
+        emit("report:dispatched", { reportId: d.reportId, agentId: d.cursorAgentId, fixId: d.fixId });
+      }
       breadcrumbs.add({
         category: "lifecycle",
         level: "info",
@@ -4067,13 +4555,13 @@ function createInstance(config) {
       } 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 });
+      log.warn("Report failed, queuing for retry", { reportId: finalReport.id, error: result.error });
+      await offlineQueue.enqueue(finalReport);
+      emit("report:failed", { reportId: finalReport.id, error: result.error });
       breadcrumbs.add({
         category: "lifecycle",
         level: "warning",
-        message: `Mushi report queued for retry (${report.id})`
+        message: `Mushi report queued for retry (${finalReport.id})`
       });
     }
     pendingScreenshot = null;
@@ -4335,6 +4823,35 @@ function createInstance(config) {
   if (typeof globalThis !== "undefined" && (bootstrapConfig.debug ?? false)) {
     exposeMarketingRecorder(widget);
   }
+  if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
+    const SENTINEL_KEY = "mushi:last-run";
+    let crashed = null;
+    try {
+      const previous = localStorage.getItem(SENTINEL_KEY);
+      crashed = previous === null ? null : previous === "unfinished";
+      localStorage.setItem(SENTINEL_KEY, "unfinished");
+    } catch {
+      crashed = null;
+    }
+    try {
+      window.addEventListener("pagehide", () => {
+        try {
+          localStorage.setItem(SENTINEL_KEY, "clean");
+        } catch {
+        }
+      });
+    } catch {
+    }
+    if (typeof bootstrapConfig.onCrashedLastRun === "function") {
+      try {
+        bootstrapConfig.onCrashedLastRun({ crashed });
+      } catch (err) {
+        log.warn("onCrashedLastRun hook threw", {
+          error: err instanceof Error ? err.message : String(err)
+        });
+      }
+    }
+  }
   return sdk;
 }
 function mergeRuntimeConfig(config, runtime) {