@mushi-mushi/react-native 0.21.0 → 0.23.0

package/dist/index.js

@@ -15,11 +15,12 @@ import {
   useCallback as useCallback4,
   useMemo
 } from "react";
+import { AppState, Platform as Platform5 } from "react-native";
 import {
   createApiClient,
   createBreadcrumbBuffer,
   DEFAULT_API_ENDPOINT,
-  newUuid,
+  newUuid as newUuid2,
   parseIdentityToken,
   scrubPii as scrubPii3
 } from "@mushi-mushi/core";
@@ -475,41 +476,105 @@ import {
   useColorScheme
 } from "react-native";
 import {
-  mushiPalette,
-  MUSHI_BANNER_NEON,
   MUSHI_COPY,
-  MUSHI_CONTROL_DISABLED,
   MUSHI_INVERSE,
-  MUSHI_RADIUS,
+  MUSHI_RADIUS as MUSHI_RADIUS2,
   MUSHI_SHADOW_INK,
   MUSHI_SPACING,
   MUSHI_TYPE
 } from "@mushi-mushi/core";
+import { reporterCopy, reporterStatus, resolveReporterLocale } from "@mushi-mushi/core/reporter-ui";
 import { getLocale } from "@mushi-mushi/web/i18n";
 
-// src/reporter-status.ts
-function reporterStatusShort(status) {
-  switch (status) {
-    case "new":
-    case "queued":
-    case "pending":
-    case "submitted":
-      return "Received";
-    case "classified":
-    case "triaged":
-    case "grouped":
-    case "dispatched":
-      return "In review";
-    case "fixing":
-      return "Fixing";
-    case "fixed":
-    case "resolved":
-    case "completed":
-      return "Fixed";
-    case "dismissed":
-      return "Closed";
-    default:
-      return status.replace(/_/g, " ").slice(0, 16);
+// src/theme.ts
+import { mushiPalette, MUSHI_CONTROL_DISABLED, MUSHI_RADIUS } from "@mushi-mushi/core";
+function hexToRgb(hex) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})([0-9a-f]{2})?$/i.exec(hex.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].split("").map((c) => c + c).join("") : m[1];
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function luminance([r, g, b]) {
+  const lin = (c) => {
+    const s4 = c / 255;
+    return s4 <= 0.03928 ? s4 / 12.92 : ((s4 + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrastingText(bg, fallback) {
+  const rgb = hexToRgb(bg);
+  if (!rgb) return fallback;
+  const l = luminance(rgb);
+  return 1.05 / (l + 0.05) >= (l + 0.05) / 0.05 ? "#FFFFFF" : "#000000";
+}
+function resolveRNTheme(dark, override = {}) {
+  const pal = mushiPalette(dark ? "dark" : "light");
+  const base = {
+    bg: dark ? pal.paper : pal.paperRaised,
+    fg: pal.ink,
+    muted: pal.inkMuted,
+    surface: dark ? pal.paperRaised : pal.paper,
+    border: pal.ruleStrong,
+    accent: pal.ink,
+    accentFg: dark ? pal.paper : pal.paperRaised,
+    success: pal.ok,
+    error: pal.danger,
+    fontFamily: void 0,
+    radius: MUSHI_RADIUS.card
+  };
+  const defined = Object.fromEntries(
+    Object.entries(override).filter(([, v]) => v !== void 0 && v !== null && v !== "")
+  );
+  const merged = { ...base, ...defined };
+  if (defined.accent && !defined.accentFg) merged.accentFg = contrastingText(defined.accent, base.accentFg);
+  return {
+    ...merged,
+    backdrop: dark ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.35)",
+    disabled: dark ? MUSHI_CONTROL_DISABLED.dark : MUSHI_CONTROL_DISABLED.light,
+    disabledFg: pal.inkFaint
+  };
+}
+
+// src/reporter-thread.ts
+var THREAD_LOAD_TIMEOUT_MS = 12e3;
+function settleWithin(p, ms) {
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(null), ms);
+    p.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      () => {
+        clearTimeout(timer);
+        resolve(null);
+      }
+    );
+  });
+}
+function loadReporterThread(load, reportId, timeoutMs = THREAD_LOAD_TIMEOUT_MS) {
+  let started;
+  try {
+    started = load(reportId);
+  } catch {
+    return Promise.resolve(null);
+  }
+  return settleWithin(started, timeoutMs);
+}
+async function markReporterReportRead(client, reporterToken, reportId) {
+  try {
+    const res = await client.listNotifications(reporterToken, { limit: 100 });
+    if (!res.ok) return 0;
+    const rows = res.data?.notifications ?? [];
+    const ids = rows.filter((n) => !n.read_at && n.payload?.reportId === reportId).map((n) => String(n.id));
+    let marked = 0;
+    for (const id of ids) {
+      const r = await client.markNotificationRead(id, reporterToken);
+      if (r.ok) marked++;
+    }
+    return marked;
+  } catch {
+    return 0;
   }
 }
 
@@ -518,6 +583,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { height: SCREEN_HEIGHT } = Dimensions2.get("window");
 var SHEET_HEIGHT = SCREEN_HEIGHT * 0.55;
 var DISMISS_THRESHOLD = 80;
+var MIN_DESCRIPTION = 20;
 var CATEGORY_KEYS = ["bug", "slow", "visual", "confusing", "other"];
 var CATEGORY_EMOJI = {
   bug: "\u{1F41B}",
@@ -526,7 +592,6 @@ var CATEGORY_EMOJI = {
   confusing: "\u{1F615}",
   other: "\u{1F4AC}"
 };
-var VERIFIABLE_STATUSES = /* @__PURE__ */ new Set(["fixed", "resolved", "verified"]);
 var MushiBottomSheet = ({
   visible,
   onClose,
@@ -538,10 +603,15 @@ var MushiBottomSheet = ({
   assistantLabel = MUSHI_COPY.assistantTab,
   assistantGreeting,
   assistantSuggestions = [],
-  inboxPollIntervalMs = 0
+  inboxPollIntervalMs = 0,
+  theme
 }) => {
   const mushi = useMushiContext();
   const t = getLocale();
+  const locale = resolveReporterLocale(
+    typeof navigator !== "undefined" ? navigator.language : void 0
+  );
+  const rc = reporterCopy(locale);
   const greeting = assistantGreeting ?? t.assistant.defaultGreeting;
   const scheme = useColorScheme();
   const dark = scheme === "dark";
@@ -553,26 +623,37 @@ var MushiBottomSheet = ({
   const [submitError, setSubmitError] = useState(null);
   const [sheetTab, setSheetTab] = useState("report");
   const [inboxReports, setInboxReports] = useState([]);
+  const [inboxLoaded, setInboxLoaded] = useState(false);
   const [inboxLoading, setInboxLoading] = useState(false);
   const [selectedReportId, setSelectedReportId] = useState(null);
+  const selectedRef = useRef(null);
   const [threadComments, setThreadComments] = useState([]);
+  const [threadStatus, setThreadStatus] = useState("idle");
   const [replyText, setReplyText] = useState("");
+  const [replyState, setReplyState] = useState("idle");
+  const [feedbackSending, setFeedbackSending] = useState(false);
+  const [feedbackError, setFeedbackError] = useState(false);
   const [assistantInput, setAssistantInput] = useState("");
   const [assistantThreadId, setAssistantThreadId] = useState(null);
   const [assistantSending, setAssistantSending] = useState(false);
   const [assistantError, setAssistantError] = useState(null);
   const [assistantTurns, setAssistantTurns] = useState([]);
   const [screenshotAttached, setScreenshotAttached] = useState(true);
-  const loadInbox = useCallback(async () => {
-    if (!mushi?.listMyReports) return;
-    setInboxLoading(true);
-    try {
-      const rows = await mushi.listMyReports();
-      setInboxReports(rows);
-    } finally {
-      setInboxLoading(false);
-    }
-  }, [mushi]);
+  const loadInbox = useCallback(
+    async (opts = {}) => {
+      if (!mushi?.listMyReports) return;
+      if (!opts.silent) setInboxLoading(true);
+      try {
+        const rows = await mushi.listMyReports();
+        setInboxReports(rows.filter((r) => !reporterStatus(r, locale).hidden));
+        setInboxLoaded(true);
+      } catch {
+      } finally {
+        if (!opts.silent) setInboxLoading(false);
+      }
+    },
+    [mushi, locale]
+  );
   useEffect(() => {
     if (visible) {
       setScreenshotAttached(true);
@@ -583,28 +664,87 @@ var MushiBottomSheet = ({
   useEffect(() => {
     if (!visible || sheetTab !== "inbox" || inboxPollIntervalMs <= 0) return;
     const timer = setInterval(() => {
-      void loadInbox();
+      void loadInbox({ silent: true });
     }, inboxPollIntervalMs);
     return () => clearInterval(timer);
   }, [visible, sheetTab, inboxPollIntervalMs, loadInbox]);
-  const openThread = useCallback(async (reportId) => {
-    setSelectedReportId(reportId);
-    if (!mushi?.listMyComments) return;
-    const comments = await mushi.listMyComments(reportId);
-    setThreadComments(comments);
-  }, [mushi]);
+  const openThread = useCallback(
+    async (reportId, opts = {}) => {
+      selectedRef.current = reportId;
+      setSelectedReportId(reportId);
+      if (!opts.silent) {
+        setThreadComments([]);
+        setThreadStatus("loading");
+        setReplyState("idle");
+        setFeedbackError(false);
+      }
+      const load = mushi?.loadMyThread ?? mushi?.listMyComments;
+      const comments = load ? await loadReporterThread(load, reportId) : null;
+      if (selectedRef.current !== reportId) return;
+      if (comments === null) {
+        setThreadStatus((prev) => opts.silent && prev === "ready" ? "ready" : "error");
+        return;
+      }
+      setThreadComments(comments);
+      setThreadStatus("ready");
+      if (!opts.silent && mushi?.markReportRead) {
+        mushi.markReportRead(reportId).then((marked) => {
+          if (marked > 0) {
+            setInboxReports((rows) => rows.map((r) => r.id === reportId ? { ...r, unread_count: 0 } : r));
+          }
+        }).catch(() => void 0);
+      }
+    },
+    [mushi]
+  );
+  const closeThread = useCallback(() => {
+    selectedRef.current = null;
+    setSelectedReportId(null);
+    setThreadStatus("idle");
+  }, []);
   const sendReply = useCallback(async () => {
-    if (!mushi?.replyToReport || !selectedReportId || !replyText.trim()) return;
-    await mushi.replyToReport(selectedReportId, replyText.trim());
-    setReplyText("");
-    await openThread(selectedReportId);
-  }, [mushi, selectedReportId, replyText, openThread]);
-  const submitFeedback = useCallback(async (signal) => {
-    if (!mushi?.submitFeedbackSignal || !selectedReportId) return;
-    await mushi.submitFeedbackSignal(selectedReportId, signal);
-    await loadInbox();
-    await openThread(selectedReportId);
-  }, [mushi, selectedReportId, loadInbox, openThread]);
+    const body = replyText.trim();
+    const reportId = selectedReportId;
+    if (!mushi?.replyToReport || !reportId || !body || replyState === "sending") return;
+    setReplyState("sending");
+    try {
+      const comment = await settleWithin(mushi.replyToReport(reportId, body), THREAD_LOAD_TIMEOUT_MS);
+      if (!comment) {
+        setReplyState("failed");
+        return;
+      }
+      setReplyText("");
+      setReplyState("idle");
+      if (selectedRef.current === reportId) {
+        setThreadComments((prev) => [...prev, comment]);
+        void openThread(reportId, { silent: true });
+      }
+    } catch {
+      setReplyState("failed");
+    }
+  }, [mushi, selectedReportId, replyText, replyState, openThread]);
+  const submitFeedback = useCallback(
+    async (signal) => {
+      const reportId = selectedReportId;
+      if (!mushi?.submitFeedbackSignal || !reportId || feedbackSending) return;
+      setFeedbackSending(true);
+      setFeedbackError(false);
+      try {
+        const outcome = await mushi.submitFeedbackSignal(reportId, signal);
+        if (!outcome) {
+          setFeedbackError(true);
+          return;
+        }
+        await loadInbox({ silent: true });
+        await openThread(reportId, { silent: true });
+      } catch {
+        setFeedbackError(true);
+      } finally {
+        setFeedbackSending(false);
+      }
+    },
+    [mushi, selectedReportId, feedbackSending, loadInbox, openThread]
+  );
   const sendAssistant = useCallback(async (message) => {
     if (!mushi?.askAssistant || !message.trim() || assistantSending) return;
     const trimmed = message.trim();
@@ -700,7 +840,7 @@ var MushiBottomSheet = ({
   const handleSubmit = async () => {
     if (!category || !description.trim() || !mushi) return;
     const trimmed = description.trim();
-    if (trimmed.length < 20) {
+    if (trimmed.length < MIN_DESCRIPTION) {
       setSubmitError("Please write at least 20 characters so we can understand the issue.");
       return;
     }
@@ -735,11 +875,181 @@ var MushiBottomSheet = ({
     }
   };
   const activeScreenshot = screenshotDataUrl && screenshotAttached ? screenshotDataUrl : null;
-  const pal = mushiPalette(dark ? "dark" : "light");
-  const colors = dark ? { bg: pal.paper, text: pal.ink, sub: pal.inkMuted, card: pal.paperRaised, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.6)", disabled: MUSHI_CONTROL_DISABLED.dark, disabledText: pal.inkFaint } : { bg: pal.paperRaised, text: pal.ink, sub: pal.inkMuted, card: pal.paper, accent: MUSHI_BANNER_NEON.bg, accentInk: MUSHI_BANNER_NEON.fg, border: pal.ruleStrong, backdrop: "rgba(0,0,0,0.35)", disabled: MUSHI_CONTROL_DISABLED.light, disabledText: pal.inkFaint };
+  const colors = resolveRNTheme(dark, theme);
+  const font = colors.fontFamily ? { fontFamily: colors.fontFamily } : null;
+  const radius = colors.radius;
   const sheetTabs = ["report", "inbox", ...assistantEnabled ? ["assistant"] : []];
-  const canSubmit = !!category && description.trim().length >= 20 && (phase === "form" || phase === "error");
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, children: /* @__PURE__ */ jsxs(
+  const canSubmit = !!category && description.trim().length >= MIN_DESCRIPTION && (phase === "form" || phase === "error");
+  const submitHint = canSubmit || phase === "sending" ? void 0 : !category ? t.step1.heading : rc.ui.addWords;
+  const selectedReport = selectedReportId ? inboxReports.find((r) => r.id === selectedReportId) ?? null : null;
+  const selectedView = selectedReport ? reporterStatus(selectedReport, locale) : null;
+  const headerTitle = sheetTab === "assistant" ? assistantLabel : sheetTab === "inbox" ? t.flows.reports.title : t.widget.title;
+  const renderThread = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        onPress: closeThread,
+        accessibilityRole: "button",
+        accessibilityLabel: t.widget.back,
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+        children: /* @__PURE__ */ jsxs(Text, { style: [{ color: colors.accent, marginBottom: 8 }, font], children: [
+          "\u2190 ",
+          t.widget.back
+        ] })
+      }
+    ),
+    selectedReport && selectedView ? /* @__PURE__ */ jsxs(View, { style: [s.headerCard, { backgroundColor: colors.surface, borderRadius: radius, borderColor: colors.border }], children: [
+      /* @__PURE__ */ jsx(Text, { style: [s.pill, { color: colors.fg, borderColor: colors.border }, font], children: selectedView.label }),
+      /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, fontSize: 12, marginTop: 4 }, font], children: selectedView.detail }),
+      /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg, marginTop: 8 }, font], numberOfLines: 4, children: selectedReport.title ?? selectedReport.summary ?? selectedReport.description ?? "" })
+    ] }) : null,
+    threadStatus === "loading" ? /* @__PURE__ */ jsx(View, { accessibilityLabel: t.flows.reports.loading, accessibilityLiveRegion: "polite", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(View, { style: [s.skeleton, { backgroundColor: colors.surface, width: `${90 - i * 18}%` }] }, i)) }) : threadStatus === "error" ? /* @__PURE__ */ jsxs(View, { style: s.errorRow, accessibilityLiveRegion: "polite", children: [
+      /* @__PURE__ */ jsx(Text, { style: [{ color: colors.error, flex: 1 }, font], accessibilityRole: "alert", children: rc.ui.loadError }),
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          onPress: () => selectedReportId && void openThread(selectedReportId),
+          accessibilityRole: "button",
+          style: [s.retryBtn, { borderColor: colors.border, borderRadius: radius }],
+          children: /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg, fontWeight: "600" }, font], children: rc.ui.retry })
+        }
+      )
+    ] }) : threadComments.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, marginBottom: 8 }, font], children: rc.ui.noReplies }) : threadComments.map((c) => /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          s.threadBubble,
+          {
+            backgroundColor: colors.surface,
+            alignSelf: c.author_kind === "reporter" ? "flex-end" : "flex-start"
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, fontSize: 11 }, font], children: c.author_kind === "reporter" ? rc.ui.you : rc.ui.developer }),
+          /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg }, font], children: c.body })
+        ]
+      },
+      c.id
+    )),
+    replyState === "sending" ? /* @__PURE__ */ jsxs(View, { style: [s.threadBubble, { backgroundColor: colors.surface, alignSelf: "flex-end", opacity: 0.7 }], children: [
+      /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, fontSize: 11 }, font], children: rc.ui.sending }),
+      /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg }, font], children: replyText.trim() })
+    ] }) : null,
+    selectedView?.canVerify ? /* @__PURE__ */ jsxs(View, { style: s.verifyRow, children: [
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          style: [s.verifyBtn, { backgroundColor: colors.accent, borderRadius: radius }],
+          onPress: () => void submitFeedback("confirms"),
+          disabled: feedbackSending,
+          accessibilityRole: "button",
+          accessibilityState: { disabled: feedbackSending, busy: feedbackSending },
+          children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentFg }, font], children: rc.ui.yes })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          style: [s.verifyBtn, { backgroundColor: colors.border, borderRadius: radius }],
+          onPress: () => void submitFeedback("not_fixed"),
+          disabled: feedbackSending,
+          accessibilityRole: "button",
+          accessibilityState: { disabled: feedbackSending, busy: feedbackSending },
+          children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.fg }, font], children: rc.ui.notYet })
+        }
+      )
+    ] }) : null,
+    feedbackError ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.error, marginBottom: 8 }, font], accessibilityRole: "alert", children: rc.ui.sendFailed }) : null,
+    /* @__PURE__ */ jsxs(View, { style: s.composer, children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          style: [
+            s.input,
+            s.composerInput,
+            { backgroundColor: colors.surface, color: colors.fg, borderColor: colors.border, borderRadius: radius },
+            font
+          ],
+          placeholder: t.flows.thread.replyPlaceholder,
+          placeholderTextColor: colors.muted,
+          value: replyText,
+          onChangeText: (text) => {
+            setReplyText(text.slice(0, 2e3));
+            if (replyState === "failed") setReplyState("idle");
+          },
+          multiline: true,
+          maxLength: 2e3,
+          editable: replyState !== "sending",
+          accessibilityLabel: t.flows.thread.replyPlaceholder
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          style: [
+            s.sendBtn,
+            {
+              backgroundColor: replyText.trim() && replyState !== "sending" ? colors.accent : colors.disabled,
+              borderRadius: radius
+            }
+          ],
+          onPress: () => void sendReply(),
+          disabled: !replyText.trim() || replyState === "sending",
+          accessibilityRole: "button",
+          accessibilityLabel: replyState === "failed" ? rc.ui.retry : t.flows.thread.send,
+          accessibilityState: { disabled: !replyText.trim() || replyState === "sending", busy: replyState === "sending" },
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                s.submitText,
+                { color: replyText.trim() && replyState !== "sending" ? colors.accentFg : colors.disabledFg },
+                font
+              ],
+              children: replyState === "failed" ? rc.ui.retry : t.flows.thread.send
+            }
+          )
+        }
+      )
+    ] }),
+    replyState === "failed" ? /* @__PURE__ */ jsxs(Text, { style: [{ color: colors.error, marginTop: 6, fontSize: 12 }, font], accessibilityRole: "alert", children: [
+      rc.ui.sendFailed,
+      " \xB7 ",
+      rc.ui.retry
+    ] }) : null
+  ] });
+  const renderInboxList = () => {
+    if (inboxLoading && !inboxLoaded) {
+      return /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted }, font], children: t.flows.reports.loading });
+    }
+    if (inboxReports.length === 0) {
+      return /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted }, font], children: rc.ui.empty });
+    }
+    return inboxReports.map((r) => {
+      const view = reporterStatus(r, locale);
+      const unread = (r.unread_count ?? 0) > 0;
+      const title = (r.title ?? r.summary ?? r.description ?? "Report").slice(0, 80);
+      return /* @__PURE__ */ jsxs(
+        TouchableOpacity,
+        {
+          style: [s.inboxRow, { borderColor: colors.border }],
+          onPress: () => void openThread(r.id),
+          accessibilityRole: "button",
+          accessibilityLabel: `${view.label}. ${title}${unread ? `. ${r.unread_count} new` : ""}`,
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg, fontWeight: unread ? "700" : "600" }, font], numberOfLines: 1, children: title }),
+            /* @__PURE__ */ jsxs(Text, { style: [{ color: unread ? colors.fg : colors.muted, fontSize: 12, marginTop: 2 }, font], numberOfLines: 1, children: [
+              view.label,
+              view.othersNote ? ` \xB7 ${view.othersNote}` : ""
+            ] }),
+            unread && r.last_event_preview ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg, fontSize: 12, fontWeight: "700", marginTop: 2 }, font], numberOfLines: 1, children: r.last_event_preview }) : null
+          ]
+        },
+        r.id
+      );
+    });
+  };
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: handleClose, children: /* @__PURE__ */ jsxs(
     KeyboardAvoidingView,
     {
       style: s.flex,
@@ -750,44 +1060,69 @@ var MushiBottomSheet = ({
           Animated.View,
           {
             style: [s.backdrop, { backgroundColor: colors.backdrop, opacity: backdropOpacity }],
-            children: /* @__PURE__ */ jsx(TouchableOpacity, { style: s.flex, activeOpacity: 1, onPress: handleClose })
+            children: /* @__PURE__ */ jsx(
+              TouchableOpacity,
+              {
+                style: s.flex,
+                activeOpacity: 1,
+                onPress: handleClose,
+                accessibilityRole: "button",
+                accessibilityLabel: t.widget.close
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
           Animated.View,
           {
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: handleClose,
             style: [
               s.sheet,
               { backgroundColor: colors.bg, transform: [{ translateY }] }
             ],
             children: [
-              /* @__PURE__ */ jsx(View, { ...panResponder.panHandlers, style: s.handleArea, children: /* @__PURE__ */ jsx(View, { style: [s.handle, { backgroundColor: colors.sub }] }) }),
-              /* @__PURE__ */ jsxs(View, { style: [s.brandHeader, { backgroundColor: MUSHI_BANNER_NEON.bg, borderBottomColor: MUSHI_BANNER_NEON.border }], children: [
-                /* @__PURE__ */ jsx(Text, { style: [s.brandEyebrow, { color: MUSHI_BANNER_NEON.fg }], children: "MUSHI \xB7 BETA" }),
-                /* @__PURE__ */ jsx(Text, { style: [s.brandTitle, { color: MUSHI_BANNER_NEON.fg }], children: sheetTab === "assistant" ? assistantLabel : sheetTab === "inbox" ? t.flows.reports.title : t.widget.title })
-              ] }),
-              /* @__PURE__ */ jsx(View, { style: [s.tabRow, { borderBottomColor: colors.border }], children: sheetTabs.map((tab) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  ...panResponder.panHandlers,
+                  style: s.handleArea,
+                  accessible: true,
+                  accessibilityRole: "adjustable",
+                  accessibilityLabel: t.widget.close,
+                  accessibilityActions: [{ name: "decrement", label: t.widget.close }, { name: "escape" }],
+                  onAccessibilityAction: (e) => {
+                    if (e.nativeEvent.actionName === "decrement" || e.nativeEvent.actionName === "escape") handleClose();
+                  },
+                  children: /* @__PURE__ */ jsx(View, { style: [s.handle, { backgroundColor: colors.muted }] })
+                }
+              ),
+              /* @__PURE__ */ jsx(View, { style: [s.header, { borderBottomColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [s.headerTitle, { color: colors.fg }, font], children: headerTitle }) }),
+              /* @__PURE__ */ jsx(View, { style: [s.tabRow, { borderBottomColor: colors.border }], accessibilityRole: "tablist", children: sheetTabs.map((tab) => /* @__PURE__ */ jsx(
                 TouchableOpacity,
                 {
                   onPress: () => {
                     setSheetTab(tab);
-                    if (tab === "inbox") void loadInbox();
-                    else setSelectedReportId(null);
+                    if (tab === "inbox") void loadInbox({ silent: inboxLoaded });
+                    else closeThread();
                   },
                   style: [s.tabBtn, sheetTab === tab && { borderBottomColor: colors.accent }],
-                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.text : colors.sub }], children: tab === "report" ? t.widget.trigger : tab === "inbox" ? t.flows.reports.title : assistantLabel })
+                  accessibilityRole: "tab",
+                  accessibilityState: { selected: sheetTab === tab },
+                  children: /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, { color: sheetTab === tab ? colors.fg : colors.muted }, font], children: tab === "report" ? t.widget.trigger : tab === "inbox" ? t.flows.reports.title : assistantLabel })
                 },
                 tab
               )) }),
               sheetTab === "assistant" ? /* @__PURE__ */ jsxs(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: [
                 assistantTurns.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, marginBottom: 12, lineHeight: 20 }, children: greeting }),
+                  /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, marginBottom: 12, lineHeight: 20 }, font], children: greeting }),
                   assistantSuggestions.map((chip) => /* @__PURE__ */ jsx(
                     TouchableOpacity,
                     {
-                      style: [s.assistantChip, { borderColor: colors.border, backgroundColor: colors.card }],
+                      style: [s.assistantChip, { borderColor: colors.border, backgroundColor: colors.surface }],
                       onPress: () => void sendAssistant(chip),
-                      children: /* @__PURE__ */ jsx(Text, { style: { color: colors.text, fontSize: 13 }, children: chip })
+                      accessibilityRole: "button",
+                      children: /* @__PURE__ */ jsx(Text, { style: [{ color: colors.fg, fontSize: 13 }, font], children: chip })
                     },
                     chip
                   ))
@@ -798,25 +1133,34 @@ var MushiBottomSheet = ({
                       s.assistantBubble,
                       {
                         alignSelf: turn.role === "user" ? "flex-end" : "flex-start",
-                        backgroundColor: turn.role === "user" ? colors.accent : colors.card
+                        backgroundColor: turn.role === "user" ? colors.accent : colors.surface
                       }
                     ],
                     children: [
-                      /* @__PURE__ */ jsx(Text, { style: { color: turn.role === "user" ? colors.accentInk : colors.text }, children: turn.text }),
-                      turn.options?.map((opt) => /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => void sendAssistant(opt), style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, fontSize: 12 }, children: opt }) }, opt))
+                      /* @__PURE__ */ jsx(Text, { style: [{ color: turn.role === "user" ? colors.accentFg : colors.fg }, font], children: turn.text }),
+                      turn.options?.map((opt) => /* @__PURE__ */ jsx(
+                        TouchableOpacity,
+                        {
+                          onPress: () => void sendAssistant(opt),
+                          style: { marginTop: 8 },
+                          accessibilityRole: "button",
+                          children: /* @__PURE__ */ jsx(Text, { style: [{ color: colors.accent, fontSize: 12 }, font], children: opt })
+                        },
+                        opt
+                      ))
                     ]
                   },
                   `${turn.role}-${idx}`
                 )),
-                assistantSending ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, marginTop: 8 }, accessibilityLiveRegion: "polite", children: t.assistant.thinking }) : null,
-                assistantError ? /* @__PURE__ */ jsx(Text, { style: { color: pal.danger, marginTop: 8 }, accessibilityRole: "alert", children: assistantError }) : null,
+                assistantSending ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, marginTop: 8 }, font], accessibilityLiveRegion: "polite", children: t.assistant.thinking }) : null,
+                assistantError ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.error, marginTop: 8 }, font], accessibilityRole: "alert", children: assistantError }) : null,
                 /* @__PURE__ */ jsxs(View, { style: s.assistantComposer, children: [
                   /* @__PURE__ */ jsx(
                     TextInput,
                     {
-                      style: [s.input, { flex: 1, minHeight: 44, backgroundColor: colors.card, color: colors.text, borderColor: colors.border }],
+                      style: [s.input, { flex: 1, minHeight: 44, backgroundColor: colors.surface, color: colors.fg, borderColor: colors.border, borderRadius: radius }, font],
                       placeholder: t.assistant.inputPlaceholder,
-                      placeholderTextColor: colors.sub,
+                      placeholderTextColor: colors.muted,
                       value: assistantInput,
                       onChangeText: setAssistantInput,
                       editable: !assistantSending
@@ -825,45 +1169,19 @@ var MushiBottomSheet = ({
                   /* @__PURE__ */ jsx(
                     TouchableOpacity,
                     {
-                      style: [s.submitBtn, { backgroundColor: colors.accent, paddingHorizontal: 16 }],
+                      style: [s.submitBtn, { backgroundColor: colors.accent, paddingHorizontal: 16, borderRadius: radius }],
                       onPress: () => void sendAssistant(assistantInput),
                       disabled: !assistantInput.trim() || assistantSending,
-                      children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: "\u2191" })
+                      accessibilityRole: "button",
+                      accessibilityLabel: t.flows.thread.send,
+                      accessibilityState: { disabled: !assistantInput.trim() || assistantSending, busy: assistantSending },
+                      children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentFg }], children: "\u2191" })
                     }
                   )
                 ] })
-              ] }) : sheetTab === "inbox" ? /* @__PURE__ */ jsx(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", children: inboxLoading ? /* @__PURE__ */ jsx(Text, { style: { color: colors.sub }, children: t.flows.reports.loading }) : selectedReportId ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => setSelectedReportId(null), children: /* @__PURE__ */ jsxs(Text, { style: { color: colors.accent, marginBottom: 8 }, children: [
-                  "\u2190 ",
-                  t.widget.back
-                ] }) }),
-                threadComments.map((c) => /* @__PURE__ */ jsxs(View, { style: [s.threadBubble, { backgroundColor: colors.card }], children: [
-                  /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: c.author_kind }),
-                  /* @__PURE__ */ jsx(Text, { style: { color: colors.text }, children: c.body })
-                ] }, c.id)),
-                VERIFIABLE_STATUSES.has(
-                  inboxReports.find((r) => r.id === selectedReportId)?.status ?? ""
-                ) && /* @__PURE__ */ jsxs(View, { style: s.verifyRow, children: [
-                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.accent }], onPress: () => submitFeedback("confirms"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: t.flows.thread.confirmFixed }) }),
-                  /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.verifyBtn, { backgroundColor: colors.border }], onPress: () => submitFeedback("not_fixed"), children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.text }], children: t.flows.thread.notFixed }) })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    style: [s.input, { backgroundColor: colors.card, color: colors.text, borderColor: colors.border, minHeight: 48 }],
-                    placeholder: t.flows.thread.replyPlaceholder,
-                    placeholderTextColor: colors.sub,
-                    value: replyText,
-                    onChangeText: setReplyText
-                  }
-                ),
-                /* @__PURE__ */ jsx(TouchableOpacity, { style: [s.submitBtn, { backgroundColor: colors.accent }], onPress: sendReply, children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: colors.accentInk }], children: t.flows.thread.send }) })
-              ] }) : inboxReports.map((r) => /* @__PURE__ */ jsxs(TouchableOpacity, { style: [s.inboxRow, { borderColor: colors.border }], onPress: () => openThread(r.id), children: [
-                /* @__PURE__ */ jsx(Text, { style: { color: colors.text, fontWeight: "600" }, numberOfLines: 1, children: (r.summary ?? r.description ?? "Report").slice(0, 60) }),
-                /* @__PURE__ */ jsx(Text, { style: { color: colors.sub, fontSize: 11 }, children: reporterStatusShort(r.status) })
-              ] }, r.id)) }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, children: [
+              ] }) : sheetTab === "inbox" ? /* @__PURE__ */ jsx(ScrollView, { style: s.body, keyboardShouldPersistTaps: "handled", contentContainerStyle: { paddingBottom: 24 }, children: selectedReportId ? renderThread() : renderInboxList() }) : phase === "sent" ? /* @__PURE__ */ jsxs(View, { style: s.sentWrap, accessibilityLiveRegion: "polite", children: [
                 /* @__PURE__ */ jsx(Text, { style: [s.sentEmoji], children: "\u2705" }),
-                /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.text }], children: t.widget.submitted })
+                /* @__PURE__ */ jsx(Text, { style: [s.sentText, { color: colors.fg }, font], children: t.widget.submitted })
               ] }) : /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
@@ -871,29 +1189,34 @@ var MushiBottomSheet = ({
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: { paddingBottom: 24 },
                   children: [
-                    /* @__PURE__ */ jsx(Text, { style: [s.stepLabel, { color: colors.sub }], children: t.step1.heading }),
-                    /* @__PURE__ */ jsx(View, { style: s.catRow, children: CATEGORY_KEYS.map((key) => {
+                    /* @__PURE__ */ jsx(Text, { style: [s.stepLabel, { color: colors.muted }, font], children: t.step1.heading }),
+                    /* @__PURE__ */ jsx(View, { style: s.catRow, accessibilityRole: "radiogroup", children: CATEGORY_KEYS.map((key) => {
                       const active = category === key;
                       return /* @__PURE__ */ jsxs(
                         TouchableOpacity,
                         {
                           onPress: () => setCategory(key),
                           activeOpacity: 0.7,
+                          accessibilityRole: "radio",
+                          accessibilityState: { selected: active, checked: active },
+                          accessibilityLabel: t.step1.categories[key],
                           style: [
                             s.catBtn,
                             {
-                              backgroundColor: active ? colors.accent : colors.card,
+                              backgroundColor: active ? colors.accent : colors.surface,
                               borderColor: active ? colors.accent : colors.border
                             }
                           ],
                           children: [
-                            /* @__PURE__ */ jsx(Text, { style: s.catEmoji, children: CATEGORY_EMOJI[key] }),
+                            /* @__PURE__ */ jsx(Text, { style: s.catEmoji, importantForAccessibility: "no", children: CATEGORY_EMOJI[key] }),
                             /* @__PURE__ */ jsx(
                               Text,
                               {
+                                numberOfLines: 1,
                                 style: [
                                   s.catLabel,
-                                  { color: active ? colors.accentInk : colors.text }
+                                  { color: active ? colors.accentFg : colors.fg },
+                                  font
                                 ],
                                 children: t.step1.categories[key]
                               }
@@ -909,13 +1232,16 @@ var MushiBottomSheet = ({
                         style: [
                           s.input,
                           {
-                            backgroundColor: colors.card,
-                            color: colors.text,
-                            borderColor: colors.border
-                          }
+                            backgroundColor: colors.surface,
+                            color: colors.fg,
+                            borderColor: colors.border,
+                            borderRadius: radius
+                          },
+                          font
                         ],
                         placeholder: t.step3.descriptionPlaceholder,
-                        placeholderTextColor: colors.sub,
+                        placeholderTextColor: colors.muted,
+                        accessibilityLabel: t.step3.descriptionPlaceholder,
                         multiline: true,
                         textAlignVertical: "top",
                         value: description,
@@ -928,19 +1254,19 @@ var MushiBottomSheet = ({
                         maxLength: 4e3
                       }
                     ),
-                    submitError ? /* @__PURE__ */ jsx(Text, { style: { color: colors.accent, marginTop: 6, fontSize: 12 }, children: submitError }) : null,
+                    submitError ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.error, marginTop: 6, fontSize: 12 }, font], accessibilityRole: "alert", children: submitError }) : null,
                     activeScreenshot ? /* @__PURE__ */ jsxs(View, { style: s.screenshotRow, children: [
                       /* @__PURE__ */ jsx(
                         Image,
                         {
                           source: { uri: activeScreenshot },
-                          style: [s.screenshotThumb, { backgroundColor: colors.text }],
+                          style: [s.screenshotThumb, { backgroundColor: colors.fg }],
                           accessibilityLabel: t.step3.screenshotPreviewAlt
                         }
                       ),
                       /* @__PURE__ */ jsxs(View, { style: s.screenshotMeta, children: [
-                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.text }], children: t.step3.screenshotAttached.replace(" \u2713", "") }),
-                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.sub }], children: screenshotSensitiveHint && screenshotSensitiveHint.trim() ? `\u26A0 ${screenshotSensitiveHint}` : t.step3.screenshotSensitiveHint.split("\u2014")[0]?.trim() ?? t.step3.screenshotSensitiveHint })
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotLabel, { color: colors.fg }, font], children: t.step3.screenshotAttached.replace(" \u2713", "") }),
+                        /* @__PURE__ */ jsx(Text, { style: [s.screenshotSub, { color: colors.muted }, font], children: screenshotSensitiveHint && screenshotSensitiveHint.trim() ? `\u26A0 ${screenshotSensitiveHint}` : t.step3.screenshotSensitiveHint.split("\u2014")[0]?.trim() ?? t.step3.screenshotSensitiveHint })
                       ] }),
                       /* @__PURE__ */ jsx(
                         TouchableOpacity,
@@ -950,22 +1276,28 @@ var MushiBottomSheet = ({
                             onClearScreenshot?.();
                           },
                           hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+                          accessibilityRole: "button",
                           accessibilityLabel: t.widget.close,
-                          children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.sub }], children: "\u2715" })
+                          children: /* @__PURE__ */ jsx(Text, { style: [s.screenshotRemove, { color: colors.muted }], children: "\u2715" })
                         }
                       )
                     ] }) : null,
+                    submitHint ? /* @__PURE__ */ jsx(Text, { style: [{ color: colors.muted, fontSize: 12, marginBottom: 6 }, font], children: submitHint }) : null,
                     /* @__PURE__ */ jsx(
                       TouchableOpacity,
                       {
                         onPress: handleSubmit,
                         disabled: !canSubmit,
                         activeOpacity: 0.8,
+                        accessibilityRole: "button",
+                        accessibilityLabel: phase === "sending" ? t.widget.submitting : t.widget.submit,
+                        accessibilityHint: submitHint,
+                        accessibilityState: { disabled: !canSubmit, busy: phase === "sending" },
                         style: [
                           s.submitBtn,
-                          { backgroundColor: canSubmit ? colors.accent : colors.disabled }
+                          { backgroundColor: canSubmit ? colors.accent : colors.disabled, borderRadius: radius }
                         ],
-                        children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: canSubmit ? colors.accentInk : colors.disabledText }], children: phase === "sending" ? t.widget.submitting : t.widget.submit })
+                        children: /* @__PURE__ */ jsx(Text, { style: [s.submitText, { color: canSubmit ? colors.accentFg : colors.disabledFg }, font], children: phase === "sending" ? t.widget.submitting : t.widget.submit })
                       }
                     )
                   ]
@@ -995,8 +1327,8 @@ var s = StyleSheet.create({
     left: 0,
     right: 0,
     minHeight: SHEET_HEIGHT,
-    borderTopLeftRadius: MUSHI_RADIUS.sheet,
-    borderTopRightRadius: MUSHI_RADIUS.sheet,
+    borderTopLeftRadius: MUSHI_RADIUS2.sheet,
+    borderTopRightRadius: MUSHI_RADIUS2.sheet,
     paddingBottom: Platform2.OS === "ios" ? 34 : MUSHI_SPACING.roomy,
     shadowColor: MUSHI_SHADOW_INK,
     shadowOffset: { width: 0, height: -3 },
@@ -1011,36 +1343,22 @@ var s = StyleSheet.create({
   handle: {
     width: 40,
     height: 5,
-    borderRadius: MUSHI_RADIUS.control,
+    borderRadius: MUSHI_RADIUS2.control,
     opacity: 0.5
   },
-  brandHeader: {
+  header: {
     paddingHorizontal: MUSHI_SPACING.lounge,
-    paddingTop: MUSHI_SPACING.comfy,
-    paddingBottom: MUSHI_SPACING.comfy,
-    borderBottomWidth: 1.5
+    paddingBottom: MUSHI_SPACING.comfy
   },
-  brandEyebrow: {
-    fontSize: MUSHI_TYPE.sizeLabel,
-    fontWeight: "700",
-    letterSpacing: 1.2,
-    marginBottom: 2,
-    opacity: 0.7
-  },
-  brandTitle: {
+  headerTitle: {
     fontSize: 18,
-    fontWeight: "800",
+    fontWeight: "700",
     letterSpacing: -0.2
   },
   body: {
     paddingHorizontal: MUSHI_SPACING.lounge,
     paddingTop: MUSHI_SPACING.tight
   },
-  title: {
-    fontSize: 20,
-    fontWeight: "700",
-    marginBottom: MUSHI_SPACING.roomy
-  },
   stepLabel: {
     fontSize: MUSHI_TYPE.sizeLabel,
     fontWeight: "600",
@@ -1051,37 +1369,35 @@ var s = StyleSheet.create({
   },
   catRow: {
     flexDirection: "row",
-    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 8,
     marginBottom: MUSHI_SPACING.roomy
   },
   catBtn: {
+    flexDirection: "row",
     alignItems: "center",
-    paddingVertical: MUSHI_SPACING.comfy,
-    paddingHorizontal: 6,
-    borderRadius: MUSHI_RADIUS.card,
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 999,
     borderWidth: 1,
-    flex: 1,
-    marginHorizontal: 3,
     minHeight: 44
   },
   catEmoji: {
-    fontSize: 22,
-    marginBottom: MUSHI_SPACING.tight
+    fontSize: 16
   },
   catLabel: {
-    fontSize: MUSHI_TYPE.sizeLabel,
+    fontSize: 14,
     fontWeight: "600"
   },
   input: {
     borderWidth: 1,
-    borderRadius: MUSHI_RADIUS.card,
     padding: 14,
     fontSize: 15,
     minHeight: 100,
     marginBottom: MUSHI_SPACING.roomy
   },
   submitBtn: {
-    borderRadius: MUSHI_RADIUS.card,
     paddingVertical: 14,
     alignItems: "center",
     minHeight: 44
@@ -1146,7 +1462,8 @@ var s = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 10,
     borderBottomWidth: 2,
-    borderBottomColor: "transparent"
+    borderBottomColor: "transparent",
+    minHeight: 44
   },
   tabLabel: {
     fontSize: 14,
@@ -1154,12 +1471,47 @@ var s = StyleSheet.create({
   },
   inboxRow: {
     paddingVertical: 12,
+    minHeight: 56,
     borderBottomWidth: StyleSheet.hairlineWidth
   },
+  headerCard: {
+    borderWidth: StyleSheet.hairlineWidth,
+    padding: 12,
+    marginBottom: 12
+  },
+  pill: {
+    alignSelf: "flex-start",
+    borderWidth: 1,
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    fontSize: 12,
+    fontWeight: "600",
+    overflow: "hidden"
+  },
+  skeleton: {
+    height: 14,
+    borderRadius: 6,
+    marginBottom: 10
+  },
+  errorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 12
+  },
+  retryBtn: {
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 44,
+    justifyContent: "center"
+  },
   threadBubble: {
     borderRadius: 10,
     padding: 10,
-    marginBottom: 8
+    marginBottom: 8,
+    maxWidth: "88%"
   },
   verifyRow: {
     flexDirection: "row",
@@ -1168,9 +1520,26 @@ var s = StyleSheet.create({
   },
   verifyBtn: {
     flex: 1,
-    borderRadius: 10,
     paddingVertical: 10,
-    alignItems: "center"
+    alignItems: "center",
+    minHeight: 44
+  },
+  composer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 8
+  },
+  composerInput: {
+    flex: 1,
+    minHeight: 44,
+    maxHeight: 120,
+    marginBottom: 0
+  },
+  sendBtn: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    minHeight: 44,
+    justifyContent: "center"
   },
   assistantBubble: {
     maxWidth: "88%",
@@ -1400,7 +1769,7 @@ import {
   StyleSheet as StyleSheet3,
   Platform as Platform4
 } from "react-native";
-import { MUSHI_BANNER_NEON as MUSHI_BANNER_NEON2, MUSHI_COPY as MUSHI_COPY3, MUSHI_GEOMETRY as MUSHI_GEOMETRY2, MUSHI_SPACING as MUSHI_SPACING2, MUSHI_TYPE as MUSHI_TYPE2, MUSHI_Z } from "@mushi-mushi/core";
+import { MUSHI_BANNER_NEON, MUSHI_COPY as MUSHI_COPY3, MUSHI_GEOMETRY as MUSHI_GEOMETRY2, MUSHI_SPACING as MUSHI_SPACING2, MUSHI_TYPE as MUSHI_TYPE2, MUSHI_Z } from "@mushi-mushi/core";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MUSHI_BANNER_DEFAULT_HEIGHT = MUSHI_GEOMETRY2.bannerHeight;
 var MushiBanner = ({
@@ -1453,9 +1822,9 @@ var s3 = StyleSheet3.create({
     minHeight: MUSHI_GEOMETRY2.bannerHeight,
     flexDirection: "row",
     alignItems: "stretch",
-    backgroundColor: MUSHI_BANNER_NEON2.bg,
+    backgroundColor: MUSHI_BANNER_NEON.bg,
     borderTopWidth: 1,
-    borderTopColor: MUSHI_BANNER_NEON2.border,
+    borderTopColor: MUSHI_BANNER_NEON.border,
     zIndex: MUSHI_Z.banner,
     elevation: 8,
     paddingBottom: Platform4.OS === "ios" ? 0 : 0
@@ -1473,18 +1842,18 @@ var s3 = StyleSheet3.create({
     fontSize: MUSHI_TYPE2.sizeLabel,
     fontWeight: "700",
     letterSpacing: 1.2,
-    color: MUSHI_BANNER_NEON2.fg
+    color: MUSHI_BANNER_NEON.fg
   },
   message: {
     flex: 1,
     fontSize: 12,
     fontWeight: "500",
-    color: MUSHI_BANNER_NEON2.fg
+    color: MUSHI_BANNER_NEON.fg
   },
   cta: {
     fontSize: 12,
     fontWeight: "700",
-    color: MUSHI_BANNER_NEON2.fg,
+    color: MUSHI_BANNER_NEON.fg,
     textDecorationLine: "underline"
   },
   dismiss: {
@@ -1494,18 +1863,346 @@ var s3 = StyleSheet3.create({
   dismissText: {
     fontSize: 20,
     lineHeight: 22,
-    color: MUSHI_BANNER_NEON2.fg,
+    color: MUSHI_BANNER_NEON.fg,
     opacity: 0.7
   }
 });
 
+// src/analytics/event-tracker.ts
+import {
+  EVENT_PROPERTY_LIMITS,
+  isValidEventName,
+  propertiesWithinByteLimit,
+  sanitizeEventProperties
+} from "@mushi-mushi/core";
+var CONSENT_BUFFER_MAX = 50;
+var SPILL_MAX = 200;
+var SPILL_TTL_MS = 24 * 60 * 60 * 1e3;
+var SURFACE = "mobile";
+async function defaultStorage() {
+  try {
+    const mod = await import("@react-native-async-storage/async-storage");
+    return mod.default;
+  } catch {
+    return null;
+  }
+}
+function createRNEventTracker(opts) {
+  const cfg = opts.config ?? {};
+  const enabled = cfg.enabled !== false;
+  const consentMode = cfg.consent ?? "implied";
+  const allowlist = cfg.propertyAllowlist ?? [];
+  const spillKey = `@mushi:events_spill_${opts.projectId}`;
+  const consentKey = `@mushi:analytics_consent_${opts.projectId}`;
+  let buffer = [];
+  let consentBuffer = [];
+  let consent = consentMode === "required" ? "pending" : "granted";
+  let userId = null;
+  let userTraits = null;
+  let pendingIdentify = false;
+  let flushing = false;
+  let destroyed = false;
+  let timer = null;
+  let storage = null;
+  const consentListeners = /* @__PURE__ */ new Set();
+  const loadStorage = opts.storage ?? defaultStorage;
+  const resolveClient = () => typeof opts.client === "function" ? opts.client() : opts.client;
+  async function readSpill() {
+    if (!storage) return [];
+    try {
+      const raw = await storage.getItem(spillKey);
+      if (!raw) return [];
+      const parsed = JSON.parse(raw);
+      if (!parsed || Date.now() - parsed.at > SPILL_TTL_MS) {
+        await storage.removeItem(spillKey);
+        return [];
+      }
+      return Array.isArray(parsed.events) ? parsed.events.slice(0, SPILL_MAX) : [];
+    } catch {
+      return [];
+    }
+  }
+  async function writeSpill(events) {
+    if (!storage) return;
+    try {
+      if (events.length === 0) await storage.removeItem(spillKey);
+      else await storage.setItem(spillKey, JSON.stringify({ at: Date.now(), events: events.slice(-SPILL_MAX) }));
+    } catch {
+    }
+  }
+  async function flushNow() {
+    if (destroyed && buffer.length === 0) return;
+    await ready;
+    if (flushing || consent !== "granted") return;
+    if (buffer.length === 0 && !pendingIdentify) return;
+    const client = resolveClient();
+    if (!client) return;
+    flushing = true;
+    const batch = buffer.splice(0, EVENT_PROPERTY_LIMITS.maxServerBatch);
+    if (pendingIdentify) {
+      batch.unshift({ name: "identify", ts: (/* @__PURE__ */ new Date()).toISOString(), properties: {} });
+      pendingIdentify = false;
+    }
+    try {
+      const anonId = await Promise.resolve(opts.getAnonId());
+      const payload = {
+        anon_id: anonId,
+        user_id: userId ?? opts.getUserId?.() ?? null,
+        user_traits: userTraits ?? opts.getUserTraits?.() ?? null,
+        session_id: null,
+        sdk_version: opts.sdkVersion ?? null,
+        surface: SURFACE,
+        events: batch
+      };
+      const res = await client.postProductEvents(payload);
+      if (!res.ok) await writeSpill([...await readSpill(), ...batch.filter((e) => e.name !== "identify")]);
+      else await writeSpill([]);
+    } catch {
+      await writeSpill([...await readSpill(), ...batch.filter((e) => e.name !== "identify")]);
+    } finally {
+      flushing = false;
+    }
+    if (buffer.length >= EVENT_PROPERTY_LIMITS.maxClientBatch) void flushNow();
+  }
+  function enqueue(ev) {
+    if (consent === "denied") return;
+    if (consent === "pending") {
+      if (consentBuffer.length < CONSENT_BUFFER_MAX) consentBuffer.push(ev);
+      return;
+    }
+    buffer.push(ev);
+    if (buffer.length >= EVENT_PROPERTY_LIMITS.maxClientBatch) void flushNow();
+  }
+  const ready = enabled ? (async () => {
+    storage = await loadStorage();
+    if (destroyed) return;
+    let stored = null;
+    try {
+      stored = storage ? await storage.getItem(consentKey) : null;
+    } catch {
+      stored = null;
+    }
+    if (stored === "denied") {
+      consent = "denied";
+      buffer = [];
+      consentBuffer = [];
+      pendingIdentify = false;
+      await writeSpill([]);
+      return;
+    }
+    if (stored === "granted" && consent === "pending") {
+      consent = "granted";
+      buffer.push(...consentBuffer);
+      consentBuffer = [];
+    }
+    const spill = await readSpill();
+    if (spill.length > 0) {
+      buffer.unshift(...spill);
+      await writeSpill([]);
+    }
+  })().catch(() => void 0) : Promise.resolve();
+  if (enabled) {
+    const interval = Math.max(1e3, cfg.flushIntervalMs ?? 5e3);
+    timer = setInterval(() => {
+      void flushNow();
+    }, interval);
+  }
+  return {
+    ready,
+    track(name, properties, trackOpts) {
+      if (!enabled || destroyed) return false;
+      if (!isValidEventName(name)) return false;
+      const { properties: props } = sanitizeEventProperties(properties, { allowlist, scrub: opts.scrub });
+      let merged = props;
+      if (trackOpts?.reserved) {
+        const { properties: res } = sanitizeEventProperties(trackOpts.reserved, { allowReserved: true, scrub: opts.scrub });
+        merged = { ...props, ...res };
+      }
+      merged.$surface = SURFACE;
+      const route = opts.getRoute?.();
+      if (route && merged.$route === void 0) merged.$route = route;
+      if (!propertiesWithinByteLimit(merged)) return false;
+      enqueue({
+        name,
+        ts: (/* @__PURE__ */ new Date()).toISOString(),
+        properties: merged,
+        ...trackOpts?.dedupKey ? { dedup_key: trackOpts.dedupKey } : {}
+      });
+      return true;
+    },
+    setConsent(state) {
+      void ready.then(() => storage?.setItem(consentKey, state)).catch(() => void 0);
+      if (state === "denied") {
+        consent = "denied";
+        buffer = [];
+        consentBuffer = [];
+        pendingIdentify = false;
+        void writeSpill([]);
+      } else {
+        const wasPending = consent === "pending";
+        consent = "granted";
+        if (wasPending && consentBuffer.length > 0) {
+          buffer.push(...consentBuffer);
+          consentBuffer = [];
+        }
+        if (buffer.length > 0 || pendingIdentify) void flushNow();
+      }
+      for (const listener of [...consentListeners]) {
+        try {
+          listener(state);
+        } catch {
+        }
+      }
+    },
+    setIdentity(id, traits) {
+      userId = id;
+      userTraits = traits ?? null;
+      if (id && enabled && consent !== "denied") {
+        pendingIdentify = true;
+        void flushNow();
+      }
+    },
+    consentState() {
+      return enabled ? consent : "denied";
+    },
+    onConsentChange(listener) {
+      consentListeners.add(listener);
+      return () => {
+        consentListeners.delete(listener);
+      };
+    },
+    async flush() {
+      await ready;
+      await flushNow();
+    },
+    async destroy() {
+      if (timer != null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      await flushNow().catch(() => void 0);
+      destroyed = true;
+      buffer = [];
+      consentBuffer = [];
+      pendingIdentify = false;
+    }
+  };
+}
+
+// src/analytics/session-tracker.ts
+import { newUuid } from "@mushi-mushi/core";
+var HEARTBEAT_INTERVAL_MS = 6e4;
+var RESUME_WINDOW_MS = 30 * 6e4;
+function createRNSessionTracker(opts) {
+  const clock = opts.now ?? Date.now;
+  const resolveClient = () => typeof opts.client === "function" ? opts.client() : opts.client;
+  let sessionId = opts.sessionId ?? `sess_${newUuid()}`;
+  let pageViewCount = 0;
+  let started = false;
+  let allowed = false;
+  let foreground = true;
+  let destroyed = false;
+  let backgroundedAt = null;
+  let heartbeat = null;
+  function route() {
+    return opts.getRoute?.() ?? null;
+  }
+  function send(kind, extra) {
+    const client = resolveClient();
+    if (!client || !allowed || destroyed) return;
+    const base = {
+      kind,
+      session_id: sessionId,
+      ts: new Date(clock()).toISOString(),
+      page_view_count: pageViewCount,
+      user_agent: opts.userAgent ?? null,
+      sdk_version: opts.sdkVersion
+    };
+    void Promise.resolve(opts.getReporterToken()).then((token) => client.postSessionEvent({ ...base, reporter_token_hash: token, ...extra })).catch(() => void 0);
+  }
+  function stopHeartbeat() {
+    if (heartbeat != null) {
+      clearInterval(heartbeat);
+      heartbeat = null;
+    }
+  }
+  function startHeartbeat() {
+    stopHeartbeat();
+    heartbeat = setInterval(() => send("session_heartbeat", { route: route() }), HEARTBEAT_INTERVAL_MS);
+  }
+  function startSession() {
+    started = true;
+    pageViewCount = 1;
+    send("session_start", { route: route() });
+    startHeartbeat();
+  }
+  function activate() {
+    if (allowed || destroyed) return;
+    allowed = true;
+    if (!foreground) return;
+    if (!started) startSession();
+    else startHeartbeat();
+  }
+  function deactivate() {
+    allowed = false;
+    stopHeartbeat();
+  }
+  const unsubscribe = opts.consent.onConsentChange(() => {
+    if (opts.consent.consentState() === "granted") activate();
+    else deactivate();
+  });
+  void opts.consent.ready.then(() => {
+    if (opts.consent.consentState() === "granted") activate();
+  }).catch(() => void 0);
+  return {
+    onAppStateChange(state) {
+      if (destroyed) return;
+      if (state === "active") {
+        if (foreground) return;
+        foreground = true;
+        const away = backgroundedAt == null ? 0 : clock() - backgroundedAt;
+        backgroundedAt = null;
+        if (!allowed) return;
+        if (!started || away >= RESUME_WINDOW_MS) {
+          sessionId = `sess_${newUuid()}`;
+          startSession();
+        } else {
+          send("session_heartbeat", { route: route() });
+          startHeartbeat();
+        }
+        return;
+      }
+      if (state !== "background" || !foreground) return;
+      foreground = false;
+      backgroundedAt = clock();
+      stopHeartbeat();
+      if (started) send("session_end", { route: route() });
+    },
+    pageView(next) {
+      if (!allowed || !started || !foreground) return;
+      pageViewCount += 1;
+      send("page_view", { route: next });
+    },
+    destroy() {
+      destroyed = true;
+      deactivate();
+      unsubscribe();
+    }
+  };
+}
+
 // src/version.ts
 var MUSHI_SDK_PACKAGE = "@mushi-mushi/react-native";
-var MUSHI_SDK_VERSION = "0.21.0" ? "0.21.0" : "0.17.0";
+var MUSHI_SDK_VERSION = "0.23.0" ? "0.23.0" : "0.17.0";
 
 // src/provider.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MushiContext = createContext(null);
+function nativeUserAgent() {
+  const os = Platform5?.OS ?? "native";
+  const version = Platform5?.Version;
+  return `${MUSHI_SDK_PACKAGE}/${MUSHI_SDK_VERSION} (${version != null ? `${os} ${String(version)}` : os})`;
+}
 var DEFAULT_SCREENSHOT_HINT = "Check the preview \u2014 remove it if any private info (balances, personal details) is visible.";
 function resolveScreenshotHint(v) {
   if (v === false) return null;
@@ -1548,7 +2245,7 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
   const networkRef = useRef3(null);
   const queueRef = useRef3(null);
   const apiClientRef = useRef3(null);
-  const sessionIdRef = useRef3(`sess_${newUuid()}`);
+  const sessionIdRef = useRef3(`sess_${newUuid2()}`);
   const breadcrumbsRef = useRef3(
     createBreadcrumbBuffer({ max: config.capture?.maxBreadcrumbs ?? 50 })
   );
@@ -1620,14 +2317,14 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         if (existing && existing.startsWith("mushi_")) {
           reporterTokenRef.current = existing;
         } else {
-          const fresh = `mushi_${newUuid()}`;
+          const fresh = `mushi_${newUuid2()}`;
           reporterTokenRef.current = fresh;
           await saveReporterToken(fresh, secureStorage);
         }
         resolveReporterTokenReady();
       } catch {
         if (reporterTokenRef.current === `rn-${config.projectId}-anon`) {
-          reporterTokenRef.current = `mushi_${newUuid()}`;
+          reporterTokenRef.current = `mushi_${newUuid2()}`;
         }
         resolveReporterTokenReady();
       }
@@ -1756,7 +2453,7 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
       }));
       const fingerprintHash = getDeviceFingerprintHash(deviceInfo);
       const report = {
-        id: newUuid(),
+        id: newUuid2(),
         projectId: config.projectId,
         category: data.category,
         description: scrubPii3(data.description),
@@ -1848,6 +2545,63 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
       if (rewardsFlushRef.current) clearInterval(rewardsFlushRef.current);
     };
   }, [config.rewards?.enabled, config.rewards?.trackActivity, config.rewards?.flushIntervalMs]);
+  const eventTrackerRef = useRef3(null);
+  const sessionTrackerRef = useRef3(null);
+  useEffect3(() => {
+    const getRoute = () => screenRef.current?.route ?? screenRef.current?.name ?? null;
+    const tracker = createRNEventTracker({
+      projectId: config.projectId,
+      client: () => apiClientRef.current,
+      getAnonId: async () => {
+        await reporterTokenReadyRef.current;
+        return reporterTokenRef.current;
+      },
+      getUserId: () => userRef.current?.id ?? null,
+      getRoute,
+      sdkVersion: MUSHI_SDK_VERSION,
+      config: config.analytics,
+      scrub: scrubPii3
+    });
+    eventTrackerRef.current = tracker;
+    const sessions = config.trackSessions === false ? null : createRNSessionTracker({
+      client: () => apiClientRef.current,
+      getReporterToken: async () => {
+        await reporterTokenReadyRef.current;
+        return reporterTokenRef.current;
+      },
+      getRoute,
+      consent: tracker,
+      sessionId: sessionIdRef.current,
+      sdkVersion: MUSHI_SDK_VERSION,
+      userAgent: nativeUserAgent()
+    });
+    sessionTrackerRef.current = sessions;
+    let sub;
+    try {
+      if (typeof AppState?.addEventListener === "function") {
+        sub = AppState.addEventListener("change", (state) => {
+          sessions?.onAppStateChange(state);
+          if (state !== "active") tracker.flush().catch(() => {
+          });
+        });
+      }
+    } catch {
+    }
+    return () => {
+      sub?.remove();
+      sessions?.destroy();
+      sessionTrackerRef.current = null;
+      eventTrackerRef.current = null;
+      tracker.destroy().catch(() => {
+      });
+    };
+  }, [
+    config.projectId,
+    config.analytics?.enabled,
+    config.analytics?.consent,
+    config.analytics?.flushIntervalMs,
+    config.trackSessions
+  ]);
   const instance = useMemo(
     () => ({
       open,
@@ -1865,6 +2619,7 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
           name: traits?.name,
           provider: traits?.provider
         };
+        eventTrackerRef.current?.setIdentity(userId, traits ?? null);
       },
       setUser(user) {
         userRef.current = {
@@ -1873,6 +2628,7 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
           name: user.name,
           provider: user.provider
         };
+        eventTrackerRef.current?.setIdentity(user.id, { email: user.email, name: user.name, provider: user.provider });
       },
       identifyWithToken(token) {
         userTokenRef.current = token && typeof token === "string" ? token : null;
@@ -1884,7 +2640,10 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
               ...claims.email ? { email: claims.email } : {},
               ...claims.name ? { name: claims.name } : {}
             };
+            eventTrackerRef.current?.setIdentity(claims.sub, null);
           }
+        } else {
+          eventTrackerRef.current?.setIdentity(null, null);
         }
       },
       publishPageContext(context) {
@@ -1897,6 +2656,7 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         const prev = screenRef.current?.name;
         screenRef.current = screen;
         if (screen.name && screen.name !== prev) {
+          sessionTrackerRef.current?.pageView(screen.route ?? screen.name);
           breadcrumbsRef.current.add({
             category: "navigation",
             level: "info",
@@ -1928,6 +2688,23 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         const res = await client.listReporterComments(reportId, reporterTokenRef.current);
         return res.ok ? res.data.comments ?? [] : [];
       },
+      async loadMyThread(reportId) {
+        const client = apiClientRef.current;
+        if (!client) return null;
+        try {
+          await reporterTokenReadyRef.current;
+          const res = await client.listReporterComments(reportId, reporterTokenRef.current);
+          return res.ok ? res.data?.comments ?? [] : null;
+        } catch {
+          return null;
+        }
+      },
+      async markReportRead(reportId) {
+        const client = apiClientRef.current;
+        if (!client) return 0;
+        await reporterTokenReadyRef.current;
+        return markReporterReportRead(client, reporterTokenRef.current, reportId);
+      },
       async replyToReport(reportId, body) {
         const client = apiClientRef.current;
         if (!client) return null;
@@ -1958,6 +2735,13 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         if (!config.rewards?.enabled) return;
         activityQueueRef.current.push({ action, metadata });
       },
+      // Product analytics (Users & Funnels)
+      track(event, properties) {
+        return eventTrackerRef.current?.track(event, properties) ?? false;
+      },
+      setConsent(state) {
+        eventTrackerRef.current?.setConsent(state);
+      },
       async getTier() {
         const userId = userRef.current?.id;
         const client = apiClientRef.current;
@@ -2028,7 +2812,8 @@ function MushiProvider({ children, config: configProp, ...barePropConfig }) {
         assistantLabel: config.assistant?.label,
         assistantGreeting: config.assistant?.greeting,
         assistantSuggestions: config.assistant?.suggestions,
-        inboxPollIntervalMs: config.widget?.inboxPollIntervalMs ?? 0
+        inboxPollIntervalMs: config.widget?.inboxPollIntervalMs ?? 0,
+        theme: config.widget?.theme
       }
     )
   ] });