glitchgrab 1.40.0 → 1.42.0

package/dist/index.js

@@ -904,6 +904,7 @@ var import_jsx_runtime3 = 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 +918,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 +1257,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 +1278,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",
@@ -1314,7 +1364,9 @@ function AssistSheet({
   assist,
   theme: t2,
   screenshots,
+  pageShot = null,
   onAddImages,
+  onRemoveImage,
   attachmentCount,
   context,
   reportTypeLabel,
@@ -1356,9 +1408,37 @@ function AssistSheet({
     !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)([]);
+  const aiDraftRef = (0, import_react3.useRef)(null);
+  function logEvent(type, detail) {
+    eventsRef.current.push({ type, at: Date.now(), ...detail ? { detail } : {} });
+  }
+  function takeEvents() {
+    if (eventsRef.current.length === 0) return void 0;
+    const events = eventsRef.current;
+    eventsRef.current = [];
+    return events;
+  }
+  function flushEvents() {
+    if (!conversationId) return;
+    const events = takeEvents();
+    if (!events) return;
+    try {
+      void Promise.resolve(
+        assist({ messages: [], conversationId, events, screenshots: [], context: null })
+      ).catch(() => {
+      });
+    } catch (e) {
+    }
+  }
+  const readShots = new Set(pickAssistImages(screenshots));
+  function leave(type, detail) {
+    logEvent(type, detail);
+    flushEvents();
+    onClose();
+  }
   (0, import_react3.useEffect)(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
@@ -1367,35 +1447,52 @@ function AssistSheet({
     var _a;
     if (phase === "draft") (_a = draftRef.current) == null ? void 0 : _a.focus();
   }, [phase]);
+  function degradeKeepingEvents(events, message) {
+    if (events) eventsRef.current = [...events, ...eventsRef.current];
+    flushEvents();
+    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({
-        messages: history2,
+        // `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
+        // placeholder line.
+        messages: history2.map(
+          (m) => m.kind ? { role: m.role, content: m.content, kind: m.kind } : m
+        ),
         conversationId,
         screenshots: sent,
-        screenshot: (_a = sent[sent.length - 1]) != null ? _a : null,
-        context
+        context: {
+          ...context != null ? context : {},
+          imageSources: sent.map((shot) => pageShot && shot === pageShot ? "page" : "attached")
+        },
+        events
       });
     } catch (e) {
-      onDegrade("The assistant is unavailable \u2014 write your report below and send it as normal.");
+      degradeKeepingEvents(
+        events,
+        "The assistant is unavailable \u2014 write your report below and send it as normal."
+      );
       return;
     } finally {
       setBusy(false);
     }
     if (result.degraded) {
-      onDegrade(result.degraded);
+      degradeKeepingEvents(events, result.degraded);
       return;
     }
     if (result.conversationId) {
       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);
     if (result.solved) {
       setSolved(result.solved);
       setOptions([]);
@@ -1404,14 +1501,16 @@ function AssistSheet({
     }
     if (result.report) {
       onDescriptionChange(result.report);
-      setMessages([...history2, { role: "assistant", content: "Here's your report \u2014 have a read." }]);
+      aiDraftRef.current = result.report;
+      logEvent("draft_shown");
+      setMessages([...history2, { role: "assistant", content: result.report, kind: "report" }]);
       setOptions([]);
       setPhase("draft");
       return;
     }
     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.");
@@ -1430,7 +1529,14 @@ function AssistSheet({
     const value = text.trim();
     if (!value || busy) return;
     setOptions([]);
-    const history2 = [...messages, { role: "user", content: value }];
+    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);
@@ -1439,7 +1545,56 @@ function AssistSheet({
     onPickType(tile);
     setPhase(tile === "RATING" ? "rating" : "chat");
   }
+  function withCurrentDraft(history2) {
+    const current = description.trim();
+    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;
+  }
+  function sendDraft() {
+    const edited = aiDraftRef.current !== null && description.trim() !== aiDraftRef.current.trim();
+    logEvent("draft_sent", edited ? "edited" : "as drafted");
+    flushEvents();
+    onSend();
+  }
   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 : "";
@@ -1464,7 +1619,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",
@@ -1484,7 +1639,7 @@ function AssistSheet({
             animation: "gg-sheet-fade .18s ease",
             fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
           },
-          onClick: onClose,
+          onClick: () => leave("closed"),
           onPointerDown: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "div",
@@ -1564,7 +1719,7 @@ function AssistSheet({
                         {
                           type: "button",
                           "data-gg-write-myself": "",
-                          onClick: onClose,
+                          onClick: () => leave("write_myself", `header, ${phase}`),
                           "aria-label": "Write it myself instead",
                           style: {
                             flexShrink: 0,
@@ -1820,7 +1975,10 @@ function AssistSheet({
                                   {
                                     type: "button",
                                     "data-gg-chip": "",
-                                    onClick: () => send(s),
+                                    onClick: () => {
+                                      logEvent("starter_tap", s);
+                                      send(s);
+                                    },
                                     style: {
                                       border: `1px solid ${t2.inputBorder}`,
                                       background: "transparent",
@@ -1840,6 +1998,60 @@ function AssistSheet({
                           ] }),
                           messages.map((m, i) => {
                             const mine = m.role === "user";
+                            if (m.kind === "report") {
+                              const live = phase === "draft" && i === messages.length - 1;
+                              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: "8px", minWidth: 0 }, children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Avatar, { who: "assistant", theme: t2 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "div",
+                                  {
+                                    "data-gg-draft-bubble": "",
+                                    style: {
+                                      maxWidth: "82%",
+                                      minWidth: 0,
+                                      padding: "9px 12px",
+                                      borderRadius: "12px 12px 12px 4px",
+                                      fontSize: "13px",
+                                      lineHeight: 1.55,
+                                      backgroundColor: t2.bgSecondary,
+                                      color: t2.text,
+                                      border: live ? "none" : `1px solid ${t2.accent}66`
+                                    },
+                                    children: live ? "Here's your report \u2014 have a read." : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "span",
+                                        {
+                                          style: {
+                                            display: "block",
+                                            fontSize: "10px",
+                                            fontWeight: 700,
+                                            letterSpacing: ".06em",
+                                            textTransform: "uppercase",
+                                            color: t2.accent,
+                                            marginBottom: "4px"
+                                          },
+                                          children: "Draft so far"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                        "span",
+                                        {
+                                          style: {
+                                            display: "block",
+                                            whiteSpace: "pre-wrap",
+                                            wordBreak: "break-word",
+                                            maxHeight: "160px",
+                                            overflowY: "auto",
+                                            color: t2.textMuted
+                                          },
+                                          children: m.content
+                                        }
+                                      )
+                                    ] })
+                                  }
+                                )
+                              ] }, i);
+                            }
                             return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                               "div",
                               {
@@ -1873,6 +2085,7 @@ function AssistSheet({
                               i
                             );
                           }),
+                          duplicate && !busy && phase === "chat" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { paddingLeft: "32px", minWidth: 0 }, children: renderKnownIssue({ title: false }) }),
                           options.length > 0 && !busy && phase === "chat" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "div",
                             {
@@ -1894,7 +2107,10 @@ function AssistSheet({
                                   type: "button",
                                   "data-gg-chip": "",
                                   "data-gg-option": "",
-                                  onClick: () => send(option),
+                                  onClick: () => {
+                                    logEvent("option_tap", option);
+                                    send(option);
+                                  },
                                   style: {
                                     border: `1px solid ${t2.inputBorder}`,
                                     background: "transparent",
@@ -1968,35 +2184,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",
                                   {
@@ -2091,26 +2285,7 @@ function AssistSheet({
                                   " ",
                                   attachmentCount === 1 ? "attachment" : "attachments",
                                   " will be sent with this."
-                                ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    onClick: () => setPhase("chat"),
-                                    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"
-                                  }
-                                )
+                                ] })
                               ]
                             }
                           ),
@@ -2214,192 +2389,276 @@ 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: onSend,
-                            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) 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: "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",
                         {
                           type: "button",
                           "data-gg-write-myself": "",
-                          onClick: onClose,
+                          onClick: () => leave("write_myself", "footer"),
                           style: {
                             display: "block",
                             margin: "8px auto 0",
@@ -2471,6 +2730,107 @@ var ATTACHMENT_ACCEPT = [
   ".xlsx",
   ".zip"
 ].join(",");
+var MAX_SCALE = 2;
+var FRAME_TIMEOUT_MS = 3e3;
+function canCaptureTabPixels() {
+  var _a;
+  try {
+    return typeof navigator !== "undefined" && typeof ((_a = navigator.mediaDevices) == null ? void 0 : _a.getDisplayMedia) === "function" && typeof globalThis.CaptureController !== "undefined";
+  } catch (e) {
+    return false;
+  }
+}
+var HAVE_CURRENT_DATA = 2;
+function waitForFrame(video) {
+  if (video.readyState >= HAVE_CURRENT_DATA && video.videoWidth > 0) {
+    return Promise.resolve(true);
+  }
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(false), FRAME_TIMEOUT_MS);
+    const done = () => {
+      clearTimeout(timer);
+      resolve(true);
+    };
+    if (typeof video.requestVideoFrameCallback === "function") {
+      video.requestVideoFrameCallback(done);
+    } else if (video.readyState >= 2) {
+      done();
+    } else {
+      video.addEventListener("loadeddata", done, { once: true });
+    }
+  });
+}
+async function grabFrame(stream) {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.srcObject = stream;
+  try {
+    await video.play();
+    if (!await waitForFrame(video)) return null;
+    if (!video.videoWidth || !video.videoHeight) return null;
+    const maxWidth = Math.max(1, window.innerWidth) * MAX_SCALE;
+    const factor = Math.min(1, maxWidth / video.videoWidth);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(video.videoWidth * factor);
+    canvas.height = Math.round(video.videoHeight * factor);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  } finally {
+    video.srcObject = null;
+  }
+}
+async function captureViaTabPixels() {
+  var _a, _b;
+  if (!canCaptureTabPixels()) return null;
+  let stream = null;
+  try {
+    const options = {
+      video: { displaySurface: "browser" },
+      audio: false,
+      preferCurrentTab: true,
+      selfBrowserSurface: "include",
+      surfaceSwitching: "exclude",
+      monitorTypeSurfaces: "exclude"
+    };
+    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);
+    return canvas ? encodeScreenshot(canvas) : null;
+  } catch (e) {
+    return null;
+  } finally {
+    stream == null ? void 0 : stream.getTracks().forEach((track) => track.stop());
+  }
+}
+async function captureViaHtml2Canvas() {
+  try {
+    const { default: html2canvas } = await import("html2canvas-pro");
+    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), MAX_SCALE);
+    const canvas = await html2canvas(document.body, {
+      scale,
+      logging: false,
+      useCORS: true,
+      allowTaint: true,
+      x: window.scrollX,
+      y: window.scrollY,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight
+    });
+    return encodeScreenshot(canvas);
+  } catch (e) {
+    return null;
+  }
+}
+async function captureDefaultScreenshot() {
+  var _a;
+  return (_a = await captureViaTabPixels()) != null ? _a : await captureViaHtml2Canvas();
+}
 var SEVERITY_REQUIRED = "Pick how bad it is before sending.";
 function useIsDark() {
   if (typeof window === "undefined") return true;
@@ -2745,27 +3105,6 @@ function isLowQualityText(text) {
   }
   return null;
 }
-async function captureViaHtml2Canvas() {
-  try {
-    const { default: html2canvas } = await import("html2canvas-pro");
-    const scale = Math.min(Math.max(window.devicePixelRatio || 1, 1), 2);
-    const canvas = await html2canvas(document.body, {
-      scale,
-      logging: false,
-      useCORS: true,
-      allowTaint: true,
-      x: window.scrollX,
-      y: window.scrollY,
-      width: window.innerWidth,
-      height: window.innerHeight,
-      windowWidth: window.innerWidth,
-      windowHeight: window.innerHeight
-    });
-    return encodeScreenshot(canvas);
-  } catch (e) {
-    return null;
-  }
-}
 var MIC_MESSAGES = {
   blocked: "Microphone is blocked for this site. Allow it in your browser's site settings, then reload this page. You can type your report instead.",
   notFound: "No microphone found. Connect one and try again, or type your report instead.",
@@ -2803,7 +3142,7 @@ function ReportDialog({
   transcribeAudio: transcribeAudio2,
   types,
   showSeverity = true,
-  captureScreenshot = captureViaHtml2Canvas,
+  captureScreenshot = captureDefaultScreenshot,
   reporter,
   onClose,
   headerSlot
@@ -2833,6 +3172,7 @@ function ReportDialog({
   const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
   const [submitted, setSubmitted] = (0, import_react.useState)(false);
   const [screenshots, setScreenshots] = (0, import_react.useState)([]);
+  const [pageShot, setPageShot] = (0, import_react.useState)(null);
   const [attachments, setAttachments] = (0, import_react.useState)([]);
   const [previewIndex, setPreviewIndex] = (0, import_react.useState)(null);
   const [annotatingIndex, setAnnotatingIndex] = (0, import_react.useState)(null);
@@ -2971,20 +3311,23 @@ 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);
     });
   };
@@ -2998,6 +3341,7 @@ function ReportDialog({
       setStep(2);
     }
     const shot = await captureScreenshot();
+    setPageShot(shot != null ? shot : null);
     if (shot) setScreenshots([shot]);
     if (assist && !assistUsed) setAssistOpen(true);
     setIsOpen(true);
@@ -5195,6 +5539,7 @@ function ReportDialog({
           imageSrc: screenshots[annotatingIndex],
           onCancel: () => setAnnotatingIndex(null),
           onSave: (dataUrl) => {
+            if (screenshots[annotatingIndex] === pageShot) setPageShot(dataUrl);
             setScreenshots(
               (prev) => prev.map((s, i) => i === annotatingIndex ? dataUrl : s)
             );
@@ -5220,7 +5565,9 @@ function ReportDialog({
           accentText: t2.accentText
         },
         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),