@bbearai/react 0.5.1 → 0.5.2

package/dist/index.js

@@ -343,11 +343,80 @@ function BugBearProvider({ config, children, enabled = true }) {
 }
 
 // src/BugBearPanel.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/widget/navigation.ts
 var import_react2 = require("react");
+var NAV_STORAGE_KEY = "bugbear-nav-screen";
+function serializeScreen(screen) {
+  switch (screen.name) {
+    case "HOME":
+    case "TEST_LIST":
+    case "MESSAGE_LIST":
+    case "COMPOSE_MESSAGE":
+    case "PROFILE":
+    case "REPORT_SUCCESS":
+      return JSON.stringify({ name: screen.name });
+    case "TEST_DETAIL":
+      return JSON.stringify({ name: screen.name, testId: screen.testId });
+    case "REPORT":
+      return JSON.stringify({ name: screen.name });
+    case "ISSUE_LIST":
+      return JSON.stringify({ name: screen.name, category: screen.category });
+    // Complex screens — save their parent list instead
+    case "THREAD_DETAIL":
+      return JSON.stringify({ name: "MESSAGE_LIST" });
+    case "ISSUE_DETAIL":
+      return JSON.stringify({ name: "ISSUE_LIST", category: "open" });
+    case "TEST_FEEDBACK":
+      return JSON.stringify({ name: "TEST_LIST" });
+    default:
+      return null;
+  }
+}
+function deserializeScreen(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!parsed || !parsed.name) return null;
+    switch (parsed.name) {
+      case "HOME":
+        return { name: "HOME" };
+      case "TEST_LIST":
+        return { name: "TEST_LIST" };
+      case "MESSAGE_LIST":
+        return { name: "MESSAGE_LIST" };
+      case "COMPOSE_MESSAGE":
+        return { name: "COMPOSE_MESSAGE" };
+      case "PROFILE":
+        return { name: "PROFILE" };
+      case "REPORT_SUCCESS":
+        return { name: "REPORT_SUCCESS" };
+      case "TEST_DETAIL":
+        return { name: "TEST_DETAIL", testId: parsed.testId };
+      case "REPORT":
+        return { name: "REPORT" };
+      case "ISSUE_LIST":
+        return { name: "ISSUE_LIST", category: parsed.category || "open" };
+      default:
+        return null;
+    }
+  } catch {
+    return null;
+  }
+}
+function getInitialScreen() {
+  if (typeof window === "undefined") return { name: "HOME" };
+  try {
+    const saved = localStorage.getItem(NAV_STORAGE_KEY);
+    if (saved) {
+      const screen = deserializeScreen(saved);
+      if (screen) return screen;
+    }
+  } catch {
+  }
+  return { name: "HOME" };
+}
 function navReducer(state, action) {
   switch (action.type) {
     case "PUSH":
@@ -363,9 +432,21 @@ function navReducer(state, action) {
   }
 }
 function useNavigation() {
-  const [state, dispatch] = (0, import_react2.useReducer)(navReducer, { stack: [{ name: "HOME" }] });
+  const initialScreen = (0, import_react2.useRef)(getInitialScreen());
+  const [state, dispatch] = (0, import_react2.useReducer)(navReducer, { stack: [initialScreen.current] });
+  const currentScreen = state.stack[state.stack.length - 1];
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const serialized = serializeScreen(currentScreen);
+      if (serialized) {
+        localStorage.setItem(NAV_STORAGE_KEY, serialized);
+      }
+    } catch {
+    }
+  }, [currentScreen]);
   return {
-    currentScreen: state.stack[state.stack.length - 1],
+    currentScreen,
     canGoBack: state.stack.length > 1,
     push: (screen) => dispatch({ type: "PUSH", screen }),
     pop: () => dispatch({ type: "POP" }),
@@ -459,6 +540,36 @@ function getThreadTypeIcon(type) {
   }
 }
 
+// src/widget/useScreenCapture.ts
+var import_modern_screenshot = require("modern-screenshot");
+async function capturePageScreenshot(options = {}) {
+  const { excludeElement, timeout = 3e3 } = options;
+  try {
+    const blob = await Promise.race([
+      (0, import_modern_screenshot.domToBlob)(document.documentElement, {
+        filter: (node) => {
+          if (excludeElement && node === excludeElement) return false;
+          return true;
+        },
+        scale: 1,
+        quality: 0.85
+      }),
+      new Promise(
+        (_, reject) => setTimeout(() => reject(new Error("Screenshot capture timed out")), timeout)
+      )
+    ]);
+    if (!blob) return null;
+    return new File(
+      [blob],
+      `screenshot-auto-${Date.now()}.png`,
+      { type: "image/png" }
+    );
+  } catch (err) {
+    console.warn("BugBear: Auto-capture failed, user can attach manually", err);
+    return null;
+  }
+}
+
 // src/widget/screens/HomeScreen.tsx
 var import_react3 = require("react");
 
@@ -601,7 +712,7 @@ function MessageListScreenSkeleton() {
 
 // src/widget/screens/HomeScreen.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function HomeScreen({ nav }) {
+function HomeScreen({ nav, onReportBug }) {
   const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, dashboardUrl, isLoading } = useBugBear();
   (0, import_react3.useEffect)(() => {
     refreshAssignments();
@@ -790,9 +901,11 @@ function HomeScreen({ nav }) {
             {
               role: "button",
               tabIndex: 0,
-              onClick: () => nav.push({ name: "REPORT", prefill: { type: "bug" } }),
+              onClick: () => onReportBug ? onReportBug() : nav.push({ name: "REPORT", prefill: { type: "bug" } }),
               onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") nav.push({ name: "REPORT", prefill: { type: "bug" } });
+                if (e.key === "Enter" || e.key === " ") {
+                  onReportBug ? onReportBug() : nav.push({ name: "REPORT", prefill: { type: "bug" } });
+                }
               },
               style: {
                 backgroundColor: colors.card,
@@ -1662,6 +1775,11 @@ function TestDetailScreen({ testId, nav }) {
               ]
             }
           ),
+          testCase.track && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 12, color: colors.textSecondary, marginBottom: 6 }, children: [
+            testCase.track.icon,
+            " ",
+            testCase.track.name
+          ] }),
           testCase.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 13, color: colors.textSecondary, lineHeight: "18px" }, children: testCase.description }),
           testCase.group && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { fontSize: 12, color: colors.textMuted }, children: [
             "\u{1F4C1} ",
@@ -2017,13 +2135,6 @@ function TestListScreen({ nav }) {
     }
     return Array.from(trackMap.values());
   }, [assignments]);
-  const availablePlatforms = (0, import_react5.useMemo)(() => {
-    const set = /* @__PURE__ */ new Set();
-    for (const a of assignments) {
-      if (a.testCase.platforms) a.testCase.platforms.forEach((p) => set.add(p));
-    }
-    return Array.from(set).sort();
-  }, [assignments]);
   const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = (0, import_react5.useMemo)(() => {
     const groups = /* @__PURE__ */ new Map();
@@ -2231,7 +2342,7 @@ function TestListScreen({ nav }) {
         }
       }
     ) }),
-    availablePlatforms.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
@@ -2248,18 +2359,20 @@ function TestListScreen({ nav }) {
             fontWeight: !platformFilter ? 600 : 400,
             whiteSpace: "nowrap"
           },
-          children: "All Platforms"
+          children: "All"
         }
       ),
-      availablePlatforms.map((p) => {
-        const isActive = platformFilter === p;
-        const label = p === "ios" ? "iOS" : p === "android" ? "Android" : p === "web" ? "Web" : p;
-        const icon = p === "ios" ? "\u{1F4F1}" : p === "android" ? "\u{1F916}" : p === "web" ? "\u{1F310}" : "\u{1F4CB}";
+      [
+        { key: "web", label: "Web", icon: "\u{1F310}" },
+        { key: "ios", label: "iOS", icon: "\u{1F4F1}" },
+        { key: "android", label: "Android", icon: "\u{1F916}" }
+      ].map((p) => {
+        const isActive = platformFilter === p.key;
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "button",
           {
             type: "button",
-            onClick: () => setPlatformFilter(isActive ? null : p),
+            onClick: () => setPlatformFilter(isActive ? null : p.key),
             style: {
               display: "flex",
               alignItems: "center",
@@ -2275,12 +2388,12 @@ function TestListScreen({ nav }) {
               whiteSpace: "nowrap"
             },
             children: [
-              icon,
+              p.icon,
               " ",
-              label
+              p.label
             ]
           },
-          p
+          p.key
         );
       })
     ] }),
@@ -2688,6 +2801,25 @@ function useImageAttachments(uploadFn, maxImages, bucket = "screenshots") {
   const pickFromCamera = (0, import_react6.useCallback)(() => {
     triggerFilePicker("environment");
   }, [triggerFilePicker]);
+  const addFile = (0, import_react6.useCallback)((file) => {
+    const id = `img-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const localUri = URL.createObjectURL(file);
+    const name = file.name || `image-${id}.png`;
+    setImages((prev) => {
+      if (prev.length >= maxImages) return prev;
+      return [...prev, { id, localUri, remoteUrl: null, name, status: "uploading" }];
+    });
+    uploadFn(file, bucket).then((url) => {
+      setImages((prev) => prev.map(
+        (img) => img.id === id ? { ...img, remoteUrl: url, status: url ? "done" : "error" } : img
+      ));
+    }).catch((err) => {
+      console.error("BugBear: Image upload failed", err);
+      setImages((prev) => prev.map(
+        (img) => img.id === id ? { ...img, status: "error" } : img
+      ));
+    });
+  }, [maxImages, uploadFn, bucket]);
   const removeImage = (0, import_react6.useCallback)((id) => {
     setImages((prev) => {
       const img = prev.find((i) => i.id === id);
@@ -2709,7 +2841,7 @@ function useImageAttachments(uploadFn, maxImages, bucket = "screenshots") {
   const getScreenshotUrls = (0, import_react6.useCallback)(() => {
     return images.filter((img) => img.status === "done" && img.remoteUrl).map((img) => img.remoteUrl);
   }, [images]);
-  return { images, pickFromGallery, pickFromCamera, removeImage, clear, isUploading, hasError, getAttachments, getScreenshotUrls };
+  return { images, pickFromGallery, pickFromCamera, addFile, removeImage, clear, isUploading, hasError, getAttachments, getScreenshotUrls };
 }
 
 // src/widget/ImagePreviewStrip.tsx
@@ -2830,7 +2962,12 @@ function ImagePickerButtons({ images, maxImages, onPickGallery, onPickCamera, on
         maxImages
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImagePreviewStrip, { images, onRemove })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImagePreviewStrip, { images, onRemove }),
+    typeof navigator !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: 11, color: colors.textDim, display: "block", marginTop: 4 }, children: [
+      "Paste images with ",
+      typeof navigator !== "undefined" && navigator.platform?.includes("Mac") ? "\u2318" : "Ctrl",
+      "+V"
+    ] })
   ] });
 }
 
@@ -3128,7 +3265,7 @@ var styles = {
 };
 
 // src/widget/screens/ReportScreen.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/widget/CategoryDropdown.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -3174,27 +3311,79 @@ function CategoryDropdown({ value, onChange, optional = true, disabled = false }
   );
 }
 
+// src/widget/useClipboardPaste.ts
+var import_react8 = require("react");
+function useClipboardPaste({
+  containerRef,
+  enabled,
+  currentCount,
+  maxImages,
+  addFile
+}) {
+  const handlePaste = (0, import_react8.useCallback)((event) => {
+    if (!enabled || currentCount >= maxImages) return;
+    const items = event.clipboardData?.items;
+    if (!items) return;
+    const imageFiles = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+    if (imageFiles.length === 0) return;
+    event.preventDefault();
+    const remaining = maxImages - currentCount;
+    for (const file of imageFiles.slice(0, remaining)) {
+      addFile(file);
+    }
+  }, [enabled, currentCount, maxImages, addFile]);
+  (0, import_react8.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+    container.addEventListener("paste", handlePaste);
+    return () => container.removeEventListener("paste", handlePaste);
+  }, [containerRef, enabled, handlePaste]);
+}
+
 // src/widget/screens/ReportScreen.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function ReportScreen({ nav, prefill }) {
+function ReportScreen({ nav, prefill, autoCapture, onAutoCaptureConsumed }) {
   const { client, refreshAssignments, uploadImage } = useBugBear();
   const images = useImageAttachments(uploadImage, 5, "screenshots");
-  const [reportType, setReportType] = (0, import_react8.useState)(prefill?.type || "bug");
-  const [severity, setSeverity] = (0, import_react8.useState)("medium");
-  const [category, setCategory] = (0, import_react8.useState)(null);
-  const [description, setDescription] = (0, import_react8.useState)("");
-  const [affectedRoute, setAffectedRoute] = (0, import_react8.useState)("");
-  const [submitting, setSubmitting] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const submittingRef = (0, import_react8.useRef)(false);
-  import_react8.default.useEffect(() => {
+  const formRef = (0, import_react9.useRef)(null);
+  const hasConsumedCapture = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
+    if (autoCapture && !hasConsumedCapture.current) {
+      hasConsumedCapture.current = true;
+      images.addFile(autoCapture);
+      onAutoCaptureConsumed?.();
+    }
+  }, [autoCapture, onAutoCaptureConsumed]);
+  useClipboardPaste({
+    containerRef: formRef,
+    enabled: true,
+    currentCount: images.images.length,
+    maxImages: 5,
+    addFile: images.addFile
+  });
+  const [reportType, setReportType] = (0, import_react9.useState)(prefill?.type || "bug");
+  const [severity, setSeverity] = (0, import_react9.useState)("medium");
+  const [category, setCategory] = (0, import_react9.useState)(null);
+  const [description, setDescription] = (0, import_react9.useState)("");
+  const [affectedRoute, setAffectedRoute] = (0, import_react9.useState)("");
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const submittingRef = (0, import_react9.useRef)(false);
+  import_react9.default.useEffect(() => {
     if (reportType === "feedback" || reportType === "suggestion") {
       setCategory("other");
     } else {
       setCategory(null);
     }
   }, [reportType]);
-  const observedRoute = (0, import_react8.useRef)(
+  const observedRoute = (0, import_react9.useRef)(
     typeof window !== "undefined" ? window.location.pathname : "unknown"
   );
   const isRetestFailure = prefill?.type === "test_fail";
@@ -3250,7 +3439,7 @@ function ReportScreen({ nav, prefill }) {
     { sev: "medium", color: "#eab308" },
     { sev: "low", color: "#6b7280" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: isRetestFailure ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: formRef, tabIndex: -1, style: { outline: "none" }, children: isRetestFailure ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: styles2.retestBanner, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: 16 }, children: "\u{1F504}" }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
@@ -3578,10 +3767,10 @@ var styles2 = {
 };
 
 // src/widget/screens/ReportSuccessScreen.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ReportSuccessScreen({ nav }) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const timer = setTimeout(() => nav.reset(), 2e3);
     return () => clearTimeout(timer);
   }, [nav]);
@@ -3871,7 +4060,7 @@ function MessageListScreen({ nav }) {
 }
 
 // src/widget/screens/ThreadDetailScreen.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var inputStyle = {
   backgroundColor: "#27272a",
@@ -3888,12 +4077,12 @@ function ThreadDetailScreen({
 }) {
   const { getThreadMessages, sendMessage, markAsRead, uploadImage } = useBugBear();
   const replyImages = useImageAttachments(uploadImage, 3, "discussion-attachments");
-  const [messages, setMessages] = (0, import_react10.useState)([]);
-  const [loading, setLoading] = (0, import_react10.useState)(true);
-  const [replyText, setReplyText] = (0, import_react10.useState)("");
-  const [sending, setSending] = (0, import_react10.useState)(false);
-  const [sendError, setSendError] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react11.useState)([]);
+  const [loading, setLoading] = (0, import_react11.useState)(true);
+  const [replyText, setReplyText] = (0, import_react11.useState)("");
+  const [sending, setSending] = (0, import_react11.useState)(false);
+  const [sendError, setSendError] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     (async () => {
@@ -4160,7 +4349,7 @@ function ThreadDetailScreen({
 }
 
 // src/widget/screens/ComposeMessageScreen.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var inputStyle2 = {
   backgroundColor: "#27272a",
@@ -4174,9 +4363,9 @@ var inputStyle2 = {
 function ComposeMessageScreen({ nav }) {
   const { createThread, uploadImage } = useBugBear();
   const images = useImageAttachments(uploadImage, 3, "discussion-attachments");
-  const [subject, setSubject] = (0, import_react11.useState)("");
-  const [message, setMessage] = (0, import_react11.useState)("");
-  const [sending, setSending] = (0, import_react11.useState)(false);
+  const [subject, setSubject] = (0, import_react12.useState)("");
+  const [message, setMessage] = (0, import_react12.useState)("");
+  const [sending, setSending] = (0, import_react12.useState)(false);
   const canSend = subject.trim().length > 0 && message.trim().length > 0 && !sending && !images.isUploading;
   const handleSend = async () => {
     if (!canSend) return;
@@ -4318,20 +4507,20 @@ function ComposeMessageScreen({ nav }) {
 }
 
 // src/widget/screens/ProfileScreen.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ProfileScreen({ nav }) {
   const { testerInfo, assignments, updateTesterProfile, refreshTesterInfo } = useBugBear();
-  const [editing, setEditing] = (0, import_react12.useState)(false);
-  const [name, setName] = (0, import_react12.useState)(testerInfo?.name || "");
-  const [additionalEmails, setAdditionalEmails] = (0, import_react12.useState)(testerInfo?.additionalEmails || []);
-  const [newEmailInput, setNewEmailInput] = (0, import_react12.useState)("");
-  const [platforms, setPlatforms] = (0, import_react12.useState)(testerInfo?.platforms || []);
-  const [saving, setSaving] = (0, import_react12.useState)(false);
-  const [saved, setSaved] = (0, import_react12.useState)(false);
-  const [showDetails, setShowDetails] = (0, import_react12.useState)(false);
+  const [editing, setEditing] = (0, import_react13.useState)(false);
+  const [name, setName] = (0, import_react13.useState)(testerInfo?.name || "");
+  const [additionalEmails, setAdditionalEmails] = (0, import_react13.useState)(testerInfo?.additionalEmails || []);
+  const [newEmailInput, setNewEmailInput] = (0, import_react13.useState)("");
+  const [platforms, setPlatforms] = (0, import_react13.useState)(testerInfo?.platforms || []);
+  const [saving, setSaving] = (0, import_react13.useState)(false);
+  const [saved, setSaved] = (0, import_react13.useState)(false);
+  const [showDetails, setShowDetails] = (0, import_react13.useState)(false);
   const completedCount = assignments.filter((a) => a.status === "passed" || a.status === "failed").length;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (testerInfo) {
       setName(testerInfo.name);
       setAdditionalEmails(testerInfo.additionalEmails || []);
@@ -4795,7 +4984,7 @@ var styles4 = {
 };
 
 // src/widget/screens/IssueListScreen.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var CATEGORY_CONFIG = {
   open: { label: "Open Issues", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
@@ -4810,10 +4999,10 @@ var SEVERITY_COLORS = {
 };
 function IssueListScreen({ nav, category }) {
   const { client } = useBugBear();
-  const [issues, setIssues] = (0, import_react13.useState)([]);
-  const [loading, setLoading] = (0, import_react13.useState)(true);
+  const [issues, setIssues] = (0, import_react14.useState)([]);
+  const [loading, setLoading] = (0, import_react14.useState)(true);
   const config = CATEGORY_CONFIG[category];
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     let cancelled = false;
     setLoading(true);
     (async () => {
@@ -5154,12 +5343,13 @@ function BugBearPanel({
 }) {
   const { shouldShowWidget, testerInfo, assignments, isLoading, unreadCount } = useBugBear();
   const { currentScreen, canGoBack, push, pop, replace, reset } = useNavigation();
-  const [collapsed, setCollapsed] = (0, import_react14.useState)(defaultCollapsed);
-  const [panelPosition, setPanelPosition] = (0, import_react14.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react14.useState)(false);
-  const dragStartRef = (0, import_react14.useRef)(null);
-  const panelRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [collapsed, setCollapsed] = (0, import_react15.useState)(defaultCollapsed);
+  const autoCaptureRef = (0, import_react15.useRef)(null);
+  const [panelPosition, setPanelPosition] = (0, import_react15.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react15.useState)(false);
+  const dragStartRef = (0, import_react15.useRef)(null);
+  const panelRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (typeof window === "undefined") return;
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
@@ -5173,7 +5363,7 @@ function BugBearPanel({
       setPanelPosition(getDefaultPosition(position));
     }
   }, [position]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (panelPosition && typeof window !== "undefined") {
       try {
         localStorage.setItem(STORAGE_KEY, JSON.stringify(panelPosition));
@@ -5181,7 +5371,7 @@ function BugBearPanel({
       }
     }
   }, [panelPosition]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       setPanelPosition((prev) => prev ? clampPosition(prev) : getDefaultPosition(position));
@@ -5189,7 +5379,7 @@ function BugBearPanel({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [position]);
-  const handleMouseDown = (0, import_react14.useCallback)((e) => {
+  const handleMouseDown = (0, import_react15.useCallback)((e) => {
     if (!draggable || !panelPosition) return;
     const target = e.target;
     if (!target.closest("[data-drag-handle]")) return;
@@ -5202,7 +5392,7 @@ function BugBearPanel({
       panelY: panelPosition.y
     };
   }, [draggable, panelPosition]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       if (!dragStartRef.current) return;
@@ -5224,7 +5414,7 @@ function BugBearPanel({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
-  const handleDoubleClick = (0, import_react14.useCallback)(() => {
+  const handleDoubleClick = (0, import_react15.useCallback)(() => {
     if (!draggable) return;
     setPanelPosition(getDefaultPosition(position));
     try {
@@ -5232,6 +5422,14 @@ function BugBearPanel({
     } catch {
     }
   }, [draggable, position]);
+  const handleReportBug = (0, import_react15.useCallback)(async () => {
+    const file = await capturePageScreenshot({
+      excludeElement: panelRef.current,
+      timeout: 3e3
+    });
+    autoCaptureRef.current = file;
+    push({ name: "REPORT", prefill: { type: "bug" } });
+  }, [push]);
   if (isLoading || !shouldShowWidget) return null;
   if (!panelPosition) return null;
   const pendingCount = assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length;
@@ -5268,13 +5466,12 @@ function BugBearPanel({
   };
   const handleClose = () => {
     setCollapsed(true);
-    reset();
   };
   const nav = { push, pop, replace, reset, canGoBack };
   const renderScreen = () => {
     switch (currentScreen.name) {
       case "HOME":
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HomeScreen, { nav });
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HomeScreen, { nav, onReportBug: handleReportBug });
       case "TEST_DETAIL":
         return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TestDetailScreen, { testId: currentScreen.testId, nav });
       case "TEST_LIST":
@@ -5282,7 +5479,17 @@ function BugBearPanel({
       case "TEST_FEEDBACK":
         return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TestFeedbackScreen, { status: currentScreen.status, assignmentId: currentScreen.assignmentId, nav });
       case "REPORT":
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReportScreen, { nav, prefill: currentScreen.prefill });
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          ReportScreen,
+          {
+            nav,
+            prefill: currentScreen.prefill,
+            autoCapture: autoCaptureRef.current,
+            onAutoCaptureConsumed: () => {
+              autoCaptureRef.current = null;
+            }
+          }
+        );
       case "REPORT_SUCCESS":
         return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReportSuccessScreen, { nav });
       case "MESSAGE_LIST":
@@ -5479,10 +5686,10 @@ function BugBearPanel({
 }
 
 // src/BugBearErrorBoundary.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_core2 = require("@bbearai/core");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var BugBearErrorBoundary = class extends import_react15.Component {
+var BugBearErrorBoundary = class extends import_react16.Component {
   constructor(props) {
     super(props);
     this.reset = () => {

package/dist/index.mjs

@@ -304,11 +304,80 @@ function BugBearProvider({ config, children, enabled = true }) {
 }
 
 // src/BugBearPanel.tsx
-import { useState as useState11, useRef as useRef3, useEffect as useEffect8, useCallback as useCallback5 } from "react";
+import { useState as useState11, useRef as useRef4, useEffect as useEffect11, useCallback as useCallback6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/widget/navigation.ts
-import { useReducer } from "react";
+import { useReducer, useEffect as useEffect2, useRef as useRef2 } from "react";
+var NAV_STORAGE_KEY = "bugbear-nav-screen";
+function serializeScreen(screen) {
+  switch (screen.name) {
+    case "HOME":
+    case "TEST_LIST":
+    case "MESSAGE_LIST":
+    case "COMPOSE_MESSAGE":
+    case "PROFILE":
+    case "REPORT_SUCCESS":
+      return JSON.stringify({ name: screen.name });
+    case "TEST_DETAIL":
+      return JSON.stringify({ name: screen.name, testId: screen.testId });
+    case "REPORT":
+      return JSON.stringify({ name: screen.name });
+    case "ISSUE_LIST":
+      return JSON.stringify({ name: screen.name, category: screen.category });
+    // Complex screens — save their parent list instead
+    case "THREAD_DETAIL":
+      return JSON.stringify({ name: "MESSAGE_LIST" });
+    case "ISSUE_DETAIL":
+      return JSON.stringify({ name: "ISSUE_LIST", category: "open" });
+    case "TEST_FEEDBACK":
+      return JSON.stringify({ name: "TEST_LIST" });
+    default:
+      return null;
+  }
+}
+function deserializeScreen(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!parsed || !parsed.name) return null;
+    switch (parsed.name) {
+      case "HOME":
+        return { name: "HOME" };
+      case "TEST_LIST":
+        return { name: "TEST_LIST" };
+      case "MESSAGE_LIST":
+        return { name: "MESSAGE_LIST" };
+      case "COMPOSE_MESSAGE":
+        return { name: "COMPOSE_MESSAGE" };
+      case "PROFILE":
+        return { name: "PROFILE" };
+      case "REPORT_SUCCESS":
+        return { name: "REPORT_SUCCESS" };
+      case "TEST_DETAIL":
+        return { name: "TEST_DETAIL", testId: parsed.testId };
+      case "REPORT":
+        return { name: "REPORT" };
+      case "ISSUE_LIST":
+        return { name: "ISSUE_LIST", category: parsed.category || "open" };
+      default:
+        return null;
+    }
+  } catch {
+    return null;
+  }
+}
+function getInitialScreen() {
+  if (typeof window === "undefined") return { name: "HOME" };
+  try {
+    const saved = localStorage.getItem(NAV_STORAGE_KEY);
+    if (saved) {
+      const screen = deserializeScreen(saved);
+      if (screen) return screen;
+    }
+  } catch {
+  }
+  return { name: "HOME" };
+}
 function navReducer(state, action) {
   switch (action.type) {
     case "PUSH":
@@ -324,9 +393,21 @@ function navReducer(state, action) {
   }
 }
 function useNavigation() {
-  const [state, dispatch] = useReducer(navReducer, { stack: [{ name: "HOME" }] });
+  const initialScreen = useRef2(getInitialScreen());
+  const [state, dispatch] = useReducer(navReducer, { stack: [initialScreen.current] });
+  const currentScreen = state.stack[state.stack.length - 1];
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const serialized = serializeScreen(currentScreen);
+      if (serialized) {
+        localStorage.setItem(NAV_STORAGE_KEY, serialized);
+      }
+    } catch {
+    }
+  }, [currentScreen]);
   return {
-    currentScreen: state.stack[state.stack.length - 1],
+    currentScreen,
     canGoBack: state.stack.length > 1,
     push: (screen) => dispatch({ type: "PUSH", screen }),
     pop: () => dispatch({ type: "POP" }),
@@ -420,8 +501,38 @@ function getThreadTypeIcon(type) {
   }
 }
 
+// src/widget/useScreenCapture.ts
+import { domToBlob } from "modern-screenshot";
+async function capturePageScreenshot(options = {}) {
+  const { excludeElement, timeout = 3e3 } = options;
+  try {
+    const blob = await Promise.race([
+      domToBlob(document.documentElement, {
+        filter: (node) => {
+          if (excludeElement && node === excludeElement) return false;
+          return true;
+        },
+        scale: 1,
+        quality: 0.85
+      }),
+      new Promise(
+        (_, reject) => setTimeout(() => reject(new Error("Screenshot capture timed out")), timeout)
+      )
+    ]);
+    if (!blob) return null;
+    return new File(
+      [blob],
+      `screenshot-auto-${Date.now()}.png`,
+      { type: "image/png" }
+    );
+  } catch (err) {
+    console.warn("BugBear: Auto-capture failed, user can attach manually", err);
+    return null;
+  }
+}
+
 // src/widget/screens/HomeScreen.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/widget/Skeleton.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -562,9 +673,9 @@ function MessageListScreenSkeleton() {
 
 // src/widget/screens/HomeScreen.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function HomeScreen({ nav }) {
+function HomeScreen({ nav, onReportBug }) {
   const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, dashboardUrl, isLoading } = useBugBear();
-  useEffect2(() => {
+  useEffect3(() => {
     refreshAssignments();
     refreshThreads();
     refreshIssueCounts();
@@ -751,9 +862,11 @@ function HomeScreen({ nav }) {
             {
               role: "button",
               tabIndex: 0,
-              onClick: () => nav.push({ name: "REPORT", prefill: { type: "bug" } }),
+              onClick: () => onReportBug ? onReportBug() : nav.push({ name: "REPORT", prefill: { type: "bug" } }),
               onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") nav.push({ name: "REPORT", prefill: { type: "bug" } });
+                if (e.key === "Enter" || e.key === " ") {
+                  onReportBug ? onReportBug() : nav.push({ name: "REPORT", prefill: { type: "bug" } });
+                }
               },
               style: {
                 backgroundColor: colors.card,
@@ -1019,7 +1132,7 @@ function HomeScreen({ nav }) {
 }
 
 // src/widget/screens/TestDetailScreen.tsx
-import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { useState as useState2, useEffect as useEffect4, useCallback as useCallback2 } from "react";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function TestDetailScreen({ testId, nav }) {
   const { client, assignments, currentAssignment, refreshAssignments, onNavigate } = useBugBear();
@@ -1033,12 +1146,12 @@ function TestDetailScreen({ testId, nav }) {
   const [skipNotes, setSkipNotes] = useState2("");
   const [skipping, setSkipping] = useState2(false);
   const [isSubmitting, setIsSubmitting] = useState2(false);
-  useEffect3(() => {
+  useEffect4(() => {
     setCriteriaResults({});
     setShowSteps(true);
     setShowDetails(false);
   }, [displayedAssignment?.id]);
-  useEffect3(() => {
+  useEffect4(() => {
     const active = displayedAssignment?.status === "in_progress" ? displayedAssignment : null;
     if (!active?.startedAt) {
       setAssignmentElapsedTime(0);
@@ -1623,6 +1736,11 @@ function TestDetailScreen({ testId, nav }) {
               ]
             }
           ),
+          testCase.track && /* @__PURE__ */ jsxs3("div", { style: { fontSize: 12, color: colors.textSecondary, marginBottom: 6 }, children: [
+            testCase.track.icon,
+            " ",
+            testCase.track.name
+          ] }),
           testCase.description && /* @__PURE__ */ jsx4("div", { style: { fontSize: 13, color: colors.textSecondary, lineHeight: "18px" }, children: testCase.description }),
           testCase.group && /* @__PURE__ */ jsx4("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxs3("span", { style: { fontSize: 12, color: colors.textMuted }, children: [
             "\u{1F4C1} ",
@@ -1978,13 +2096,6 @@ function TestListScreen({ nav }) {
     }
     return Array.from(trackMap.values());
   }, [assignments]);
-  const availablePlatforms = useMemo(() => {
-    const set = /* @__PURE__ */ new Set();
-    for (const a of assignments) {
-      if (a.testCase.platforms) a.testCase.platforms.forEach((p) => set.add(p));
-    }
-    return Array.from(set).sort();
-  }, [assignments]);
   const selectedRole = availableRoles.find((r) => r.id === roleFilter);
   const groupedAssignments = useMemo(() => {
     const groups = /* @__PURE__ */ new Map();
@@ -2192,7 +2303,7 @@ function TestListScreen({ nav }) {
         }
       }
     ) }),
-    availablePlatforms.length >= 2 && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
       /* @__PURE__ */ jsx5(
         "button",
         {
@@ -2209,18 +2320,20 @@ function TestListScreen({ nav }) {
             fontWeight: !platformFilter ? 600 : 400,
             whiteSpace: "nowrap"
           },
-          children: "All Platforms"
+          children: "All"
         }
       ),
-      availablePlatforms.map((p) => {
-        const isActive = platformFilter === p;
-        const label = p === "ios" ? "iOS" : p === "android" ? "Android" : p === "web" ? "Web" : p;
-        const icon = p === "ios" ? "\u{1F4F1}" : p === "android" ? "\u{1F916}" : p === "web" ? "\u{1F310}" : "\u{1F4CB}";
+      [
+        { key: "web", label: "Web", icon: "\u{1F310}" },
+        { key: "ios", label: "iOS", icon: "\u{1F4F1}" },
+        { key: "android", label: "Android", icon: "\u{1F916}" }
+      ].map((p) => {
+        const isActive = platformFilter === p.key;
         return /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
-            onClick: () => setPlatformFilter(isActive ? null : p),
+            onClick: () => setPlatformFilter(isActive ? null : p.key),
             style: {
               display: "flex",
               alignItems: "center",
@@ -2236,12 +2349,12 @@ function TestListScreen({ nav }) {
               whiteSpace: "nowrap"
             },
             children: [
-              icon,
+              p.icon,
               " ",
-              label
+              p.label
             ]
           },
-          p
+          p.key
         );
       })
     ] }),
@@ -2649,6 +2762,25 @@ function useImageAttachments(uploadFn, maxImages, bucket = "screenshots") {
   const pickFromCamera = useCallback4(() => {
     triggerFilePicker("environment");
   }, [triggerFilePicker]);
+  const addFile = useCallback4((file) => {
+    const id = `img-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const localUri = URL.createObjectURL(file);
+    const name = file.name || `image-${id}.png`;
+    setImages((prev) => {
+      if (prev.length >= maxImages) return prev;
+      return [...prev, { id, localUri, remoteUrl: null, name, status: "uploading" }];
+    });
+    uploadFn(file, bucket).then((url) => {
+      setImages((prev) => prev.map(
+        (img) => img.id === id ? { ...img, remoteUrl: url, status: url ? "done" : "error" } : img
+      ));
+    }).catch((err) => {
+      console.error("BugBear: Image upload failed", err);
+      setImages((prev) => prev.map(
+        (img) => img.id === id ? { ...img, status: "error" } : img
+      ));
+    });
+  }, [maxImages, uploadFn, bucket]);
   const removeImage = useCallback4((id) => {
     setImages((prev) => {
       const img = prev.find((i) => i.id === id);
@@ -2670,7 +2802,7 @@ function useImageAttachments(uploadFn, maxImages, bucket = "screenshots") {
   const getScreenshotUrls = useCallback4(() => {
     return images.filter((img) => img.status === "done" && img.remoteUrl).map((img) => img.remoteUrl);
   }, [images]);
-  return { images, pickFromGallery, pickFromCamera, removeImage, clear, isUploading, hasError, getAttachments, getScreenshotUrls };
+  return { images, pickFromGallery, pickFromCamera, addFile, removeImage, clear, isUploading, hasError, getAttachments, getScreenshotUrls };
 }
 
 // src/widget/ImagePreviewStrip.tsx
@@ -2791,7 +2923,12 @@ function ImagePickerButtons({ images, maxImages, onPickGallery, onPickCamera, on
         maxImages
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(ImagePreviewStrip, { images, onRemove })
+    /* @__PURE__ */ jsx7(ImagePreviewStrip, { images, onRemove }),
+    typeof navigator !== "undefined" && /* @__PURE__ */ jsxs6("span", { style: { fontSize: 11, color: colors.textDim, display: "block", marginTop: 4 }, children: [
+      "Paste images with ",
+      typeof navigator !== "undefined" && navigator.platform?.includes("Mac") ? "\u2318" : "Ctrl",
+      "+V"
+    ] })
   ] });
 }
 
@@ -3089,7 +3226,7 @@ var styles = {
 };
 
 // src/widget/screens/ReportScreen.tsx
-import React6, { useState as useState6, useRef as useRef2 } from "react";
+import React6, { useState as useState6, useRef as useRef3, useEffect as useEffect6 } from "react";
 
 // src/widget/CategoryDropdown.tsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -3135,11 +3272,63 @@ function CategoryDropdown({ value, onChange, optional = true, disabled = false }
   );
 }
 
+// src/widget/useClipboardPaste.ts
+import { useEffect as useEffect5, useCallback as useCallback5 } from "react";
+function useClipboardPaste({
+  containerRef,
+  enabled,
+  currentCount,
+  maxImages,
+  addFile
+}) {
+  const handlePaste = useCallback5((event) => {
+    if (!enabled || currentCount >= maxImages) return;
+    const items = event.clipboardData?.items;
+    if (!items) return;
+    const imageFiles = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageFiles.push(file);
+      }
+    }
+    if (imageFiles.length === 0) return;
+    event.preventDefault();
+    const remaining = maxImages - currentCount;
+    for (const file of imageFiles.slice(0, remaining)) {
+      addFile(file);
+    }
+  }, [enabled, currentCount, maxImages, addFile]);
+  useEffect5(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+    container.addEventListener("paste", handlePaste);
+    return () => container.removeEventListener("paste", handlePaste);
+  }, [containerRef, enabled, handlePaste]);
+}
+
 // src/widget/screens/ReportScreen.tsx
 import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function ReportScreen({ nav, prefill }) {
+function ReportScreen({ nav, prefill, autoCapture, onAutoCaptureConsumed }) {
   const { client, refreshAssignments, uploadImage } = useBugBear();
   const images = useImageAttachments(uploadImage, 5, "screenshots");
+  const formRef = useRef3(null);
+  const hasConsumedCapture = useRef3(false);
+  useEffect6(() => {
+    if (autoCapture && !hasConsumedCapture.current) {
+      hasConsumedCapture.current = true;
+      images.addFile(autoCapture);
+      onAutoCaptureConsumed?.();
+    }
+  }, [autoCapture, onAutoCaptureConsumed]);
+  useClipboardPaste({
+    containerRef: formRef,
+    enabled: true,
+    currentCount: images.images.length,
+    maxImages: 5,
+    addFile: images.addFile
+  });
   const [reportType, setReportType] = useState6(prefill?.type || "bug");
   const [severity, setSeverity] = useState6("medium");
   const [category, setCategory] = useState6(null);
@@ -3147,7 +3336,7 @@ function ReportScreen({ nav, prefill }) {
   const [affectedRoute, setAffectedRoute] = useState6("");
   const [submitting, setSubmitting] = useState6(false);
   const [error, setError] = useState6(null);
-  const submittingRef = useRef2(false);
+  const submittingRef = useRef3(false);
   React6.useEffect(() => {
     if (reportType === "feedback" || reportType === "suggestion") {
       setCategory("other");
@@ -3155,7 +3344,7 @@ function ReportScreen({ nav, prefill }) {
       setCategory(null);
     }
   }, [reportType]);
-  const observedRoute = useRef2(
+  const observedRoute = useRef3(
     typeof window !== "undefined" ? window.location.pathname : "unknown"
   );
   const isRetestFailure = prefill?.type === "test_fail";
@@ -3211,7 +3400,7 @@ function ReportScreen({ nav, prefill }) {
     { sev: "medium", color: "#eab308" },
     { sev: "low", color: "#6b7280" }
   ];
-  return /* @__PURE__ */ jsx10("div", { children: isRetestFailure ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+  return /* @__PURE__ */ jsx10("div", { ref: formRef, tabIndex: -1, style: { outline: "none" }, children: isRetestFailure ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsxs9("div", { style: styles2.retestBanner, children: [
       /* @__PURE__ */ jsx10("span", { style: { fontSize: 16 }, children: "\u{1F504}" }),
       /* @__PURE__ */ jsxs9("div", { children: [
@@ -3539,10 +3728,10 @@ var styles2 = {
 };
 
 // src/widget/screens/ReportSuccessScreen.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ReportSuccessScreen({ nav }) {
-  useEffect4(() => {
+  useEffect7(() => {
     const timer = setTimeout(() => nav.reset(), 2e3);
     return () => clearTimeout(timer);
   }, [nav]);
@@ -3832,7 +4021,7 @@ function MessageListScreen({ nav }) {
 }
 
 // src/widget/screens/ThreadDetailScreen.tsx
-import { useState as useState7, useEffect as useEffect5 } from "react";
+import { useState as useState7, useEffect as useEffect8 } from "react";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var inputStyle = {
   backgroundColor: "#27272a",
@@ -3854,7 +4043,7 @@ function ThreadDetailScreen({
   const [replyText, setReplyText] = useState7("");
   const [sending, setSending] = useState7(false);
   const [sendError, setSendError] = useState7(false);
-  useEffect5(() => {
+  useEffect8(() => {
     let cancelled = false;
     setLoading(true);
     (async () => {
@@ -4279,7 +4468,7 @@ function ComposeMessageScreen({ nav }) {
 }
 
 // src/widget/screens/ProfileScreen.tsx
-import { useState as useState9, useEffect as useEffect6 } from "react";
+import { useState as useState9, useEffect as useEffect9 } from "react";
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function ProfileScreen({ nav }) {
   const { testerInfo, assignments, updateTesterProfile, refreshTesterInfo } = useBugBear();
@@ -4292,7 +4481,7 @@ function ProfileScreen({ nav }) {
   const [saved, setSaved] = useState9(false);
   const [showDetails, setShowDetails] = useState9(false);
   const completedCount = assignments.filter((a) => a.status === "passed" || a.status === "failed").length;
-  useEffect6(() => {
+  useEffect9(() => {
     if (testerInfo) {
       setName(testerInfo.name);
       setAdditionalEmails(testerInfo.additionalEmails || []);
@@ -4756,7 +4945,7 @@ var styles4 = {
 };
 
 // src/widget/screens/IssueListScreen.tsx
-import { useState as useState10, useEffect as useEffect7 } from "react";
+import { useState as useState10, useEffect as useEffect10 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var CATEGORY_CONFIG = {
   open: { label: "Open Issues", accent: "#f97316", emptyIcon: "\u2705", emptyText: "No open issues" },
@@ -4774,7 +4963,7 @@ function IssueListScreen({ nav, category }) {
   const [issues, setIssues] = useState10([]);
   const [loading, setLoading] = useState10(true);
   const config = CATEGORY_CONFIG[category];
-  useEffect7(() => {
+  useEffect10(() => {
     let cancelled = false;
     setLoading(true);
     (async () => {
@@ -5116,11 +5305,12 @@ function BugBearPanel({
   const { shouldShowWidget, testerInfo, assignments, isLoading, unreadCount } = useBugBear();
   const { currentScreen, canGoBack, push, pop, replace, reset } = useNavigation();
   const [collapsed, setCollapsed] = useState11(defaultCollapsed);
+  const autoCaptureRef = useRef4(null);
   const [panelPosition, setPanelPosition] = useState11(null);
   const [isDragging, setIsDragging] = useState11(false);
-  const dragStartRef = useRef3(null);
-  const panelRef = useRef3(null);
-  useEffect8(() => {
+  const dragStartRef = useRef4(null);
+  const panelRef = useRef4(null);
+  useEffect11(() => {
     if (typeof window === "undefined") return;
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
@@ -5134,7 +5324,7 @@ function BugBearPanel({
       setPanelPosition(getDefaultPosition(position));
     }
   }, [position]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (panelPosition && typeof window !== "undefined") {
       try {
         localStorage.setItem(STORAGE_KEY, JSON.stringify(panelPosition));
@@ -5142,7 +5332,7 @@ function BugBearPanel({
       }
     }
   }, [panelPosition]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       setPanelPosition((prev) => prev ? clampPosition(prev) : getDefaultPosition(position));
@@ -5150,7 +5340,7 @@ function BugBearPanel({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [position]);
-  const handleMouseDown = useCallback5((e) => {
+  const handleMouseDown = useCallback6((e) => {
     if (!draggable || !panelPosition) return;
     const target = e.target;
     if (!target.closest("[data-drag-handle]")) return;
@@ -5163,7 +5353,7 @@ function BugBearPanel({
       panelY: panelPosition.y
     };
   }, [draggable, panelPosition]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       if (!dragStartRef.current) return;
@@ -5185,7 +5375,7 @@ function BugBearPanel({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
-  const handleDoubleClick = useCallback5(() => {
+  const handleDoubleClick = useCallback6(() => {
     if (!draggable) return;
     setPanelPosition(getDefaultPosition(position));
     try {
@@ -5193,6 +5383,14 @@ function BugBearPanel({
     } catch {
     }
   }, [draggable, position]);
+  const handleReportBug = useCallback6(async () => {
+    const file = await capturePageScreenshot({
+      excludeElement: panelRef.current,
+      timeout: 3e3
+    });
+    autoCaptureRef.current = file;
+    push({ name: "REPORT", prefill: { type: "bug" } });
+  }, [push]);
   if (isLoading || !shouldShowWidget) return null;
   if (!panelPosition) return null;
   const pendingCount = assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length;
@@ -5229,13 +5427,12 @@ function BugBearPanel({
   };
   const handleClose = () => {
     setCollapsed(true);
-    reset();
   };
   const nav = { push, pop, replace, reset, canGoBack };
   const renderScreen = () => {
     switch (currentScreen.name) {
       case "HOME":
-        return /* @__PURE__ */ jsx18(HomeScreen, { nav });
+        return /* @__PURE__ */ jsx18(HomeScreen, { nav, onReportBug: handleReportBug });
       case "TEST_DETAIL":
         return /* @__PURE__ */ jsx18(TestDetailScreen, { testId: currentScreen.testId, nav });
       case "TEST_LIST":
@@ -5243,7 +5440,17 @@ function BugBearPanel({
       case "TEST_FEEDBACK":
         return /* @__PURE__ */ jsx18(TestFeedbackScreen, { status: currentScreen.status, assignmentId: currentScreen.assignmentId, nav });
       case "REPORT":
-        return /* @__PURE__ */ jsx18(ReportScreen, { nav, prefill: currentScreen.prefill });
+        return /* @__PURE__ */ jsx18(
+          ReportScreen,
+          {
+            nav,
+            prefill: currentScreen.prefill,
+            autoCapture: autoCaptureRef.current,
+            onAutoCaptureConsumed: () => {
+              autoCaptureRef.current = null;
+            }
+          }
+        );
       case "REPORT_SUCCESS":
         return /* @__PURE__ */ jsx18(ReportSuccessScreen, { nav });
       case "MESSAGE_LIST":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "BugBear React components for web apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,13 +41,15 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@bbearai/core": "^0.5.0"
+    "@bbearai/core": "^0.5.0",
+    "modern-screenshot": "^4.6.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",