@bbearai/react 0.5.0 → 0.5.2

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 }) {
-  const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, isLoading } = useBugBear();
-  useEffect2(() => {
+function HomeScreen({ nav, onReportBug }) {
+  const { assignments, unreadCount, threads, refreshAssignments, refreshThreads, issueCounts, refreshIssueCounts, dashboardUrl, isLoading } = useBugBear();
+  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,
@@ -968,6 +1081,33 @@ function HomeScreen({ nav }) {
         " tests completed"
       ] })
     ] }),
+    dashboardUrl && /* @__PURE__ */ jsxs2(
+      "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__ */ jsx3("span", { style: { fontSize: 22, marginRight: 12 }, children: "\u{1F310}" }),
+          /* @__PURE__ */ jsxs2("span", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("span", { style: { display: "block", fontSize: 14, fontWeight: 600, color: colors.textPrimary }, children: "Open Dashboard" }),
+            /* @__PURE__ */ jsx3("span", { style: { display: "block", fontSize: 12, color: colors.textMuted, marginTop: 2 }, children: "View analytics, history & more" })
+          ] }),
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: 16, color: colors.textMuted, marginLeft: 8 }, children: "\u2192" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "center", padding: "8px 0" }, children: /* @__PURE__ */ jsx3(
       "button",
       {
@@ -992,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();
@@ -1006,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);
@@ -1058,6 +1198,37 @@ function TestDetailScreen({ testId, nav }) {
       setIsSubmitting(false);
     }
   }, [client, displayedAssignment, refreshAssignments, nav, isSubmitting]);
+  const handleReopen = useCallback2(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 = useCallback2(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 = useCallback2(async () => {
     if (!client || !displayedAssignment || !selectedSkipReason) return;
     setSkipping(true);
@@ -1565,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} ",
@@ -1573,7 +1749,113 @@ function TestDetailScreen({ testId, nav }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 10, marginTop: 8 }, children: [
+    displayedAssignment.status === "passed" || displayedAssignment.status === "failed" || displayedAssignment.status === "skipped" || displayedAssignment.status === "blocked" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3(
+        "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__ */ jsx4("span", { style: { fontSize: 14 }, children: displayedAssignment.status === "passed" ? "\u2705" : displayedAssignment.status === "failed" ? "\u274C" : displayedAssignment.status === "skipped" ? "\u23ED" : "\u{1F6AB}" }),
+            /* @__PURE__ */ jsxs3(
+              "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__ */ jsxs3("div", { style: { display: "flex", gap: 10, marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+          "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__ */ jsx4(
+          "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__ */ jsxs3("div", { style: { display: "flex", gap: 10, marginTop: 8 }, children: [
       /* @__PURE__ */ jsx4(
         "button",
         {
@@ -1792,10 +2074,11 @@ function TestDetailScreen({ testId, nav }) {
 import { useState as useState3, useMemo, useCallback as useCallback3 } from "react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function TestListScreen({ nav }) {
-  const { assignments, currentAssignment, refreshAssignments, isLoading } = useBugBear();
+  const { assignments, currentAssignment, refreshAssignments, dashboardUrl, isLoading } = useBugBear();
   const [filter, setFilter] = useState3("all");
   const [roleFilter, setRoleFilter] = useState3(null);
   const [trackFilter, setTrackFilter] = useState3(null);
+  const [platformFilter, setPlatformFilter] = useState3("web");
   const [searchQuery, setSearchQuery] = useState3("");
   const [sortMode, setSortMode] = useState3("priority");
   const [collapsedFolders, setCollapsedFolders] = useState3(/* @__PURE__ */ new Set());
@@ -1873,6 +2156,7 @@ function TestListScreen({ nav }) {
     });
   }, []);
   const filterAssignment = useCallback3((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) {
@@ -1885,7 +2169,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;
@@ -2019,6 +2303,61 @@ function TestListScreen({ nav }) {
         }
       }
     ) }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsxs4(
+          "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__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }, children: [
       availableTracks.length >= 2 && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 4, flex: 1, overflow: "auto" }, children: [
         /* @__PURE__ */ jsx5(
@@ -2332,7 +2671,27 @@ function TestListScreen({ nav }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx5("div", { style: { display: "flex", justifyContent: "center", paddingTop: 12, paddingBottom: 8 }, children: /* @__PURE__ */ jsx5(
+    dashboardUrl && /* @__PURE__ */ jsx5(
+      "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__ */ jsx5("div", { style: { display: "flex", justifyContent: "center", paddingTop: 8, paddingBottom: 8 }, children: /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -2403,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);
@@ -2424,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
@@ -2545,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"
+    ] })
   ] });
 }
 
@@ -2843,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";
@@ -2889,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);
@@ -2901,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");
@@ -2909,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";
@@ -2965,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: [
@@ -3293,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]);
@@ -3334,7 +3769,7 @@ var styles3 = {
 // src/widget/screens/MessageListScreen.tsx
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function MessageListScreen({ nav }) {
-  const { threads, unreadCount, refreshThreads, isLoading } = useBugBear();
+  const { threads, unreadCount, refreshThreads, dashboardUrl, isLoading } = useBugBear();
   if (isLoading) return /* @__PURE__ */ jsx12(MessageListScreenSkeleton, {});
   return /* @__PURE__ */ jsxs11("div", { children: [
     /* @__PURE__ */ jsx12(
@@ -3523,6 +3958,26 @@ function MessageListScreen({ nav }) {
       },
       thread.id
     )) }),
+    dashboardUrl && /* @__PURE__ */ jsx12(
+      "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__ */ jsxs11(
       "div",
       {
@@ -3530,7 +3985,7 @@ function MessageListScreen({ nav }) {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
-          paddingTop: 12,
+          paddingTop: 8,
           paddingLeft: 4,
           paddingRight: 4
         },
@@ -3566,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",
@@ -3588,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 () => {
@@ -4013,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();
@@ -4026,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 || []);
@@ -4490,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" },
@@ -4508,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 () => {
@@ -4654,6 +5109,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__ */ jsxs16("div", { children: [
@@ -4771,7 +5227,29 @@ function IssueDetailScreen({ nav, issue }) {
         " \xB7 Updated ",
         formatRelativeTime(issue.updatedAt)
       ] })
-    ] })
+    ] }),
+    dashboardUrl && /* @__PURE__ */ jsx17(
+      "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"
+      }
+    )
   ] });
 }
 
@@ -4827,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);
@@ -4845,7 +5324,7 @@ function BugBearPanel({
       setPanelPosition(getDefaultPosition(position));
     }
   }, [position]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (panelPosition && typeof window !== "undefined") {
       try {
         localStorage.setItem(STORAGE_KEY, JSON.stringify(panelPosition));
@@ -4853,7 +5332,7 @@ function BugBearPanel({
       }
     }
   }, [panelPosition]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       setPanelPosition((prev) => prev ? clampPosition(prev) : getDefaultPosition(position));
@@ -4861,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;
@@ -4874,7 +5353,7 @@ function BugBearPanel({
       panelY: panelPosition.y
     };
   }, [draggable, panelPosition]);
-  useEffect8(() => {
+  useEffect11(() => {
     if (!isDragging) return;
     const handleMouseMove = (e) => {
       if (!dragStartRef.current) return;
@@ -4896,7 +5375,7 @@ function BugBearPanel({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
-  const handleDoubleClick = useCallback5(() => {
+  const handleDoubleClick = useCallback6(() => {
     if (!draggable) return;
     setPanelPosition(getDefaultPosition(position));
     try {
@@ -4904,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;
@@ -4940,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":
@@ -4954,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":