@mushi-mushi/react-native 0.13.0 → 0.14.0

package/CONTRIBUTING.md

@@ -101,17 +101,6 @@ Releases are fully automated. Maintainers don't run `npm publish` by hand.
 
 If GitHub's anti-loop protection suppresses the auto re-fire (the squash merge can be attributed to `github-actions[bot]`), trigger the workflow manually: **Actions → release → Run workflow → master**.
 
-### Known CI/CD quirks and their automatic safeguards
-
-A handful of GitHub-Actions × Changesets edge cases have caused release-pipeline stalls in the past. Each is now caught automatically — keep these in mind when you see the symptom:
-
-| Symptom | Root cause | Automatic safeguard |
-| --- | --- | --- |
-| The `Build & Test` required check never registers on the `chore: version packages` PR — the PR stays "Required check missing" forever | `changeset-release/master` is pushed by `github-actions[bot]`. GitHub silently drops the downstream `pull_request` event to prevent bot loops (observed on PR #45, #102, #124). | `ci.yml` now also triggers on `push` to `changeset-release/master`, so `Build & Test` reports against the head commit directly. No empty-commit nudge needed. |
-| Release workflow fails with `No commits between master and changeset-release/master` after merging a PR with a new changeset. | A `.changeset/*.md` file whose YAML frontmatter only targets packages listed in `.changeset/config.json#ignore` (e.g. `@mushi-mushi/server`, `@mushi-mushi/admin`). `changeset version` produces no bumps, the version PR is empty, the next push errors (PR #102 / #121, 2026-05-19). | `pnpm check:changeset-orphans` runs in both `ci.yml` and `release.yml`. PR CI fails with an actionable message naming the orphan file *before* it can reach master. If you legitimately need to record an internal-only change, omit the changeset entirely — the diff lives in git history. |
-| Release workflow's `Audit signatures of installed dependencies` step fails with `npm ETARGET / No matching version found for @mushi-mushi/<pkg>@<ver>` seconds after the publish step succeeded. | npm's registry CDN can take up to ~30s to propagate a freshly-published manifest. The audit step shells out to `npm install` against the just-published version and races the CDN (observed 2026-05-20, run 26149167393). | The audit step retries with exponential backoff (1, 2, 4, 8, 16, 32s — 63s total) before failing. Sigstore signatures are written at publish time, so a one-off audit failure never indicates a corrupted package — `pnpm view <pkg> version` is the ground truth. |
-| Push to `master` after merging a PR doesn't fire the `Release` workflow. | Same anti-loop protection: when a squash merge is attributed to `github-actions[bot]`, GitHub may suppress the downstream `push` trigger. Sporadic — observed twice in the last 60 days. | `release.yml` keeps `workflow_dispatch` as the manual fallback. Recovery: **Actions → Release → Run workflow → master**. The `Build & Verify` job re-runs identically to the auto-fired path. |
-
 ### Adding a brand-new publishable package
 
 Trusted Publisher bindings are configured **per package** on `npmjs.com` and require the package to already exist on the registry. New packages therefore need a one-time bootstrap before OIDC can take over.

package/README.md

@@ -115,3 +115,9 @@ See the full [CHANGELOG](https://github.com/kensaurus/mushi-mushi/blob/master/pa
 ## License
 
 MIT
+
+
+<!-- mushi-readme-stats-footer -->
+---
+
+<sub>Monorepo scale (June 2026): 43 edge functions · 234 SQL migrations · 13 outbound plugins · 11 inbound adapters. Canonical counts: <a href="https://github.com/kensaurus/mushi-mushi/blob/master/docs/stats.md">docs/stats.md</a> · <code>pnpm docs-stats</code></sub>

package/dist/index.cjs

@@ -319,7 +319,12 @@ var CATEGORIES = [
   { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
   { key: "other", emoji: "\u{1F4AC}", label: "Other" }
 ];
-var MushiBottomSheet = ({ visible, onClose }) => {
+var MushiBottomSheet = ({
+  visible,
+  onClose,
+  screenshotDataUrl,
+  onClearScreenshot
+}) => {
   const mushi = useMushiContext();
   const scheme = (0, import_react_native2.useColorScheme)();
   const dark = scheme === "dark";
@@ -328,6 +333,10 @@ var MushiBottomSheet = ({ visible, onClose }) => {
   const [category, setCategory] = (0, import_react.useState)(null);
   const [description, setDescription] = (0, import_react.useState)("");
   const [phase, setPhase] = (0, import_react.useState)("form");
+  const [screenshotAttached, setScreenshotAttached] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    if (visible) setScreenshotAttached(true);
+  }, [visible]);
   const resetForm = (0, import_react.useCallback)(() => {
     setCategory(null);
     setDescription("");
@@ -399,13 +408,18 @@ var MushiBottomSheet = ({ visible, onClose }) => {
     if (!category || !description.trim() || !mushi) return;
     setPhase("sending");
     try {
-      await mushi.submitReport({ category, description: description.trim() });
+      await mushi.submitReport({
+        category,
+        description: description.trim(),
+        screenshotDataUrl: screenshotDataUrl && screenshotAttached ? screenshotDataUrl : void 0
+      });
       setPhase("sent");
       setTimeout(handleClose, 1400);
     } catch {
       setPhase("form");
     }
   };
+  const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
   const colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)" };
   const canSubmit = !!category && description.trim().length > 0 && phase === "form";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -486,6 +500,32 @@ var MushiBottomSheet = ({ visible, onClose }) => {
                     editable: phase === "form"
                   }
                 ),
+                activeScreenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotRow, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native2.Image,
+                    {
+                      source: { uri: activeScreenshot },
+                      style: s.screenshotThumb,
+                      accessibilityLabel: "Attached screenshot"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: s.screenshotMeta, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native2.TouchableOpacity,
+                    {
+                      onPress: () => {
+                        setScreenshotAttached(false);
+                        onClearScreenshot?.();
+                      },
+                      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+                      accessibilityLabel: "Remove screenshot",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
+                    }
+                  )
+                ] }) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_react_native2.TouchableOpacity,
                   {
@@ -598,6 +638,39 @@ var s = import_react_native2.StyleSheet.create({
   sentText: {
     fontSize: 20,
     fontWeight: "600"
+  },
+  screenshotRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginBottom: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: "rgba(128,128,128,0.1)"
+  },
+  screenshotThumb: {
+    width: 48,
+    height: 36,
+    borderRadius: 4,
+    backgroundColor: "#000",
+    flexShrink: 0
+  },
+  screenshotMeta: {
+    flex: 1,
+    gap: 2
+  },
+  screenshotLabel: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  screenshotSub: {
+    fontSize: 11
+  },
+  screenshotRemove: {
+    fontSize: 16,
+    fontWeight: "700",
+    paddingHorizontal: 4
   }
 });
 
@@ -683,6 +756,15 @@ function MushiProvider({ children, ...config }) {
   const queueRef = (0, import_react3.useRef)(null);
   const apiClientRef = (0, import_react3.useRef)(null);
   const [sheetVisible, setSheetVisible] = (0, import_react3.useState)(false);
+  const [sheetScreenshot, setSheetScreenshot] = (0, import_react3.useState)(null);
+  const reporterTokenRef = (0, import_react3.useRef)(`rn-${config.projectId}-anon`);
+  let resolveReporterTokenReady = () => {
+  };
+  const reporterTokenReadyRef = (0, import_react3.useRef)(
+    new Promise((resolve) => {
+      resolveReporterTokenReady = resolve;
+    })
+  );
   if (config.endpoint !== void 0 && config.endpoint.trim() === "") {
     throw new Error(
       "[MushiProvider] endpoint is set to an empty string. Set endpoint to your Supabase edge function URL, e.g. https://xyz.supabase.co/functions/v1/api, or omit it to use the cloud default."
@@ -708,6 +790,27 @@ function MushiProvider({ children, ...config }) {
     });
     queueRef.current.flush().catch(() => {
     });
+    (async () => {
+      const TOKEN_KEY = "@mushi:reporter_token";
+      try {
+        const AsyncStorage = (await import("@react-native-async-storage/async-storage")).default;
+        const existing = await AsyncStorage.getItem(TOKEN_KEY);
+        if (existing && existing.startsWith("mushi_")) {
+          reporterTokenRef.current = existing;
+        } else {
+          const fresh = `mushi_${(0, import_core.newUuid)()}`;
+          reporterTokenRef.current = fresh;
+          await AsyncStorage.setItem(TOKEN_KEY, fresh);
+        }
+        resolveReporterTokenReady();
+      } catch {
+        if (reporterTokenRef.current === `rn-${config.projectId}-anon`) {
+          reporterTokenRef.current = `mushi_${(0, import_core.newUuid)()}`;
+        }
+        resolveReporterTokenReady();
+      }
+    })().catch(() => {
+    });
     return () => {
       consoleRef.current?.restore();
       networkRef.current?.restore();
@@ -727,7 +830,25 @@ function MushiProvider({ children, ...config }) {
     }
     return () => unsubscribe?.();
   }, []);
-  const open = (0, import_react3.useCallback)(() => setSheetVisible(true), []);
+  const open = (0, import_react3.useCallback)(() => {
+    let vshot = null;
+    try {
+      vshot = require("react-native-view-shot");
+    } catch {
+    }
+    if (!vshot) {
+      setSheetScreenshot(null);
+      setSheetVisible(true);
+      return;
+    }
+    vshot.captureScreen({ format: "jpg", quality: 0.7, result: "data-uri" }).then((url) => {
+      setSheetScreenshot(url);
+    }).catch(() => {
+      setSheetScreenshot(null);
+    }).finally(() => {
+      setSheetVisible(true);
+    });
+  }, []);
   const close = (0, import_react3.useCallback)(() => setSheetVisible(false), []);
   const attachTo = (0, import_react3.useCallback)(() => ({ onPress: open }), [open]);
   (0, import_react3.useEffect)(() => {
@@ -761,8 +882,16 @@ function MushiProvider({ children, ...config }) {
   const submitReport = (0, import_react3.useCallback)(
     async (data) => {
       const deviceInfo = getDeviceInfo();
+      const contextMeta = {};
+      if (userRef.current?.id) contextMeta.userId = userRef.current.id;
+      if (userRef.current?.email) contextMeta.userEmail = userRef.current.email;
+      if (userRef.current?.name) contextMeta.userName = userRef.current.name;
+      if (screenRef.current?.name) contextMeta.screenName = screenRef.current.name;
+      if (screenRef.current?.route) contextMeta.screenRoute = screenRef.current.route;
+      if (screenRef.current?.feature) contextMeta.screenFeature = screenRef.current.feature;
+      const merged = Object.keys(metadataRef.current).length > 0 ? { ...contextMeta, ...metadataRef.current } : Object.keys(contextMeta).length > 0 ? contextMeta : void 0;
       const report = {
-        id: `rn-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        id: (0, import_core.newUuid)(),
         projectId: config.projectId,
         category: data.category,
         description: data.description,
@@ -771,7 +900,7 @@ function MushiProvider({ children, ...config }) {
           platform: deviceInfo.platform ?? "mobile",
           language: deviceInfo.locale ?? "en",
           viewport: { width: deviceInfo.screenWidth ?? 0, height: deviceInfo.screenHeight ?? 0 },
-          url: "",
+          url: screenRef.current?.route ?? "",
           referrer: "",
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           timezone: deviceInfo.timezone ?? "UTC"
@@ -781,7 +910,9 @@ function MushiProvider({ children, ...config }) {
           ...entry,
           status: entry.status ?? 0
         })) ?? [],
-        reporterToken: `rn-${config.projectId}-anon`,
+        screenshotDataUrl: data.screenshotDataUrl,
+        metadata: merged,
+        reporterToken: reporterTokenRef.current,
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       const client = apiClientRef.current;
@@ -791,7 +922,7 @@ function MushiProvider({ children, ...config }) {
         await queueRef.current?.enqueue(report);
       }
     },
-    [config.projectId, config.apiKey, apiEndpoint]
+    [config.projectId, apiEndpoint]
   );
   const userRef = (0, import_react3.useRef)(null);
   const metadataRef = (0, import_react3.useRef)({});
@@ -842,6 +973,33 @@ function MushiProvider({ children, ...config }) {
       setScreen(screen) {
         screenRef.current = screen;
       },
+      // Reporter API — scoped to the device's persistent reporter token
+      async listMyReports() {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        await reporterTokenReadyRef.current;
+        const res = await client.listReporterReports(reporterTokenRef.current);
+        return res.ok ? res.data?.reports ?? [] : [];
+      },
+      async listMyComments(reportId) {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        const res = await client.listReporterComments(reportId, reporterTokenRef.current);
+        return res.ok ? res.data.comments ?? [] : [];
+      },
+      async replyToReport(reportId, body) {
+        const client = apiClientRef.current;
+        if (!client) return null;
+        const res = await client.replyToReporterReport(reportId, reporterTokenRef.current, body);
+        return res.ok ? res.data.comment : null;
+      },
+      // Leaderboard — SDK-public anonymized hall-of-fame
+      async getHallOfFame(limit = 10) {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        const res = await client.getHallOfFame(limit);
+        return res.ok ? res.data.data ?? [] : [];
+      },
       // Rewards (P1)
       recordActivity(action, metadata) {
         if (!config.rewards?.enabled) return;
@@ -883,7 +1041,15 @@ function MushiProvider({ children, ...config }) {
         inset: config.widget?.inset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MushiBottomSheet, { visible: sheetVisible, onClose: close })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      MushiBottomSheet,
+      {
+        visible: sheetVisible,
+        onClose: close,
+        screenshotDataUrl: sheetScreenshot ?? void 0,
+        onClearScreenshot: () => setSheetScreenshot(null)
+      }
+    )
   ] });
 }
 function useMushiContext() {

package/dist/index.d.cts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, FC, ReactElement } from 'react';
-import { MushiRewardsConfig, MushiTierResult, MushiReputationResult } from '@mushi-mushi/core';
+import { MushiRewardsConfig, MushiReporterReport, MushiReporterComment, MushiHallOfFameEntry, MushiTierResult, MushiReputationResult } from '@mushi-mushi/core';
+export { MushiHallOfFameEntry, MushiReporterComment, MushiReporterReport } from '@mushi-mushi/core';
 
 interface ConsoleEntry {
     level: 'log' | 'warn' | 'error';
@@ -69,15 +70,18 @@ interface MushiRNConfig {
     };
     rewards?: MushiRewardsConfig;
 }
+
 interface MushiRNInstance {
     open(): void;
     close(): void;
     attachTo(): {
         onPress: () => void;
     };
+    /** screenshotDataUrl is optional — pass `undefined` if not captured or removed by the user. */
     submitReport(data: {
         description: string;
         category: string;
+        screenshotDataUrl?: string;
     }): Promise<void>;
     getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
     getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
@@ -97,6 +101,14 @@ interface MushiRNInstance {
         route?: string;
         feature?: string;
     }): void;
+    /** List this device's reports ordered by most recent. Returns [] on failure. */
+    listMyReports(): Promise<MushiReporterReport[]>;
+    /** List admin + reporter comments on a specific report. */
+    listMyComments(reportId: string): Promise<MushiReporterComment[]>;
+    /** Post a reporter reply on a report thread. Returns the new comment or null on failure. */
+    replyToReport(reportId: string, body: string): Promise<MushiReporterComment | null>;
+    /** Fetch the project's top contributors by points (max 50). */
+    getHallOfFame(limit?: number): Promise<MushiHallOfFameEntry[]>;
     /** Manually record a host-defined activity event. */
     recordActivity(action: string, metadata?: Record<string, unknown>): void;
     /** Returns the current user's tier. */
@@ -153,6 +165,10 @@ declare function useMushiWidget(): {
 interface MushiBottomSheetProps {
     visible: boolean;
     onClose: () => void;
+    /** Base64 data-URI of the screenshot captured before the sheet opened. Optional. */
+    screenshotDataUrl?: string;
+    /** Called when the user removes the attached screenshot. */
+    onClearScreenshot?: () => void;
 }
 declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, FC, ReactElement } from 'react';
-import { MushiRewardsConfig, MushiTierResult, MushiReputationResult } from '@mushi-mushi/core';
+import { MushiRewardsConfig, MushiReporterReport, MushiReporterComment, MushiHallOfFameEntry, MushiTierResult, MushiReputationResult } from '@mushi-mushi/core';
+export { MushiHallOfFameEntry, MushiReporterComment, MushiReporterReport } from '@mushi-mushi/core';
 
 interface ConsoleEntry {
     level: 'log' | 'warn' | 'error';
@@ -69,15 +70,18 @@ interface MushiRNConfig {
     };
     rewards?: MushiRewardsConfig;
 }
+
 interface MushiRNInstance {
     open(): void;
     close(): void;
     attachTo(): {
         onPress: () => void;
     };
+    /** screenshotDataUrl is optional — pass `undefined` if not captured or removed by the user. */
     submitReport(data: {
         description: string;
         category: string;
+        screenshotDataUrl?: string;
     }): Promise<void>;
     getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
     getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
@@ -97,6 +101,14 @@ interface MushiRNInstance {
         route?: string;
         feature?: string;
     }): void;
+    /** List this device's reports ordered by most recent. Returns [] on failure. */
+    listMyReports(): Promise<MushiReporterReport[]>;
+    /** List admin + reporter comments on a specific report. */
+    listMyComments(reportId: string): Promise<MushiReporterComment[]>;
+    /** Post a reporter reply on a report thread. Returns the new comment or null on failure. */
+    replyToReport(reportId: string, body: string): Promise<MushiReporterComment | null>;
+    /** Fetch the project's top contributors by points (max 50). */
+    getHallOfFame(limit?: number): Promise<MushiHallOfFameEntry[]>;
     /** Manually record a host-defined activity event. */
     recordActivity(action: string, metadata?: Record<string, unknown>): void;
     /** Returns the current user's tier. */
@@ -153,6 +165,10 @@ declare function useMushiWidget(): {
 interface MushiBottomSheetProps {
     visible: boolean;
     onClose: () => void;
+    /** Base64 data-URI of the screenshot captured before the sheet opened. Optional. */
+    screenshotDataUrl?: string;
+    /** Called when the user removes the attached screenshot. */
+    onClearScreenshot?: () => void;
 }
 declare const MushiBottomSheet: FC<MushiBottomSheetProps>;
 

package/dist/index.js

@@ -17,7 +17,8 @@ import {
 } from "react";
 import {
   createApiClient,
-  DEFAULT_API_ENDPOINT
+  DEFAULT_API_ENDPOINT,
+  newUuid
 } from "@mushi-mushi/core";
 
 // src/capture/console-capture.ts
@@ -288,6 +289,7 @@ import {
   View,
   Text,
   TextInput,
+  Image,
   TouchableOpacity,
   Animated,
   PanResponder,
@@ -308,7 +310,12 @@ var CATEGORIES = [
   { key: "confusing", emoji: "\u{1F615}", label: "Confusing" },
   { key: "other", emoji: "\u{1F4AC}", label: "Other" }
 ];
-var MushiBottomSheet = ({ visible, onClose }) => {
+var MushiBottomSheet = ({
+  visible,
+  onClose,
+  screenshotDataUrl,
+  onClearScreenshot
+}) => {
   const mushi = useMushiContext();
   const scheme = useColorScheme();
   const dark = scheme === "dark";
@@ -317,6 +324,10 @@ var MushiBottomSheet = ({ visible, onClose }) => {
   const [category, setCategory] = useState(null);
   const [description, setDescription] = useState("");
   const [phase, setPhase] = useState("form");
+  const [screenshotAttached, setScreenshotAttached] = useState(true);
+  useEffect(() => {
+    if (visible) setScreenshotAttached(true);
+  }, [visible]);
   const resetForm = useCallback(() => {
     setCategory(null);
     setDescription("");
@@ -388,13 +399,18 @@ var MushiBottomSheet = ({ visible, onClose }) => {
     if (!category || !description.trim() || !mushi) return;
     setPhase("sending");
     try {
-      await mushi.submitReport({ category, description: description.trim() });
+      await mushi.submitReport({
+        category,
+        description: description.trim(),
+        screenshotDataUrl: screenshotDataUrl && screenshotAttached ? screenshotDataUrl : void 0
+      });
       setPhase("sent");
       setTimeout(handleClose, 1400);
     } catch {
       setPhase("form");
     }
   };
+  const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
   const colors = dark ? { bg: "#1c1c1e", text: "#f2f2f7", sub: "#8e8e93", card: "#2c2c2e", accent: "#0a84ff", border: "#38383a", backdrop: "rgba(0,0,0,0.6)" } : { bg: "#ffffff", text: "#1c1c1e", sub: "#8e8e93", card: "#f2f2f7", accent: "#007aff", border: "#e5e5ea", backdrop: "rgba(0,0,0,0.35)" };
   const canSubmit = !!category && description.trim().length > 0 && phase === "form";
   return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
@@ -475,6 +491,32 @@ var MushiBottomSheet = ({ visible, onClose }) => {
                     editable: phase === "form"
                   }
                 ),
+                activeScreenshot ? /* @__PURE__ */ jsxs(View, { style: s.screenshotRow, children: [
+                  /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      source: { uri: activeScreenshot },
+                      style: s.screenshotThumb,
+                      accessibilityLabel: "Attached screenshot"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(View, { style: s.screenshotMeta, children: [
+                    /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: "Screenshot attached" }),
+                    /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: "Helps the team see the issue" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    TouchableOpacity,
+                    {
+                      onPress: () => {
+                        setScreenshotAttached(false);
+                        onClearScreenshot?.();
+                      },
+                      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+                      accessibilityLabel: "Remove screenshot",
+                      children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
+                    }
+                  )
+                ] }) : null,
                 /* @__PURE__ */ jsx(
                   TouchableOpacity,
                   {
@@ -587,6 +629,39 @@ var s = StyleSheet.create({
   sentText: {
     fontSize: 20,
     fontWeight: "600"
+  },
+  screenshotRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginBottom: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: "rgba(128,128,128,0.1)"
+  },
+  screenshotThumb: {
+    width: 48,
+    height: 36,
+    borderRadius: 4,
+    backgroundColor: "#000",
+    flexShrink: 0
+  },
+  screenshotMeta: {
+    flex: 1,
+    gap: 2
+  },
+  screenshotLabel: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  screenshotSub: {
+    fontSize: 11
+  },
+  screenshotRemove: {
+    fontSize: 16,
+    fontWeight: "700",
+    paddingHorizontal: 4
   }
 });
 
@@ -678,6 +753,15 @@ function MushiProvider({ children, ...config }) {
   const queueRef = useRef3(null);
   const apiClientRef = useRef3(null);
   const [sheetVisible, setSheetVisible] = useState2(false);
+  const [sheetScreenshot, setSheetScreenshot] = useState2(null);
+  const reporterTokenRef = useRef3(`rn-${config.projectId}-anon`);
+  let resolveReporterTokenReady = () => {
+  };
+  const reporterTokenReadyRef = useRef3(
+    new Promise((resolve) => {
+      resolveReporterTokenReady = resolve;
+    })
+  );
   if (config.endpoint !== void 0 && config.endpoint.trim() === "") {
     throw new Error(
       "[MushiProvider] endpoint is set to an empty string. Set endpoint to your Supabase edge function URL, e.g. https://xyz.supabase.co/functions/v1/api, or omit it to use the cloud default."
@@ -703,6 +787,27 @@ function MushiProvider({ children, ...config }) {
     });
     queueRef.current.flush().catch(() => {
     });
+    (async () => {
+      const TOKEN_KEY = "@mushi:reporter_token";
+      try {
+        const AsyncStorage = (await import("@react-native-async-storage/async-storage")).default;
+        const existing = await AsyncStorage.getItem(TOKEN_KEY);
+        if (existing && existing.startsWith("mushi_")) {
+          reporterTokenRef.current = existing;
+        } else {
+          const fresh = `mushi_${newUuid()}`;
+          reporterTokenRef.current = fresh;
+          await AsyncStorage.setItem(TOKEN_KEY, fresh);
+        }
+        resolveReporterTokenReady();
+      } catch {
+        if (reporterTokenRef.current === `rn-${config.projectId}-anon`) {
+          reporterTokenRef.current = `mushi_${newUuid()}`;
+        }
+        resolveReporterTokenReady();
+      }
+    })().catch(() => {
+    });
     return () => {
       consoleRef.current?.restore();
       networkRef.current?.restore();
@@ -722,7 +827,25 @@ function MushiProvider({ children, ...config }) {
     }
     return () => unsubscribe?.();
   }, []);
-  const open = useCallback3(() => setSheetVisible(true), []);
+  const open = useCallback3(() => {
+    let vshot = null;
+    try {
+      vshot = __require("react-native-view-shot");
+    } catch {
+    }
+    if (!vshot) {
+      setSheetScreenshot(null);
+      setSheetVisible(true);
+      return;
+    }
+    vshot.captureScreen({ format: "jpg", quality: 0.7, result: "data-uri" }).then((url) => {
+      setSheetScreenshot(url);
+    }).catch(() => {
+      setSheetScreenshot(null);
+    }).finally(() => {
+      setSheetVisible(true);
+    });
+  }, []);
   const close = useCallback3(() => setSheetVisible(false), []);
   const attachTo = useCallback3(() => ({ onPress: open }), [open]);
   useEffect2(() => {
@@ -756,8 +879,16 @@ function MushiProvider({ children, ...config }) {
   const submitReport = useCallback3(
     async (data) => {
       const deviceInfo = getDeviceInfo();
+      const contextMeta = {};
+      if (userRef.current?.id) contextMeta.userId = userRef.current.id;
+      if (userRef.current?.email) contextMeta.userEmail = userRef.current.email;
+      if (userRef.current?.name) contextMeta.userName = userRef.current.name;
+      if (screenRef.current?.name) contextMeta.screenName = screenRef.current.name;
+      if (screenRef.current?.route) contextMeta.screenRoute = screenRef.current.route;
+      if (screenRef.current?.feature) contextMeta.screenFeature = screenRef.current.feature;
+      const merged = Object.keys(metadataRef.current).length > 0 ? { ...contextMeta, ...metadataRef.current } : Object.keys(contextMeta).length > 0 ? contextMeta : void 0;
       const report = {
-        id: `rn-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        id: newUuid(),
         projectId: config.projectId,
         category: data.category,
         description: data.description,
@@ -766,7 +897,7 @@ function MushiProvider({ children, ...config }) {
           platform: deviceInfo.platform ?? "mobile",
           language: deviceInfo.locale ?? "en",
           viewport: { width: deviceInfo.screenWidth ?? 0, height: deviceInfo.screenHeight ?? 0 },
-          url: "",
+          url: screenRef.current?.route ?? "",
           referrer: "",
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           timezone: deviceInfo.timezone ?? "UTC"
@@ -776,7 +907,9 @@ function MushiProvider({ children, ...config }) {
           ...entry,
           status: entry.status ?? 0
         })) ?? [],
-        reporterToken: `rn-${config.projectId}-anon`,
+        screenshotDataUrl: data.screenshotDataUrl,
+        metadata: merged,
+        reporterToken: reporterTokenRef.current,
         createdAt: (/* @__PURE__ */ new Date()).toISOString()
       };
       const client = apiClientRef.current;
@@ -786,7 +919,7 @@ function MushiProvider({ children, ...config }) {
         await queueRef.current?.enqueue(report);
       }
     },
-    [config.projectId, config.apiKey, apiEndpoint]
+    [config.projectId, apiEndpoint]
   );
   const userRef = useRef3(null);
   const metadataRef = useRef3({});
@@ -837,6 +970,33 @@ function MushiProvider({ children, ...config }) {
       setScreen(screen) {
         screenRef.current = screen;
       },
+      // Reporter API — scoped to the device's persistent reporter token
+      async listMyReports() {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        await reporterTokenReadyRef.current;
+        const res = await client.listReporterReports(reporterTokenRef.current);
+        return res.ok ? res.data?.reports ?? [] : [];
+      },
+      async listMyComments(reportId) {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        const res = await client.listReporterComments(reportId, reporterTokenRef.current);
+        return res.ok ? res.data.comments ?? [] : [];
+      },
+      async replyToReport(reportId, body) {
+        const client = apiClientRef.current;
+        if (!client) return null;
+        const res = await client.replyToReporterReport(reportId, reporterTokenRef.current, body);
+        return res.ok ? res.data.comment : null;
+      },
+      // Leaderboard — SDK-public anonymized hall-of-fame
+      async getHallOfFame(limit = 10) {
+        const client = apiClientRef.current;
+        if (!client) return [];
+        const res = await client.getHallOfFame(limit);
+        return res.ok ? res.data.data ?? [] : [];
+      },
       // Rewards (P1)
       recordActivity(action, metadata) {
         if (!config.rewards?.enabled) return;
@@ -878,7 +1038,15 @@ function MushiProvider({ children, ...config }) {
         inset: config.widget?.inset
       }
     ),
-    /* @__PURE__ */ jsx3(MushiBottomSheet, { visible: sheetVisible, onClose: close })
+    /* @__PURE__ */ jsx3(
+      MushiBottomSheet,
+      {
+        visible: sheetVisible,
+        onClose: close,
+        screenshotDataUrl: sheetScreenshot ?? void 0,
+        onClearScreenshot: () => setSheetScreenshot(null)
+      }
+    )
   ] });
 }
 function useMushiContext() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mushi-mushi/react-native",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "MIT",
   "description": "React Native SDK for Mushi Mushi — shake-to-report, bottom sheet widget, full context capture",
   "main": "./dist/index.js",
@@ -12,7 +12,8 @@
     "@react-navigation/native": ">=6",
     "expo-sensors": ">=13",
     "react": ">=18",
-    "react-native": ">=0.72"
+    "react-native": ">=0.72",
+    "react-native-view-shot": ">=3.8"
   },
   "peerDependenciesMeta": {
     "@react-navigation/native": {
@@ -26,10 +27,13 @@
     },
     "@react-native-community/netinfo": {
       "optional": true
+    },
+    "react-native-view-shot": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@mushi-mushi/core": "^1.5.0"
+    "@mushi-mushi/core": "^1.10.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",