@mushi-mushi/web 1.2.0 → 1.3.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;
       }
@@ -2054,8 +2366,81 @@ var MushiWidget = class {
       this.render();
     }
   }
+  /* ── Marketing / Playwright recorder (debug GIF capture) ─────────── */
+  getRecorderStep() {
+    return this.step;
+  }
+  getRecorderTrigger() {
+    return this.shadow.querySelector(".mushi-trigger");
+  }
+  getRecorderCategoryButton(category) {
+    return this.shadow.querySelector(`[data-category="${category}"]`);
+  }
+  getRecorderIntentButton(label) {
+    return Array.from(this.shadow.querySelectorAll("[data-intent]")).find(
+      (el) => el.dataset.intent === label
+    ) ?? null;
+  }
+  getRecorderSubmitButton() {
+    return this.shadow.querySelector('[data-action="submit"]');
+  }
+  recorderClickTrigger() {
+    if (this.isOpen) this.close();
+    this.open();
+  }
+  recorderSelectCategory(category) {
+    if (!this.isOpen) this.open();
+    if (this.step !== "category") {
+      this.selectedCategory = null;
+      this.selectedIntent = null;
+      this.step = "category";
+      this.render();
+    }
+    this.selectedCategory = category;
+    this.step = "intent";
+    this.render();
+  }
+  recorderSelectIntent(label) {
+    if (!this.isOpen || this.step !== "intent") return;
+    this.selectedIntent = label;
+    this.step = "details";
+    this.render();
+  }
+  recorderFocusDescription() {
+    const textarea = this.shadow.querySelector(".mushi-textarea");
+    textarea?.focus();
+  }
+  recorderSubmit() {
+    const submit = this.shadow.querySelector('[data-action="submit"]');
+    submit?.click();
+  }
 };
 
+// src/marketing-recorder.ts
+function centerOf(el) {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) return null;
+  return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+}
+function exposeMarketingRecorder(widget) {
+  if (typeof globalThis === "undefined") return;
+  const api = {
+    ready: () => widget.getIsMounted(),
+    getStep: () => widget.getRecorderStep(),
+    getTriggerCenter: () => centerOf(widget.getRecorderTrigger()),
+    getCategoryCenter: (category) => centerOf(widget.getRecorderCategoryButton(category)),
+    getIntentCenter: (label) => centerOf(widget.getRecorderIntentButton(label)),
+    getSubmitCenter: () => centerOf(widget.getRecorderSubmitButton()),
+    clickTrigger: () => widget.recorderClickTrigger(),
+    selectCategory: (category) => widget.recorderSelectCategory(category),
+    selectIntent: (label) => widget.recorderSelectIntent(label),
+    focusDescription: () => widget.recorderFocusDescription(),
+    submit: () => widget.recorderSubmit()
+  };
+  globalThis.__mushiRecorder = api;
+}
+
 // src/rewards.ts
 var MIN_FLUSH_INTERVAL = 3e4;
 var DEFAULT_FLUSH_INTERVAL = 3e5;
@@ -2547,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,
@@ -2599,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();
@@ -2797,6 +3250,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);
   }
@@ -3511,7 +3969,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.2.0" ;
+var MUSHI_SDK_VERSION = "1.3.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -3716,8 +4174,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");
@@ -3727,11 +4198,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() {
@@ -4259,6 +4738,9 @@ function createInstance(config) {
       enqueue({ action, metadata });
     }
   };
+  if (typeof globalThis !== "undefined" && (bootstrapConfig.debug ?? false)) {
+    exposeMarketingRecorder(widget);
+  }
   return sdk;
 }
 function mergeRuntimeConfig(config, runtime) {