glitchgrab 1.40.0 → 1.41.0

package/README.md

@@ -832,7 +832,7 @@ response.headers.set(
 
 - `connect-src https://glitchgrab.dev` — required for `sendReport`, `enhanceText`, `transcribeAudio`, and the report-fetching hooks/REST calls. All SDK requests go to this single host by default.
 - If you pass a custom `baseUrl` prop, allow that host instead (self-hosted or proxied deployments).
-- Screenshot capture (`html2canvas-pro`) runs entirely client-side against `document.body` — no network request, no extra `img-src`/`connect-src` needed for it.
+- Screenshot capture runs entirely client-side — no network request, no extra `img-src`/`connect-src` needed for it. In Chrome and Edge the browser asks "Allow this site to see this tab?" when the dialog opens, and the screenshot is the tab's real pixels (the share stops after one frame). If the reporter clicks Cancel, or in Safari/Firefox, it falls back to re-drawing `document.body` with `html2canvas-pro`, which needs no permission but can drift from the real UI. If the SDK runs inside an iframe, the frame needs `allow="display-capture"` for the real-pixel path.
 - `img-src` only matters if your `session` carries an avatar URL — the report dialog renders it. If your CSP blocks that host the dialog falls back to the reporter's initials, so it degrades rather than breaking.
 - No `script-src`, `style-src`, or `frame-src` allowances are required — the SDK doesn't load remote scripts, styles, or iframes.
 

package/dist/index.js

@@ -1314,6 +1314,7 @@ function AssistSheet({
   assist,
   theme: t2,
   screenshots,
+  pageShot = null,
   onAddImages,
   attachmentCount,
   context,
@@ -1359,6 +1360,34 @@ function AssistSheet({
   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) {
+    }
+  }
+  function leave(type, detail) {
+    logEvent(type, detail);
+    flushEvents();
+    onClose();
+  }
   (0, import_react3.useEffect)(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
@@ -1367,27 +1396,45 @@ 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;
     setBusy(true);
     let result;
+    const events = takeEvents();
     try {
       const sent = screenshots.slice(-MAX_ASSIST_IMAGES);
       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) {
@@ -1404,7 +1451,9 @@ 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;
@@ -1439,6 +1488,36 @@ function AssistSheet({
     onPickType(tile);
     setPhase(tile === "RATING" ? "rating" : "chat");
   }
+  function keepChatting() {
+    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;
+        }
+      }
+      return next;
+    });
+    setPhase("chat");
+    requestAnimationFrame(() => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+    });
+  }
+  function sendDraft() {
+    const edited = aiDraftRef.current !== null && description.trim() !== aiDraftRef.current.trim();
+    logEvent("draft_sent", edited ? "edited" : "as drafted");
+    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;
   const initials = (reporterName != null ? reporterName : "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => {
     var _a, _b;
@@ -1484,7 +1563,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 +1643,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 +1899,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 +1922,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",
                               {
@@ -1894,7 +2030,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",
@@ -2096,7 +2235,7 @@ function AssistSheet({
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => setPhase("chat"),
+                                    onClick: keepChatting,
                                     style: {
                                       alignSelf: "flex-start",
                                       border: "none",
@@ -2231,7 +2370,7 @@ function AssistSheet({
                           {
                             type: "button",
                             "data-gg-sheet-send": "",
-                            onClick: onSend,
+                            onClick: sendDraft,
                             disabled: isSubmitting || !description.trim(),
                             style: {
                               width: "100%",
@@ -2309,7 +2448,10 @@ function AssistSheet({
                                         onChange: (e) => {
                                           var _a;
                                           const files = Array.from((_a = e.target.files) != null ? _a : []);
-                                          if (files.length) onAddImages(files);
+                                          if (files.length) {
+                                            logEvent("image_added", String(files.length));
+                                            onAddImages(files);
+                                          }
                                           e.target.value = "";
                                         },
                                         style: { display: "none" }
@@ -2339,7 +2481,7 @@ function AssistSheet({
                                   send(input);
                                 }
                               },
-                              placeholder: "Type your answer\u2026",
+                              placeholder: correcting ? "What should change in the draft?" : "Type your answer\u2026",
                               rows: 1,
                               disabled: busy,
                               autoFocus: true,
@@ -2399,7 +2541,7 @@ function AssistSheet({
                         {
                           type: "button",
                           "data-gg-write-myself": "",
-                          onClick: onClose,
+                          onClick: () => leave("write_myself", "footer"),
                           style: {
                             display: "block",
                             margin: "8px auto 0",
@@ -2471,6 +2613,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 +2988,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 +3025,7 @@ function ReportDialog({
   transcribeAudio: transcribeAudio2,
   types,
   showSeverity = true,
-  captureScreenshot = captureViaHtml2Canvas,
+  captureScreenshot = captureDefaultScreenshot,
   reporter,
   onClose,
   headerSlot
@@ -2833,6 +3055,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);
@@ -2998,6 +3221,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 +5419,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,6 +5445,7 @@ function ReportDialog({
           accentText: t2.accentText
         },
         screenshots,
+        pageShot,
         onAddImages: addFiles,
         attachmentCount: screenshots.length + attachments.length,
         context: { ...assistContext != null ? assistContext : {}, reportType },