glitchgrab 1.41.0 → 1.43.0

package/dist/index.js

@@ -68,7 +68,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/error-boundary.tsx
 var React = __toESM(require("react"));
@@ -186,21 +186,84 @@ function interceptConsole() {
     origError.apply(console, args);
   };
 }
+var CONSOLE_TEXT_MAX = 200;
 function argsToString(args) {
   try {
     return args.map((a) => {
-      if (typeof a === "string") return a;
+      if (typeof a === "string") return a.slice(0, CONSOLE_TEXT_MAX);
       if (a instanceof Error) return a.message;
       try {
-        return JSON.stringify(a);
+        return previewJson(a, CONSOLE_TEXT_MAX);
       } catch (e) {
         return String(a);
       }
-    }).join(" ").slice(0, 200);
+    }).join(" ").slice(0, CONSOLE_TEXT_MAX);
   } catch (e) {
     return "[unknown]";
   }
 }
+function previewJson(value, max) {
+  let out = "";
+  const path = /* @__PURE__ */ new WeakSet();
+  const write = (input, inArray) => {
+    if (out.length > max) return;
+    let v = input;
+    if (v !== null && typeof v === "object" && typeof v.toJSON === "function") {
+      v = v.toJSON();
+    }
+    if (v === null) {
+      out += "null";
+      return;
+    }
+    switch (typeof v) {
+      case "string":
+        out += JSON.stringify(v.length > max ? v.slice(0, max) : v);
+        return;
+      case "number":
+        out += Number.isFinite(v) ? String(v) : "null";
+        return;
+      case "boolean":
+      case "bigint":
+        out += String(v);
+        return;
+      case "object":
+        break;
+      default:
+        if (inArray) out += "null";
+        return;
+    }
+    const obj = v;
+    if (path.has(obj)) {
+      out += '"[Circular]"';
+      return;
+    }
+    path.add(obj);
+    if (Array.isArray(obj)) {
+      out += "[";
+      for (let i = 0; i < obj.length && out.length <= max; i++) {
+        if (i > 0) out += ",";
+        write(obj[i], true);
+      }
+      out += "]";
+    } else {
+      out += "{";
+      let first = true;
+      for (const key in obj) {
+        if (out.length > max) break;
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+        const child = obj[key];
+        if (child === void 0 || typeof child === "function" || typeof child === "symbol") continue;
+        out += `${first ? "" : ","}${JSON.stringify(key)}:`;
+        first = false;
+        write(child, false);
+      }
+      out += "}";
+    }
+    path.delete(obj);
+  };
+  write(value, false);
+  return out;
+}
 async function readErrorBody(response, url) {
   try {
     if (response.ok) return "";
@@ -317,15 +380,27 @@ function interceptNavigation() {
     addBreadcrumb("navigation", `Back/Forward to ${window.location.pathname}`);
   });
 }
+var CLICK_TEXT_MAX = 50;
+var CLICK_TEXT_NODE_LIMIT = 500;
+function leadingText(el, max) {
+  var _a;
+  let text = "";
+  let visited = 0;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  while (text.trimStart().length < max && visited++ < CLICK_TEXT_NODE_LIMIT && walker.nextNode()) {
+    text += (_a = walker.currentNode.nodeValue) != null ? _a : "";
+  }
+  return text.trim().slice(0, max);
+}
 function interceptClicks() {
   document.addEventListener(
     "click",
     (e) => {
-      var _a, _b, _c;
+      var _a;
       try {
         const target = e.target;
         const tag = (_a = target.tagName) == null ? void 0 : _a.toLowerCase();
-        const text = (_c = (_b = target.textContent) == null ? void 0 : _b.trim().slice(0, 50)) != null ? _c : "";
+        const text = target instanceof Node ? leadingText(target, CLICK_TEXT_MAX) : "";
         const id = target.id ? `#${target.id}` : "";
         const cls = target.className && typeof target.className === "string" ? `.${target.className.split(" ")[0]}` : "";
         addBreadcrumb("click", `Click ${tag}${id}${cls} "${text}"`);
@@ -647,7 +722,7 @@ async function enhanceText(text, token, baseUrl, screenshot, context) {
   }
 }
 async function assistTurn(params, token, baseUrl) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const offline = {
     conversationId: null,
     question: null,
@@ -680,6 +755,7 @@ async function assistTurn(params, token, baseUrl) {
       report: (_i = (_h = envelope.data) == null ? void 0 : _h.report) != null ? _i : null,
       duplicate: (_k = (_j = envelope.data) == null ? void 0 : _j.duplicate) != null ? _k : null,
       solved: (_m = (_l = envelope.data) == null ? void 0 : _l.solved) != null ? _m : null,
+      aboutGlitchgrab: ((_n = envelope.data) == null ? void 0 : _n.aboutGlitchgrab) === true,
       degraded: null
     };
   } catch (e) {
@@ -900,10 +976,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react3 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var MAX_SCREENSHOT_DATA_URL_LENGTH = 18e5;
 var QUALITY_LADDER = [0.92, 0.85, 0.75];
 var DOWNSCALE_FACTOR = 0.7;
+var MAX_ROUNDS = 4;
 function downscale(canvas, factor) {
   const next = document.createElement("canvas");
   next.width = Math.max(1, Math.round(canvas.width * factor));
@@ -917,18 +997,55 @@ function downscale(canvas, factor) {
 }
 function encodeScreenshot(canvas, maxLength = MAX_SCREENSHOT_DATA_URL_LENGTH) {
   let current = canvas;
-  for (let round = 0; round < 2; round++) {
-    let encoded = "";
+  let encoded = "";
+  for (let round = 0; round < MAX_ROUNDS; round++) {
     for (const quality of QUALITY_LADDER) {
       encoded = current.toDataURL("image/jpeg", quality);
       if (encoded.length <= maxLength) return encoded;
     }
-    if (round === 1) return encoded;
+    if (round === MAX_ROUNDS - 1) break;
     const smaller = downscale(current, DOWNSCALE_FACTOR);
-    if (!smaller) return encoded;
+    if (!smaller) break;
     current = smaller;
   }
-  return current.toDataURL("image/jpeg", QUALITY_LADDER[0]);
+  return encoded;
+}
+function readAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+async function reencodeImageFile(file, maxLength) {
+  var _a;
+  if (typeof createImageBitmap !== "function") return null;
+  const bitmap = await createImageBitmap(file);
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(bitmap, 0, 0);
+    return encodeScreenshot(canvas, maxLength);
+  } finally {
+    (_a = bitmap.close) == null ? void 0 : _a.call(bitmap);
+  }
+}
+async function encodeImageFile(file, maxLength = MAX_SCREENSHOT_DATA_URL_LENGTH) {
+  const rawLength = Math.ceil(file.size / 3) * 4 + 64;
+  if (rawLength > maxLength) {
+    try {
+      const shrunk = await reencodeImageFile(file, maxLength);
+      if (shrunk && shrunk.length < rawLength) return shrunk;
+    } catch (e) {
+    }
+  }
+  return readAsDataUrl(file);
 }
 var PALETTE = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ffffff"];
 function drawStroke(ctx, s) {
@@ -1219,6 +1336,7 @@ var SEVERITY_LABELS = {
   critical: "Critical"
 };
 var MAX_ASSIST_IMAGES = 3;
+var MAX_ASSIST_IMAGE_CHARS = 35e5;
 function getTypeLabel(type) {
   switch (type) {
     case "RATING":
@@ -1239,6 +1357,17 @@ function getTypeLabel(type) {
       return "Other";
   }
 }
+function pickAssistImages(all) {
+  const picked = [];
+  let total = 0;
+  for (let i = all.length - 1; i >= 0 && picked.length < MAX_ASSIST_IMAGES; i--) {
+    const shot = all[i];
+    if (total + shot.length > MAX_ASSIST_IMAGE_CHARS) continue;
+    picked.unshift(shot);
+    total += shot.length;
+  }
+  return picked;
+}
 var STARTERS = [
   "Something on this page is broken",
   "It did the wrong thing",
@@ -1316,6 +1445,7 @@ function AssistSheet({
   screenshots,
   pageShot = null,
   onAddImages,
+  onRemoveImage,
   attachmentCount,
   context,
   reportTypeLabel,
@@ -1341,7 +1471,8 @@ function AssistSheet({
   onSend,
   onDegrade,
   onClose,
-  onFinish
+  onFinish,
+  onReportGlitchgrabProblem
 }) {
   const narrow = useIsNarrow();
   const severityAsked = showSeverity && currentTile === "BUG";
@@ -1352,12 +1483,12 @@ function AssistSheet({
   const [hoveredStar, setHoveredStar] = (0, import_react3.useState)(0);
   const [options, setOptions] = (0, import_react3.useState)([]);
   const [duplicate, setDuplicate] = (0, import_react3.useState)(null);
+  const [glitchgrabOffer, setGlitchgrabOffer] = (0, import_react3.useState)(false);
   const [solved, setSolved] = (0, import_react3.useState)(null);
   const [phase, setPhase] = (0, import_react3.useState)(
     !typePicked ? "type" : currentTile === "RATING" ? "rating" : "chat"
   );
   const scrollRef = (0, import_react3.useRef)(null);
-  const inputRef = (0, import_react3.useRef)(null);
   const draftRef = (0, import_react3.useRef)(null);
   const seededRef = (0, import_react3.useRef)(false);
   const eventsRef = (0, import_react3.useRef)([]);
@@ -1383,6 +1514,7 @@ function AssistSheet({
     } catch (e) {
     }
   }
+  const readShots = new Set(pickAssistImages(screenshots));
   function leave(type, detail) {
     logEvent(type, detail);
     flushEvents();
@@ -1402,12 +1534,12 @@ function AssistSheet({
     onDegrade(message);
   }
   async function runTurn(history2) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     setBusy(true);
     let result;
     const events = takeEvents();
     try {
-      const sent = screenshots.slice(-MAX_ASSIST_IMAGES);
+      const sent = pickAssistImages(screenshots);
       result = await assist({
         // `kind` only on drafts, so an older server sees the exact shape it
         // always did — it just learns the draft text now instead of a
@@ -1417,10 +1549,12 @@ function AssistSheet({
         ),
         conversationId,
         screenshots: sent,
-        screenshot: (_a = sent[sent.length - 1]) != null ? _a : null,
         context: {
           ...context != null ? context : {},
-          imageSources: sent.map((shot) => pageShot && shot === pageShot ? "page" : "attached")
+          imageSources: sent.map((shot) => pageShot && shot === pageShot ? "page" : "attached"),
+          // Whether this dialog can open the #366 panel at all. A hint — the
+          // server decides whether the model may offer it.
+          canReportGlitchgrab: !!onReportGlitchgrabProblem
         },
         events
       });
@@ -1441,8 +1575,9 @@ function AssistSheet({
       setConversationId(result.conversationId);
       onConversationChange == null ? void 0 : onConversationChange(result.conversationId);
     }
-    setDuplicate((_b = result.duplicate) != null ? _b : null);
-    onDuplicateChange == null ? void 0 : onDuplicateChange((_d = (_c = result.duplicate) == null ? void 0 : _c.number) != null ? _d : null);
+    setDuplicate((_a = result.duplicate) != null ? _a : null);
+    onDuplicateChange == null ? void 0 : onDuplicateChange((_c = (_b = result.duplicate) == null ? void 0 : _b.number) != null ? _c : null);
+    setGlitchgrabOffer(!!result.aboutGlitchgrab && !!onReportGlitchgrabProblem && !!result.question);
     if (result.solved) {
       setSolved(result.solved);
       setOptions([]);
@@ -1460,7 +1595,7 @@ function AssistSheet({
     }
     if (result.question) {
       setMessages([...history2, { role: "assistant", content: result.question }]);
-      setOptions((_e = result.options) != null ? _e : []);
+      setOptions((_d = result.options) != null ? _d : []);
       return;
     }
     onDegrade("The assistant had nothing to add \u2014 write your report below and send it as normal.");
@@ -1479,7 +1614,15 @@ function AssistSheet({
     const value = text.trim();
     if (!value || busy) return;
     setOptions([]);
-    const history2 = [...messages, { role: "user", content: value }];
+    setGlitchgrabOffer(false);
+    const underDraft = phase === "draft";
+    if (underDraft) {
+      const edited = aiDraftRef.current !== null && description.trim() !== aiDraftRef.current.trim();
+      logEvent("keep_chatting", edited ? "after editing" : void 0);
+      setPhase("chat");
+    }
+    const base = underDraft ? withCurrentDraft(messages) : messages;
+    const history2 = [...base, { role: "user", content: value }];
     setMessages(history2);
     setInput("");
     void runTurn(history2);
@@ -1488,27 +1631,16 @@ function AssistSheet({
     onPickType(tile);
     setPhase(tile === "RATING" ? "rating" : "chat");
   }
-  function keepChatting() {
+  function withCurrentDraft(history2) {
     const current = description.trim();
-    logEvent(
-      "keep_chatting",
-      aiDraftRef.current && current !== aiDraftRef.current.trim() ? "after editing" : void 0
-    );
-    setMessages((prev) => {
-      const next = [...prev];
-      for (let i = next.length - 1; i >= 0; i--) {
-        if (next[i].kind === "report") {
-          if (current) next[i] = { ...next[i], content: current };
-          break;
-        }
+    const next = [...history2];
+    for (let i = next.length - 1; i >= 0; i--) {
+      if (next[i].kind === "report") {
+        if (current) next[i] = { ...next[i], content: current };
+        break;
       }
-      return next;
-    });
-    setPhase("chat");
-    requestAnimationFrame(() => {
-      var _a;
-      return (_a = inputRef.current) == null ? void 0 : _a.focus();
-    });
+    }
+    return next;
   }
   function sendDraft() {
     const edited = aiDraftRef.current !== null && description.trim() !== aiDraftRef.current.trim();
@@ -1516,9 +1648,39 @@ function AssistSheet({
     flushEvents();
     onSend();
   }
-  const lastMessage = messages[messages.length - 1];
-  const correcting = phase === "chat" && (lastMessage == null ? void 0 : lastMessage.kind) === "report";
   const empty = phase === "chat" && messages.length === 0 && !busy;
+  function renderKnownIssue({ title, footer }) {
+    if (!duplicate) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        "data-gg-known-issue": "",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "3px",
+          padding: "9px 10px",
+          borderRadius: "8px",
+          border: "1px solid rgba(245,158,11,0.4)",
+          backgroundColor: "rgba(245,158,11,0.08)",
+          fontSize: "12px",
+          lineHeight: 1.5,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#f59e0b", fontWeight: 600 }, children: title ? "Our team is already on this" : `Our team is already on #${duplicate.number}` }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t2.textMuted, wordBreak: "break-word" }, children: [
+            "#",
+            duplicate.number,
+            " ",
+            duplicate.title
+          ] }),
+          duplicate.status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t2.text, fontWeight: 600 }, children: duplicate.status }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t2.textMuted }, children: footer })
+        ]
+      }
+    );
+  }
   const initials = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
     var _a, _b;
     return (_b = (_a = w[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
@@ -1543,7 +1705,7 @@ function AssistSheet({
         @keyframes gg-sheet-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
         @keyframes gg-sheet-fade{from{opacity:0}to{opacity:1}}
         @keyframes gg-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-3px);opacity:1}}
-        [data-gg-sheet-send]:focus-visible,[data-gg-chip]:focus-visible{outline:2px solid currentColor;outline-offset:2px}
+        [data-gg-sheet-send]:focus-visible,[data-gg-chip]:focus-visible,[data-gg-assist-remove]:focus-visible{outline:2px solid currentColor;outline-offset:2px}
       ` }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
@@ -2009,7 +2171,83 @@ function AssistSheet({
                               i
                             );
                           }),
-                          options.length > 0 && !busy && phase === "chat" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          duplicate && !busy && phase === "chat" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { paddingLeft: "32px", minWidth: 0 }, children: renderKnownIssue({ title: false }) }),
+                          glitchgrabOffer && onReportGlitchgrabProblem && !busy && phase === "chat" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { paddingLeft: "32px", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              "data-gg-glitchgrab-offer": "",
+                              style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "8px",
+                                padding: "10px",
+                                borderRadius: "8px",
+                                border: `1px solid ${t2.accent}55`,
+                                backgroundColor: `${t2.accent}14`,
+                                fontSize: "12px",
+                                lineHeight: 1.5
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t2.text, fontWeight: 600 }, children: "This is about Glitchgrab, not this app" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t2.textMuted }, children: "It goes to the team that builds this reporter, with your chat attached." }),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      "data-gg-glitchgrab-offer-send": "",
+                                      onClick: () => {
+                                        logEvent("glitchgrab_offer_tap");
+                                        setGlitchgrabOffer(false);
+                                        onReportGlitchgrabProblem(
+                                          messages.filter((m) => m.role === "user").map((m) => m.content.trim()).filter(Boolean).join("\n\n")
+                                        );
+                                      },
+                                      style: {
+                                        padding: "8px 12px",
+                                        borderRadius: "999px",
+                                        border: "none",
+                                        backgroundColor: t2.accent,
+                                        color: t2.accentText,
+                                        fontSize: "12px",
+                                        fontWeight: 700,
+                                        fontFamily: "inherit",
+                                        cursor: "pointer",
+                                        // Both stretch, so on a phone each wrapped line reads as
+                                        // a choice rather than one button left stranded.
+                                        flex: "1 1 auto"
+                                      },
+                                      children: "Send to the Glitchgrab team"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      "data-gg-glitchgrab-offer-no": "",
+                                      onClick: () => {
+                                        logEvent("glitchgrab_offer_declined");
+                                        send("No \u2014 it's about this app, not the reporting tool");
+                                      },
+                                      style: {
+                                        padding: "8px 12px",
+                                        borderRadius: "999px",
+                                        border: `1px solid ${t2.inputBorder}`,
+                                        background: "transparent",
+                                        color: t2.textMuted,
+                                        fontSize: "12px",
+                                        fontFamily: "inherit",
+                                        cursor: "pointer",
+                                        flex: "1 1 auto"
+                                      },
+                                      children: "No, it's about this app"
+                                    }
+                                  )
+                                ] })
+                              ]
+                            }
+                          ) }),
+                          options.length > 0 && !busy && phase === "chat" && !glitchgrabOffer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "div",
                             {
                               style: {
@@ -2107,35 +2345,13 @@ function AssistSheet({
                                       textTransform: "uppercase",
                                       color: t2.accent
                                     },
-                                    children: "Your report \xB7 edit anything"
-                                  }
-                                ),
-                                duplicate && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                                  "div",
-                                  {
-                                    style: {
-                                      display: "flex",
-                                      flexDirection: "column",
-                                      gap: "3px",
-                                      padding: "9px 10px",
-                                      borderRadius: "8px",
-                                      border: "1px solid rgba(245,158,11,0.4)",
-                                      backgroundColor: "rgba(245,158,11,0.08)",
-                                      fontSize: "12px",
-                                      lineHeight: 1.5
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#f59e0b", fontWeight: 600 }, children: "Our team is already on this" }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t2.textMuted, wordBreak: "break-word" }, children: [
-                                        "#",
-                                        duplicate.number,
-                                        " ",
-                                        duplicate.title
-                                      ] }),
-                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t2.textMuted }, children: "Your details will be added to it instead of opening a new issue." })
-                                    ]
+                                    children: duplicate ? `What we'll add to #${duplicate.number} \xB7 edit anything` : "Your report \xB7 edit anything"
                                   }
                                 ),
+                                renderKnownIssue({
+                                  title: true,
+                                  footer: "Your details will be added to it instead of opening a new issue."
+                                }),
                                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "textarea",
                                   {
@@ -2230,26 +2446,7 @@ function AssistSheet({
                                   " ",
                                   attachmentCount === 1 ? "attachment" : "attachments",
                                   " will be sent with this."
-                                ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    onClick: keepChatting,
-                                    style: {
-                                      alignSelf: "flex-start",
-                                      border: "none",
-                                      background: "transparent",
-                                      color: t2.textMuted,
-                                      fontSize: "12px",
-                                      fontFamily: "inherit",
-                                      padding: "9px 0",
-                                      cursor: "pointer",
-                                      textDecoration: "underline"
-                                    },
-                                    children: "Not quite \u2014 keep chatting"
-                                  }
-                                )
+                                ] })
                               ]
                             }
                           ),
@@ -2353,189 +2550,270 @@ function AssistSheet({
                           },
                           children: isSubmitting ? "Sending\u2026" : rating < 1 ? "Pick a star first" : "Send Rating"
                         }
-                      ) : phase === "draft" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                        validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "p",
-                          {
-                            style: {
-                              margin: "0 0 8px",
-                              color: "#ef4444",
-                              fontSize: "12px"
-                            },
-                            children: validationError
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            "data-gg-sheet-send": "",
-                            onClick: sendDraft,
-                            disabled: isSubmitting || !description.trim(),
-                            style: {
-                              width: "100%",
-                              padding: "12px",
-                              borderRadius: "10px",
-                              border: "none",
-                              backgroundColor: isSubmitting || !description.trim() ? t2.bgSecondary : t2.accent,
-                              color: isSubmitting || !description.trim() ? t2.textMuted : t2.accentText,
-                              fontSize: "14px",
-                              fontWeight: 700,
-                              fontFamily: "inherit",
-                              cursor: isSubmitting || !description.trim() ? "default" : "pointer"
-                            },
-                            children: isSubmitting ? "Sending\u2026" : duplicate ? `Add to #${duplicate.number}` : "Send Report"
-                          }
-                        )
-                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                        (screenshots.length > 0 || onAddImages) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              gap: "8px",
-                              alignItems: "center",
-                              flexWrap: "wrap",
-                              marginBottom: "8px"
-                            },
-                            children: [
-                              screenshots.map((shot, i) => {
-                                const read = i >= screenshots.length - MAX_ASSIST_IMAGES;
-                                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                  "img",
+                      ) : (
+                        // Chat AND draft share this branch, so the chat box is the same
+                        // element on both sides of a draft landing — it stays put
+                        // instead of remounting, and a draft is something you can
+                        // still reply to (#360), not a form that replaced the chat.
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                          (screenshots.length > 0 || onAddImages) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                gap: "8px",
+                                alignItems: "center",
+                                flexWrap: "wrap",
+                                marginBottom: "8px"
+                              },
+                              children: [
+                                screenshots.map((shot, i) => {
+                                  const read = readShots.has(shot);
+                                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                    "div",
+                                    {
+                                      style: {
+                                        position: "relative",
+                                        width: "40px",
+                                        height: "40px",
+                                        flexShrink: 0
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "img",
+                                          {
+                                            src: shot,
+                                            alt: read ? "Attached image the assistant reads" : "Attached image",
+                                            "data-gg-assist-thumb": "",
+                                            style: {
+                                              display: "block",
+                                              width: "100%",
+                                              height: "100%",
+                                              objectFit: "cover",
+                                              borderRadius: "8px",
+                                              border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
+                                              opacity: read ? 1 : 0.45,
+                                              boxSizing: "border-box"
+                                            }
+                                          }
+                                        ),
+                                        onRemoveImage && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            "data-gg-assist-remove": "",
+                                            "aria-label": `Remove image ${i + 1}`,
+                                            title: "Remove this image",
+                                            onClick: () => {
+                                              logEvent(
+                                                "image_removed",
+                                                pageShot && shot === pageShot ? "page capture" : "attached"
+                                              );
+                                              onRemoveImage(i);
+                                            },
+                                            style: {
+                                              position: "absolute",
+                                              top: "-13px",
+                                              right: "-13px",
+                                              width: "32px",
+                                              height: "32px",
+                                              border: "none",
+                                              background: "transparent",
+                                              padding: 0,
+                                              cursor: "pointer",
+                                              display: "flex",
+                                              alignItems: "center",
+                                              justifyContent: "center",
+                                              borderRadius: "50%"
+                                            },
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                              "span",
+                                              {
+                                                "aria-hidden": "true",
+                                                style: {
+                                                  width: "20px",
+                                                  height: "20px",
+                                                  boxSizing: "border-box",
+                                                  borderRadius: "50%",
+                                                  border: `2px solid ${t2.bg}`,
+                                                  background: "#ef4444",
+                                                  color: "#fff",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  justifyContent: "center"
+                                                },
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                                  "path",
+                                                  {
+                                                    d: "M1 1L9 9M9 1L1 9",
+                                                    stroke: "currentColor",
+                                                    strokeWidth: "1.6",
+                                                    strokeLinecap: "round"
+                                                  }
+                                                ) })
+                                              }
+                                            )
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    `${i}-${shot.slice(-16)}`
+                                  );
+                                }),
+                                onAddImages && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                  "label",
                                   {
-                                    src: shot,
-                                    alt: read ? "Attached image the assistant reads" : "Attached image",
-                                    "data-gg-assist-thumb": "",
+                                    "data-gg-assist-attach": "",
+                                    title: "Attach an image \u2014 or just paste one",
                                     style: {
                                       width: "40px",
                                       height: "40px",
-                                      objectFit: "cover",
                                       borderRadius: "8px",
-                                      border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
-                                      opacity: read ? 1 : 0.45
-                                    }
-                                  },
-                                  `${i}-${shot.slice(-16)}`
-                                );
-                              }),
-                              onAddImages && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                                "label",
-                                {
-                                  "data-gg-assist-attach": "",
-                                  title: "Attach an image \u2014 or just paste one",
-                                  style: {
-                                    width: "40px",
-                                    height: "40px",
-                                    borderRadius: "8px",
-                                    border: `1px dashed ${t2.inputBorder}`,
-                                    display: "inline-flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    color: t2.textMuted,
-                                    fontSize: "18px",
-                                    cursor: "pointer",
-                                    flexShrink: 0
-                                  },
-                                  children: [
-                                    "+",
-                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                      "input",
-                                      {
-                                        type: "file",
-                                        accept: "image/*",
-                                        multiple: true,
-                                        onChange: (e) => {
-                                          var _a;
-                                          const files = Array.from((_a = e.target.files) != null ? _a : []);
-                                          if (files.length) {
-                                            logEvent("image_added", String(files.length));
-                                            onAddImages(files);
-                                          }
-                                          e.target.value = "";
-                                        },
-                                        style: { display: "none" }
-                                      }
-                                    )
-                                  ]
-                                }
-                              ),
-                              screenshots.length > MAX_ASSIST_IMAGES && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t2.textMuted, fontSize: "11px" }, children: [
-                                "newest ",
-                                MAX_ASSIST_IMAGES,
-                                " read"
-                              ] })
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            "textarea",
-                            {
-                              ref: inputRef,
-                              value: input,
-                              onChange: (e) => setInput(e.target.value),
-                              onKeyDown: (e) => {
-                                if (e.key === "Enter" && !e.shiftKey) {
-                                  e.preventDefault();
-                                  send(input);
-                                }
-                              },
-                              placeholder: correcting ? "What should change in the draft?" : "Type your answer\u2026",
-                              rows: 1,
-                              disabled: busy,
-                              autoFocus: true,
-                              style: {
-                                flex: 1,
-                                minHeight: "42px",
-                                maxHeight: "120px",
-                                padding: "11px 12px",
-                                borderRadius: "10px",
-                                border: `1px solid ${t2.inputBorder}`,
-                                backgroundColor: t2.inputBg,
-                                color: t2.text,
-                                fontSize: "13px",
-                                lineHeight: 1.4,
-                                fontFamily: "inherit",
-                                resize: "none",
-                                outline: "none",
-                                boxSizing: "border-box"
-                              }
+                                      border: `1px dashed ${t2.inputBorder}`,
+                                      display: "inline-flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      color: t2.textMuted,
+                                      fontSize: "18px",
+                                      cursor: "pointer",
+                                      flexShrink: 0
+                                    },
+                                    children: [
+                                      "+",
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "input",
+                                        {
+                                          type: "file",
+                                          accept: "image/*",
+                                          multiple: true,
+                                          onChange: (e) => {
+                                            var _a;
+                                            const files = Array.from((_a = e.target.files) != null ? _a : []);
+                                            if (files.length) {
+                                              logEvent("image_added", String(files.length));
+                                              onAddImages(files);
+                                            }
+                                            e.target.value = "";
+                                          },
+                                          style: { display: "none" }
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                readShots.size < screenshots.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color: t2.textMuted, fontSize: "11px" }, children: [
+                                  readShots.size,
+                                  " of ",
+                                  screenshots.length,
+                                  " read"
+                                ] })
+                              ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              "data-gg-sheet-send": "",
-                              onClick: () => send(input),
-                              disabled: busy || !input.trim(),
-                              "aria-label": "Send message",
-                              "data-gg-send-message": "",
-                              style: {
-                                flexShrink: 0,
-                                width: "42px",
-                                height: "42px",
-                                borderRadius: "10px",
-                                border: "none",
-                                display: "inline-flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                backgroundColor: busy || !input.trim() ? t2.bgSecondary : t2.accent,
-                                color: busy || !input.trim() ? t2.textMuted : t2.accentText,
-                                cursor: busy || !input.trim() ? "default" : "pointer"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                "path",
-                                {
-                                  d: "M3 20.5L21.5 12 3 3.5V10l12 2-12 2v6.5z",
-                                  fill: "currentColor"
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "textarea",
+                              {
+                                value: input,
+                                onChange: (e) => setInput(e.target.value),
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter" && !e.shiftKey) {
+                                    e.preventDefault();
+                                    send(input);
+                                  }
+                                },
+                                placeholder: phase === "draft" ? "Anything to change? Tell me here\u2026" : "Type your answer\u2026",
+                                rows: 1,
+                                disabled: busy,
+                                autoFocus: true,
+                                style: {
+                                  flex: 1,
+                                  minHeight: "42px",
+                                  maxHeight: "120px",
+                                  padding: "11px 12px",
+                                  borderRadius: "10px",
+                                  border: `1px solid ${t2.inputBorder}`,
+                                  backgroundColor: t2.inputBg,
+                                  color: t2.text,
+                                  fontSize: "13px",
+                                  lineHeight: 1.4,
+                                  fontFamily: "inherit",
+                                  resize: "none",
+                                  outline: "none",
+                                  boxSizing: "border-box"
                                 }
-                              ) })
-                            }
-                          )
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                "data-gg-sheet-send": "",
+                                onClick: () => send(input),
+                                disabled: busy || !input.trim(),
+                                "aria-label": "Send message",
+                                "data-gg-send-message": "",
+                                style: {
+                                  flexShrink: 0,
+                                  width: "42px",
+                                  height: "42px",
+                                  borderRadius: "10px",
+                                  border: "none",
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  backgroundColor: busy || !input.trim() ? t2.bgSecondary : t2.accent,
+                                  color: busy || !input.trim() ? t2.textMuted : t2.accentText,
+                                  cursor: busy || !input.trim() ? "default" : "pointer"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "path",
+                                  {
+                                    d: "M3 20.5L21.5 12 3 3.5V10l12 2-12 2v6.5z",
+                                    fill: "currentColor"
+                                  }
+                                ) })
+                              }
+                            )
+                          ] }),
+                          phase === "draft" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                            validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "p",
+                              {
+                                style: {
+                                  margin: "8px 0 0",
+                                  color: "#ef4444",
+                                  fontSize: "12px"
+                                },
+                                children: validationError
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                "data-gg-sheet-send": "",
+                                onClick: sendDraft,
+                                disabled: isSubmitting || !description.trim(),
+                                style: {
+                                  width: "100%",
+                                  marginTop: "8px",
+                                  padding: "12px",
+                                  borderRadius: "10px",
+                                  border: "none",
+                                  backgroundColor: isSubmitting || !description.trim() ? t2.bgSecondary : t2.accent,
+                                  color: isSubmitting || !description.trim() ? t2.textMuted : t2.accentText,
+                                  fontSize: "14px",
+                                  fontWeight: 700,
+                                  fontFamily: "inherit",
+                                  cursor: isSubmitting || !description.trim() ? "default" : "pointer"
+                                },
+                                children: isSubmitting ? "Sending\u2026" : duplicate ? `Add to #${duplicate.number}` : "Send Report"
+                              }
+                            )
+                          ] })
                         ] })
-                      ] }),
+                      ),
                       phase === "chat" && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "button",
                         {
@@ -2555,16 +2833,274 @@ function AssistSheet({
                           },
                           children: "Not getting it? Fill the form yourself \u2192"
                         }
+                      ),
+                      onReportGlitchgrabProblem && phase !== "solved" && !glitchgrabOffer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-gg-self-report": "",
+                          onClick: () => onReportGlitchgrabProblem(),
+                          style: {
+                            display: "block",
+                            // ~32px tap target; the negative margins keep the composer
+                            // from growing to make room for it.
+                            margin: "-2px auto -8px",
+                            border: "none",
+                            background: "transparent",
+                            color: t2.textMuted,
+                            fontSize: "11.5px",
+                            fontFamily: "inherit",
+                            padding: "10px 8px",
+                            cursor: "pointer",
+                            textDecoration: "underline",
+                            textUnderlineOffset: "2px"
+                          },
+                          children: "Assistant misbehaving? Tell Glitchgrab"
+                        }
                       )
                     ]
                   }
                 )
-              ]
-            }
-          )
-        }
-      )
-    ] }),
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+var FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var FAILED = "Couldn't send it. Try again in a moment.";
+function describeSentAlong(hasChat, screenshotCount) {
+  const parts = [
+    ...hasChat ? ["your AI chat"] : [],
+    "what you did on this page",
+    ...screenshotCount > 0 ? [`${screenshotCount} screenshot${screenshotCount === 1 ? "" : "s"}`] : []
+  ];
+  if (parts.length === 1) return parts[0];
+  return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+}
+function GlitchgrabProblemPanel({
+  send,
+  theme: t2,
+  surface,
+  conversationId,
+  reportType,
+  screenshots,
+  initialText = "",
+  onClose
+}) {
+  const [text, setText] = (0, import_react4.useState)(initialText);
+  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const [sent, setSent] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const inputRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.stopPropagation();
+      onClose();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose]);
+  const submit = async () => {
+    const description = text.trim();
+    if (!description || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await send({ description, surface, conversationId, reportType, screenshots });
+      if (result == null ? void 0 : result.success) setSent(true);
+      else setError((result == null ? void 0 : result.message) || FAILED);
+    } catch (e) {
+      setError(FAILED);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const canSend = !!text.trim() && !busy;
+  const secondaryButton = {
+    padding: "10px 14px",
+    borderRadius: "8px",
+    border: `1px solid ${t2.inputBorder}`,
+    background: "transparent",
+    color: t2.text,
+    fontSize: "13px",
+    fontWeight: 600,
+    fontFamily: "inherit",
+    cursor: "pointer"
+  };
+  const primaryButton = (enabled) => ({
+    padding: "10px 14px",
+    borderRadius: "8px",
+    border: "none",
+    backgroundColor: enabled ? t2.accent : t2.bgSecondary,
+    color: enabled ? t2.accentText : t2.textMuted,
+    fontSize: "13px",
+    fontWeight: 700,
+    fontFamily: "inherit",
+    cursor: enabled ? "pointer" : "default"
+  });
+  return (0, import_react_dom3.createPortal)(
+    // No close on backdrop click: a stray click would throw away what they typed.
+    // `data-glitchgrab-layer` exempts this from the dialog's anti-focus-trap
+    // sweep, which sets `inert` on every other role="dialog" on the page —
+    // without it the panel renders but cannot be typed into.
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "data-glitchgrab-layer": "",
+        "data-gg-self-report-panel": "",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "gg-self-report-title",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483647,
+          backgroundColor: "rgba(0,0,0,0.55)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "16px",
+          boxSizing: "border-box",
+          fontFamily: FONT
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: "420px",
+              boxSizing: "border-box",
+              backgroundColor: t2.bg,
+              color: t2.text,
+              border: `1px solid ${t2.border}`,
+              borderRadius: "12px",
+              boxShadow: "0 20px 50px rgba(0,0,0,0.5)",
+              padding: "18px"
+            },
+            children: sent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "gg-self-report-title", style: { fontSize: "15px", fontWeight: 600 }, children: "Sent to the Glitchgrab team" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "6px 0 16px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "Thanks \u2014 we'll look into it. Your report is still open behind this, exactly as you left it." }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-gg-self-report-done": "",
+                  onClick: onClose,
+                  style: { ...primaryButton(true), width: "100%" },
+                  children: "Back to your report"
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "gg-self-report-title", style: { fontSize: "15px", fontWeight: 600 }, children: "Problem with Glitchgrab?" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onClose,
+                        "aria-label": "Close",
+                        style: {
+                          border: "none",
+                          background: "transparent",
+                          color: t2.textMuted,
+                          fontSize: "18px",
+                          lineHeight: 1,
+                          cursor: "pointer",
+                          padding: "4px 6px",
+                          margin: "-4px -6px 0 0"
+                        },
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "6px 0 12px", fontSize: "13px", lineHeight: 1.5, color: t2.textMuted }, children: "This goes to the people who build this reporter \u2014 not to this project's team. Tell us what went wrong: the AI chat, a button, anything." }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "textarea",
+                {
+                  ref: inputRef,
+                  "data-gg-self-report-input": "",
+                  value: text,
+                  onChange: (e) => {
+                    setText(e.target.value);
+                    if (error) setError(null);
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault();
+                      void submit();
+                    }
+                  },
+                  rows: 4,
+                  placeholder: "e.g. The assistant kept asking the same question and never wrote a draft",
+                  style: {
+                    width: "100%",
+                    boxSizing: "border-box",
+                    resize: "vertical",
+                    padding: "10px 12px",
+                    borderRadius: "8px",
+                    border: `1px solid ${t2.inputBorder}`,
+                    backgroundColor: t2.inputBg,
+                    color: t2.text,
+                    fontSize: "14px",
+                    lineHeight: 1.45,
+                    fontFamily: "inherit",
+                    outline: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "p",
+                {
+                  "data-gg-self-report-includes": "",
+                  style: { margin: "8px 0 0", fontSize: "11.5px", lineHeight: 1.45, color: t2.textMuted },
+                  children: [
+                    "Also sent, so we can see what happened:",
+                    " ",
+                    describeSentAlong(conversationId !== null, screenshots.length),
+                    "."
+                  ]
+                }
+              ),
+              error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { role: "alert", style: { margin: "8px 0 0", fontSize: "12px", color: "#ef4444" }, children: error }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "14px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: onClose, style: secondaryButton, children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "data-gg-self-report-send": "",
+                    onClick: () => void submit(),
+                    disabled: !canSend,
+                    style: primaryButton(canSend),
+                    children: busy ? "Sending\u2026" : "Send to Glitchgrab"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      }
+    ),
     document.body
   );
 }
@@ -2615,6 +3151,7 @@ var ATTACHMENT_ACCEPT = [
 ].join(",");
 var MAX_SCALE = 2;
 var FRAME_TIMEOUT_MS = 3e3;
+var GRAB_TIMEOUT_MS = FRAME_TIMEOUT_MS + 2e3;
 function canCaptureTabPixels() {
   var _a;
   try {
@@ -2681,7 +3218,13 @@ async function captureViaTabPixels() {
     stream = await navigator.mediaDevices.getDisplayMedia(options);
     const surface = (_b = (_a = stream.getVideoTracks()[0]) == null ? void 0 : _a.getSettings()) == null ? void 0 : _b.displaySurface;
     if (surface && surface !== "browser") return null;
-    const canvas = await grabFrame(stream);
+    let timer;
+    const timedOut = new Promise((resolve) => {
+      timer = setTimeout(() => resolve(null), GRAB_TIMEOUT_MS);
+    });
+    const canvas = await Promise.race([grabFrame(stream), timedOut]).finally(
+      () => clearTimeout(timer)
+    );
     return canvas ? encodeScreenshot(canvas) : null;
   } catch (e) {
     return null;
@@ -2689,6 +3232,10 @@ async function captureViaTabPixels() {
     stream == null ? void 0 : stream.getTracks().forEach((track) => track.stop());
   }
 }
+var IMAGE_TIMEOUT_MS = 3e3;
+function isGlitchgrabLayer(el) {
+  return el.hasAttribute("data-glitchgrab-layer");
+}
 async function captureViaHtml2Canvas() {
   try {
     const { default: html2canvas } = await import("html2canvas-pro");
@@ -2698,6 +3245,8 @@ async function captureViaHtml2Canvas() {
       logging: false,
       useCORS: true,
       allowTaint: true,
+      imageTimeout: IMAGE_TIMEOUT_MS,
+      ignoreElements: isGlitchgrabLayer,
       x: window.scrollX,
       y: window.scrollY,
       width: window.innerWidth,
@@ -2710,12 +3259,40 @@ async function captureViaHtml2Canvas() {
     return null;
   }
 }
-async function captureDefaultScreenshot() {
-  var _a;
-  return (_a = await captureViaTabPixels()) != null ? _a : await captureViaHtml2Canvas();
+var inFlight = null;
+function nextPaint() {
+  return new Promise((resolve) => {
+    const cap = setTimeout(resolve, 100);
+    if (typeof requestAnimationFrame !== "function") return;
+    requestAnimationFrame(
+      () => setTimeout(() => {
+        clearTimeout(cap);
+        resolve();
+      }, 0)
+    );
+  });
+}
+function captureDefaultScreenshot(options) {
+  if (inFlight) return inFlight;
+  inFlight = (async () => {
+    const pixels = await captureViaTabPixels();
+    if (pixels) return pixels;
+    if (options == null ? void 0 : options.onRedraw) {
+      try {
+        options.onRedraw();
+      } catch (e) {
+      }
+      await nextPaint();
+    }
+    return captureViaHtml2Canvas();
+  })().finally(() => {
+    inFlight = null;
+  });
+  return inFlight;
 }
 var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
-function useIsDark() {
+var SHOT_WAIT_MS = 3e3;
+function detectDark() {
   if (typeof window === "undefined") return true;
   try {
     for (const el of [document.body, document.documentElement]) {
@@ -2849,13 +3426,13 @@ function ReporterChip({
   const label = isAnonymous ? "Anonymous" : name;
   const title = isAnonymous ? "No reporter identity was passed to Glitchgrab \u2014 this report won't be attributed to anyone" : [name, reporter == null ? void 0 : reporter.email, reporter == null ? void 0 : reporter.role].filter(Boolean).join(" \xB7 ");
   const showAvatarImage = !!avatarUrl && !avatarFailed;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "span",
     {
       title,
       style: { display: "flex", alignItems: "center", gap: "6px", minWidth: 0 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -2875,7 +3452,7 @@ function ReporterChip({
               color: isAnonymous ? t2.textMuted : t2.accentText,
               border: `1px solid ${isAnonymous ? t2.inputBorder : "transparent"}`
             },
-            children: showAvatarImage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            children: showAvatarImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "img",
               {
                 src: avatarUrl,
@@ -2885,9 +3462,9 @@ function ReporterChip({
                 onError: () => setAvatarFailed(true),
                 style: { width: "100%", height: "100%", objectFit: "cover" }
               }
-            ) : initials ? initials : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8", cy: "5.5", r: "2.75", stroke: "currentColor", strokeWidth: "1.4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ) : initials ? initials : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "8", cy: "5.5", r: "2.75", stroke: "currentColor", strokeWidth: "1.4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "path",
                 {
                   d: "M2.75 13.5c0-2.35 2.35-3.75 5.25-3.75s5.25 1.4 5.25 3.75",
@@ -2899,7 +3476,7 @@ function ReporterChip({
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "span",
           {
             style: {
@@ -3028,13 +3605,16 @@ function ReportDialog({
   captureScreenshot = captureDefaultScreenshot,
   reporter,
   onClose,
-  headerSlot
+  headerSlot,
+  reportGlitchgrabProblem
 }) {
   var _a;
   const [isEnhancing, setIsEnhancing] = (0, import_react.useState)(false);
   const [assistOpen, setAssistOpen] = (0, import_react.useState)(false);
   const [assistNotice, setAssistNotice] = (0, import_react.useState)(null);
   const [assistUsed, setAssistUsed] = (0, import_react.useState)(false);
+  const [selfReportFrom, setSelfReportFrom] = (0, import_react.useState)(null);
+  const [selfReportPrefill, setSelfReportPrefill] = (0, import_react.useState)("");
   const [typeChosen, setTypeChosen] = (0, import_react.useState)(false);
   const [duplicateIssueNumber, setDuplicateIssueNumber] = (0, import_react.useState)(null);
   const [aiConversationId, setAiConversationId] = (0, import_react.useState)(null);
@@ -3056,6 +3636,9 @@ function ReportDialog({
   const [submitted, setSubmitted] = (0, import_react.useState)(false);
   const [screenshots, setScreenshots] = (0, import_react.useState)([]);
   const [pageShot, setPageShot] = (0, import_react.useState)(null);
+  const [shotPending, setShotPending] = (0, import_react.useState)(false);
+  const pendingShotRef = (0, import_react.useRef)(null);
+  const openGenRef = (0, import_react.useRef)(0);
   const [attachments, setAttachments] = (0, import_react.useState)([]);
   const [previewIndex, setPreviewIndex] = (0, import_react.useState)(null);
   const [annotatingIndex, setAnnotatingIndex] = (0, import_react.useState)(null);
@@ -3184,8 +3767,19 @@ function ReportDialog({
     const next = current === -1 ? 0 : Math.min(Math.max(current + delta, 0), tiles.length - 1);
     (_c = tiles[next]) == null ? void 0 : _c.focus();
   };
-  const isDark = useIsDark();
+  const isDark = (0, import_react.useMemo)(() => isOpen ? detectDark() : true, [isOpen]);
   const t2 = getTheme(isDark);
+  const layerTheme = {
+    bg: t2.bg,
+    bgSecondary: t2.bgSecondary,
+    border: t2.border,
+    text: t2.text,
+    textMuted: t2.textMuted,
+    inputBg: t2.inputBg,
+    inputBorder: t2.inputBorder,
+    accent: t2.accent,
+    accentText: t2.accentText
+  };
   const canZoomPreview = previewNatural !== null && typeof window !== "undefined" && (previewNatural.w > window.innerWidth - 32 || previewNatural.h > window.innerHeight - 80);
   const handleFileUpload = (e) => {
     const files = e.target.files;
@@ -3194,24 +3788,28 @@ function ReportDialog({
     e.target.value = "";
   };
   const addFiles = (files) => {
-    files.forEach((file) => {
+    const images = files.filter((file) => file.type.startsWith("image/"));
+    if (images.length > 0) {
+      void Promise.all(images.map((file) => encodeImageFile(file).catch(() => null))).then(
+        (encoded) => {
+          const added = encoded.filter((url) => !!url);
+          if (added.length > 0) setScreenshots((prev) => [...prev, ...added]);
+        }
+      );
+    }
+    files.filter((file) => !file.type.startsWith("image/")).forEach((file) => {
       const reader = new FileReader();
-      if (file.type.startsWith("image/")) {
-        reader.onload = () => {
-          setScreenshots((prev) => [...prev, reader.result]);
-        };
-      } else {
-        reader.onload = () => {
-          setAttachments((prev) => [
-            ...prev,
-            { name: file.name, size: file.size, dataUrl: reader.result }
-          ]);
-        };
-      }
+      reader.onload = () => {
+        setAttachments((prev) => [
+          ...prev,
+          { name: file.name, size: file.size, dataUrl: reader.result }
+        ]);
+      };
       reader.readAsDataURL(file);
     });
   };
   const handleOpen = async () => {
+    const gen = openGenRef.current;
     setSubmitted(false);
     closePreview();
     setAnnotatingIndex(null);
@@ -3220,11 +3818,32 @@ function ReportDialog({
       setTypeChosen(true);
       setStep(2);
     }
-    const shot = await captureScreenshot();
+    const show = () => {
+      if (gen !== openGenRef.current) return;
+      if (assist && !assistUsed) setAssistOpen(true);
+      setIsOpen(true);
+    };
+    const capture = captureScreenshot({
+      onRedraw: () => {
+        if (gen !== openGenRef.current) return;
+        setShotPending(true);
+        show();
+      }
+    });
+    pendingShotRef.current = capture;
+    const previousPageShot = pageShot;
+    const shot = await capture.catch(() => null);
+    if (gen !== openGenRef.current) return;
+    pendingShotRef.current = null;
+    setShotPending(false);
     setPageShot(shot != null ? shot : null);
-    if (shot) setScreenshots([shot]);
-    if (assist && !assistUsed) setAssistOpen(true);
-    setIsOpen(true);
+    if (shot) {
+      setScreenshots((prev) => [
+        shot,
+        ...prev.filter((s) => s !== shot && s !== previousPageShot)
+      ]);
+    }
+    show();
   };
   (0, import_react.useEffect)(() => {
     const handler = (e) => {
@@ -3417,6 +4036,9 @@ function ReportDialog({
     stopVoice();
     setIsOpen(false);
     onClose == null ? void 0 : onClose();
+    openGenRef.current += 1;
+    pendingShotRef.current = null;
+    setShotPending(false);
     closePreview();
     setAnnotatingIndex(null);
     setStep(1);
@@ -3427,6 +4049,7 @@ function ReportDialog({
     setDuplicateIssueNumber(null);
     setSeverity(null);
     setValidationError(null);
+    setSelfReportFrom(null);
     setVoiceError(null);
     setIsEnhanced(false);
     setOriginalDescription(null);
@@ -3649,8 +4272,19 @@ function ReportDialog({
         return;
       }
       setIsSubmitting(true);
+      let shots = screenshots;
+      const pending = pendingShotRef.current;
+      if (pending) {
+        const shot = await Promise.race([
+          pending.catch(() => null),
+          new Promise((resolve) => setTimeout(() => resolve(null), SHOT_WAIT_MS))
+        ]);
+        if (shot && !shots.includes(shot)) {
+          shots = [shot, ...shots.filter((s) => s !== pageShot)];
+        }
+      }
       const metadata = {};
-      if (screenshots.length > 0) metadata.screenshots = JSON.stringify(screenshots);
+      if (shots.length > 0) metadata.screenshots = JSON.stringify(shots);
       if (attachments.length > 0) metadata.attachments = JSON.stringify(attachments);
       if (showSeverity && reportType === "BUG" && severity) {
         metadata.severity = severity;
@@ -3686,9 +4320,9 @@ function ReportDialog({
     }
   };
   if (!mounted) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     isOpen && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
           @keyframes gg-pulse{0%,100%{opacity:1}50%{opacity:0.35}}
           @keyframes gg-b1{0%,100%{height:3px}40%{height:13px}}
           @keyframes gg-b2{0%,100%{height:8px}50%{height:3px}}
@@ -3725,7 +4359,7 @@ function ReportDialog({
       document.body
     ),
     isOpen && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
           "data-glitchgrab-layer": "",
@@ -3748,10 +4382,13 @@ function ReportDialog({
           },
           onPointerDown: (e) => e.stopPropagation(),
           onFocus: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "div",
             {
               ref: modalRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": "Report an issue",
               onClick: (e) => e.stopPropagation(),
               style: {
                 position: "relative",
@@ -3770,7 +4407,7 @@ function ReportDialog({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "div",
                   {
                     style: {
@@ -3779,7 +4416,7 @@ function ReportDialog({
                       borderBottom: `1px solid ${t2.border}`
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                         "div",
                         {
                           style: {
@@ -3788,7 +4425,7 @@ function ReportDialog({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                               "div",
                               {
                                 style: {
@@ -3797,7 +4434,7 @@ function ReportDialog({
                                   gap: "8px"
                                 },
                                 children: [
-                                  step > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  step > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "button",
                                     {
                                       type: "button",
@@ -3811,14 +4448,14 @@ function ReportDialog({
                                         alignItems: "center"
                                       },
                                       "aria-label": "Back",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                         "svg",
                                         {
                                           width: "16",
                                           height: "16",
                                           viewBox: "0 0 16 16",
                                           fill: "none",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                             "path",
                                             {
                                               d: "M10 3L5 8L10 13",
@@ -3832,7 +4469,7 @@ function ReportDialog({
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "span",
                                     {
                                       style: {
@@ -3846,7 +4483,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                               "div",
                               {
                                 style: {
@@ -3855,7 +4492,7 @@ function ReportDialog({
                                   gap: "8px"
                                 },
                                 children: [
-                                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "span",
                                     {
                                       title: "Press this anywhere to open Glitchgrab",
@@ -3873,7 +4510,7 @@ function ReportDialog({
                                       children: getShortcutLabel()
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "button",
                                     {
                                       type: "button",
@@ -3888,7 +4525,7 @@ function ReportDialog({
                                         justifyContent: "center"
                                       },
                                       "aria-label": "Close",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                         "svg",
                                         {
                                           width: "16",
@@ -3896,7 +4533,7 @@ function ReportDialog({
                                           viewBox: "0 0 16 16",
                                           fill: "none",
                                           style: { display: "block" },
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                             "path",
                                             {
                                               d: "M4 4L12 12M12 4L4 12",
@@ -3915,7 +4552,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "div",
                         {
                           style: {
@@ -3925,12 +4562,12 @@ function ReportDialog({
                             gap: "0",
                             marginTop: "12px"
                           },
-                          children: [1, 2].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          children: [1, 2].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "div",
                             {
                               style: { display: "flex", alignItems: "center" },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "div",
                                   {
                                     style: {
@@ -3942,7 +4579,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "div",
                                   {
                                     style: {
@@ -3962,7 +4599,7 @@ function ReportDialog({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     style: {
@@ -3971,7 +4608,7 @@ function ReportDialog({
                       flex: "1 1 auto",
                       minHeight: 0
                     },
-                    children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                       "div",
                       {
                         style: {
@@ -3986,9 +4623,9 @@ function ReportDialog({
                           " sent. Thank you!"
                         ]
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                      step === 1 && headerSlot ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginBottom: "14px" }, children: headerSlot }) : null,
-                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                      step === 1 && headerSlot ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: "14px" }, children: headerSlot }) : null,
+                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                         "div",
                         {
                           style: {
@@ -4005,16 +4642,16 @@ function ReportDialog({
                           },
                           onMouseLeave: () => setHoveredStar(0),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                               "span",
                               {
                                 style: { fontSize: "13px", fontWeight: 600, color: t2.text },
                                 children: "How are we doing?"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "flex", gap: "4px" }, children: [1, 2, 3, 4, 5].map((star) => {
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { display: "flex", gap: "4px" }, children: [1, 2, 3, 4, 5].map((star) => {
                               const filled = star <= (hoveredStar || rating);
-                              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -4035,7 +4672,7 @@ function ReportDialog({
                                     cursor: "pointer",
                                     lineHeight: 0
                                   },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "path",
                                     {
                                       d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
@@ -4052,7 +4689,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                         "div",
                         {
                           style: {
@@ -4062,13 +4699,13 @@ function ReportDialog({
                             marginBottom: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted }, children: "or report something" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } })
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted }, children: "or report something" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flex: 1, height: "1px", background: t2.border } })
                           ]
                         }
                       ),
-                      step === 1 && screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      step === 1 && screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                         "div",
                         {
                           style: {
@@ -4082,7 +4719,7 @@ function ReportDialog({
                             background: t2.inputBg
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                               "img",
                               {
                                 src: screenshots[0],
@@ -4097,8 +4734,8 @@ function ReportDialog({
                                 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted, flex: 1 }, children: "Screenshot attached" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "11px", color: t2.textMuted, flex: 1 }, children: "Screenshot attached" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -4119,7 +4756,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      step === 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      step === 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "div",
                         {
                           ref: tileGridRef,
@@ -4129,7 +4766,7 @@ function ReportDialog({
                             gridTemplateColumns: "1fr 1fr 1fr",
                             gap: "10px"
                           },
-                          children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "button",
                             {
                               type: "button",
@@ -4160,7 +4797,7 @@ function ReportDialog({
                               },
                               children: [
                                 getTypeIcon(type, t2.accent, 22),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -4178,8 +4815,8 @@ function ReportDialog({
                           ))
                         }
                       ),
-                      step === 2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      step === 2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "button",
                           {
                             type: "button",
@@ -4202,11 +4839,11 @@ function ReportDialog({
                             children: [
                               getTypeIcon(reportType, isRating ? "#f59e0b" : t2.accent, 13),
                               getTypeLabel(reportType),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: t2.textMuted, fontWeight: 400 }, children: "\xB7 change" })
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { color: t2.textMuted, fontWeight: 400 }, children: "\xB7 change" })
                             ]
                           }
                         ),
-                        isRating && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        isRating && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "div",
                           {
                             style: {
@@ -4217,7 +4854,7 @@ function ReportDialog({
                             onMouseLeave: () => setHoveredStar(0),
                             children: [1, 2, 3, 4, 5].map((star) => {
                               const filled = star <= (hoveredStar || rating);
-                              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -4234,7 +4871,7 @@ function ReportDialog({
                                     cursor: "pointer",
                                     lineHeight: 0
                                   },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "30", height: "30", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "30", height: "30", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "path",
                                     {
                                       d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
@@ -4250,7 +4887,7 @@ function ReportDialog({
                             })
                           }
                         ),
-                        assist && !isRating && !assistUsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        assist && !isRating && !assistUsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "button",
                           {
                             type: "button",
@@ -4277,7 +4914,7 @@ function ReportDialog({
                             },
                             title: "Answer a question or two and the assistant writes the report for you",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "path",
                                 {
                                   d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
@@ -4290,8 +4927,8 @@ function ReportDialog({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "textarea",
                             {
                               ref: textareaRef,
@@ -4333,7 +4970,7 @@ function ReportDialog({
                               autoFocus: true
                             }
                           ),
-                          (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "span",
                             {
                               style: {
@@ -4351,7 +4988,7 @@ function ReportDialog({
                                 zIndex: 1
                               },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -4366,7 +5003,7 @@ function ReportDialog({
                                   }
                                 ),
                                 isTranscribing ? "Transcribing\u2026" : "REC",
-                                isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -4393,7 +5030,7 @@ function ReportDialog({
                                         dur: "0.55s",
                                         delay: "0.15s"
                                       }
-                                    ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "span",
                                       {
                                         style: {
@@ -4413,7 +5050,7 @@ function ReportDialog({
                               ]
                             }
                           ),
-                          enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "button",
                             {
                               type: "button",
@@ -4458,7 +5095,7 @@ function ReportDialog({
                               },
                               title: "Polish grammar \u2014 preserves your meaning",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "svg",
                                   {
                                     width: "11",
@@ -4466,7 +5103,7 @@ function ReportDialog({
                                     viewBox: "0 0 24 24",
                                     fill: "none",
                                     "aria-hidden": "true",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "path",
                                       {
                                         d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
@@ -4481,7 +5118,7 @@ function ReportDialog({
                               ]
                             }
                           ),
-                          transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "button",
                             {
                               type: "button",
@@ -4507,7 +5144,7 @@ function ReportDialog({
                                 padding: 0,
                                 transition: "border-color 0.2s ease, color 0.2s ease"
                               },
-                              children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "svg",
                                 {
                                   width: "12",
@@ -4515,7 +5152,7 @@ function ReportDialog({
                                   viewBox: "0 0 24 24",
                                   fill: "currentColor",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "rect",
                                     {
                                       x: "6",
@@ -4526,7 +5163,7 @@ function ReportDialog({
                                     }
                                   )
                                 }
-                              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                                 "svg",
                                 {
                                   width: "13",
@@ -4535,7 +5172,7 @@ function ReportDialog({
                                   fill: "none",
                                   "aria-hidden": "true",
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "rect",
                                       {
                                         x: "9",
@@ -4547,7 +5184,7 @@ function ReportDialog({
                                         strokeWidth: "1.8"
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "path",
                                       {
                                         d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
@@ -4562,7 +5199,7 @@ function ReportDialog({
                             }
                           )
                         ] }),
-                        transcribeAudio2 && !isListening && !isTranscribing && !voiceError && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        transcribeAudio2 && !isListening && !isTranscribing && !voiceError && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "div",
                           {
                             style: {
@@ -4576,16 +5213,16 @@ function ReportDialog({
                               userSelect: "none"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
                               ] }),
                               "Hold Space to speak \u2014 we'll transcribe it"
                             ]
                           }
                         ),
-                        isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "div",
                           {
                             style: {
@@ -4599,7 +5236,7 @@ function ReportDialog({
                               border: `1px solid ${t2.accent}40`
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "svg",
                                 {
                                   width: "12",
@@ -4607,7 +5244,7 @@ function ReportDialog({
                                   viewBox: "0 0 24 24",
                                   fill: "none",
                                   style: { flexShrink: 0 },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                     "path",
                                     {
                                       d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
@@ -4618,7 +5255,7 @@ function ReportDialog({
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "span",
                                 {
                                   style: {
@@ -4629,7 +5266,7 @@ function ReportDialog({
                                   children: "AI enhanced"
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -4651,7 +5288,7 @@ function ReportDialog({
                                   children: "Keep"
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "button",
                                 {
                                   type: "button",
@@ -4677,7 +5314,7 @@ function ReportDialog({
                             ]
                           }
                         ),
-                        voiceError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        voiceError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "p",
                           {
                             role: "alert",
@@ -4691,7 +5328,7 @@ function ReportDialog({
                             children: voiceError
                           }
                         ),
-                        assistNotice && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        assistNotice && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "p",
                           {
                             style: {
@@ -4704,8 +5341,8 @@ function ReportDialog({
                             children: assistNotice
                           }
                         ),
-                        !isRating && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: "10px" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        !isRating && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "span",
                             {
                               style: {
@@ -4721,7 +5358,7 @@ function ReportDialog({
                               ]
                             }
                           ),
-                          screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          (screenshots.length > 0 || shotPending) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "div",
                             {
                               style: {
@@ -4730,132 +5367,159 @@ function ReportDialog({
                                 gap: "8px",
                                 marginBottom: "8px"
                               },
-                              children: screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                                "div",
-                                {
-                                  style: {
-                                    position: "relative",
-                                    width: "56px",
-                                    height: "56px"
-                                  },
-                                  children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                      "img",
-                                      {
-                                        src,
-                                        alt: `Screenshot ${i + 1}`,
-                                        onClick: () => openPreview(i),
-                                        style: {
-                                          width: "100%",
-                                          height: "100%",
-                                          borderRadius: "6px",
-                                          border: `1px solid ${t2.border}`,
-                                          objectFit: "cover",
-                                          objectPosition: "top",
-                                          cursor: "zoom-in",
-                                          display: "block"
-                                        }
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                      "button",
-                                      {
-                                        type: "button",
-                                        onClick: () => setScreenshots(
-                                          (prev) => prev.filter((_, idx) => idx !== i)
-                                        ),
-                                        "aria-label": `Remove screenshot ${i + 1}`,
-                                        style: {
-                                          position: "absolute",
-                                          top: "-6px",
-                                          right: "-6px",
-                                          width: "17px",
-                                          height: "17px",
-                                          borderRadius: "50%",
-                                          border: "none",
-                                          background: "#ef4444",
-                                          color: "#fff",
-                                          fontSize: "11px",
-                                          lineHeight: 1,
-                                          padding: 0,
-                                          cursor: "pointer",
-                                          display: "flex",
-                                          alignItems: "center",
-                                          justifyContent: "center"
-                                        },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                          "svg",
-                                          {
-                                            width: "8",
-                                            height: "8",
-                                            viewBox: "0 0 10 10",
-                                            fill: "none",
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                              "path",
-                                              {
-                                                d: "M1 1L9 9M9 1L1 9",
-                                                stroke: "currentColor",
-                                                strokeWidth: "1.5",
-                                                strokeLinecap: "round"
-                                              }
-                                            )
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                      "button",
-                                      {
-                                        type: "button",
-                                        onClick: () => setAnnotatingIndex(i),
-                                        "aria-label": `Annotate screenshot ${i + 1}`,
-                                        title: "Annotate",
-                                        style: {
-                                          position: "absolute",
-                                          top: "50%",
-                                          left: "50%",
-                                          transform: "translate(-50%, -50%)",
-                                          width: "24px",
-                                          height: "24px",
-                                          borderRadius: "50%",
-                                          border: "none",
-                                          background: t2.accent,
-                                          color: t2.accentText,
-                                          padding: 0,
-                                          cursor: "pointer",
-                                          display: "flex",
-                                          alignItems: "center",
-                                          justifyContent: "center",
-                                          boxShadow: "0 2px 8px rgba(0,0,0,0.45)"
-                                        },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                          "svg",
-                                          {
-                                            width: "12",
-                                            height: "12",
-                                            viewBox: "0 0 24 24",
-                                            fill: "none",
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                                              "path",
-                                              {
-                                                d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
-                                                stroke: "currentColor",
-                                                strokeWidth: "2.2",
-                                                strokeLinecap: "round",
-                                                strokeLinejoin: "round"
-                                              }
-                                            )
+                              children: [
+                                shotPending && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                  "div",
+                                  {
+                                    role: "status",
+                                    "aria-label": "Capturing screenshot",
+                                    title: "Capturing a screenshot of the page\u2026",
+                                    style: {
+                                      width: "56px",
+                                      height: "56px",
+                                      borderRadius: "6px",
+                                      border: `1px dashed ${t2.border}`,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      padding: "4px",
+                                      boxSizing: "border-box",
+                                      fontSize: "9px",
+                                      lineHeight: 1.2,
+                                      textAlign: "center",
+                                      color: t2.textMuted,
+                                      animation: "gg-pulse 1.4s ease-in-out infinite"
+                                    },
+                                    children: "Capturing\u2026"
+                                  }
+                                ),
+                                screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "relative",
+                                      width: "56px",
+                                      height: "56px"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        "img",
+                                        {
+                                          src,
+                                          alt: `Screenshot ${i + 1}`,
+                                          onClick: () => openPreview(i),
+                                          style: {
+                                            width: "100%",
+                                            height: "100%",
+                                            borderRadius: "6px",
+                                            border: `1px solid ${t2.border}`,
+                                            objectFit: "cover",
+                                            objectPosition: "top",
+                                            cursor: "zoom-in",
+                                            display: "block"
                                           }
-                                        )
-                                      }
-                                    )
-                                  ]
-                                },
-                                i
-                              ))
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          onClick: () => setScreenshots(
+                                            (prev) => prev.filter((_, idx) => idx !== i)
+                                          ),
+                                          "aria-label": `Remove screenshot ${i + 1}`,
+                                          style: {
+                                            position: "absolute",
+                                            top: "-6px",
+                                            right: "-6px",
+                                            width: "17px",
+                                            height: "17px",
+                                            borderRadius: "50%",
+                                            border: "none",
+                                            background: "#ef4444",
+                                            color: "#fff",
+                                            fontSize: "11px",
+                                            lineHeight: 1,
+                                            padding: 0,
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center"
+                                          },
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                            "svg",
+                                            {
+                                              width: "8",
+                                              height: "8",
+                                              viewBox: "0 0 10 10",
+                                              fill: "none",
+                                              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                                "path",
+                                                {
+                                                  d: "M1 1L9 9M9 1L1 9",
+                                                  stroke: "currentColor",
+                                                  strokeWidth: "1.5",
+                                                  strokeLinecap: "round"
+                                                }
+                                              )
+                                            }
+                                          )
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          onClick: () => setAnnotatingIndex(i),
+                                          "aria-label": `Annotate screenshot ${i + 1}`,
+                                          title: "Annotate",
+                                          style: {
+                                            position: "absolute",
+                                            top: "50%",
+                                            left: "50%",
+                                            transform: "translate(-50%, -50%)",
+                                            width: "24px",
+                                            height: "24px",
+                                            borderRadius: "50%",
+                                            border: "none",
+                                            background: t2.accent,
+                                            color: t2.accentText,
+                                            padding: 0,
+                                            cursor: "pointer",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            boxShadow: "0 2px 8px rgba(0,0,0,0.45)"
+                                          },
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                            "svg",
+                                            {
+                                              width: "12",
+                                              height: "12",
+                                              viewBox: "0 0 24 24",
+                                              fill: "none",
+                                              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                                                "path",
+                                                {
+                                                  d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
+                                                  stroke: "currentColor",
+                                                  strokeWidth: "2.2",
+                                                  strokeLinecap: "round",
+                                                  strokeLinejoin: "round"
+                                                }
+                                              )
+                                            }
+                                          )
+                                        }
+                                      )
+                                    ]
+                                  },
+                                  i
+                                ))
+                              ]
                             }
                           ),
-                          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "div",
                             {
                               style: {
@@ -4864,7 +5528,7 @@ function ReportDialog({
                                 gap: "6px",
                                 marginBottom: "8px"
                               },
-                              children: attachments.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                              children: attachments.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                                 "div",
                                 {
                                   style: {
@@ -4876,7 +5540,7 @@ function ReportDialog({
                                     border: `1px solid ${t2.border}`
                                   },
                                   children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                                       "svg",
                                       {
                                         width: "14",
@@ -4885,7 +5549,7 @@ function ReportDialog({
                                         fill: "none",
                                         style: { flexShrink: 0, opacity: 0.6 },
                                         children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                             "path",
                                             {
                                               d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z",
@@ -4895,7 +5559,7 @@ function ReportDialog({
                                               strokeLinejoin: "round"
                                             }
                                           ),
-                                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                             "path",
                                             {
                                               d: "M14 2v6h6",
@@ -4908,7 +5572,7 @@ function ReportDialog({
                                         ]
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "span",
                                       {
                                         style: {
@@ -4922,7 +5586,7 @@ function ReportDialog({
                                         children: a.name
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                                       "span",
                                       {
                                         style: { fontSize: "10px", color: t2.textMuted },
@@ -4932,7 +5596,7 @@ function ReportDialog({
                                         ]
                                       }
                                     ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                       "button",
                                       {
                                         type: "button",
@@ -4956,14 +5620,14 @@ function ReportDialog({
                                           justifyContent: "center",
                                           flexShrink: 0
                                         },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                           "svg",
                                           {
                                             width: "8",
                                             height: "8",
                                             viewBox: "0 0 10 10",
                                             fill: "none",
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                               "path",
                                               {
                                                 d: "M1 1L9 9M9 1L1 9",
@@ -4982,7 +5646,7 @@ function ReportDialog({
                               ))
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "div",
                             {
                               onClick: () => {
@@ -5008,7 +5672,7 @@ function ReportDialog({
                                 background: screenshotDragOver ? isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.04)" : "transparent",
                                 transition: "border-color 0.15s ease, background 0.15s ease"
                               },
-                              children: screenshots.length + attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              children: screenshots.length + attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "p",
                                 {
                                   style: {
@@ -5019,8 +5683,8 @@ function ReportDialog({
                                   },
                                   children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
                                 }
-                              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                                   "svg",
                                   {
                                     width: "22",
@@ -5033,7 +5697,7 @@ function ReportDialog({
                                       opacity: 0.45
                                     },
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                         "rect",
                                         {
                                           x: "3",
@@ -5045,7 +5709,7 @@ function ReportDialog({
                                           strokeWidth: "1.5"
                                         }
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                         "circle",
                                         {
                                           cx: "8.5",
@@ -5055,7 +5719,7 @@ function ReportDialog({
                                           strokeWidth: "1.5"
                                         }
                                       ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                         "path",
                                         {
                                           d: "M21 15l-5-5L5 21",
@@ -5068,7 +5732,7 @@ function ReportDialog({
                                     ]
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "p",
                                   {
                                     style: {
@@ -5080,7 +5744,7 @@ function ReportDialog({
                                     children: screenshotDragOver ? "Drop to attach" : "Add screenshots or files"
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "p",
                                   {
                                     style: {
@@ -5095,8 +5759,8 @@ function ReportDialog({
                             }
                           )
                         ] }),
-                        showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: "10px" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                             "span",
                             {
                               style: {
@@ -5109,7 +5773,7 @@ function ReportDialog({
                               },
                               children: [
                                 "How bad is it?",
-                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -5122,7 +5786,7 @@ function ReportDialog({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "div",
                             {
                               role: "radiogroup",
@@ -5130,7 +5794,7 @@ function ReportDialog({
                               style: { display: "flex", gap: "6px" },
                               children: SEVERITY_LEVELS.map((s) => {
                                 const on = severity === s;
-                                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                   "button",
                                   {
                                     type: "button",
@@ -5171,7 +5835,7 @@ function ReportDialog({
                             }
                           )
                         ] }),
-                        validationError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        validationError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "p",
                           {
                             style: {
@@ -5182,7 +5846,7 @@ function ReportDialog({
                             children: validationError
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "button",
                           {
                             type: "button",
@@ -5202,14 +5866,14 @@ function ReportDialog({
                               fontFamily: "inherit",
                               transition: "background-color 0.15s ease"
                             },
-                            children: isSubmitting ? "Sending..." : isRating ? "Send Rating" : "Send Report"
+                            children: isSubmitting ? shotPending && !isRating ? "Attaching screenshot\u2026" : "Sending..." : isRating ? "Send Rating" : "Send Report"
                           }
                         )
                       ] })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                   "div",
                   {
                     style: {
@@ -5221,8 +5885,35 @@ function ReportDialog({
                       gap: "12px"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReporterChip, { reporter, t: t2 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReporterChip, { reporter, t: t2 }),
+                      reportGlitchgrabProblem ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-gg-self-report": "",
+                          onClick: () => {
+                            setSelfReportPrefill("");
+                            setSelfReportFrom("form");
+                          },
+                          title: "Something wrong with this reporter itself? Tell the Glitchgrab team.",
+                          style: {
+                            fontSize: "11px",
+                            color: t2.textMuted,
+                            whiteSpace: "nowrap",
+                            flexShrink: 0,
+                            border: "none",
+                            background: "transparent",
+                            fontFamily: "inherit",
+                            cursor: "pointer",
+                            textDecoration: "underline",
+                            textUnderlineOffset: "2px",
+                            // A ~30px tap target without growing the footer.
+                            padding: "9px 0",
+                            margin: "-9px 0"
+                          },
+                          children: "Problem with Glitchgrab?"
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "span",
                         {
                           style: {
@@ -5244,7 +5935,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -5256,7 +5947,7 @@ function ReportDialog({
       }
     ),
     isOpen && previewIndex !== null && screenshots[previewIndex] && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           "data-glitchgrab-layer": "",
@@ -5278,7 +5969,7 @@ function ReportDialog({
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 ref: previewImgRef,
@@ -5290,7 +5981,7 @@ function ReportDialog({
                 },
                 onClick: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "div",
                     {
                       ref: previewScrollRef,
@@ -5309,7 +6000,7 @@ function ReportDialog({
                         touchAction: "none",
                         cursor: "grab"
                       } : { maxWidth: "100%", lineHeight: 0 },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         "img",
                         {
                           ref: previewImgElRef,
@@ -5337,7 +6028,7 @@ function ReportDialog({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -5365,7 +6056,7 @@ function ReportDialog({
                         animation: "gg-pulse 2s ease-in-out infinite"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "path",
                           {
                             d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
@@ -5382,7 +6073,7 @@ function ReportDialog({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "div",
               {
                 style: {
@@ -5391,7 +6082,7 @@ function ReportDialog({
                   alignItems: "center",
                   gap: "12px"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "span",
                   {
                     style: {
@@ -5413,7 +6104,7 @@ function ReportDialog({
       document.body
     ),
     isOpen && annotatingIndex !== null && screenshots[annotatingIndex] && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         AnnotationCanvas,
         {
           imageSrc: screenshots[annotatingIndex],
@@ -5429,24 +6120,28 @@ function ReportDialog({
       ),
       document.body
     ),
-    isOpen && sheetUp && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    isOpen && selfReportFrom && reportGlitchgrabProblem && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      GlitchgrabProblemPanel,
+      {
+        send: reportGlitchgrabProblem,
+        theme: layerTheme,
+        surface: selfReportFrom,
+        conversationId: aiConversationId,
+        reportType,
+        screenshots,
+        initialText: selfReportPrefill,
+        onClose: () => setSelfReportFrom(null)
+      }
+    ),
+    isOpen && sheetUp && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       AssistSheet,
       {
         assist,
-        theme: {
-          bg: t2.bg,
-          bgSecondary: t2.bgSecondary,
-          border: t2.border,
-          text: t2.text,
-          textMuted: t2.textMuted,
-          inputBg: t2.inputBg,
-          inputBorder: t2.inputBorder,
-          accent: t2.accent,
-          accentText: t2.accentText
-        },
+        theme: layerTheme,
         screenshots,
         pageShot,
         onAddImages: addFiles,
+        onRemoveImage: (index) => setScreenshots((prev) => prev.filter((_, i) => i !== index)),
         attachmentCount: screenshots.length + attachments.length,
         context: { ...assistContext != null ? assistContext : {}, reportType },
         reportTypeLabel: getTypeLabel(reportType),
@@ -5484,6 +6179,10 @@ function ReportDialog({
         isSubmitting,
         submitted,
         onSend: () => void handleSubmit(),
+        onReportGlitchgrabProblem: reportGlitchgrabProblem ? (prefill) => {
+          setSelfReportPrefill(prefill != null ? prefill : "");
+          setSelfReportFrom("assist");
+        } : void 0,
         onDegrade: (message) => {
           setAssistOpen(false);
           setAssistUsed(true);
@@ -5530,7 +6229,7 @@ function getTypeIcon(type, color, size = 24) {
   };
   switch (type) {
     case "RATING":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
@@ -5540,7 +6239,7 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "BUG":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3",
@@ -5550,7 +6249,7 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "FEATURE_REQUEST":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z",
@@ -5560,8 +6259,8 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "UI_IMPROVEMENT":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "rect",
           {
             x: "3",
@@ -5573,7 +6272,7 @@ function getTypeIcon(type, color, size = 24) {
             strokeWidth: "1.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M3 9h18M9 21V9",
@@ -5584,7 +6283,7 @@ function getTypeIcon(type, color, size = 24) {
         )
       ] });
     case "PERFORMANCE":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M12 21a9 9 0 100-18 9 9 0 000 18zM12 12l4-4M12 7v.01",
@@ -5595,7 +6294,7 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "SECURITY":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z",
@@ -5605,9 +6304,9 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "QUESTION":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01",
@@ -5619,7 +6318,7 @@ function getTypeIcon(type, color, size = 24) {
         )
       ] });
     case "OTHER":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z",
@@ -5632,8 +6331,8 @@ function getTypeIcon(type, color, size = 24) {
 }
 
 // src/booking-dialog.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var t = {
   bg: "#141414",
   surface: "#1c1c1c",
@@ -5670,28 +6369,28 @@ function BookingDialog({
   onClose
 }) {
   var _a;
-  const [step, setStep] = (0, import_react4.useState)("slots");
-  const [slots, setSlots] = (0, import_react4.useState)(null);
-  const [heading, setHeading] = (0, import_react4.useState)({
+  const [step, setStep] = (0, import_react5.useState)("slots");
+  const [slots, setSlots] = (0, import_react5.useState)(null);
+  const [heading, setHeading] = (0, import_react5.useState)({
     title: "Book a demo",
     description: null
   });
-  const [whatsappUrl, setWhatsappUrl] = (0, import_react4.useState)(null);
-  const [selected, setSelected] = (0, import_react4.useState)(null);
-  const [name, setName] = (0, import_react4.useState)("");
-  const [email, setEmail] = (0, import_react4.useState)("");
-  const [phone, setPhone] = (0, import_react4.useState)("");
-  const [note, setNote] = (0, import_react4.useState)("");
-  const [code, setCode] = (0, import_react4.useState)("");
-  const [bookingId, setBookingId] = (0, import_react4.useState)(null);
-  const [meetUrl, setMeetUrl] = (0, import_react4.useState)(null);
-  const [busy, setBusy] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const headers = (0, import_react4.useMemo)(
+  const [whatsappUrl, setWhatsappUrl] = (0, import_react5.useState)(null);
+  const [selected, setSelected] = (0, import_react5.useState)(null);
+  const [name, setName] = (0, import_react5.useState)("");
+  const [email, setEmail] = (0, import_react5.useState)("");
+  const [phone, setPhone] = (0, import_react5.useState)("");
+  const [note, setNote] = (0, import_react5.useState)("");
+  const [code, setCode] = (0, import_react5.useState)("");
+  const [bookingId, setBookingId] = (0, import_react5.useState)(null);
+  const [meetUrl, setMeetUrl] = (0, import_react5.useState)(null);
+  const [busy, setBusy] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const headers = (0, import_react5.useMemo)(
     () => ({ Authorization: `Bearer ${token}`, "Content-Type": "application/json" }),
     [token]
   );
-  const loadSlots = (0, import_react4.useCallback)(async () => {
+  const loadSlots = (0, import_react5.useCallback)(async () => {
     var _a2, _b, _c;
     setError(null);
     setSlots(null);
@@ -5716,7 +6415,7 @@ function BookingDialog({
       setSlots([]);
     }
   }, [baseUrl, headers]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     setStep("slots");
     setSelected(null);
@@ -5725,7 +6424,7 @@ function BookingDialog({
     setError(null);
     void loadSlots();
   }, [open, loadSlots]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -5795,7 +6494,7 @@ function BookingDialog({
     }
   }
   const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       onClick: (e) => {
@@ -5812,7 +6511,7 @@ function BookingDialog({
         padding: 16,
         fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           role: "dialog",
@@ -5830,7 +6529,7 @@ function BookingDialog({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               "div",
               {
                 style: {
@@ -5842,11 +6541,11 @@ function BookingDialog({
                   gap: 12
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: heading.title }),
-                    heading.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 12, color: t.muted, marginTop: 2 }, children: heading.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: heading.title }),
+                    heading.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 12, color: t.muted, marginTop: 2 }, children: heading.description })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       onClick: onClose,
@@ -5858,10 +6557,10 @@ function BookingDialog({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: 18, overflowY: "auto", flex: "1 1 auto" }, children: [
-              error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: t.danger, fontSize: 12, marginBottom: 12, lineHeight: 1.5 }, children: error }),
-              step === "slots" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                whatsappUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: 18, overflowY: "auto", flex: "1 1 auto" }, children: [
+              error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: t.danger, fontSize: 12, marginBottom: 12, lineHeight: 1.5 }, children: error }),
+              step === "slots" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                whatsappUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                   "a",
                   {
                     href: whatsappUrl,
@@ -5880,15 +6579,15 @@ function BookingDialog({
                     },
                     children: [
                       "\u{1F4AC} Rather book on WhatsApp?",
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { display: "block", fontSize: 11, color: t.muted, marginTop: 2 }, children: "We'll ask the same questions in chat." })
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { display: "block", fontSize: 11, color: t.muted, marginTop: 2 }, children: "We'll ask the same questions in chat." })
                     ]
                   }
                 ),
-                slots === null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "Finding times\u2026" }),
-                (slots == null ? void 0 : slots.length) === 0 && !error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "No times available right now." }),
-                [...byDay.entries()].map(([day, daySlots]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { marginBottom: 18 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: t.muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".6px" }, children: formatDay(daySlots[0].startsAt) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                slots === null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "Finding times\u2026" }),
+                (slots == null ? void 0 : slots.length) === 0 && !error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: t.muted, fontSize: 13 }, children: "No times available right now." }),
+                [...byDay.entries()].map(([day, daySlots]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { marginBottom: 18 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 11, color: t.muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".6px" }, children: formatDay(daySlots[0].startsAt) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       onClick: () => {
@@ -5910,13 +6609,13 @@ function BookingDialog({
                   )) })
                 ] }, day))
               ] }),
-              step === "details" && selected && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, color: t.muted }, children: [
+              step === "details" && selected && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { fontSize: 13, color: t.muted }, children: [
                   formatDay(selected.startsAt),
                   " \xB7 ",
                   formatTime(selected.startsAt),
                   " \xB7 ",
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     "button",
                     {
                       onClick: () => setStep("slots"),
@@ -5925,9 +6624,9 @@ function BookingDialog({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Field, { label: "Your name", value: name, onChange: setName }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Field, { label: "Email", value: email, onChange: setEmail, type: "email" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "Your name", value: name, onChange: setName }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "Email", value: email, onChange: setEmail, type: "email" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   Field,
                   {
                     label: "Mobile number",
@@ -5937,8 +6636,8 @@ function BookingDialog({
                     hint: "We send a code here to confirm, then a reminder before the call."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Field, { label: "Anything we should know? (optional)", value: note, onChange: setNote }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "Anything we should know? (optional)", value: note, onChange: setNote }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     onClick: startBooking,
@@ -5948,10 +6647,10 @@ function BookingDialog({
                   }
                 )
               ] }),
-              step === "code" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.5 }, children: "We sent a 4-digit code to your phone. Your slot is held for 10 minutes." }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Field, { label: "Code", value: code, onChange: setCode }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              step === "code" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.5 }, children: "We sent a 4-digit code to your phone. Your slot is held for 10 minutes." }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: "Code", value: code, onChange: setCode }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   "button",
                   {
                     onClick: confirmBooking,
@@ -5961,15 +6660,15 @@ function BookingDialog({
                   }
                 )
               ] }),
-              step === "done" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: "You're booked." }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.6 }, children: [
+              step === "done" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 15, fontWeight: 600 }, children: "You're booked." }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { fontSize: 13, color: t.muted, lineHeight: 1.6 }, children: [
                   selected && `${formatDay(selected.startsAt)} at ${formatTime(selected.startsAt)}. `,
                   "A calendar invite is on its way to ",
                   email,
                   ", and we'll send a WhatsApp reminder before the call."
                 ] }),
-                meetUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: meetUrl, target: "_blank", rel: "noreferrer", style: { ...primaryStyle(false), textAlign: "center", textDecoration: "none" }, children: "Open the meeting link" })
+                meetUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: meetUrl, target: "_blank", rel: "noreferrer", style: { ...primaryStyle(false), textAlign: "center", textDecoration: "none" }, children: "Open the meeting link" })
               ] })
             ] })
           ]
@@ -5998,9 +6697,9 @@ function Field({
   type = "text",
   hint
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: { display: "block", fontSize: 11, color: t.muted }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: { display: "block", fontSize: 11, color: t.muted }, children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
       {
         type,
@@ -6021,7 +6720,7 @@ function Field({
         }
       }
     ),
-    hint && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: 4, fontSize: 10, color: t.muted }, children: hint })
+    hint && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: 4, fontSize: 10, color: t.muted }, children: hint })
   ] });
 }
 
@@ -6162,11 +6861,11 @@ function matchesShortcut(e) {
 }
 
 // src/provider.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
-var GlitchgrabContext = (0, import_react5.createContext)(null);
+var GlitchgrabContext = (0, import_react6.createContext)(null);
 function useGlitchgrab() {
-  const ctx = (0, import_react5.useContext)(GlitchgrabContext);
+  const ctx = (0, import_react6.useContext)(GlitchgrabContext);
   if (!ctx) {
     throw new Error("useGlitchgrab must be used within a GlitchgrabProvider");
   }
@@ -6174,7 +6873,7 @@ function useGlitchgrab() {
 }
 function GlitchgrabProviderInner({
   token,
-  session,
+  session: sessionProp,
   baseUrl,
   onError,
   onReportSent,
@@ -6189,7 +6888,16 @@ function GlitchgrabProviderInner({
   context: appContext2,
   responseBodyOrigins: responseBodyOrigins2
 }) {
-  const visitedPagesRef = (0, import_react5.useRef)([]);
+  const visitedPagesRef = (0, import_react6.useRef)([]);
+  const sessionKey = sessionProp ? [
+    sessionProp.userId,
+    sessionProp.name,
+    sessionProp.email,
+    sessionProp.phone,
+    sessionProp.avatarUrl,
+    sessionProp.image
+  ].map((v) => v == null ? "" : String(v)).join("\0") : "";
+  const session = (0, import_react6.useMemo)(() => sessionProp, [sessionKey]);
   setRelease(release2);
   if (appContext2) setContexts(appContext2);
   registerCaptureConfig({
@@ -6201,12 +6909,12 @@ function GlitchgrabProviderInner({
     onError,
     onReportSent
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (enableBreadcrumbs) {
       initBreadcrumbs(maxBreadcrumbs2, { responseBodyOrigins: responseBodyOrigins2 });
     }
   }, [enableBreadcrumbs, maxBreadcrumbs2, responseBodyOrigins2 == null ? void 0 : responseBodyOrigins2.join(",")]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       const trackPage = () => {
@@ -6243,7 +6951,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       if (process.env.NODE_ENV === "development") return;
@@ -6370,7 +7078,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [token, baseUrl, onError, onReportSent, session, ignoreErrors]);
-  const report = (0, import_react5.useCallback)(
+  const report = (0, import_react6.useCallback)(
     async (type, description, metadata) => {
       var _a;
       try {
@@ -6404,11 +7112,45 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, onReportSent, session]
   );
-  const reportBug = (0, import_react5.useCallback)(
+  const reportBug = (0, import_react6.useCallback)(
     (description, metadata) => report("BUG", description, metadata),
     [report]
   );
-  const feedback = (0, import_react5.useCallback)(
+  const reportGlitchgrabProblem = (0, import_react6.useCallback)(
+    async (params) => {
+      var _a, _b;
+      try {
+        const context = captureContext(visitedPagesRef.current);
+        const body = JSON.stringify({
+          ...params,
+          pageUrl: context.url,
+          userAgent: context.userAgent,
+          deviceInfo: (_a = context.deviceInfo) != null ? _a : void 0,
+          visitedPages: context.visitedPages,
+          breadcrumbs: context.breadcrumbs,
+          ...(session == null ? void 0 : session.userId) ? { reporterId: session.userId } : {},
+          ...(session == null ? void 0 : session.name) ? { reporterName: String(session.name) } : {},
+          ...(session == null ? void 0 : session.email) ? { reporterEmail: String(session.email) } : {}
+        });
+        const res = await fetch(`${baseUrl}/api/v1/sdk/glitchgrab-report`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+          body,
+          // keepalive caps the body at 64KB — screenshots blow past it.
+          ...body.length < 6e4 ? { keepalive: true } : {}
+        });
+        const json = await res.json().catch(() => null);
+        if (!res.ok || !(json == null ? void 0 : json.success)) {
+          return { success: false, message: (_b = json == null ? void 0 : json.error) != null ? _b : "Couldn't send it" };
+        }
+        return { success: true, ...json.data };
+      } catch (e) {
+        return null;
+      }
+    },
+    [token, baseUrl, session]
+  );
+  const feedback = (0, import_react6.useCallback)(
     async (rating, message, metadata) => {
       try {
         const context = captureContext(visitedPagesRef.current);
@@ -6436,32 +7178,32 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, session]
   );
-  const openFeedbackDialog = (0, import_react5.useCallback)(() => {
+  const openFeedbackDialog = (0, import_react6.useCallback)(() => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(
         new CustomEvent("glitchgrab:open-report", { detail: { type: "RATING" } })
       );
     }
   }, []);
-  const captureError2 = (0, import_react5.useCallback)(
+  const captureError2 = (0, import_react6.useCallback)(
     (error, options) => {
       captureError(error, options);
     },
     []
   );
-  const setContext2 = (0, import_react5.useCallback)((key, value) => {
+  const setContext2 = (0, import_react6.useCallback)((key, value) => {
     setContext(key, value);
   }, []);
-  const setContexts2 = (0, import_react5.useCallback)((values) => {
+  const setContexts2 = (0, import_react6.useCallback)((values) => {
     setContexts(values);
   }, []);
-  const addBreadcrumb2 = (0, import_react5.useCallback)(
+  const addBreadcrumb2 = (0, import_react6.useCallback)(
     (message, data) => {
       addBreadcrumb("custom", message, data);
     },
     []
   );
-  const enhance = (0, import_react5.useCallback)(
+  const enhance = (0, import_react6.useCallback)(
     async (text, screenshot) => {
       try {
         const ctx = captureContext(visitedPagesRef.current);
@@ -6477,7 +7219,7 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const assist = (0, import_react5.useCallback)(
+  const assist = (0, import_react6.useCallback)(
     async (params) => {
       var _a;
       const ctx = captureContext(visitedPagesRef.current);
@@ -6503,7 +7245,7 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, session]
   );
-  const transcribe = (0, import_react5.useCallback)(
+  const transcribe = (0, import_react6.useCallback)(
     async (blob) => {
       try {
         return await transcribeAudio(blob, token, baseUrl);
@@ -6513,12 +7255,12 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const openReportDialog = (0, import_react5.useCallback)((options) => {
+  const openReportDialog = (0, import_react6.useCallback)((options) => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
     }
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       if (typeof document === "undefined") return;
       document.documentElement.setAttribute("data-glitchgrab-sdk", "1");
@@ -6526,11 +7268,12 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, []);
-  const [projectName, setProjectName] = (0, import_react5.useState)(null);
-  const [aiAssist, setAiAssist] = (0, import_react5.useState)(false);
-  const [bookingOpen, setBookingOpen] = (0, import_react5.useState)(false);
-  const openBookingDialog = (0, import_react5.useCallback)(() => setBookingOpen(true), []);
-  (0, import_react5.useEffect)(() => {
+  const [projectName, setProjectName] = (0, import_react6.useState)(null);
+  const [aiAssist, setAiAssist] = (0, import_react6.useState)(false);
+  const [glitchgrabReport, setGlitchgrabReport] = (0, import_react6.useState)(false);
+  const [bookingOpen, setBookingOpen] = (0, import_react6.useState)(false);
+  const openBookingDialog = (0, import_react6.useCallback)(() => setBookingOpen(true), []);
+  (0, import_react6.useEffect)(() => {
     let cancelled = false;
     fetch(`${baseUrl}/api/v1/sdk/project`, {
       headers: { Authorization: `Bearer ${token}` }
@@ -6539,13 +7282,14 @@ function GlitchgrabProviderInner({
       if (cancelled || !(json == null ? void 0 : json.success) || !((_a = json.data) == null ? void 0 : _a.name)) return;
       setProjectName(json.data.name);
       setAiAssist(json.data.aiAssist === true);
+      setGlitchgrabReport(json.data.glitchgrabReport === true);
     }).catch(() => {
     });
     return () => {
       cancelled = true;
     };
   }, [baseUrl, token]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       const handleKeyDown = (e) => {
@@ -6559,7 +7303,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  const reporter = (0, import_react5.useMemo)(() => {
+  const reporter = (0, import_react6.useMemo)(() => {
     var _a;
     if (!session) return null;
     const avatar = (_a = session.avatarUrl) != null ? _a : session.image;
@@ -6569,11 +7313,11 @@ function GlitchgrabProviderInner({
       avatarUrl: typeof avatar === "string" ? avatar : null
     };
   }, [session]);
-  const [shortcutLabel, setShortcutLabel] = (0, import_react5.useState)(GLITCHGRAB_SHORTCUT2);
-  (0, import_react5.useEffect)(() => {
+  const [shortcutLabel, setShortcutLabel] = (0, import_react6.useState)(GLITCHGRAB_SHORTCUT2);
+  (0, import_react6.useEffect)(() => {
     setShortcutLabel(getShortcutLabel2());
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     GlitchgrabContext.Provider,
     {
       value: {
@@ -6593,7 +7337,7 @@ function GlitchgrabProviderInner({
         shortcutLabel
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           GlitchgrabErrorBoundary,
           {
             token,
@@ -6605,7 +7349,7 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           BookingDialog,
           {
             token,
@@ -6614,20 +7358,21 @@ function GlitchgrabProviderInner({
             onClose: () => setBookingOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           ReportDialog,
           {
             report,
             sendFeedback: feedback,
             enhanceText: enhance,
             assist: aiAssist ? assist : void 0,
+            reportGlitchgrabProblem: glitchgrabReport ? reportGlitchgrabProblem : void 0,
             transcribeAudio: transcribe,
             types,
             showSeverity,
             reporter,
-            headerSlot: projectName ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { fontSize: 11, color: "#9aa0a6" }, children: [
+            headerSlot: projectName ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 11, color: "#9aa0a6" }, children: [
               "Reporting to ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { style: { color: "#e5e5e5" }, children: projectName })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { style: { color: "#e5e5e5" }, children: projectName })
             ] }) : null
           }
         )
@@ -6636,21 +7381,21 @@ function GlitchgrabProviderInner({
   );
 }
 function GlitchgrabProvider(props) {
-  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.children });
+  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: props.children });
   const resolvedProps = {
     ...props,
     baseUrl: props.baseUrl || DEFAULT_BASE_URL2
   };
   try {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
   } catch (e) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: props.children });
   }
 }
 
 // src/report-button.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function useGlitchgrabSafe() {
   try {
     return useGlitchgrab();
@@ -6665,7 +7410,7 @@ function ReportButton({
   children
 }) {
   var _a, _b;
-  const [capturing, setCapturing] = (0, import_react6.useState)(false);
+  const [capturing, setCapturing] = (0, import_react7.useState)(false);
   const glitchgrab = useGlitchgrabSafe();
   if (!glitchgrab) return null;
   const handleClick = async () => {
@@ -6674,7 +7419,7 @@ function ReportButton({
     setCapturing(false);
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({ onClick: handleClick, capturing }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({ onClick: handleClick, capturing }) });
   }
   const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
   const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
@@ -6682,7 +7427,7 @@ function ReportButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
@@ -6717,7 +7462,7 @@ function ReportButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "svg",
           {
             width: "16",
@@ -6725,7 +7470,7 @@ function ReportButton({
             viewBox: "0 0 16 16",
             fill: "none",
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "path",
               {
                 d: "M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 12.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.5a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v5z",
@@ -6741,15 +7486,15 @@ function ReportButton({
 }
 
 // src/book-demo-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function BookDemoButton({
   label = "Book a demo",
   className,
   children
 }) {
   const { openBookingDialog } = useGlitchgrab();
-  if (children) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({ onClick: openBookingDialog }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  if (children) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children({ onClick: openBookingDialog }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       type: "button",
@@ -6771,7 +7516,7 @@ function BookDemoButton({
 }
 
 // src/feedback-button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function useGlitchgrabSafe2() {
   try {
     return useGlitchgrab();
@@ -6790,7 +7535,7 @@ function FeedbackButton({
   if (!glitchgrab) return null;
   const handleClick = () => glitchgrab.openFeedbackDialog();
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: children({ onClick: handleClick }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children({ onClick: handleClick }) });
   }
   const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
   const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
@@ -6798,7 +7543,7 @@ function FeedbackButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "button",
     {
       type: "button",
@@ -6831,7 +7576,7 @@ function FeedbackButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "svg",
           {
             width: "16",
@@ -6840,7 +7585,7 @@ function FeedbackButton({
             fill: "none",
             style: { flexShrink: 0 },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "path",
               {
                 d: "M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3 1.1-6.5L2.6 9.3l6.5-.9L12 2.5z",
@@ -6856,18 +7601,18 @@ function FeedbackButton({
 }
 
 // src/use-reports.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var BASE_URL = "https://glitchgrab.dev";
 function useGlitchgrabReports({
   token,
   userId,
   limit = 100
 }) {
-  const [reports, setReports] = (0, import_react7.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const fetchReports = (0, import_react7.useCallback)(async () => {
+  const [reports, setReports] = (0, import_react8.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const fetchReports = (0, import_react8.useCallback)(async () => {
     var _a, _b;
     if (!token || !userId) {
       setIsLoading(false);
@@ -6893,7 +7638,7 @@ function useGlitchgrabReports({
       setIsFetching(false);
     }
   }, [token, userId, limit]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     fetchReports();
   }, [fetchReports]);
   return { reports, isLoading, isFetching, error, refetch: fetchReports };
@@ -6930,9 +7675,9 @@ function useGlitchgrabActions({
   onSuccess,
   onError
 }) {
-  const [isPending, setIsPending] = (0, import_react7.useState)(false);
-  const [error, setError] = (0, import_react7.useState)(null);
-  const run = (0, import_react7.useCallback)(
+  const [isPending, setIsPending] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const run = (0, import_react8.useCallback)(
     async (reportId, body) => {
       setIsPending(true);
       setError(null);
@@ -6962,7 +7707,7 @@ function useGlitchgrabActions({
 }
 
 // src/use-feedback.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var DEFAULT_BASE_URL3 = "https://glitchgrab.dev";
 function buildUrl({
   approvedOnly,
@@ -6988,11 +7733,11 @@ async function fetchGlitchgrabFeedback(query) {
 }
 function useGlitchgrabFeedback(query) {
   const { token, approvedOnly, userId, minRating, limit, baseUrl } = query;
-  const [feedback, setFeedback] = (0, import_react8.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const load = (0, import_react8.useCallback)(async () => {
+  const [feedback, setFeedback] = (0, import_react9.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const load = (0, import_react9.useCallback)(async () => {
     if (!token) {
       setIsLoading(false);
       return;
@@ -7016,7 +7761,7 @@ function useGlitchgrabFeedback(query) {
       setIsFetching(false);
     }
   }, [token, approvedOnly, userId, minRating, limit, baseUrl]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     load();
   }, [load]);
   return { feedback, isLoading, isFetching, error, refetch: load };