@bbearai/react-native 0.4.1 → 0.5.1

package/dist/index.js

@@ -11653,6 +11653,7 @@ var HOSTED_BUGBEAR_ANON_KEY = getEnvVar("BUGBEAR_ANON_KEY") || getEnvVar("NEXT_P
 var BugBearClient = class {
   constructor(config) {
     this.navigationHistory = [];
+    this.reportSubmitInFlight = false;
     this.config = config;
     this.supabase = createClient(
       config.supabaseUrl || DEFAULT_SUPABASE_URL,
@@ -11713,6 +11714,10 @@ var BugBearClient = class {
    * Submit a report
    */
   async submitReport(report) {
+    if (this.reportSubmitInFlight) {
+      return { success: false, error: "A report is already being submitted" };
+    }
+    this.reportSubmitInFlight = true;
     try {
       const validationError = this.validateReport(report);
       if (validationError) {
@@ -11764,6 +11769,8 @@ var BugBearClient = class {
     } catch (err) {
       const message = err instanceof Error ? err.message : "Unknown error";
       return { success: false, error: message };
+    } finally {
+      this.reportSubmitInFlight = false;
     }
   }
   /**
@@ -11804,6 +11811,14 @@ var BugBearClient = class {
               name,
               description,
               sort_order
+            ),
+            role:project_roles(
+              id,
+              name,
+              slug,
+              color,
+              description,
+              login_hint
             )
           )
         `).eq("project_id", this.config.projectId).eq("tester_id", testerInfo.id).in("status", ["pending", "in_progress"]).order("created_at", { ascending: true }).limit(100);
@@ -11841,6 +11856,14 @@ var BugBearClient = class {
             name: item.test_case.group.name,
             description: item.test_case.group.description,
             sortOrder: item.test_case.group.sort_order
+          } : void 0,
+          role: item.test_case.role ? {
+            id: item.test_case.role.id,
+            name: item.test_case.role.name,
+            slug: item.test_case.role.slug,
+            color: item.test_case.role.color,
+            description: item.test_case.role.description,
+            loginHint: item.test_case.role.login_hint
           } : void 0
         }
       }));
@@ -12256,8 +12279,8 @@ var BugBearClient = class {
         return "Maximum 10 screenshots allowed";
       }
       for (const url of report.screenshots) {
-        if (typeof url !== "string" || url.length > 2e3) {
-          return "Invalid screenshot URL";
+        if (typeof url !== "string" || url.length > 2e3 || !/^https?:\/\//i.test(url)) {
+          return "Invalid screenshot URL (must be an HTTP/HTTPS URL)";
         }
       }
     }
@@ -12646,7 +12669,10 @@ var BugBearClient = class {
         content
       };
       if (attachments && attachments.length > 0) {
-        insertData.attachments = attachments;
+        const safeAttachments = attachments.filter((a) => /^https?:\/\//i.test(a.url));
+        if (safeAttachments.length > 0) {
+          insertData.attachments = safeAttachments;
+        }
       }
       const { error } = await this.supabase.from("discussion_messages").insert(insertData);
       if (error) {
@@ -14021,10 +14047,19 @@ var import_react_native5 = require("react-native");
 function TestListScreen({ nav }) {
   const { assignments, currentAssignment, refreshAssignments } = useBugBear();
   const [filter, setFilter] = (0, import_react5.useState)("all");
+  const [roleFilter, setRoleFilter] = (0, import_react5.useState)(null);
   const [collapsedFolders, setCollapsedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
   (0, import_react5.useEffect)(() => {
     refreshAssignments();
   }, []);
+  const availableRoles = (0, import_react5.useMemo)(() => {
+    const roleMap = /* @__PURE__ */ new Map();
+    for (const a of assignments) {
+      if (a.testCase.role) roleMap.set(a.testCase.role.id, a.testCase.role);
+    }
+    return Array.from(roleMap.values());
+  }, [assignments]);
+  const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = (0, import_react5.useMemo)(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const assignment of assignments) {
@@ -14068,16 +14103,39 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = (a) => {
+    if (roleFilter && a.testCase.role?.id !== roleFilter) return false;
     if (filter === "pending") return a.status === "pending" || a.status === "in_progress";
     if (filter === "completed") return a.status === "passed" || a.status === "failed";
     return true;
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.filterBar }, ["all", "pending", "completed"].map((f) => /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { key: f, style: [styles3.filterBtn, filter === f && styles3.filterBtnActive], onPress: () => setFilter(f) }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: [styles3.filterBtnText, filter === f && styles3.filterBtnTextActive] }, f === "all" ? `All (${assignments.length})` : f === "pending" ? `To Do (${assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length})` : `Done (${assignments.filter((a) => a.status === "passed" || a.status === "failed").length})`)))), groupedAssignments.map((folder) => {
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.filterBar }, ["all", "pending", "completed"].map((f) => /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { key: f, style: [styles3.filterBtn, filter === f && styles3.filterBtnActive], onPress: () => setFilter(f) }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: [styles3.filterBtnText, filter === f && styles3.filterBtnTextActive] }, f === "all" ? `All (${assignments.length})` : f === "pending" ? `To Do (${assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length})` : `Done (${assignments.filter((a) => a.status === "passed" || a.status === "failed").length})`)))), availableRoles.length >= 2 && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.roleSection }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles3.roleBar }, /* @__PURE__ */ import_react5.default.createElement(
+    import_react_native5.TouchableOpacity,
+    {
+      style: [styles3.roleBtn, !roleFilter && styles3.roleBtnActive],
+      onPress: () => setRoleFilter(null)
+    },
+    /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: [styles3.roleBtnText, !roleFilter && styles3.roleBtnTextActive] }, "All Roles")
+  ), availableRoles.map((role) => {
+    const isActive = roleFilter === role.id;
+    return /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native5.TouchableOpacity,
+      {
+        key: role.id,
+        style: [
+          styles3.roleBtn,
+          isActive && { backgroundColor: role.color + "20", borderColor: role.color + "60", borderWidth: 1 }
+        ],
+        onPress: () => setRoleFilter(isActive ? null : role.id)
+      },
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: [styles3.roleDot, { backgroundColor: role.color }] }),
+      /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: [styles3.roleBtnText, isActive && { color: role.color, fontWeight: "600" }] }, role.name)
+    );
+  })), selectedRole?.loginHint && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: [styles3.loginHint, { backgroundColor: selectedRole.color + "10", borderColor: selectedRole.color + "30" }] }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.loginHintText }, "Log in as: ", selectedRole.loginHint))), groupedAssignments.map((folder) => {
     const folderId = folder.group?.id || "ungrouped";
     const isCollapsed = collapsedFolders.has(folderId);
     const filtered = folder.assignments.filter(filterAssignment);
     if (filtered.length === 0 && filter !== "all") return null;
-    return /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { key: folderId, style: styles3.folder }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { style: styles3.folderHeader, onPress: () => toggleFolder(folderId) }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderToggle }, isCollapsed ? "\u25B6" : "\u25BC"), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderName }, folder.group?.name || "Ungrouped"), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.folderProgress }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: [styles3.folderProgressFill, { width: `${Math.round((folder.stats.passed + folder.stats.failed) / folder.stats.total * 100)}%` }] })), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderCount }, folder.stats.passed + folder.stats.failed, "/", folder.stats.total)), !isCollapsed && filtered.map((assignment) => {
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { key: folderId, style: styles3.folder }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { style: styles3.folderHeader, onPress: () => toggleFolder(folderId) }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderToggle }, isCollapsed ? "\u25B6" : "\u25BC"), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderName, numberOfLines: 1 }, folder.group?.name || "Ungrouped"), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.folderProgress }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: [styles3.folderProgressFill, { width: `${folder.stats.total > 0 ? Math.round((folder.stats.passed + folder.stats.failed) / folder.stats.total * 100) : 0}%` }] })), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.folderCount }, folder.stats.passed + folder.stats.failed, "/", folder.stats.total)), !isCollapsed && filtered.map((assignment) => {
       const badge = getStatusBadge(assignment.status);
       const isCurrent = currentAssignment?.id === assignment.id;
       return /* @__PURE__ */ import_react5.default.createElement(
@@ -14088,17 +14146,28 @@ function TestListScreen({ nav }) {
           onPress: () => nav.push({ name: "TEST_DETAIL", testId: assignment.id })
         },
         /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testBadge }, badge.icon),
-        /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.testInfo }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testTitle, numberOfLines: 1 }, assignment.testCase.title), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.testMetaRow }, assignment.isVerification && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.retestTag }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.retestTagText }, "Retest")), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testMeta }, assignment.testCase.key, " \xB7 ", assignment.testCase.priority)))
+        /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.testInfo }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testTitle, numberOfLines: 1 }, assignment.testCase.title), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.testMetaRow }, assignment.isVerification && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.retestTag }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.retestTagText }, "Retest")), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testMeta }, assignment.testCase.testKey, " \xB7 ", assignment.testCase.priority), assignment.testCase.role && /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: styles3.roleBadgeRow }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.testMeta }, " \xB7 "), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.View, { style: [styles3.roleBadgeDot, { backgroundColor: assignment.testCase.role.color }] }), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: [styles3.testMeta, { color: assignment.testCase.role.color, fontWeight: "500" }] }, assignment.testCase.role.name))))
       );
     }));
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { style: styles3.refreshBtn, onPress: refreshAssignments }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.refreshText }, "\u21BB Refresh")));
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_native5.TouchableOpacity, { style: styles3.refreshBtn, onPress: refreshAssignments }, /* @__PURE__ */ import_react5.default.createElement(import_react_native5.Text, { style: styles3.refreshText }, "\u21BB", " Refresh")));
 }
 var styles3 = import_react_native5.StyleSheet.create({
-  filterBar: { flexDirection: "row", gap: 8, marginBottom: 16 },
+  filterBar: { flexDirection: "row", gap: 8, marginBottom: 8 },
   filterBtn: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 8, backgroundColor: colors.card, borderWidth: 1, borderColor: colors.border },
   filterBtnActive: { backgroundColor: colors.blue, borderColor: colors.blue },
   filterBtnText: { fontSize: 12, color: colors.textSecondary },
   filterBtnTextActive: { color: "#fff", fontWeight: "600" },
+  roleSection: { marginBottom: 12 },
+  roleBar: { flexDirection: "row", marginBottom: 6 },
+  roleBtn: { flexDirection: "row", alignItems: "center", gap: 5, paddingHorizontal: 10, paddingVertical: 4, borderRadius: 6, marginRight: 6, borderWidth: 1, borderColor: "transparent" },
+  roleBtnActive: { backgroundColor: colors.card, borderColor: colors.border },
+  roleBtnText: { fontSize: 11, color: colors.textMuted },
+  roleBtnTextActive: { color: colors.textPrimary, fontWeight: "600" },
+  roleDot: { width: 6, height: 6, borderRadius: 3 },
+  loginHint: { borderRadius: 6, padding: 8, borderWidth: 1 },
+  loginHintText: { fontSize: 11, color: colors.textSecondary },
+  roleBadgeRow: { flexDirection: "row", alignItems: "center", gap: 3 },
+  roleBadgeDot: { width: 5, height: 5, borderRadius: 3 },
   folder: { marginBottom: 12 },
   folderHeader: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 8, paddingHorizontal: 4 },
   folderToggle: { fontSize: 10, color: colors.textMuted, width: 14 },
@@ -14111,7 +14180,7 @@ var styles3 = import_react_native5.StyleSheet.create({
   testBadge: { fontSize: 16, marginRight: 10, width: 20 },
   testInfo: { flex: 1 },
   testTitle: { fontSize: 14, color: colors.textPrimary, marginBottom: 2 },
-  testMetaRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  testMetaRow: { flexDirection: "row", alignItems: "center", gap: 6, flexWrap: "wrap" },
   retestTag: { backgroundColor: "#422006", borderWidth: 1, borderColor: "#854d0e", borderRadius: 4, paddingHorizontal: 5, paddingVertical: 1 },
   retestTagText: { fontSize: 10, fontWeight: "600", color: "#fbbf24" },
   testMeta: { fontSize: 11, color: colors.textDim },
@@ -14453,11 +14522,14 @@ function ReportScreen({ nav, prefill }) {
   const [affectedScreen, setAffectedScreen] = (0, import_react10.useState)("");
   const [submitting, setSubmitting] = (0, import_react10.useState)(false);
   const [error, setError] = (0, import_react10.useState)(null);
+  const submittingRef = (0, import_react10.useRef)(false);
   const images = useImageAttachments(uploadImage, 5, "screenshots");
   const isRetestFailure = prefill?.type === "test_fail";
   const isBugType = reportType === "bug" || reportType === "test_fail";
   const handleSubmit = async () => {
     if (!client || !description.trim()) return;
+    if (submittingRef.current) return;
+    submittingRef.current = true;
     setSubmitting(true);
     setError(null);
     try {
@@ -14481,17 +14553,18 @@ function ReportScreen({ nav, prefill }) {
         console.error("BugBear: Report submission failed", result.error);
         setError(result.error || "Failed to submit report. Please try again.");
         setSubmitting(false);
+        submittingRef.current = false;
         return;
       }
       if (prefill?.assignmentId) {
         await refreshAssignments();
       }
-      setSubmitting(false);
       nav.replace({ name: "REPORT_SUCCESS" });
     } catch (err) {
       console.error("BugBear: Report submission error", err);
       setError(err instanceof Error ? err.message : "An unexpected error occurred. Please try again.");
       setSubmitting(false);
+      submittingRef.current = false;
     }
   };
   return /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, null, isRetestFailure ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles7.retestBanner }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.Text, { style: styles7.retestIcon }, "\u{1F504}"), /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, null, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.Text, { style: styles7.retestTitle }, "Bug Still Present"), /* @__PURE__ */ import_react10.default.createElement(import_react_native9.Text, { style: styles7.retestSubtitle }, "The fix did not resolve this issue"))), /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles7.section }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.Text, { style: shared.label }, "Severity"), /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles7.severityRow }, [

package/dist/index.mjs

@@ -11620,6 +11620,7 @@ var HOSTED_BUGBEAR_ANON_KEY = getEnvVar("BUGBEAR_ANON_KEY") || getEnvVar("NEXT_P
 var BugBearClient = class {
   constructor(config) {
     this.navigationHistory = [];
+    this.reportSubmitInFlight = false;
     this.config = config;
     this.supabase = createClient(
       config.supabaseUrl || DEFAULT_SUPABASE_URL,
@@ -11680,6 +11681,10 @@ var BugBearClient = class {
    * Submit a report
    */
   async submitReport(report) {
+    if (this.reportSubmitInFlight) {
+      return { success: false, error: "A report is already being submitted" };
+    }
+    this.reportSubmitInFlight = true;
     try {
       const validationError = this.validateReport(report);
       if (validationError) {
@@ -11731,6 +11736,8 @@ var BugBearClient = class {
     } catch (err) {
       const message = err instanceof Error ? err.message : "Unknown error";
       return { success: false, error: message };
+    } finally {
+      this.reportSubmitInFlight = false;
     }
   }
   /**
@@ -11771,6 +11778,14 @@ var BugBearClient = class {
               name,
               description,
               sort_order
+            ),
+            role:project_roles(
+              id,
+              name,
+              slug,
+              color,
+              description,
+              login_hint
             )
           )
         `).eq("project_id", this.config.projectId).eq("tester_id", testerInfo.id).in("status", ["pending", "in_progress"]).order("created_at", { ascending: true }).limit(100);
@@ -11808,6 +11823,14 @@ var BugBearClient = class {
             name: item.test_case.group.name,
             description: item.test_case.group.description,
             sortOrder: item.test_case.group.sort_order
+          } : void 0,
+          role: item.test_case.role ? {
+            id: item.test_case.role.id,
+            name: item.test_case.role.name,
+            slug: item.test_case.role.slug,
+            color: item.test_case.role.color,
+            description: item.test_case.role.description,
+            loginHint: item.test_case.role.login_hint
           } : void 0
         }
       }));
@@ -12223,8 +12246,8 @@ var BugBearClient = class {
         return "Maximum 10 screenshots allowed";
       }
       for (const url of report.screenshots) {
-        if (typeof url !== "string" || url.length > 2e3) {
-          return "Invalid screenshot URL";
+        if (typeof url !== "string" || url.length > 2e3 || !/^https?:\/\//i.test(url)) {
+          return "Invalid screenshot URL (must be an HTTP/HTTPS URL)";
         }
       }
     }
@@ -12613,7 +12636,10 @@ var BugBearClient = class {
         content
       };
       if (attachments && attachments.length > 0) {
-        insertData.attachments = attachments;
+        const safeAttachments = attachments.filter((a) => /^https?:\/\//i.test(a.url));
+        if (safeAttachments.length > 0) {
+          insertData.attachments = safeAttachments;
+        }
       }
       const { error } = await this.supabase.from("discussion_messages").insert(insertData);
       if (error) {
@@ -13213,14 +13239,14 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
 }
 
 // src/BugBearButton.tsx
-import React14, { useState as useState10, useRef as useRef2 } from "react";
+import React14, { useState as useState10, useRef as useRef3 } from "react";
 import {
   View as View13,
   Text as Text13,
   Image as Image3,
   TouchableOpacity as TouchableOpacity12,
   Modal as Modal2,
-  ScrollView as ScrollView2,
+  ScrollView as ScrollView3,
   StyleSheet as StyleSheet14,
   Dimensions as Dimensions2,
   KeyboardAvoidingView,
@@ -13999,14 +14025,23 @@ var styles2 = StyleSheet3.create({
 
 // src/widget/screens/TestListScreen.tsx
 import React4, { useState as useState3, useMemo as useMemo2, useCallback as useCallback3, useEffect as useEffect4 } from "react";
-import { View as View3, Text as Text3, TouchableOpacity as TouchableOpacity3, StyleSheet as StyleSheet4 } from "react-native";
+import { View as View3, Text as Text3, TouchableOpacity as TouchableOpacity3, StyleSheet as StyleSheet4, ScrollView } from "react-native";
 function TestListScreen({ nav }) {
   const { assignments, currentAssignment, refreshAssignments } = useBugBear();
   const [filter, setFilter] = useState3("all");
+  const [roleFilter, setRoleFilter] = useState3(null);
   const [collapsedFolders, setCollapsedFolders] = useState3(/* @__PURE__ */ new Set());
   useEffect4(() => {
     refreshAssignments();
   }, []);
+  const availableRoles = useMemo2(() => {
+    const roleMap = /* @__PURE__ */ new Map();
+    for (const a of assignments) {
+      if (a.testCase.role) roleMap.set(a.testCase.role.id, a.testCase.role);
+    }
+    return Array.from(roleMap.values());
+  }, [assignments]);
+  const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = useMemo2(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const assignment of assignments) {
@@ -14050,16 +14085,39 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = (a) => {
+    if (roleFilter && a.testCase.role?.id !== roleFilter) return false;
     if (filter === "pending") return a.status === "pending" || a.status === "in_progress";
     if (filter === "completed") return a.status === "passed" || a.status === "failed";
     return true;
   };
-  return /* @__PURE__ */ React4.createElement(View3, null, /* @__PURE__ */ React4.createElement(View3, { style: styles3.filterBar }, ["all", "pending", "completed"].map((f) => /* @__PURE__ */ React4.createElement(TouchableOpacity3, { key: f, style: [styles3.filterBtn, filter === f && styles3.filterBtnActive], onPress: () => setFilter(f) }, /* @__PURE__ */ React4.createElement(Text3, { style: [styles3.filterBtnText, filter === f && styles3.filterBtnTextActive] }, f === "all" ? `All (${assignments.length})` : f === "pending" ? `To Do (${assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length})` : `Done (${assignments.filter((a) => a.status === "passed" || a.status === "failed").length})`)))), groupedAssignments.map((folder) => {
+  return /* @__PURE__ */ React4.createElement(View3, null, /* @__PURE__ */ React4.createElement(View3, { style: styles3.filterBar }, ["all", "pending", "completed"].map((f) => /* @__PURE__ */ React4.createElement(TouchableOpacity3, { key: f, style: [styles3.filterBtn, filter === f && styles3.filterBtnActive], onPress: () => setFilter(f) }, /* @__PURE__ */ React4.createElement(Text3, { style: [styles3.filterBtnText, filter === f && styles3.filterBtnTextActive] }, f === "all" ? `All (${assignments.length})` : f === "pending" ? `To Do (${assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length})` : `Done (${assignments.filter((a) => a.status === "passed" || a.status === "failed").length})`)))), availableRoles.length >= 2 && /* @__PURE__ */ React4.createElement(View3, { style: styles3.roleSection }, /* @__PURE__ */ React4.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles3.roleBar }, /* @__PURE__ */ React4.createElement(
+    TouchableOpacity3,
+    {
+      style: [styles3.roleBtn, !roleFilter && styles3.roleBtnActive],
+      onPress: () => setRoleFilter(null)
+    },
+    /* @__PURE__ */ React4.createElement(Text3, { style: [styles3.roleBtnText, !roleFilter && styles3.roleBtnTextActive] }, "All Roles")
+  ), availableRoles.map((role) => {
+    const isActive = roleFilter === role.id;
+    return /* @__PURE__ */ React4.createElement(
+      TouchableOpacity3,
+      {
+        key: role.id,
+        style: [
+          styles3.roleBtn,
+          isActive && { backgroundColor: role.color + "20", borderColor: role.color + "60", borderWidth: 1 }
+        ],
+        onPress: () => setRoleFilter(isActive ? null : role.id)
+      },
+      /* @__PURE__ */ React4.createElement(View3, { style: [styles3.roleDot, { backgroundColor: role.color }] }),
+      /* @__PURE__ */ React4.createElement(Text3, { style: [styles3.roleBtnText, isActive && { color: role.color, fontWeight: "600" }] }, role.name)
+    );
+  })), selectedRole?.loginHint && /* @__PURE__ */ React4.createElement(View3, { style: [styles3.loginHint, { backgroundColor: selectedRole.color + "10", borderColor: selectedRole.color + "30" }] }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.loginHintText }, "Log in as: ", selectedRole.loginHint))), groupedAssignments.map((folder) => {
     const folderId = folder.group?.id || "ungrouped";
     const isCollapsed = collapsedFolders.has(folderId);
     const filtered = folder.assignments.filter(filterAssignment);
     if (filtered.length === 0 && filter !== "all") return null;
-    return /* @__PURE__ */ React4.createElement(View3, { key: folderId, style: styles3.folder }, /* @__PURE__ */ React4.createElement(TouchableOpacity3, { style: styles3.folderHeader, onPress: () => toggleFolder(folderId) }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderToggle }, isCollapsed ? "\u25B6" : "\u25BC"), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderName }, folder.group?.name || "Ungrouped"), /* @__PURE__ */ React4.createElement(View3, { style: styles3.folderProgress }, /* @__PURE__ */ React4.createElement(View3, { style: [styles3.folderProgressFill, { width: `${Math.round((folder.stats.passed + folder.stats.failed) / folder.stats.total * 100)}%` }] })), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderCount }, folder.stats.passed + folder.stats.failed, "/", folder.stats.total)), !isCollapsed && filtered.map((assignment) => {
+    return /* @__PURE__ */ React4.createElement(View3, { key: folderId, style: styles3.folder }, /* @__PURE__ */ React4.createElement(TouchableOpacity3, { style: styles3.folderHeader, onPress: () => toggleFolder(folderId) }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderToggle }, isCollapsed ? "\u25B6" : "\u25BC"), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderName, numberOfLines: 1 }, folder.group?.name || "Ungrouped"), /* @__PURE__ */ React4.createElement(View3, { style: styles3.folderProgress }, /* @__PURE__ */ React4.createElement(View3, { style: [styles3.folderProgressFill, { width: `${folder.stats.total > 0 ? Math.round((folder.stats.passed + folder.stats.failed) / folder.stats.total * 100) : 0}%` }] })), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.folderCount }, folder.stats.passed + folder.stats.failed, "/", folder.stats.total)), !isCollapsed && filtered.map((assignment) => {
       const badge = getStatusBadge(assignment.status);
       const isCurrent = currentAssignment?.id === assignment.id;
       return /* @__PURE__ */ React4.createElement(
@@ -14070,17 +14128,28 @@ function TestListScreen({ nav }) {
           onPress: () => nav.push({ name: "TEST_DETAIL", testId: assignment.id })
         },
         /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testBadge }, badge.icon),
-        /* @__PURE__ */ React4.createElement(View3, { style: styles3.testInfo }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testTitle, numberOfLines: 1 }, assignment.testCase.title), /* @__PURE__ */ React4.createElement(View3, { style: styles3.testMetaRow }, assignment.isVerification && /* @__PURE__ */ React4.createElement(View3, { style: styles3.retestTag }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.retestTagText }, "Retest")), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testMeta }, assignment.testCase.key, " \xB7 ", assignment.testCase.priority)))
+        /* @__PURE__ */ React4.createElement(View3, { style: styles3.testInfo }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testTitle, numberOfLines: 1 }, assignment.testCase.title), /* @__PURE__ */ React4.createElement(View3, { style: styles3.testMetaRow }, assignment.isVerification && /* @__PURE__ */ React4.createElement(View3, { style: styles3.retestTag }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.retestTagText }, "Retest")), /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testMeta }, assignment.testCase.testKey, " \xB7 ", assignment.testCase.priority), assignment.testCase.role && /* @__PURE__ */ React4.createElement(View3, { style: styles3.roleBadgeRow }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.testMeta }, " \xB7 "), /* @__PURE__ */ React4.createElement(View3, { style: [styles3.roleBadgeDot, { backgroundColor: assignment.testCase.role.color }] }), /* @__PURE__ */ React4.createElement(Text3, { style: [styles3.testMeta, { color: assignment.testCase.role.color, fontWeight: "500" }] }, assignment.testCase.role.name))))
       );
     }));
-  }), /* @__PURE__ */ React4.createElement(TouchableOpacity3, { style: styles3.refreshBtn, onPress: refreshAssignments }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.refreshText }, "\u21BB Refresh")));
+  }), /* @__PURE__ */ React4.createElement(TouchableOpacity3, { style: styles3.refreshBtn, onPress: refreshAssignments }, /* @__PURE__ */ React4.createElement(Text3, { style: styles3.refreshText }, "\u21BB", " Refresh")));
 }
 var styles3 = StyleSheet4.create({
-  filterBar: { flexDirection: "row", gap: 8, marginBottom: 16 },
+  filterBar: { flexDirection: "row", gap: 8, marginBottom: 8 },
   filterBtn: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 8, backgroundColor: colors.card, borderWidth: 1, borderColor: colors.border },
   filterBtnActive: { backgroundColor: colors.blue, borderColor: colors.blue },
   filterBtnText: { fontSize: 12, color: colors.textSecondary },
   filterBtnTextActive: { color: "#fff", fontWeight: "600" },
+  roleSection: { marginBottom: 12 },
+  roleBar: { flexDirection: "row", marginBottom: 6 },
+  roleBtn: { flexDirection: "row", alignItems: "center", gap: 5, paddingHorizontal: 10, paddingVertical: 4, borderRadius: 6, marginRight: 6, borderWidth: 1, borderColor: "transparent" },
+  roleBtnActive: { backgroundColor: colors.card, borderColor: colors.border },
+  roleBtnText: { fontSize: 11, color: colors.textMuted },
+  roleBtnTextActive: { color: colors.textPrimary, fontWeight: "600" },
+  roleDot: { width: 6, height: 6, borderRadius: 3 },
+  loginHint: { borderRadius: 6, padding: 8, borderWidth: 1 },
+  loginHintText: { fontSize: 11, color: colors.textSecondary },
+  roleBadgeRow: { flexDirection: "row", alignItems: "center", gap: 3 },
+  roleBadgeDot: { width: 5, height: 5, borderRadius: 3 },
   folder: { marginBottom: 12 },
   folderHeader: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 8, paddingHorizontal: 4 },
   folderToggle: { fontSize: 10, color: colors.textMuted, width: 14 },
@@ -14093,7 +14162,7 @@ var styles3 = StyleSheet4.create({
   testBadge: { fontSize: 16, marginRight: 10, width: 20 },
   testInfo: { flex: 1 },
   testTitle: { fontSize: 14, color: colors.textPrimary, marginBottom: 2 },
-  testMetaRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  testMetaRow: { flexDirection: "row", alignItems: "center", gap: 6, flexWrap: "wrap" },
   retestTag: { backgroundColor: "#422006", borderWidth: 1, borderColor: "#854d0e", borderRadius: 4, paddingHorizontal: 5, paddingVertical: 1 },
   retestTagText: { fontSize: 10, fontWeight: "600", color: "#fbbf24" },
   testMeta: { fontSize: 11, color: colors.textDim },
@@ -14188,10 +14257,10 @@ import { View as View5, Text as Text5, TouchableOpacity as TouchableOpacity5, St
 
 // src/widget/ImagePreviewStrip.tsx
 import React5 from "react";
-import { View as View4, Text as Text4, TouchableOpacity as TouchableOpacity4, ScrollView, Image, ActivityIndicator, StyleSheet as StyleSheet5 } from "react-native";
+import { View as View4, Text as Text4, TouchableOpacity as TouchableOpacity4, ScrollView as ScrollView2, Image, ActivityIndicator, StyleSheet as StyleSheet5 } from "react-native";
 function ImagePreviewStrip({ images, onRemove }) {
   if (images.length === 0) return null;
-  return /* @__PURE__ */ React5.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles4.strip }, images.map((img) => /* @__PURE__ */ React5.createElement(View4, { key: img.id, style: styles4.thumbContainer }, /* @__PURE__ */ React5.createElement(Image, { source: { uri: img.localUri }, style: styles4.thumb }), img.status === "uploading" && /* @__PURE__ */ React5.createElement(View4, { style: styles4.thumbOverlay }, /* @__PURE__ */ React5.createElement(ActivityIndicator, { size: "small", color: "#fff" })), img.status === "error" && /* @__PURE__ */ React5.createElement(View4, { style: [styles4.thumbOverlay, styles4.thumbOverlayError] }, /* @__PURE__ */ React5.createElement(Text4, { style: styles4.thumbErrorText }, "!")), /* @__PURE__ */ React5.createElement(TouchableOpacity4, { style: styles4.thumbRemove, onPress: () => onRemove(img.id) }, /* @__PURE__ */ React5.createElement(Text4, { style: styles4.thumbRemoveText }, "\u2715")))));
+  return /* @__PURE__ */ React5.createElement(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles4.strip }, images.map((img) => /* @__PURE__ */ React5.createElement(View4, { key: img.id, style: styles4.thumbContainer }, /* @__PURE__ */ React5.createElement(Image, { source: { uri: img.localUri }, style: styles4.thumb }), img.status === "uploading" && /* @__PURE__ */ React5.createElement(View4, { style: styles4.thumbOverlay }, /* @__PURE__ */ React5.createElement(ActivityIndicator, { size: "small", color: "#fff" })), img.status === "error" && /* @__PURE__ */ React5.createElement(View4, { style: [styles4.thumbOverlay, styles4.thumbOverlayError] }, /* @__PURE__ */ React5.createElement(Text4, { style: styles4.thumbErrorText }, "!")), /* @__PURE__ */ React5.createElement(TouchableOpacity4, { style: styles4.thumbRemove, onPress: () => onRemove(img.id) }, /* @__PURE__ */ React5.createElement(Text4, { style: styles4.thumbRemoveText }, "\u2715")))));
 }
 var styles4 = StyleSheet5.create({
   strip: {
@@ -14425,7 +14494,7 @@ var styles6 = StyleSheet7.create({
 });
 
 // src/widget/screens/ReportScreen.tsx
-import React8, { useState as useState6 } from "react";
+import React8, { useState as useState6, useRef as useRef2 } from "react";
 import { View as View7, Text as Text7, TouchableOpacity as TouchableOpacity7, TextInput as TextInput3, StyleSheet as StyleSheet8 } from "react-native";
 function ReportScreen({ nav, prefill }) {
   const { client, getDeviceInfo, uploadImage, refreshAssignments } = useBugBear();
@@ -14435,11 +14504,14 @@ function ReportScreen({ nav, prefill }) {
   const [affectedScreen, setAffectedScreen] = useState6("");
   const [submitting, setSubmitting] = useState6(false);
   const [error, setError] = useState6(null);
+  const submittingRef = useRef2(false);
   const images = useImageAttachments(uploadImage, 5, "screenshots");
   const isRetestFailure = prefill?.type === "test_fail";
   const isBugType = reportType === "bug" || reportType === "test_fail";
   const handleSubmit = async () => {
     if (!client || !description.trim()) return;
+    if (submittingRef.current) return;
+    submittingRef.current = true;
     setSubmitting(true);
     setError(null);
     try {
@@ -14463,17 +14535,18 @@ function ReportScreen({ nav, prefill }) {
         console.error("BugBear: Report submission failed", result.error);
         setError(result.error || "Failed to submit report. Please try again.");
         setSubmitting(false);
+        submittingRef.current = false;
         return;
       }
       if (prefill?.assignmentId) {
         await refreshAssignments();
       }
-      setSubmitting(false);
       nav.replace({ name: "REPORT_SUCCESS" });
     } catch (err) {
       console.error("BugBear: Report submission error", err);
       setError(err instanceof Error ? err.message : "An unexpected error occurred. Please try again.");
       setSubmitting(false);
+      submittingRef.current = false;
     }
   };
   return /* @__PURE__ */ React8.createElement(View7, null, isRetestFailure ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(View7, { style: styles7.retestBanner }, /* @__PURE__ */ React8.createElement(Text7, { style: styles7.retestIcon }, "\u{1F504}"), /* @__PURE__ */ React8.createElement(View7, null, /* @__PURE__ */ React8.createElement(Text7, { style: styles7.retestTitle }, "Bug Still Present"), /* @__PURE__ */ React8.createElement(Text7, { style: styles7.retestSubtitle }, "The fix did not resolve this issue"))), /* @__PURE__ */ React8.createElement(View7, { style: styles7.section }, /* @__PURE__ */ React8.createElement(Text7, { style: shared.label }, "Severity"), /* @__PURE__ */ React8.createElement(View7, { style: styles7.severityRow }, [
@@ -15003,9 +15076,9 @@ function BugBearButton({
     return { x, y };
   };
   const initialPos = getInitialPosition();
-  const pan = useRef2(new Animated.ValueXY(initialPos)).current;
-  const isDragging = useRef2(false);
-  const panResponder = useRef2(
+  const pan = useRef3(new Animated.ValueXY(initialPos)).current;
+  const isDragging = useRef3(false);
+  const panResponder = useRef3(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
       onMoveShouldSetPanResponder: (_, gs) => draggable && (Math.abs(gs.dx) > 5 || Math.abs(gs.dy) > 5),
@@ -15157,7 +15230,7 @@ function BugBearButton({
         style: styles13.modalOverlay
       },
       /* @__PURE__ */ React14.createElement(View13, { style: styles13.modalContainer }, /* @__PURE__ */ React14.createElement(View13, { style: styles13.header }, /* @__PURE__ */ React14.createElement(View13, { style: styles13.headerLeft }, canGoBack ? /* @__PURE__ */ React14.createElement(View13, { style: styles13.headerNavRow }, /* @__PURE__ */ React14.createElement(TouchableOpacity12, { onPress: () => nav.pop(), style: styles13.backButton }, /* @__PURE__ */ React14.createElement(Text13, { style: styles13.backText }, "\u2190 Back")), /* @__PURE__ */ React14.createElement(TouchableOpacity12, { onPress: () => nav.reset(), style: styles13.homeButton }, /* @__PURE__ */ React14.createElement(Text13, { style: styles13.homeText }, "\u{1F3E0}"))) : /* @__PURE__ */ React14.createElement(View13, { style: styles13.headerTitleRow }, /* @__PURE__ */ React14.createElement(Text13, { style: styles13.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ React14.createElement(TouchableOpacity12, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ React14.createElement(Text13, { style: styles13.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ React14.createElement(Text13, { style: styles13.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ React14.createElement(TouchableOpacity12, { onPress: handleClose, style: styles13.closeButton }, /* @__PURE__ */ React14.createElement(Text13, { style: styles13.closeText }, "\u2715"))), /* @__PURE__ */ React14.createElement(
-        ScrollView2,
+        ScrollView3,
         {
           style: styles13.content,
           contentContainerStyle: styles13.contentContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react-native",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "BugBear React Native components for mobile apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -49,7 +49,7 @@
     }
   },
   "devDependencies": {
-    "@bbearai/core": "^0.3.0",
+    "@bbearai/core": "^0.4.0",
     "@eslint/js": "^9.39.2",
     "@types/react": "^18.2.0",
     "eslint": "^9.39.2",