@mushi-mushi/web 1.9.0 → 1.10.0

package/dist/index.cjs

@@ -553,23 +553,47 @@ function getWidgetStyles(theme) {
       font-weight: 600;
       color: ${ink};
     }
-    .mushi-close, .mushi-back {
+    .mushi-close {
       background: none;
       border: none;
       cursor: pointer;
-      padding: 4px;
+      padding: 2px 4px;
       color: ${inkMuted};
       font-family: ${fontBody};
-      font-size: 14px;
+      font-size: 16px;
       line-height: 1;
-      border-radius: 3px;
+      border-radius: 0;
+      transition: color 150ms ${easeStamp};
+    }
+    .mushi-back {
+      align-self: flex-start;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0 0 2px;
+      color: ${inkMuted};
+      font-family: ${fontMono};
+      font-size: 10px;
+      font-weight: 500;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      line-height: 1.2;
+      border-radius: 0;
       transition: color 150ms ${easeStamp};
     }
-    .mushi-close:hover, .mushi-back:hover { color: ${widgetAccent}; }
-    .mushi-close:focus-visible, .mushi-back:focus-visible {
+    .mushi-close:hover { color: ${widgetAccent}; }
+    .mushi-back:hover { color: ${ink}; }
+    .mushi-close:focus-visible {
       outline: 1.5px solid ${widgetAccent};
       outline-offset: 2px;
     }
+    .mushi-back:focus-visible {
+      outline: none;
+      color: ${widgetAccent};
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
 
     /* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
        Generous left/right padding (22px) so type breathes. Vertical
@@ -658,39 +682,121 @@ function getWidgetStyles(theme) {
     .mushi-report-row {
       width: 100%;
       display: grid;
-      grid-template-columns: auto 1fr auto;
-      gap: 8px;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
       align-items: center;
-      padding: 10px 0;
+      padding: 12px 4px 12px 0;
       border: 0;
       border-bottom: 1px solid ${rule};
       background: transparent;
       color: ${ink};
       cursor: pointer;
       text-align: left;
+      transition: background 180ms ${easeStamp}, padding-left 180ms ${easeStamp};
+    }
+    .mushi-report-row:hover,
+    .mushi-report-row:focus-visible {
+      background: ${isDark ? "rgba(242,235,221,0.04)" : "rgba(14,13,11,0.03)"};
+      padding-left: 4px;
+    }
+    .mushi-report-main {
+      min-width: 0;
+      display: grid;
+      gap: 6px;
+    }
+    .mushi-report-title {
+      font-size: 13px;
+      line-height: 1.35;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .mushi-report-meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
     }
     .mushi-report-status {
+      display: inline-flex;
+      align-items: center;
       font-family: ${fontMono};
       font-size: 10px;
-      color: ${widgetAccent};
+      font-weight: 600;
+      letter-spacing: 0.04em;
       text-transform: uppercase;
+      padding: 2px 7px;
+      border-radius: 999px;
+      border: 1px solid transparent;
+    }
+    .mushi-status-sent {
+      color: ${isDark ? "#A8C4FF" : "#1E4A8C"};
+      background: ${isDark ? "rgba(120,160,255,0.12)" : "rgba(30,74,140,0.08)"};
+      border-color: ${isDark ? "rgba(120,160,255,0.22)" : "rgba(30,74,140,0.16)"};
+    }
+    .mushi-status-review {
+      color: ${isDark ? "#FFD27A" : "#8A5A00"};
+      background: ${isDark ? "rgba(255,190,90,0.12)" : "rgba(180,120,0,0.10)"};
+      border-color: ${isDark ? "rgba(255,190,90,0.22)" : "rgba(180,120,0,0.18)"};
+    }
+    .mushi-status-fixing {
+      color: ${isDark ? "#FFB899" : "#9A3D12"};
+      background: ${isDark ? "rgba(255,120,60,0.12)" : "rgba(224,60,44,0.10)"};
+      border-color: ${isDark ? "rgba(255,120,60,0.24)" : "rgba(224,60,44,0.18)"};
+    }
+    .mushi-status-fixed {
+      color: ${isDark ? "#8FE3B0" : "#1F6B3A"};
+      background: ${isDark ? "rgba(80,200,130,0.12)" : "rgba(31,107,58,0.10)"};
+      border-color: ${isDark ? "rgba(80,200,130,0.22)" : "rgba(31,107,58,0.18)"};
+    }
+    .mushi-status-closed,
+    .mushi-status-unknown {
+      color: ${inkMuted};
+      background: ${isDark ? "rgba(242,235,221,0.06)" : "rgba(14,13,11,0.05)"};
+      border-color: ${ruleStrong};
     }
-    .mushi-report-title {
-      font-size: 13px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .mushi-report-when {
+      font-family: ${fontMono};
+      font-size: 10px;
+      color: ${inkFaint};
+    }
+    .mushi-unread-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 18px;
+      height: 18px;
+      padding: 0 5px;
+      border-radius: 999px;
+      font-family: ${fontMono};
+      font-size: 10px;
+      font-weight: 700;
+      color: ${widgetAccentInk};
+      background: ${widgetAccent};
+    }
+    .mushi-report-chevron {
+      font-size: 18px;
+      line-height: 1;
+      color: ${inkFaint};
+      transition: color 180ms ${easeStamp}, transform 180ms ${easeStamp};
+    }
+    .mushi-report-row:hover .mushi-report-chevron,
+    .mushi-report-row:focus-visible .mushi-report-chevron {
+      color: ${widgetAccent};
+      transform: translateX(2px);
     }
     .mushi-thread-summary {
       border-bottom: 1px solid ${rule};
       padding-bottom: 10px;
       margin-bottom: 10px;
     }
-    .mushi-thread-summary span {
-      font-family: ${fontMono};
-      font-size: 10px;
-      color: ${widgetAccent};
-      text-transform: uppercase;
+    .mushi-thread-summary-meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 8px;
     }
     .mushi-thread {
       display: grid;
@@ -1687,6 +1793,95 @@ var CATEGORY_ICONS = {
   other: "\u{1F4DD}"
 };
 var FEATURE_REQUEST_INTENT = "Feature request";
+function reporterStatusShort(status) {
+  switch (status) {
+    case "new":
+    case "queued":
+    case "pending":
+    case "submitted":
+      return "Sent";
+    case "classified":
+    case "triaged":
+    case "grouped":
+    case "dispatched":
+      return "Review";
+    case "fixing":
+      return "Fixing";
+    case "fixed":
+    case "resolved":
+    case "completed":
+      return "Fixed";
+    case "dismissed":
+      return "Closed";
+    default:
+      return status.replace(/_/g, " ").slice(0, 12);
+  }
+}
+function reporterStatusLabel(status) {
+  switch (status) {
+    case "new":
+    case "queued":
+    case "pending":
+    case "submitted":
+      return "Submitted";
+    case "classified":
+    case "triaged":
+    case "grouped":
+    case "dispatched":
+      return "In review";
+    case "fixing":
+      return "Fix in progress";
+    case "fixed":
+    case "resolved":
+    case "completed":
+      return "Fixed";
+    case "dismissed":
+      return "Closed";
+    default:
+      return status.replace(/_/g, " ");
+  }
+}
+function reporterStatusTone(status) {
+  switch (status) {
+    case "new":
+    case "queued":
+    case "pending":
+    case "submitted":
+      return "sent";
+    case "classified":
+    case "triaged":
+    case "grouped":
+    case "dispatched":
+      return "review";
+    case "fixing":
+      return "fixing";
+    case "fixed":
+    case "resolved":
+    case "completed":
+      return "fixed";
+    case "dismissed":
+      return "closed";
+    default:
+      return "unknown";
+  }
+}
+function formatRelativeTime(iso) {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const diffMs = Date.now() - then;
+  if (diffMs < 0) return "just now";
+  const sec = Math.floor(diffMs / 1e3);
+  if (sec < 60) return "just now";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  if (day < 7) return `${day}d ago`;
+  const week = Math.floor(day / 7);
+  if (week < 5) return `${week}w ago`;
+  return new Date(then).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
 function pad2(n) {
   return n < 10 ? `0${n}` : String(n);
 }
@@ -1801,6 +1996,8 @@ var MushiWidget = class _MushiWidget {
   successTimer = null;
   autoCloseTimer = null;
   rewardsState = null;
+  leaderboardEntries = null;
+  leaderboardLoading = false;
   /** Server-confirmed id for the just-submitted report. Surfaces in
    *  the success step as a copyable receipt + optional deep link to
    *  the Mushi console (when `dashboardUrl` is configured). Cleared
@@ -2073,6 +2270,11 @@ var MushiWidget = class _MushiWidget {
     this.rewardsState = state;
     if (this.isOpen) this.render();
   }
+  setLeaderboard(entries, loading = false) {
+    this.leaderboardEntries = entries;
+    this.leaderboardLoading = loading;
+    if (this.isOpen && this.step === "leaderboard") this.render();
+  }
   destroy() {
     if (this.successTimer !== null) {
       clearTimeout(this.successTimer);
@@ -2493,6 +2695,8 @@ var MushiWidget = class _MushiWidget {
         return this.renderReportsStep();
       case "report-detail":
         return this.renderReportDetailStep();
+      case "leaderboard":
+        return this.renderLeaderboardStep();
     }
   }
   renderOutdatedBanner() {
@@ -2525,7 +2729,7 @@ var MushiWidget = class _MushiWidget {
   renderHeader(opts) {
     const t = this.locale;
     const { title, showBack = false, step, eyebrow } = opts;
-    const eyebrowHtml = showBack ? `<button type="button" class="mushi-back" data-action="back" aria-label="${t.widget.back}">\u2190 ${t.widget.back}</button>` : `<span class="mushi-header-eyebrow">${eyebrow ?? "Mushi \xB7 Report"}</span>`;
+    const eyebrowHtml = showBack ? `<button type="button" class="mushi-back" data-action="back" aria-label="${t.widget.back}">\u2190</button>` : `<span class="mushi-header-eyebrow">${eyebrow ?? "Mushi \xB7 Report"}</span>`;
     const counterHtml = step ? `<span class="mushi-step-counter" aria-label="Step ${step} of ${TOTAL_STEPS}"><b>${pad2(step)}</b> / ${pad2(TOTAL_STEPS)}</span>` : "";
     return `
       <div class="mushi-header">
@@ -2661,24 +2865,61 @@ var MushiWidget = class _MushiWidget {
     `;
   }
   renderReportsStep() {
-    const reports = this.reporterReports.map((report) => `
-      <button type="button" class="mushi-report-row" data-report-id="${escapeHtml(report.id)}">
-        <span class="mushi-report-status">${escapeHtml(report.status)}</span>
-        <span class="mushi-report-title">${escapeHtml(report.summary ?? report.description ?? `Report ${report.id.slice(0, 8)}`)}</span>
-        ${report.unread_count ? `<b>${report.unread_count}</b>` : ""}
-      </button>
-    `).join("");
+    const reports = this.reporterReports.map((report) => {
+      const title = report.summary ?? report.description ?? `Report ${report.id.slice(0, 8)}`;
+      const tone = reporterStatusTone(report.status);
+      const when = formatRelativeTime(report.created_at);
+      const unread = report.unread_count && report.unread_count > 0 ? `<span class="mushi-unread-badge" aria-label="${report.unread_count} unread">${report.unread_count}</span>` : "";
+      return `
+      <button type="button" class="mushi-report-row" data-report-id="${escapeHtml(report.id)}" aria-label="View report: ${escapeHtml(title)}">
+        <div class="mushi-report-main">
+          <span class="mushi-report-title">${escapeHtml(title)}</span>
+          <span class="mushi-report-meta">
+            <span class="mushi-report-status mushi-status-${tone}">${escapeHtml(reporterStatusShort(report.status))}</span>
+            ${when ? `<span class="mushi-report-when">${escapeHtml(when)}</span>` : ""}
+            ${unread}
+          </span>
+        </div>
+        <span class="mushi-report-chevron" aria-hidden="true">\u203A</span>
+      </button>`;
+    }).join("");
+    const leaderboardBtn = this.rewardsState ? `<button type="button" class="mushi-leaderboard-link" data-action="open-leaderboard">\u{1F3C6} Leaderboard</button>` : "";
     return `
       ${this.renderHeader({ title: "Your reports", showBack: true, eyebrow: "Mushi \xB7 Inbox" })}
       <div class="mushi-body">
         ${this.reporterLoading ? '<p class="mushi-muted">Loading reports\u2026</p>' : ""}
         ${this.reporterError ? `<p class="mushi-error-inline">${escapeHtml(this.reporterError)}</p>` : ""}
         ${reports || (!this.reporterLoading ? '<p class="mushi-muted">No reports from this browser yet.</p>' : "")}
+        ${leaderboardBtn}
+      </div>
+    `;
+  }
+  renderLeaderboardStep() {
+    const myRank = this.rewardsState && this.leaderboardEntries ? this.leaderboardEntries.findIndex((e) => e.display_name === "You") + 1 : 0;
+    const rows = (this.leaderboardEntries ?? []).map((e, i) => `
+      <div class="mushi-lb-row ${i === 0 ? "mushi-lb-top" : ""}">
+        <span class="mushi-lb-rank">#${i + 1}</span>
+        <span class="mushi-lb-name">${escapeHtml(e.display_name)}</span>
+        ${e.tier_name ? `<span class="mushi-lb-tier">${escapeHtml(e.tier_name)}</span>` : ""}
+        <span class="mushi-lb-pts">${e.total_points.toLocaleString()} pts</span>
+      </div>
+    `).join("");
+    return `
+      ${this.renderHeader({ title: "\u{1F3C6} Leaderboard", showBack: true, eyebrow: "Mushi \xB7 Contributors" })}
+      <div class="mushi-body">
+        ${this.leaderboardLoading ? '<p class="mushi-muted">Loading leaderboard\u2026</p>' : ""}
+        ${!this.leaderboardLoading && !this.leaderboardEntries?.length ? '<p class="mushi-muted">No contributors yet \u2014 be the first!</p>' : ""}
+        <div class="mushi-lb-list">${rows}</div>
+        ${myRank > 0 ? `<p class="mushi-lb-myrank">You are ranked #${myRank}</p>` : ""}
+        <p class="mushi-lb-note">Top contributors this month \xB7 Points refresh monthly</p>
       </div>
     `;
   }
   renderReportDetailStep() {
     const report = this.reporterReports.find((r) => r.id === this.selectedReportId);
+    const status = report?.status ?? "unknown";
+    const tone = reporterStatusTone(status);
+    const when = report?.created_at ? formatRelativeTime(report.created_at) : "";
     const comments = this.reporterComments.map((comment) => `
       <div class="mushi-thread-comment ${comment.author_kind}">
         <strong>${escapeHtml(comment.author_kind === "reporter" ? "You" : comment.author_name ?? "Developer")}</strong>
@@ -2689,7 +2930,10 @@ var MushiWidget = class _MushiWidget {
       ${this.renderHeader({ title: "Report thread", showBack: true, eyebrow: "Mushi \xB7 Inbox" })}
       <div class="mushi-body">
         <div class="mushi-thread-summary">
-          <span>${escapeHtml(report?.status ?? "unknown")}</span>
+          <div class="mushi-thread-summary-meta">
+            <span class="mushi-report-status mushi-status-${tone}">${escapeHtml(reporterStatusLabel(status))}</span>
+            ${when ? `<span class="mushi-report-when">Reported ${escapeHtml(when)}</span>` : ""}
+          </div>
           <p>${escapeHtml(report?.summary ?? report?.description ?? "Report details")}</p>
         </div>
         <div class="mushi-thread">
@@ -2997,6 +3241,8 @@ var MushiWidget = class _MushiWidget {
       } else if (this.step === "report-detail") {
         this.step = "reports";
         this.selectedReportId = null;
+      } else if (this.step === "leaderboard") {
+        this.step = "reports";
       }
       this.render();
     });
@@ -3016,6 +3262,11 @@ var MushiWidget = class _MushiWidget {
         if (reportId) void this.loadReporterComments(reportId);
       });
     });
+    panel.querySelector('[data-action="open-leaderboard"]')?.addEventListener("click", () => {
+      this.step = "leaderboard";
+      this.callbacks.onLeaderboardOpen?.();
+      this.render();
+    });
     panel.querySelector('[data-action="reporter-reply"]')?.addEventListener("click", () => {
       void this.submitReporterReply(panel);
     });
@@ -3267,6 +3518,10 @@ var MushiWidget = class _MushiWidget {
     const submit = this.shadow.querySelector('[data-action="submit"]');
     submit?.click();
   }
+  recorderOpenMyReports() {
+    if (!this.isOpen) this.open();
+    void this.loadReporterReports();
+  }
 };
 
 // src/marketing-recorder.ts
@@ -3289,7 +3544,8 @@ function exposeMarketingRecorder(widget) {
     selectCategory: (category) => widget.recorderSelectCategory(category),
     selectIntent: (label) => widget.recorderSelectIntent(label),
     focusDescription: () => widget.recorderFocusDescription(),
-    submit: () => widget.recorderSubmit()
+    submit: () => widget.recorderSubmit(),
+    openMyReports: () => widget.recorderOpenMyReports()
   };
   globalThis.__mushiRecorder = api;
 }
@@ -3460,6 +3716,24 @@ async function fetchAndCacheTier(userId) {
   noteRewardsApiFailure(res.error?.code);
   return null;
 }
+async function fetchLeaderboard(limit = 10) {
+  if (!apiClient || isRewardsApiBackedOff()) return null;
+  try {
+    const res = await apiClient.getHallOfFame(limit);
+    if (res.ok && res.data) {
+      return (res.data.data ?? []).map((e) => ({
+        display_name: e.display_name,
+        tier_name: e.tier_name,
+        total_points: e.total_points,
+        points_30d: e.points_30d
+      }));
+    }
+    noteRewardsApiFailure(res.error?.code);
+    return null;
+  } catch {
+    return null;
+  }
+}
 var routeObserver = null;
 var clickHandler = null;
 var origPushState = null;
@@ -5030,7 +5304,7 @@ function createProactiveManager(config = {}) {
 
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/web";
-var MUSHI_SDK_VERSION = "1.9.0" ;
+var MUSHI_SDK_VERSION = "1.10.0" ;
 
 // src/mushi.ts
 var instance = null;
@@ -5308,6 +5582,12 @@ function createInstance(config) {
     async onReporterReply(reportId, body) {
       const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), body);
       if (!result.ok) throw new Error(result.error?.message ?? "Could not send reply");
+    },
+    onLeaderboardOpen() {
+      widget.setLeaderboard(null, true);
+      void fetchLeaderboard(10).then((entries) => {
+        widget.setLeaderboard(entries, false);
+      });
     }
   }, MUSHI_SDK_VERSION);
   syncCaptureModules();
@@ -5564,7 +5844,7 @@ function createInstance(config) {
       await offlineQueue.enqueue(finalReport);
       log.info("Offline \u2014 report queued", { reportId: finalReport.id });
       emit("report:queued", { reportId: finalReport.id });
-      return;
+      return { reportId: null, queuedOffline: true };
     }
     const result = await apiClient2.submitReport(finalReport);
     if (result.ok) {
@@ -5862,6 +6142,28 @@ function createInstance(config) {
     },
     pulseTrigger() {
       widget.pulseTrigger?.();
+    },
+    // ─── Reporter API (cross-platform) ────────────────────────────────
+    async listMyReports() {
+      const result = await apiClient2.listReporterReports(core.getReporterToken());
+      if (!result.ok) return [];
+      return result.data?.reports ?? [];
+    },
+    async listMyComments(reportId) {
+      const result = await apiClient2.listReporterComments(reportId, core.getReporterToken());
+      if (!result.ok) return [];
+      return result.data?.comments ?? [];
+    },
+    async replyToReport(reportId, body) {
+      const result = await apiClient2.replyToReporterReport(reportId, core.getReporterToken(), body);
+      if (!result.ok) return null;
+      return result.data?.comment ?? null;
+    },
+    async getHallOfFame(limit = 20) {
+      const result = await apiClient2.getHallOfFame(limit);
+      if (!result.ok) return [];
+      const raw = result.data;
+      return raw?.data ?? [];
     }
   };
   if (typeof globalThis !== "undefined" && (bootstrapConfig.debug ?? false)) {
@@ -6179,7 +6481,11 @@ function createNoopInstance() {
     recordActivity: () => {
     },
     pulseTrigger: () => {
-    }
+    },
+    listMyReports: async () => [],
+    listMyComments: async () => [],
+    replyToReport: async () => null,
+    getHallOfFame: async () => []
   };
 }
 function installAutoBreadcrumbs(buffer) {