@bbearai/react-native 0.6.3 → 0.7.1

package/dist/index.js

@@ -11540,6 +11540,7 @@ var ContextCaptureManager = class {
     this.networkRequests = [];
     this.navigationHistory = [];
     this.originalConsole = {};
+    this.fetchHost = null;
     this.isCapturing = false;
   }
   /**
@@ -11562,8 +11563,9 @@ var ContextCaptureManager = class {
     if (this.originalConsole.warn) console.warn = this.originalConsole.warn;
     if (this.originalConsole.error) console.error = this.originalConsole.error;
     if (this.originalConsole.info) console.info = this.originalConsole.info;
-    if (this.originalFetch && typeof window !== "undefined") {
-      window.fetch = this.originalFetch;
+    if (this.originalFetch && this.fetchHost) {
+      this.fetchHost.fetch = this.originalFetch;
+      this.fetchHost = null;
     }
     if (typeof window !== "undefined" && typeof history !== "undefined") {
       if (this.originalPushState) {
@@ -11672,15 +11674,19 @@ var ContextCaptureManager = class {
     });
   }
   captureFetch() {
-    if (typeof window === "undefined" || typeof fetch === "undefined" || typeof document === "undefined") return;
-    this.originalFetch = window.fetch;
+    if (typeof fetch === "undefined") return;
+    const host = typeof window !== "undefined" && typeof window.fetch === "function" ? window : typeof globalThis !== "undefined" && typeof globalThis.fetch === "function" ? globalThis : null;
+    if (!host) return;
+    const canCloneResponse = typeof document !== "undefined";
+    this.fetchHost = host;
+    this.originalFetch = host.fetch;
     const self2 = this;
-    window.fetch = async function(input, init) {
+    host.fetch = async function(input, init) {
       const startTime = Date.now();
       const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       const method = init?.method || "GET";
       try {
-        const response = await self2.originalFetch.call(window, input, init);
+        const response = await self2.originalFetch.call(host, input, init);
         const requestEntry = {
           method,
           url: url.slice(0, 200),
@@ -11689,7 +11695,7 @@ var ContextCaptureManager = class {
           duration: Date.now() - startTime,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
-        if (response.status >= 400) {
+        if (canCloneResponse && response.status >= 400) {
           try {
             const cloned = response.clone();
             const body = await cloned.text();
@@ -11933,29 +11939,140 @@ var formatPgError = (e) => {
   const { message, code, details, hint } = e;
   return { message, code, details, hint };
 };
+var DEFAULT_API_BASE_URL = "https://app.bugbear.ai";
+var CONFIG_CACHE_TTL_MS = 24 * 60 * 60 * 1e3;
+var CONFIG_CACHE_PREFIX = "bugbear_config_";
 var BugBearClient = class {
   constructor(config) {
     this.navigationHistory = [];
     this.reportSubmitInFlight = false;
     this._queue = null;
     this.realtimeChannels = [];
-    if (!config.supabaseUrl) {
-      throw new Error("BugBear: supabaseUrl is required. Get it from your BugBear project settings.");
-    }
-    if (!config.supabaseAnonKey) {
-      throw new Error("BugBear: supabaseAnonKey is required. Get it from your BugBear project settings.");
-    }
+    this.initialized = false;
+    this.initError = null;
     this.config = config;
-    this.supabase = createClient(config.supabaseUrl, config.supabaseAnonKey);
-    if (config.offlineQueue?.enabled) {
+    if (config.apiKey) {
+      this.pendingInit = this.resolveFromApiKey(config.apiKey);
+    } else if (config.supabaseUrl && config.supabaseAnonKey) {
+      if (!config.projectId) {
+        throw new Error(
+          "BugBear: projectId is required when using explicit Supabase credentials. Tip: Use apiKey instead for simpler setup \u2014 it resolves everything automatically."
+        );
+      }
+      this.supabase = createClient(config.supabaseUrl, config.supabaseAnonKey);
+      this.initialized = true;
+      this.pendingInit = Promise.resolve();
+      this.initOfflineQueue();
+    } else {
+      throw new Error(
+        "BugBear: Missing configuration. Provide either:\n  \u2022 apiKey (recommended) \u2014 resolves everything automatically\n  \u2022 projectId + supabaseUrl + supabaseAnonKey \u2014 explicit credentials\n\nGet your API key at https://app.bugbear.ai/settings/projects"
+      );
+    }
+  }
+  /** Whether the client is ready for requests. */
+  get isReady() {
+    return this.initialized;
+  }
+  /** Wait until the client is ready. Throws if initialization failed. */
+  async ready() {
+    await this.pendingInit;
+    if (this.initError) throw this.initError;
+  }
+  /**
+   * Resolve Supabase credentials from a BugBear API key.
+   * Checks localStorage cache first, falls back to /api/v1/config.
+   */
+  async resolveFromApiKey(apiKey) {
+    try {
+      const cached = this.readConfigCache(apiKey);
+      if (cached) {
+        this.applyResolvedConfig(cached);
+        return;
+      }
+      const baseUrl = (this.config.apiBaseUrl || DEFAULT_API_BASE_URL).replace(/\/$/, "");
+      const response = await fetch(`${baseUrl}/api/v1/config`, {
+        headers: { Authorization: `Bearer ${apiKey}` }
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        const message = body.error || `HTTP ${response.status}`;
+        throw new Error(
+          `BugBear: Invalid API key \u2014 ${message}. Get yours at https://app.bugbear.ai/settings/projects`
+        );
+      }
+      const data = await response.json();
+      this.writeConfigCache(apiKey, data);
+      this.applyResolvedConfig(data);
+    } catch (err) {
+      this.initError = err instanceof Error ? err : new Error(String(err));
+      this.config.onError?.(this.initError, { context: "apikey_resolution_failed" });
+      throw this.initError;
+    }
+  }
+  /** Apply resolved credentials and create the Supabase client. */
+  applyResolvedConfig(resolved) {
+    this.config = {
+      ...this.config,
+      projectId: resolved.projectId,
+      supabaseUrl: resolved.supabaseUrl,
+      supabaseAnonKey: resolved.supabaseAnonKey
+    };
+    this.supabase = createClient(resolved.supabaseUrl, resolved.supabaseAnonKey);
+    this.initialized = true;
+    this.initOfflineQueue();
+  }
+  /** Initialize offline queue if configured. Shared by both init paths. */
+  initOfflineQueue() {
+    if (this.config.offlineQueue?.enabled) {
       this._queue = new OfflineQueue({
         enabled: true,
-        maxItems: config.offlineQueue.maxItems,
-        maxRetries: config.offlineQueue.maxRetries
+        maxItems: this.config.offlineQueue.maxItems,
+        maxRetries: this.config.offlineQueue.maxRetries
       });
       this.registerQueueHandlers();
     }
   }
+  /** Read cached config from localStorage if available and not expired. */
+  readConfigCache(apiKey) {
+    if (typeof localStorage === "undefined") return null;
+    try {
+      const key = CONFIG_CACHE_PREFIX + this.hashKey(apiKey);
+      const raw = localStorage.getItem(key);
+      if (!raw) return null;
+      const cached = JSON.parse(raw);
+      if (Date.now() - cached.cachedAt > CONFIG_CACHE_TTL_MS) {
+        localStorage.removeItem(key);
+        return null;
+      }
+      return cached;
+    } catch {
+      return null;
+    }
+  }
+  /** Write resolved config to localStorage cache. */
+  writeConfigCache(apiKey, data) {
+    if (typeof localStorage === "undefined") return;
+    try {
+      const key = CONFIG_CACHE_PREFIX + this.hashKey(apiKey);
+      const cached = { ...data, cachedAt: Date.now() };
+      localStorage.setItem(key, JSON.stringify(cached));
+    } catch {
+    }
+  }
+  /** Simple string hash for cache keys — avoids storing raw API keys. */
+  hashKey(apiKey) {
+    let hash = 0;
+    for (let i = 0; i < apiKey.length; i++) {
+      hash = (hash << 5) - hash + apiKey.charCodeAt(i) | 0;
+    }
+    return hash.toString(36);
+  }
+  /** Ensure the client is initialized before making requests. */
+  async ensureReady() {
+    if (this.initialized) return;
+    await this.pendingInit;
+    if (this.initError) throw this.initError;
+  }
   // ── Offline Queue ─────────────────────────────────────────
   /**
    * Access the offline queue (if enabled).
@@ -12111,6 +12228,7 @@ var BugBearClient = class {
    * Get current user info from host app or BugBear's own auth
    */
   async getCurrentUserInfo() {
+    await this.ensureReady();
     if (this.config.getCurrentUser) {
       return await this.config.getCurrentUser();
     }
@@ -12330,6 +12448,7 @@ var BugBearClient = class {
    */
   async getAssignment(assignmentId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("test_assignments").select(`
           id,
           status,
@@ -12401,6 +12520,7 @@ var BugBearClient = class {
    */
   async updateAssignmentStatus(assignmentId, status, options) {
     try {
+      await this.ensureReady();
       const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at").eq("id", assignmentId).single();
       if (fetchError || !currentAssignment) {
         console.error("BugBear: Assignment not found", {
@@ -12487,6 +12607,7 @@ var BugBearClient = class {
    */
   async reopenAssignment(assignmentId) {
     try {
+      await this.ensureReady();
       const { data: current, error: fetchError } = await this.supabase.from("test_assignments").select("status").eq("id", assignmentId).single();
       if (fetchError || !current) {
         return { success: false, error: "Assignment not found" };
@@ -12526,6 +12647,7 @@ var BugBearClient = class {
       actualNotes = notes;
     }
     try {
+      await this.ensureReady();
       const updateData = {
         status: "skipped",
         skip_reason: actualReason,
@@ -12695,6 +12817,7 @@ var BugBearClient = class {
    */
   async getTesterInfo() {
     try {
+      await this.ensureReady();
       const userInfo = await this.getCurrentUserInfo();
       if (!userInfo?.email) return null;
       if (!this.isValidEmail(userInfo.email)) {
@@ -12986,6 +13109,7 @@ var BugBearClient = class {
    */
   async isQAEnabled() {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("check_qa_enabled", {
         p_project_id: this.config.projectId
       });
@@ -13017,6 +13141,7 @@ var BugBearClient = class {
    */
   async uploadScreenshot(file, filename, bucket = "screenshots") {
     try {
+      await this.ensureReady();
       const contentType = file.type || "image/png";
       const ext = contentType.includes("png") ? "png" : "jpg";
       const name = filename || `screenshot-${Date.now()}.${ext}`;
@@ -13057,6 +13182,7 @@ var BugBearClient = class {
    */
   async uploadImageFromUri(uri, filename, bucket = "screenshots") {
     try {
+      await this.ensureReady();
       const response = await fetch(uri);
       const blob = await response.blob();
       const contentType = blob.type || "image/jpeg";
@@ -13151,6 +13277,7 @@ var BugBearClient = class {
    */
   async getFixRequests(options) {
     try {
+      await this.ensureReady();
       let query = this.supabase.from("fix_requests").select("*").eq("project_id", this.config.projectId).order("created_at", { ascending: false }).limit(options?.limit || 20);
       if (options?.status) {
         query = query.eq("status", options.status);
@@ -13222,6 +13349,7 @@ var BugBearClient = class {
    */
   async getThreadMessages(threadId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("discussion_messages").select(`
           id,
           thread_id,
@@ -13424,6 +13552,7 @@ var BugBearClient = class {
    */
   async endSession(sessionId, options = {}) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("end_qa_session", {
         p_session_id: sessionId,
         p_notes: options.notes || null,
@@ -13461,6 +13590,7 @@ var BugBearClient = class {
    */
   async getSession(sessionId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("qa_sessions").select("*").eq("id", sessionId).single();
       if (error || !data) return null;
       return this.transformSession(data);
@@ -13492,6 +13622,7 @@ var BugBearClient = class {
    */
   async addFinding(sessionId, options) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("add_session_finding", {
         p_session_id: sessionId,
         p_type: options.type,
@@ -13522,6 +13653,7 @@ var BugBearClient = class {
    */
   async getSessionFindings(sessionId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("qa_findings").select("*").eq("session_id", sessionId).order("created_at", { ascending: true }).limit(100);
       if (error) {
         console.error("BugBear: Failed to fetch findings", formatPgError(error));
@@ -13538,6 +13670,7 @@ var BugBearClient = class {
    */
   async convertFindingToBug(findingId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("convert_finding_to_bug", {
         p_finding_id: findingId
       });
@@ -13557,6 +13690,7 @@ var BugBearClient = class {
    */
   async dismissFinding(findingId, reason) {
     try {
+      await this.ensureReady();
       const { error } = await this.supabase.from("qa_findings").update({
         dismissed: true,
         dismissed_reason: reason || null,
@@ -15108,9 +15242,9 @@ function TestListScreen({ nav }) {
       /* @__PURE__ */ import_react6.default.createElement(import_react_native6.Text, { style: [styles3.trackBtnText, isActive && { color: track.color, fontWeight: "600" }] }, track.icon, " ", track.name)
     );
   })), /* @__PURE__ */ import_react6.default.createElement(import_react_native6.View, { style: styles3.sortGroup }, [
-    { key: "priority", label: "\u2195" },
-    { key: "recent", label: "\u{1F550}" },
-    { key: "alpha", label: "AZ" }
+    { key: "priority", label: "\u2195 Priority" },
+    { key: "recent", label: "\u{1F550} Recent" },
+    { key: "alpha", label: "A-Z" }
   ].map((s2) => /* @__PURE__ */ import_react6.default.createElement(
     import_react_native6.TouchableOpacity,
     {
@@ -16327,8 +16461,9 @@ var styles13 = import_react_native16.StyleSheet.create({
 // src/widget/screens/IssueListScreen.tsx
 var import_react18 = __toESM(require("react"));
 var import_react_native17 = require("react-native");
+var CATEGORIES = ["open", "done", "reopened"];
 var CATEGORY_CONFIG = {
-  open: { label: "Open Issues", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
+  open: { label: "Open", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
   done: { label: "Done", accent: "#22c55e", emptyIcon: "\u{1F389}", emptyText: "No completed issues yet" },
   reopened: { label: "Reopened", accent: "#ef4444", emptyIcon: "\u{1F44D}", emptyText: "No reopened issues" }
 };
@@ -16338,11 +16473,20 @@ var SEVERITY_COLORS = {
   medium: "#eab308",
   low: "#71717a"
 };
+var SEVERITY_ORDER = { critical: 0, high: 1, medium: 2, low: 3 };
 function IssueListScreen({ nav, category }) {
   const { client } = useBugBear();
+  const [activeCategory, setActiveCategory] = (0, import_react18.useState)(category);
   const [issues, setIssues] = (0, import_react18.useState)([]);
   const [loading, setLoading] = (0, import_react18.useState)(true);
-  const config = CATEGORY_CONFIG[category];
+  const [counts, setCounts] = (0, import_react18.useState)(null);
+  const [sortMode, setSortMode] = (0, import_react18.useState)("severity");
+  const config = CATEGORY_CONFIG[activeCategory];
+  (0, import_react18.useEffect)(() => {
+    if (!client) return;
+    client.getIssueCounts().then(setCounts).catch(() => {
+    });
+  }, [client]);
   (0, import_react18.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
@@ -16352,7 +16496,7 @@ function IssueListScreen({ nav, category }) {
         return;
       }
       try {
-        const data = await client.getIssues(category);
+        const data = await client.getIssues(activeCategory);
         if (!cancelled) {
           setIssues(data);
         }
@@ -16367,14 +16511,63 @@ function IssueListScreen({ nav, category }) {
     return () => {
       cancelled = true;
     };
-  }, [client, category]);
-  if (loading) {
-    return /* @__PURE__ */ import_react18.default.createElement(IssueListScreenSkeleton, null);
-  }
-  if (issues.length === 0) {
-    return /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.emptyContainer }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.emptyIcon }, config.emptyIcon), /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.emptyText }, config.emptyText));
-  }
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, null, issues.map((issue) => /* @__PURE__ */ import_react18.default.createElement(
+  }, [client, activeCategory]);
+  const sortedIssues = (0, import_react18.useMemo)(() => {
+    const sorted = [...issues];
+    if (sortMode === "severity") {
+      sorted.sort((a, b) => (SEVERITY_ORDER[a.severity || "low"] ?? 4) - (SEVERITY_ORDER[b.severity || "low"] ?? 4));
+    } else {
+      sorted.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+    }
+    return sorted;
+  }, [issues, sortMode]);
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, null, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.tabBar }, CATEGORIES.map((cat) => {
+    const catConfig = CATEGORY_CONFIG[cat];
+    const isActive = activeCategory === cat;
+    const count = counts?.[cat];
+    return /* @__PURE__ */ import_react18.default.createElement(
+      import_react_native17.TouchableOpacity,
+      {
+        key: cat,
+        style: [
+          styles14.tab,
+          { borderBottomColor: isActive ? catConfig.accent : "transparent" }
+        ],
+        onPress: () => setActiveCategory(cat),
+        activeOpacity: 0.7
+      },
+      /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: [
+        styles14.tabLabel,
+        isActive && { fontWeight: "600", color: colors.textPrimary }
+      ] }, catConfig.label),
+      count !== void 0 && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: [
+        styles14.countBadge,
+        {
+          backgroundColor: isActive ? catConfig.accent + "18" : colors.card
+        }
+      ] }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: [
+        styles14.countText,
+        { color: isActive ? catConfig.accent : colors.textDim }
+      ] }, count))
+    );
+  })), /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.sortRow }, [
+    { key: "severity", label: "Severity" },
+    { key: "recent", label: "Recent" }
+  ].map((s2) => /* @__PURE__ */ import_react18.default.createElement(
+    import_react_native17.TouchableOpacity,
+    {
+      key: s2.key,
+      style: [
+        styles14.sortBtn,
+        sortMode === s2.key && styles14.sortBtnActive
+      ],
+      onPress: () => setSortMode(s2.key)
+    },
+    /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: [
+      styles14.sortBtnText,
+      sortMode === s2.key && styles14.sortBtnTextActive
+    ] }, s2.label)
+  ))), loading ? /* @__PURE__ */ import_react18.default.createElement(IssueListScreenSkeleton, null) : sortedIssues.length === 0 ? /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.emptyContainer }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.emptyIcon }, config.emptyIcon), /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.emptyText }, config.emptyText)) : sortedIssues.map((issue) => /* @__PURE__ */ import_react18.default.createElement(
     import_react_native17.TouchableOpacity,
     {
       key: issue.id,
@@ -16384,11 +16577,69 @@ function IssueListScreen({ nav, category }) {
     },
     /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.topRow }, issue.severity && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: [styles14.severityDot, { backgroundColor: SEVERITY_COLORS[issue.severity] || colors.textDim }] }), /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.issueTitle, numberOfLines: 1 }, issue.title)),
     /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.bottomRow }, issue.route && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.routeText, numberOfLines: 1 }, issue.route), /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.timeText }, formatRelativeTime(issue.updatedAt))),
-    category === "done" && issue.verifiedByName && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.verifiedBadge }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.verifiedBadgeText }, "\u2714", " Verified by ", issue.verifiedByName)),
-    category === "reopened" && issue.originalBugTitle && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.reopenedBadge }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.reopenedBadgeText, numberOfLines: 1 }, "\u{1F504}", " Retest of: ", issue.originalBugTitle))
+    activeCategory === "done" && issue.verifiedByName && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.verifiedBadge }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.verifiedBadgeText }, "\u2714", " Verified by ", issue.verifiedByName)),
+    activeCategory === "reopened" && issue.originalBugTitle && /* @__PURE__ */ import_react18.default.createElement(import_react_native17.View, { style: styles14.reopenedBadge }, /* @__PURE__ */ import_react18.default.createElement(import_react_native17.Text, { style: styles14.reopenedBadgeText, numberOfLines: 1 }, "\u{1F504}", " Retest of: ", issue.originalBugTitle))
   )));
 }
 var styles14 = import_react_native17.StyleSheet.create({
+  tabBar: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    marginBottom: 8
+  },
+  tab: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    borderBottomWidth: 2
+  },
+  tabLabel: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: colors.textMuted
+  },
+  countBadge: {
+    borderRadius: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    minWidth: 18,
+    alignItems: "center"
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  sortRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 2,
+    marginBottom: 8
+  },
+  sortBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  sortBtnActive: {
+    backgroundColor: colors.card,
+    borderColor: colors.border
+  },
+  sortBtnText: {
+    fontSize: 10,
+    fontWeight: "400",
+    color: colors.textMuted
+  },
+  sortBtnTextActive: {
+    fontWeight: "600",
+    color: colors.textPrimary
+  },
   emptyContainer: {
     alignItems: "center",
     paddingVertical: 40
@@ -16844,7 +17095,7 @@ function BugBearButton({
         behavior: import_react_native19.Platform.OS === "ios" ? "padding" : "height",
         style: styles16.modalOverlay
       },
-      /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.modalContainer }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.header }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerLeft }, canGoBack ? /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerNavRow }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => nav.pop(), style: styles16.backButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.backText }, "\u2190 Back")), /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => nav.reset(), style: styles16.homeButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.homeText }, "\u{1F3E0}"))) : /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerTitleRow }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: handleClose, style: styles16.closeButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.closeText }, "\u2715"))), /* @__PURE__ */ import_react20.default.createElement(
+      /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.modalContainer }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.header }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerLeft }, canGoBack ? /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => nav.pop(), style: styles16.backButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.backText }, "\u2190 Back")) : /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerTitleRow }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.View, { style: styles16.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: () => nav.reset(), style: styles16.homeButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.homeIcon }, "\u2302")), /* @__PURE__ */ import_react20.default.createElement(import_react_native19.TouchableOpacity, { onPress: handleClose, style: styles16.closeButton }, /* @__PURE__ */ import_react20.default.createElement(import_react_native19.Text, { style: styles16.closeText }, "\u2715")))), /* @__PURE__ */ import_react20.default.createElement(
         import_react_native19.ScrollView,
         {
           style: styles16.content,
@@ -16945,11 +17196,6 @@ var styles16 = import_react_native19.StyleSheet.create({
     flex: 1,
     textAlign: "center"
   },
-  headerNavRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
   backButton: {
     paddingVertical: 2,
     paddingRight: 4
@@ -16959,12 +17205,25 @@ var styles16 = import_react_native19.StyleSheet.create({
     color: colors.blue,
     fontWeight: "500"
   },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   homeButton: {
-    paddingVertical: 2,
-    paddingHorizontal: 6
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#1e3a5f",
+    borderWidth: 1,
+    borderColor: "rgba(59, 130, 246, 0.25)",
+    justifyContent: "center",
+    alignItems: "center"
   },
-  homeText: {
-    fontSize: 16
+  homeIcon: {
+    fontSize: 16,
+    color: "#60a5fa",
+    marginTop: -1
   },
   closeButton: {
     width: 32,

package/dist/index.mjs

@@ -11507,6 +11507,7 @@ var ContextCaptureManager = class {
     this.networkRequests = [];
     this.navigationHistory = [];
     this.originalConsole = {};
+    this.fetchHost = null;
     this.isCapturing = false;
   }
   /**
@@ -11529,8 +11530,9 @@ var ContextCaptureManager = class {
     if (this.originalConsole.warn) console.warn = this.originalConsole.warn;
     if (this.originalConsole.error) console.error = this.originalConsole.error;
     if (this.originalConsole.info) console.info = this.originalConsole.info;
-    if (this.originalFetch && typeof window !== "undefined") {
-      window.fetch = this.originalFetch;
+    if (this.originalFetch && this.fetchHost) {
+      this.fetchHost.fetch = this.originalFetch;
+      this.fetchHost = null;
     }
     if (typeof window !== "undefined" && typeof history !== "undefined") {
       if (this.originalPushState) {
@@ -11639,15 +11641,19 @@ var ContextCaptureManager = class {
     });
   }
   captureFetch() {
-    if (typeof window === "undefined" || typeof fetch === "undefined" || typeof document === "undefined") return;
-    this.originalFetch = window.fetch;
+    if (typeof fetch === "undefined") return;
+    const host = typeof window !== "undefined" && typeof window.fetch === "function" ? window : typeof globalThis !== "undefined" && typeof globalThis.fetch === "function" ? globalThis : null;
+    if (!host) return;
+    const canCloneResponse = typeof document !== "undefined";
+    this.fetchHost = host;
+    this.originalFetch = host.fetch;
     const self2 = this;
-    window.fetch = async function(input, init) {
+    host.fetch = async function(input, init) {
       const startTime = Date.now();
       const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       const method = init?.method || "GET";
       try {
-        const response = await self2.originalFetch.call(window, input, init);
+        const response = await self2.originalFetch.call(host, input, init);
         const requestEntry = {
           method,
           url: url.slice(0, 200),
@@ -11656,7 +11662,7 @@ var ContextCaptureManager = class {
           duration: Date.now() - startTime,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
-        if (response.status >= 400) {
+        if (canCloneResponse && response.status >= 400) {
           try {
             const cloned = response.clone();
             const body = await cloned.text();
@@ -11900,29 +11906,140 @@ var formatPgError = (e) => {
   const { message, code, details, hint } = e;
   return { message, code, details, hint };
 };
+var DEFAULT_API_BASE_URL = "https://app.bugbear.ai";
+var CONFIG_CACHE_TTL_MS = 24 * 60 * 60 * 1e3;
+var CONFIG_CACHE_PREFIX = "bugbear_config_";
 var BugBearClient = class {
   constructor(config) {
     this.navigationHistory = [];
     this.reportSubmitInFlight = false;
     this._queue = null;
     this.realtimeChannels = [];
-    if (!config.supabaseUrl) {
-      throw new Error("BugBear: supabaseUrl is required. Get it from your BugBear project settings.");
-    }
-    if (!config.supabaseAnonKey) {
-      throw new Error("BugBear: supabaseAnonKey is required. Get it from your BugBear project settings.");
-    }
+    this.initialized = false;
+    this.initError = null;
     this.config = config;
-    this.supabase = createClient(config.supabaseUrl, config.supabaseAnonKey);
-    if (config.offlineQueue?.enabled) {
+    if (config.apiKey) {
+      this.pendingInit = this.resolveFromApiKey(config.apiKey);
+    } else if (config.supabaseUrl && config.supabaseAnonKey) {
+      if (!config.projectId) {
+        throw new Error(
+          "BugBear: projectId is required when using explicit Supabase credentials. Tip: Use apiKey instead for simpler setup \u2014 it resolves everything automatically."
+        );
+      }
+      this.supabase = createClient(config.supabaseUrl, config.supabaseAnonKey);
+      this.initialized = true;
+      this.pendingInit = Promise.resolve();
+      this.initOfflineQueue();
+    } else {
+      throw new Error(
+        "BugBear: Missing configuration. Provide either:\n  \u2022 apiKey (recommended) \u2014 resolves everything automatically\n  \u2022 projectId + supabaseUrl + supabaseAnonKey \u2014 explicit credentials\n\nGet your API key at https://app.bugbear.ai/settings/projects"
+      );
+    }
+  }
+  /** Whether the client is ready for requests. */
+  get isReady() {
+    return this.initialized;
+  }
+  /** Wait until the client is ready. Throws if initialization failed. */
+  async ready() {
+    await this.pendingInit;
+    if (this.initError) throw this.initError;
+  }
+  /**
+   * Resolve Supabase credentials from a BugBear API key.
+   * Checks localStorage cache first, falls back to /api/v1/config.
+   */
+  async resolveFromApiKey(apiKey) {
+    try {
+      const cached = this.readConfigCache(apiKey);
+      if (cached) {
+        this.applyResolvedConfig(cached);
+        return;
+      }
+      const baseUrl = (this.config.apiBaseUrl || DEFAULT_API_BASE_URL).replace(/\/$/, "");
+      const response = await fetch(`${baseUrl}/api/v1/config`, {
+        headers: { Authorization: `Bearer ${apiKey}` }
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        const message = body.error || `HTTP ${response.status}`;
+        throw new Error(
+          `BugBear: Invalid API key \u2014 ${message}. Get yours at https://app.bugbear.ai/settings/projects`
+        );
+      }
+      const data = await response.json();
+      this.writeConfigCache(apiKey, data);
+      this.applyResolvedConfig(data);
+    } catch (err) {
+      this.initError = err instanceof Error ? err : new Error(String(err));
+      this.config.onError?.(this.initError, { context: "apikey_resolution_failed" });
+      throw this.initError;
+    }
+  }
+  /** Apply resolved credentials and create the Supabase client. */
+  applyResolvedConfig(resolved) {
+    this.config = {
+      ...this.config,
+      projectId: resolved.projectId,
+      supabaseUrl: resolved.supabaseUrl,
+      supabaseAnonKey: resolved.supabaseAnonKey
+    };
+    this.supabase = createClient(resolved.supabaseUrl, resolved.supabaseAnonKey);
+    this.initialized = true;
+    this.initOfflineQueue();
+  }
+  /** Initialize offline queue if configured. Shared by both init paths. */
+  initOfflineQueue() {
+    if (this.config.offlineQueue?.enabled) {
       this._queue = new OfflineQueue({
         enabled: true,
-        maxItems: config.offlineQueue.maxItems,
-        maxRetries: config.offlineQueue.maxRetries
+        maxItems: this.config.offlineQueue.maxItems,
+        maxRetries: this.config.offlineQueue.maxRetries
       });
       this.registerQueueHandlers();
     }
   }
+  /** Read cached config from localStorage if available and not expired. */
+  readConfigCache(apiKey) {
+    if (typeof localStorage === "undefined") return null;
+    try {
+      const key = CONFIG_CACHE_PREFIX + this.hashKey(apiKey);
+      const raw = localStorage.getItem(key);
+      if (!raw) return null;
+      const cached = JSON.parse(raw);
+      if (Date.now() - cached.cachedAt > CONFIG_CACHE_TTL_MS) {
+        localStorage.removeItem(key);
+        return null;
+      }
+      return cached;
+    } catch {
+      return null;
+    }
+  }
+  /** Write resolved config to localStorage cache. */
+  writeConfigCache(apiKey, data) {
+    if (typeof localStorage === "undefined") return;
+    try {
+      const key = CONFIG_CACHE_PREFIX + this.hashKey(apiKey);
+      const cached = { ...data, cachedAt: Date.now() };
+      localStorage.setItem(key, JSON.stringify(cached));
+    } catch {
+    }
+  }
+  /** Simple string hash for cache keys — avoids storing raw API keys. */
+  hashKey(apiKey) {
+    let hash = 0;
+    for (let i = 0; i < apiKey.length; i++) {
+      hash = (hash << 5) - hash + apiKey.charCodeAt(i) | 0;
+    }
+    return hash.toString(36);
+  }
+  /** Ensure the client is initialized before making requests. */
+  async ensureReady() {
+    if (this.initialized) return;
+    await this.pendingInit;
+    if (this.initError) throw this.initError;
+  }
   // ── Offline Queue ─────────────────────────────────────────
   /**
    * Access the offline queue (if enabled).
@@ -12078,6 +12195,7 @@ var BugBearClient = class {
    * Get current user info from host app or BugBear's own auth
    */
   async getCurrentUserInfo() {
+    await this.ensureReady();
     if (this.config.getCurrentUser) {
       return await this.config.getCurrentUser();
     }
@@ -12297,6 +12415,7 @@ var BugBearClient = class {
    */
   async getAssignment(assignmentId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("test_assignments").select(`
           id,
           status,
@@ -12368,6 +12487,7 @@ var BugBearClient = class {
    */
   async updateAssignmentStatus(assignmentId, status, options) {
     try {
+      await this.ensureReady();
       const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at").eq("id", assignmentId).single();
       if (fetchError || !currentAssignment) {
         console.error("BugBear: Assignment not found", {
@@ -12454,6 +12574,7 @@ var BugBearClient = class {
    */
   async reopenAssignment(assignmentId) {
     try {
+      await this.ensureReady();
       const { data: current, error: fetchError } = await this.supabase.from("test_assignments").select("status").eq("id", assignmentId).single();
       if (fetchError || !current) {
         return { success: false, error: "Assignment not found" };
@@ -12493,6 +12614,7 @@ var BugBearClient = class {
       actualNotes = notes;
     }
     try {
+      await this.ensureReady();
       const updateData = {
         status: "skipped",
         skip_reason: actualReason,
@@ -12662,6 +12784,7 @@ var BugBearClient = class {
    */
   async getTesterInfo() {
     try {
+      await this.ensureReady();
       const userInfo = await this.getCurrentUserInfo();
       if (!userInfo?.email) return null;
       if (!this.isValidEmail(userInfo.email)) {
@@ -12953,6 +13076,7 @@ var BugBearClient = class {
    */
   async isQAEnabled() {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("check_qa_enabled", {
         p_project_id: this.config.projectId
       });
@@ -12984,6 +13108,7 @@ var BugBearClient = class {
    */
   async uploadScreenshot(file, filename, bucket = "screenshots") {
     try {
+      await this.ensureReady();
       const contentType = file.type || "image/png";
       const ext = contentType.includes("png") ? "png" : "jpg";
       const name = filename || `screenshot-${Date.now()}.${ext}`;
@@ -13024,6 +13149,7 @@ var BugBearClient = class {
    */
   async uploadImageFromUri(uri, filename, bucket = "screenshots") {
     try {
+      await this.ensureReady();
       const response = await fetch(uri);
       const blob = await response.blob();
       const contentType = blob.type || "image/jpeg";
@@ -13118,6 +13244,7 @@ var BugBearClient = class {
    */
   async getFixRequests(options) {
     try {
+      await this.ensureReady();
       let query = this.supabase.from("fix_requests").select("*").eq("project_id", this.config.projectId).order("created_at", { ascending: false }).limit(options?.limit || 20);
       if (options?.status) {
         query = query.eq("status", options.status);
@@ -13189,6 +13316,7 @@ var BugBearClient = class {
    */
   async getThreadMessages(threadId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("discussion_messages").select(`
           id,
           thread_id,
@@ -13391,6 +13519,7 @@ var BugBearClient = class {
    */
   async endSession(sessionId, options = {}) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("end_qa_session", {
         p_session_id: sessionId,
         p_notes: options.notes || null,
@@ -13428,6 +13557,7 @@ var BugBearClient = class {
    */
   async getSession(sessionId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("qa_sessions").select("*").eq("id", sessionId).single();
       if (error || !data) return null;
       return this.transformSession(data);
@@ -13459,6 +13589,7 @@ var BugBearClient = class {
    */
   async addFinding(sessionId, options) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("add_session_finding", {
         p_session_id: sessionId,
         p_type: options.type,
@@ -13489,6 +13620,7 @@ var BugBearClient = class {
    */
   async getSessionFindings(sessionId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.from("qa_findings").select("*").eq("session_id", sessionId).order("created_at", { ascending: true }).limit(100);
       if (error) {
         console.error("BugBear: Failed to fetch findings", formatPgError(error));
@@ -13505,6 +13637,7 @@ var BugBearClient = class {
    */
   async convertFindingToBug(findingId) {
     try {
+      await this.ensureReady();
       const { data, error } = await this.supabase.rpc("convert_finding_to_bug", {
         p_finding_id: findingId
       });
@@ -13524,6 +13657,7 @@ var BugBearClient = class {
    */
   async dismissFinding(findingId, reason) {
     try {
+      await this.ensureReady();
       const { error } = await this.supabase.from("qa_findings").update({
         dismissed: true,
         dismissed_reason: reason || null,
@@ -15090,9 +15224,9 @@ function TestListScreen({ nav }) {
       /* @__PURE__ */ React5.createElement(Text3, { style: [styles3.trackBtnText, isActive && { color: track.color, fontWeight: "600" }] }, track.icon, " ", track.name)
     );
   })), /* @__PURE__ */ React5.createElement(View4, { style: styles3.sortGroup }, [
-    { key: "priority", label: "\u2195" },
-    { key: "recent", label: "\u{1F550}" },
-    { key: "alpha", label: "AZ" }
+    { key: "priority", label: "\u2195 Priority" },
+    { key: "recent", label: "\u{1F550} Recent" },
+    { key: "alpha", label: "A-Z" }
   ].map((s2) => /* @__PURE__ */ React5.createElement(
     TouchableOpacity3,
     {
@@ -16307,10 +16441,11 @@ var styles13 = StyleSheet15.create({
 });
 
 // src/widget/screens/IssueListScreen.tsx
-import React16, { useState as useState11, useEffect as useEffect10 } from "react";
+import React16, { useState as useState11, useEffect as useEffect10, useMemo as useMemo3 } from "react";
 import { View as View15, Text as Text14, TouchableOpacity as TouchableOpacity13, StyleSheet as StyleSheet16 } from "react-native";
+var CATEGORIES = ["open", "done", "reopened"];
 var CATEGORY_CONFIG = {
-  open: { label: "Open Issues", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
+  open: { label: "Open", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
   done: { label: "Done", accent: "#22c55e", emptyIcon: "\u{1F389}", emptyText: "No completed issues yet" },
   reopened: { label: "Reopened", accent: "#ef4444", emptyIcon: "\u{1F44D}", emptyText: "No reopened issues" }
 };
@@ -16320,11 +16455,20 @@ var SEVERITY_COLORS = {
   medium: "#eab308",
   low: "#71717a"
 };
+var SEVERITY_ORDER = { critical: 0, high: 1, medium: 2, low: 3 };
 function IssueListScreen({ nav, category }) {
   const { client } = useBugBear();
+  const [activeCategory, setActiveCategory] = useState11(category);
   const [issues, setIssues] = useState11([]);
   const [loading, setLoading] = useState11(true);
-  const config = CATEGORY_CONFIG[category];
+  const [counts, setCounts] = useState11(null);
+  const [sortMode, setSortMode] = useState11("severity");
+  const config = CATEGORY_CONFIG[activeCategory];
+  useEffect10(() => {
+    if (!client) return;
+    client.getIssueCounts().then(setCounts).catch(() => {
+    });
+  }, [client]);
   useEffect10(() => {
     let cancelled = false;
     setLoading(true);
@@ -16334,7 +16478,7 @@ function IssueListScreen({ nav, category }) {
         return;
       }
       try {
-        const data = await client.getIssues(category);
+        const data = await client.getIssues(activeCategory);
         if (!cancelled) {
           setIssues(data);
         }
@@ -16349,14 +16493,63 @@ function IssueListScreen({ nav, category }) {
     return () => {
       cancelled = true;
     };
-  }, [client, category]);
-  if (loading) {
-    return /* @__PURE__ */ React16.createElement(IssueListScreenSkeleton, null);
-  }
-  if (issues.length === 0) {
-    return /* @__PURE__ */ React16.createElement(View15, { style: styles14.emptyContainer }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.emptyIcon }, config.emptyIcon), /* @__PURE__ */ React16.createElement(Text14, { style: styles14.emptyText }, config.emptyText));
-  }
-  return /* @__PURE__ */ React16.createElement(View15, null, issues.map((issue) => /* @__PURE__ */ React16.createElement(
+  }, [client, activeCategory]);
+  const sortedIssues = useMemo3(() => {
+    const sorted = [...issues];
+    if (sortMode === "severity") {
+      sorted.sort((a, b) => (SEVERITY_ORDER[a.severity || "low"] ?? 4) - (SEVERITY_ORDER[b.severity || "low"] ?? 4));
+    } else {
+      sorted.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+    }
+    return sorted;
+  }, [issues, sortMode]);
+  return /* @__PURE__ */ React16.createElement(View15, null, /* @__PURE__ */ React16.createElement(View15, { style: styles14.tabBar }, CATEGORIES.map((cat) => {
+    const catConfig = CATEGORY_CONFIG[cat];
+    const isActive = activeCategory === cat;
+    const count = counts?.[cat];
+    return /* @__PURE__ */ React16.createElement(
+      TouchableOpacity13,
+      {
+        key: cat,
+        style: [
+          styles14.tab,
+          { borderBottomColor: isActive ? catConfig.accent : "transparent" }
+        ],
+        onPress: () => setActiveCategory(cat),
+        activeOpacity: 0.7
+      },
+      /* @__PURE__ */ React16.createElement(Text14, { style: [
+        styles14.tabLabel,
+        isActive && { fontWeight: "600", color: colors.textPrimary }
+      ] }, catConfig.label),
+      count !== void 0 && /* @__PURE__ */ React16.createElement(View15, { style: [
+        styles14.countBadge,
+        {
+          backgroundColor: isActive ? catConfig.accent + "18" : colors.card
+        }
+      ] }, /* @__PURE__ */ React16.createElement(Text14, { style: [
+        styles14.countText,
+        { color: isActive ? catConfig.accent : colors.textDim }
+      ] }, count))
+    );
+  })), /* @__PURE__ */ React16.createElement(View15, { style: styles14.sortRow }, [
+    { key: "severity", label: "Severity" },
+    { key: "recent", label: "Recent" }
+  ].map((s2) => /* @__PURE__ */ React16.createElement(
+    TouchableOpacity13,
+    {
+      key: s2.key,
+      style: [
+        styles14.sortBtn,
+        sortMode === s2.key && styles14.sortBtnActive
+      ],
+      onPress: () => setSortMode(s2.key)
+    },
+    /* @__PURE__ */ React16.createElement(Text14, { style: [
+      styles14.sortBtnText,
+      sortMode === s2.key && styles14.sortBtnTextActive
+    ] }, s2.label)
+  ))), loading ? /* @__PURE__ */ React16.createElement(IssueListScreenSkeleton, null) : sortedIssues.length === 0 ? /* @__PURE__ */ React16.createElement(View15, { style: styles14.emptyContainer }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.emptyIcon }, config.emptyIcon), /* @__PURE__ */ React16.createElement(Text14, { style: styles14.emptyText }, config.emptyText)) : sortedIssues.map((issue) => /* @__PURE__ */ React16.createElement(
     TouchableOpacity13,
     {
       key: issue.id,
@@ -16366,11 +16559,69 @@ function IssueListScreen({ nav, category }) {
     },
     /* @__PURE__ */ React16.createElement(View15, { style: styles14.topRow }, issue.severity && /* @__PURE__ */ React16.createElement(View15, { style: [styles14.severityDot, { backgroundColor: SEVERITY_COLORS[issue.severity] || colors.textDim }] }), /* @__PURE__ */ React16.createElement(Text14, { style: styles14.issueTitle, numberOfLines: 1 }, issue.title)),
     /* @__PURE__ */ React16.createElement(View15, { style: styles14.bottomRow }, issue.route && /* @__PURE__ */ React16.createElement(Text14, { style: styles14.routeText, numberOfLines: 1 }, issue.route), /* @__PURE__ */ React16.createElement(Text14, { style: styles14.timeText }, formatRelativeTime(issue.updatedAt))),
-    category === "done" && issue.verifiedByName && /* @__PURE__ */ React16.createElement(View15, { style: styles14.verifiedBadge }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.verifiedBadgeText }, "\u2714", " Verified by ", issue.verifiedByName)),
-    category === "reopened" && issue.originalBugTitle && /* @__PURE__ */ React16.createElement(View15, { style: styles14.reopenedBadge }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.reopenedBadgeText, numberOfLines: 1 }, "\u{1F504}", " Retest of: ", issue.originalBugTitle))
+    activeCategory === "done" && issue.verifiedByName && /* @__PURE__ */ React16.createElement(View15, { style: styles14.verifiedBadge }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.verifiedBadgeText }, "\u2714", " Verified by ", issue.verifiedByName)),
+    activeCategory === "reopened" && issue.originalBugTitle && /* @__PURE__ */ React16.createElement(View15, { style: styles14.reopenedBadge }, /* @__PURE__ */ React16.createElement(Text14, { style: styles14.reopenedBadgeText, numberOfLines: 1 }, "\u{1F504}", " Retest of: ", issue.originalBugTitle))
   )));
 }
 var styles14 = StyleSheet16.create({
+  tabBar: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    marginBottom: 8
+  },
+  tab: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    borderBottomWidth: 2
+  },
+  tabLabel: {
+    fontSize: 12,
+    fontWeight: "400",
+    color: colors.textMuted
+  },
+  countBadge: {
+    borderRadius: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    minWidth: 18,
+    alignItems: "center"
+  },
+  countText: {
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  sortRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 2,
+    marginBottom: 8
+  },
+  sortBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  sortBtnActive: {
+    backgroundColor: colors.card,
+    borderColor: colors.border
+  },
+  sortBtnText: {
+    fontSize: 10,
+    fontWeight: "400",
+    color: colors.textMuted
+  },
+  sortBtnTextActive: {
+    fontWeight: "600",
+    color: colors.textPrimary
+  },
   emptyContainer: {
     alignItems: "center",
     paddingVertical: 40
@@ -16826,7 +17077,7 @@ function BugBearButton({
         behavior: Platform5.OS === "ios" ? "padding" : "height",
         style: styles16.modalOverlay
       },
-      /* @__PURE__ */ React18.createElement(View17, { style: styles16.modalContainer }, /* @__PURE__ */ React18.createElement(View17, { style: styles16.header }, /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerLeft }, canGoBack ? /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerNavRow }, /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => nav.pop(), style: styles16.backButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.backText }, "\u2190 Back")), /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => nav.reset(), style: styles16.homeButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.homeText }, "\u{1F3E0}"))) : /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerTitleRow }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: handleClose, style: styles16.closeButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.closeText }, "\u2715"))), /* @__PURE__ */ React18.createElement(
+      /* @__PURE__ */ React18.createElement(View17, { style: styles16.modalContainer }, /* @__PURE__ */ React18.createElement(View17, { style: styles16.header }, /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerLeft }, canGoBack ? /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => nav.pop(), style: styles16.backButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.backText }, "\u2190 Back")) : /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerTitleRow }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ React18.createElement(Text16, { style: styles16.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ React18.createElement(View17, { style: styles16.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: () => nav.reset(), style: styles16.homeButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.homeIcon }, "\u2302")), /* @__PURE__ */ React18.createElement(TouchableOpacity15, { onPress: handleClose, style: styles16.closeButton }, /* @__PURE__ */ React18.createElement(Text16, { style: styles16.closeText }, "\u2715")))), /* @__PURE__ */ React18.createElement(
         ScrollView3,
         {
           style: styles16.content,
@@ -16927,11 +17178,6 @@ var styles16 = StyleSheet18.create({
     flex: 1,
     textAlign: "center"
   },
-  headerNavRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
   backButton: {
     paddingVertical: 2,
     paddingRight: 4
@@ -16941,12 +17187,25 @@ var styles16 = StyleSheet18.create({
     color: colors.blue,
     fontWeight: "500"
   },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
   homeButton: {
-    paddingVertical: 2,
-    paddingHorizontal: 6
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#1e3a5f",
+    borderWidth: 1,
+    borderColor: "rgba(59, 130, 246, 0.25)",
+    justifyContent: "center",
+    alignItems: "center"
   },
-  homeText: {
-    fontSize: 16
+  homeIcon: {
+    fontSize: 16,
+    color: "#60a5fa",
+    marginTop: -1
   },
   closeButton: {
     width: 32,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react-native",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "description": "BugBear React Native components for mobile apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -51,7 +51,7 @@
     }
   },
   "devDependencies": {
-    "@bbearai/core": "^0.5.0",
+    "@bbearai/core": "^0.6.0",
     "@eslint/js": "^9.39.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",