@bbearai/react 0.5.0 → 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,8 +712,8 @@ function MessageListScreenSkeleton() {
 
 // src/widget/screens/HomeScreen.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function HomeScreen({ nav }) {
-  const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, isLoading } = useBugBear();
+function HomeScreen({ nav, onReportBug }) {
+  const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, dashboardUrl, isLoading } = useBugBear();
   (0, import_react3.useEffect)(() => {
     refreshAssignments();
     refreshThreads();
@@ -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,
@@ -1007,6 +1120,33 @@ function HomeScreen({ nav }) {
         " tests completed"
       ] })
     ] }),
+    dashboardUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "a",
+      {
+        href: dashboardUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: colors.card,
+          border: `1px solid ${colors.border}`,
+          borderRadius: 12,
+          padding: 14,
+          marginBottom: 16,
+          textDecoration: "none",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 22, marginRight: 12 }, children: "\u{1F310}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "block", fontSize: 14, fontWeight: 600, color: colors.textPrimary }, children: "Open Dashboard" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "block", fontSize: 12, color: colors.textMuted, marginTop: 2 }, children: "View analytics, history & more" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, color: colors.textMuted, marginLeft: 8 }, children: "\u2192" })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "8px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
@@ -1097,6 +1237,37 @@ function TestDetailScreen({ testId, nav }) {
       setIsSubmitting(false);
     }
   }, [client, displayedAssignment, refreshAssignments, nav, isSubmitting]);
+  const handleReopen = (0, import_react4.useCallback)(async () => {
+    if (!client || !displayedAssignment || isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      await client.reopenAssignment(displayedAssignment.id);
+      await refreshAssignments();
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [client, displayedAssignment, refreshAssignments, isSubmitting]);
+  const handleChangeResult = (0, import_react4.useCallback)(async (newStatus) => {
+    if (!client || !displayedAssignment || isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      await client.reopenAssignment(displayedAssignment.id);
+      await client.updateAssignmentStatus(displayedAssignment.id, newStatus);
+      await refreshAssignments();
+      if (newStatus === "failed") {
+        nav.replace({
+          name: "REPORT",
+          prefill: {
+            type: "test_fail",
+            assignmentId: displayedAssignment.id,
+            testCaseId: displayedAssignment.testCase.id
+          }
+        });
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [client, displayedAssignment, refreshAssignments, nav, isSubmitting]);
   const handleSkip = (0, import_react4.useCallback)(async () => {
     if (!client || !displayedAssignment || !selectedSkipReason) return;
     setSkipping(true);
@@ -1604,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} ",
@@ -1612,7 +1788,113 @@ function TestDetailScreen({ testId, nav }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 10, marginTop: 8 }, children: [
+    displayedAssignment.status === "passed" || displayedAssignment.status === "failed" || displayedAssignment.status === "skipped" || displayedAssignment.status === "blocked" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 6,
+            padding: "8px 12px",
+            borderRadius: 8,
+            marginTop: 8,
+            marginBottom: 8,
+            backgroundColor: displayedAssignment.status === "passed" ? colors.greenDark : displayedAssignment.status === "failed" ? colors.redDark : colors.card,
+            border: `1px solid ${displayedAssignment.status === "passed" ? colors.green : displayedAssignment.status === "failed" ? colors.red : colors.border}`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 14 }, children: displayedAssignment.status === "passed" ? "\u2705" : displayedAssignment.status === "failed" ? "\u274C" : displayedAssignment.status === "skipped" ? "\u23ED" : "\u{1F6AB}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "span",
+              {
+                style: {
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: displayedAssignment.status === "passed" ? colors.green : displayedAssignment.status === "failed" ? "#fca5a5" : colors.textSecondary
+                },
+                children: [
+                  "Marked as ",
+                  displayedAssignment.status.charAt(0).toUpperCase() + displayedAssignment.status.slice(1)
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 10, marginTop: 4 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleReopen,
+            disabled: isSubmitting,
+            style: {
+              flex: 1,
+              paddingTop: 14,
+              paddingBottom: 14,
+              borderRadius: 12,
+              textAlign: "center",
+              backgroundColor: colors.card,
+              border: `1px solid ${colors.blue}`,
+              cursor: isSubmitting ? "not-allowed" : "pointer",
+              fontSize: 14,
+              fontWeight: 600,
+              color: colors.blue,
+              opacity: isSubmitting ? 0.5 : 1
+            },
+            children: isSubmitting ? "Reopening..." : "\u{1F504} Reopen Test"
+          }
+        ),
+        displayedAssignment.status === "passed" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleChangeResult("failed"),
+            disabled: isSubmitting,
+            style: {
+              flex: 1,
+              paddingTop: 14,
+              paddingBottom: 14,
+              borderRadius: 12,
+              textAlign: "center",
+              backgroundColor: colors.redDark,
+              border: `1px solid ${colors.red}`,
+              cursor: isSubmitting ? "not-allowed" : "pointer",
+              fontSize: 14,
+              fontWeight: 600,
+              color: "#fca5a5",
+              opacity: isSubmitting ? 0.5 : 1
+            },
+            children: "Change to Fail"
+          }
+        ),
+        displayedAssignment.status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleChangeResult("passed"),
+            disabled: isSubmitting,
+            style: {
+              flex: 1,
+              paddingTop: 14,
+              paddingBottom: 14,
+              borderRadius: 12,
+              textAlign: "center",
+              backgroundColor: colors.greenDark,
+              border: `1px solid ${colors.green}`,
+              cursor: isSubmitting ? "not-allowed" : "pointer",
+              fontSize: 14,
+              fontWeight: 600,
+              color: "#86efac",
+              opacity: isSubmitting ? 0.5 : 1
+            },
+            children: "Change to Pass"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 10, marginTop: 8 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
@@ -1831,10 +2113,11 @@ function TestDetailScreen({ testId, nav }) {
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function TestListScreen({ nav }) {
-  const { assignments, currentAssignment, refreshAssignments, isLoading } = useBugBear();
+  const { assignments, currentAssignment, refreshAssignments, dashboardUrl, isLoading } = useBugBear();
   const [filter, setFilter] = (0, import_react5.useState)("all");
   const [roleFilter, setRoleFilter] = (0, import_react5.useState)(null);
   const [trackFilter, setTrackFilter] = (0, import_react5.useState)(null);
+  const [platformFilter, setPlatformFilter] = (0, import_react5.useState)("web");
   const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
   const [sortMode, setSortMode] = (0, import_react5.useState)("priority");
   const [collapsedFolders, setCollapsedFolders] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
@@ -1912,6 +2195,7 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = (0, import_react5.useCallback)((a) => {
+    if (platformFilter && a.testCase.platforms && !a.testCase.platforms.includes(platformFilter)) return false;
     if (roleFilter && a.testCase.role?.id !== roleFilter) return false;
     if (trackFilter && a.testCase.track?.id !== trackFilter) return false;
     if (searchQuery) {
@@ -1924,7 +2208,7 @@ function TestListScreen({ nav }) {
     if (filter === "done") return a.status === "passed";
     if (filter === "reopened") return a.status === "failed";
     return true;
-  }, [roleFilter, trackFilter, searchQuery, filter]);
+  }, [platformFilter, roleFilter, trackFilter, searchQuery, filter]);
   const pendingCount = assignments.filter(
     (a) => a.status === "pending" || a.status === "in_progress"
   ).length;
@@ -2058,6 +2342,61 @@ function TestListScreen({ nav }) {
         }
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setPlatformFilter(null),
+          style: {
+            padding: "3px 8px",
+            borderRadius: 6,
+            backgroundColor: !platformFilter ? colors.card : "transparent",
+            border: !platformFilter ? `1px solid ${colors.border}` : "1px solid transparent",
+            cursor: "pointer",
+            fontSize: 11,
+            color: !platformFilter ? colors.textPrimary : colors.textMuted,
+            fontWeight: !platformFilter ? 600 : 400,
+            whiteSpace: "nowrap"
+          },
+          children: "All"
+        }
+      ),
+      [
+        { 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.key),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              padding: "3px 8px",
+              borderRadius: 6,
+              backgroundColor: isActive ? colors.blue + "20" : "transparent",
+              border: isActive ? `1px solid ${colors.blue}60` : "1px solid transparent",
+              cursor: "pointer",
+              fontSize: 11,
+              color: isActive ? colors.blue : colors.textMuted,
+              fontWeight: isActive ? 600 : 400,
+              whiteSpace: "nowrap"
+            },
+            children: [
+              p.icon,
+              " ",
+              p.label
+            ]
+          },
+          p.key
+        );
+      })
+    ] }),
     (availableTracks.length >= 2 || true) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }, children: [
       availableTracks.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", gap: 4, flex: 1, overflow: "auto" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -2371,7 +2710,27 @@ function TestListScreen({ nav }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", justifyContent: "center", paddingTop: 12, paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    dashboardUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "a",
+      {
+        href: `${dashboardUrl}/test-cases`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          paddingTop: 12,
+          fontSize: 13,
+          fontWeight: 500,
+          color: colors.blue,
+          textDecoration: "none"
+        },
+        children: "\u{1F310} Manage on Dashboard \u2192"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", justifyContent: "center", paddingTop: 8, paddingBottom: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -2442,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);
@@ -2463,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
@@ -2584,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"
+    ] })
   ] });
 }
 
@@ -2882,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");
@@ -2928,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";
@@ -3004,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: [
@@ -3332,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]);
@@ -3373,7 +3808,7 @@ var styles3 = {
 // src/widget/screens/MessageListScreen.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function MessageListScreen({ nav }) {
-  const { threads, unreadCount, refreshThreads, isLoading } = useBugBear();
+  const { threads, unreadCount, refreshThreads, dashboardUrl, isLoading } = useBugBear();
   if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageListScreenSkeleton, {});
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3562,6 +3997,26 @@ function MessageListScreen({ nav }) {
       },
       thread.id
     )) }),
+    dashboardUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "a",
+      {
+        href: `${dashboardUrl}/discussions`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          paddingTop: 12,
+          fontSize: 13,
+          fontWeight: 500,
+          color: colors.blue,
+          textDecoration: "none"
+        },
+        children: "\u{1F310} View on Dashboard \u2192"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
@@ -3569,7 +4024,7 @@ function MessageListScreen({ nav }) {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
-          paddingTop: 12,
+          paddingTop: 8,
           paddingLeft: 4,
           paddingRight: 4
         },
@@ -3605,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",
@@ -3622,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 () => {
@@ -3894,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",
@@ -3908,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;
@@ -4052,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 || []);
@@ -4529,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" },
@@ -4544,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 () => {
@@ -4693,6 +5148,7 @@ var SEVERITY_CONFIG = {
   low: { label: "Low", color: "#71717a", bg: "#27272a" }
 };
 function IssueDetailScreen({ nav, issue }) {
+  const { dashboardUrl } = useBugBear();
   const statusConfig = STATUS_LABELS[issue.status] || { label: issue.status, bg: "#27272a", color: "#a1a1aa" };
   const severityConfig = issue.severity ? SEVERITY_CONFIG[issue.severity] : null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
@@ -4810,7 +5266,29 @@ function IssueDetailScreen({ nav, issue }) {
         " \xB7 Updated ",
         formatRelativeTime(issue.updatedAt)
       ] })
-    ] })
+    ] }),
+    dashboardUrl && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "a",
+      {
+        href: `${dashboardUrl}/reports`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 6,
+          marginTop: 12,
+          padding: "10px 0",
+          fontSize: 13,
+          fontWeight: 500,
+          color: colors.blue,
+          textDecoration: "none",
+          borderTop: `1px solid ${colors.border}`
+        },
+        children: "\u{1F310} View on Dashboard \u2192"
+      }
+    )
   ] });
 }
 
@@ -4865,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);
@@ -4884,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));
@@ -4892,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));
@@ -4900,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;
@@ -4913,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;
@@ -4935,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 {
@@ -4943,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;
@@ -4979,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":
@@ -4993,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":
@@ -5190,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 = () => {