glitchgrab 1.44.0 → 1.45.0

package/dist/index.js

@@ -770,7 +770,9 @@ async function assistTurn(params, token, baseUrl) {
         conversationId: null,
         question: null,
         report: null,
-        degraded: (_a = envelope == null ? void 0 : envelope.error) != null ? _a : offline.degraded
+        degraded: (_a = envelope == null ? void 0 : envelope.error) != null ? _a : offline.degraded,
+        // An hourly limit, not a cap: the dialog keeps the assistant button.
+        retryable: (envelope == null ? void 0 : envelope.retryable) === true
       };
     }
     return {
@@ -1367,6 +1369,59 @@ var SEVERITY_LABELS = {
 };
 var MAX_ASSIST_IMAGES = 3;
 var MAX_ASSIST_IMAGE_CHARS = 35e5;
+var MAX_ASSIST_FILES = 3;
+var MAX_ASSIST_FILE_CHARS = 3e5;
+var MAX_ASSIST_FILE_CHARS_EACH = 2e5;
+var TEXT_ATTACHMENT_EXTENSIONS = [
+  ".html",
+  ".htm",
+  ".txt",
+  ".md",
+  ".json",
+  ".xml",
+  ".log",
+  ".yml",
+  ".yaml",
+  ".csv",
+  ".har",
+  ".js",
+  ".mjs",
+  ".cjs",
+  ".ts",
+  ".tsx",
+  ".jsx",
+  ".css",
+  ".scss",
+  ".py",
+  ".sh"
+];
+var BINARY_ATTACHMENT_EXTENSIONS = [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".zip"];
+var ATTACHMENT_ACCEPT = [
+  "image/*",
+  ...TEXT_ATTACHMENT_EXTENSIONS,
+  ...BINARY_ATTACHMENT_EXTENSIONS
+].join(",");
+var ASSIST_ATTACHMENT_ACCEPT = ["image/*", ...TEXT_ATTACHMENT_EXTENSIONS].join(",");
+function isAssistReadableFile(name) {
+  const lower = name.toLowerCase();
+  return TEXT_ATTACHMENT_EXTENSIONS.some((ext) => lower.endsWith(ext));
+}
+function decodeTextDataUrl(dataUrl) {
+  try {
+    if (!dataUrl.startsWith("data:")) return null;
+    const comma = dataUrl.indexOf(",");
+    if (comma < 0) return null;
+    const meta = dataUrl.slice(5, comma);
+    const payload = dataUrl.slice(comma + 1);
+    if (!meta.endsWith(";base64")) return decodeURIComponent(payload);
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return new TextDecoder("utf-8").decode(bytes);
+  } catch (e) {
+    return null;
+  }
+}
 function getTypeLabel(type) {
   switch (type) {
     case "RATING":
@@ -1398,6 +1453,22 @@ function pickAssistImages(all) {
   }
   return picked;
 }
+var NO_FILES = [];
+function pickAssistFiles(files) {
+  const picked = [];
+  let total = 0;
+  for (let i = files.length - 1; i >= 0 && picked.length < MAX_ASSIST_FILES; i--) {
+    const attached = files[i];
+    if (!isAssistReadableFile(attached.name)) continue;
+    const text = decodeTextDataUrl(attached.dataUrl);
+    if (!text || !text.trim()) continue;
+    const content = text.slice(0, MAX_ASSIST_FILE_CHARS_EACH);
+    if (total + content.length > MAX_ASSIST_FILE_CHARS) continue;
+    picked.unshift({ index: i, file: { name: attached.name, content } });
+    total += content.length;
+  }
+  return picked;
+}
 var STARTERS = [
   "Something on this page is broken",
   "It did the wrong thing",
@@ -1474,7 +1545,9 @@ function AssistSheet({
   theme: t2,
   screenshots,
   pageShot = null,
-  onAddImages,
+  onAddFiles,
+  files = NO_FILES,
+  onRemoveFile,
   onRemoveImage,
   attachmentCount,
   context,
@@ -1545,6 +1618,8 @@ function AssistSheet({
     }
   }
   const readShots = new Set(pickAssistImages(screenshots));
+  const sentFiles = (0, import_react3.useMemo)(() => pickAssistFiles(files), [files]);
+  const readFiles = new Set(sentFiles.map((f) => f.index));
   function leave(type, detail) {
     logEvent(type, detail);
     flushEvents();
@@ -1558,10 +1633,10 @@ function AssistSheet({
     var _a;
     if (phase === "draft") (_a = draftRef.current) == null ? void 0 : _a.focus();
   }, [phase]);
-  function degradeKeepingEvents(events, message) {
+  function degradeKeepingEvents(events, message, retryable) {
     if (events) eventsRef.current = [...events, ...eventsRef.current];
     flushEvents();
-    onDegrade(message);
+    onDegrade(message, retryable);
   }
   async function runTurn(history2) {
     var _a, _b, _c, _d;
@@ -1579,6 +1654,9 @@ function AssistSheet({
         ),
         conversationId,
         screenshots: sent,
+        // Only when there is something: an older server then sees the body
+        // it always did.
+        ...sentFiles.length > 0 ? { files: sentFiles.map((f) => f.file) } : {},
         context: {
           ...context != null ? context : {},
           imageSources: sent.map((shot) => pageShot && shot === pageShot ? "page" : "attached"),
@@ -1598,7 +1676,7 @@ function AssistSheet({
       setBusy(false);
     }
     if (result.degraded) {
-      degradeKeepingEvents(events, result.degraded);
+      degradeKeepingEvents(events, result.degraded, result.retryable === true);
       return;
     }
     if (result.conversationId) {
@@ -2586,7 +2664,7 @@ function AssistSheet({
                         // 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)(
+                          (screenshots.length > 0 || files.length > 0 || onAddFiles) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "div",
                             {
                               style: {
@@ -2690,11 +2768,118 @@ function AssistSheet({
                                     `${i}-${shot.slice(-16)}`
                                   );
                                 }),
-                                onAddImages && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                files.map((file, i) => {
+                                  const read = readFiles.has(i);
+                                  const why = read ? "the assistant reads this file" : isAssistReadableFile(file.name) ? "attached, but more than one message can carry, so the assistant is not reading it" : "attached to the report \u2014 the assistant can't read this kind of file";
+                                  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                                    "div",
+                                    {
+                                      "data-gg-assist-file": "",
+                                      "data-gg-assist-file-read": read ? "" : void 0,
+                                      title: `${file.name} \u2014 ${why}`,
+                                      style: {
+                                        position: "relative",
+                                        height: "40px",
+                                        maxWidth: "170px",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: "6px",
+                                        padding: "0 10px",
+                                        borderRadius: "8px",
+                                        border: `1px solid ${read ? t2.accent : t2.inputBorder}`,
+                                        opacity: read ? 1 : 0.55,
+                                        boxSizing: "border-box",
+                                        flexShrink: 0
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "path",
+                                          {
+                                            d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6",
+                                            stroke: t2.textMuted,
+                                            strokeWidth: "1.5",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round"
+                                          }
+                                        ) }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: "11.5px",
+                                              color: t2.text,
+                                              overflow: "hidden",
+                                              textOverflow: "ellipsis",
+                                              whiteSpace: "nowrap"
+                                            },
+                                            children: file.name
+                                          }
+                                        ),
+                                        onRemoveFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "button",
+                                          {
+                                            type: "button",
+                                            "data-gg-assist-remove-file": "",
+                                            "aria-label": `Remove file ${file.name}`,
+                                            title: "Remove this file",
+                                            onClick: () => {
+                                              logEvent("file_removed", read ? "read" : "not read");
+                                              onRemoveFile(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"
+                                                  }
+                                                ) })
+                                              }
+                                            )
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    `file-${i}-${file.name}`
+                                  );
+                                }),
+                                onAddFiles && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                                   "label",
                                   {
                                     "data-gg-assist-attach": "",
-                                    title: "Attach an image \u2014 or just paste one",
+                                    title: "Attach an image or a file (html, json, log\u2026) \u2014 or paste one",
                                     style: {
                                       width: "40px",
                                       height: "40px",
@@ -2714,14 +2899,18 @@ function AssistSheet({
                                         "input",
                                         {
                                           type: "file",
-                                          accept: "image/*",
+                                          accept: ASSIST_ATTACHMENT_ACCEPT,
                                           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);
+                                            const picked = Array.from((_a = e.target.files) != null ? _a : []);
+                                            if (picked.length) {
+                                              const images = picked.filter((f) => f.type.startsWith("image/")).length;
+                                              if (images) logEvent("image_added", String(images));
+                                              if (picked.length > images) {
+                                                logEvent("file_added", String(picked.length - images));
+                                              }
+                                              onAddFiles(picked);
                                             }
                                             e.target.value = "";
                                           },
@@ -2902,6 +3091,7 @@ function AssistSheet({
 }
 var FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var FAILED = "Couldn't send it. Try again in a moment.";
+var MAX_SELF_REPORT_IMAGES = 5;
 function describeSentAlong(hasChat, screenshotCount) {
   const parts = [
     ...hasChat ? ["your AI chat"] : [],
@@ -2925,11 +3115,49 @@ function GlitchgrabProblemPanel({
   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 [images, setImages] = (0, import_react4.useState)(
+    () => screenshots.slice(0, MAX_SELF_REPORT_IMAGES)
+  );
   const inputRef = (0, import_react4.useRef)(null);
+  const fileRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     var _a;
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   }, []);
+  const addImages = (0, import_react4.useCallback)((files) => {
+    const picked = files.filter((file) => file.type.startsWith("image/"));
+    if (!picked.length) return;
+    void Promise.all(picked.map((file) => encodeImageFile(file).catch(() => null))).then(
+      (encoded) => {
+        const added = encoded.filter((url) => !!url);
+        if (added.length) {
+          setImages((prev) => [...prev, ...added].slice(0, MAX_SELF_REPORT_IMAGES));
+        }
+      }
+    );
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const onPaste = (e) => {
+      var _a;
+      try {
+        const items = (_a = e.clipboardData) == null ? void 0 : _a.items;
+        if (!items) return;
+        const files = [];
+        for (let i = 0; i < items.length; i++) {
+          if (items[i].kind !== "file") continue;
+          const file = items[i].getAsFile();
+          if (file) files.push(file);
+        }
+        if (!files.length) return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        addImages(files);
+      } catch (e2) {
+      }
+    };
+    window.addEventListener("paste", onPaste, true);
+    return () => window.removeEventListener("paste", onPaste, true);
+  }, [addImages]);
   (0, import_react4.useEffect)(() => {
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -2945,7 +3173,13 @@ function GlitchgrabProblemPanel({
     setBusy(true);
     setError(null);
     try {
-      const result = await send({ description, surface, conversationId, reportType, screenshots });
+      const result = await send({
+        description,
+        surface,
+        conversationId,
+        reportType,
+        screenshots: images
+      });
       if (result == null ? void 0 : result.success) setSent(true);
       else setError((result == null ? void 0 : result.message) || FAILED);
     } catch (e) {
@@ -3098,6 +3332,134 @@ function GlitchgrabProblemPanel({
                   }
                 }
               ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  "data-gg-self-report-images": "",
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    gap: "8px",
+                    marginTop: "10px"
+                  },
+                  children: [
+                    images.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", width: "48px", height: "48px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "img",
+                        {
+                          src,
+                          alt: `Screenshot ${i + 1}`,
+                          style: {
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                            display: "block",
+                            boxSizing: "border-box",
+                            borderRadius: "8px",
+                            border: `1px solid ${t2.inputBorder}`
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-gg-self-report-remove-image": "",
+                          "aria-label": `Remove screenshot ${i + 1}`,
+                          title: "Don't send this one",
+                          onClick: () => setImages((prev) => prev.filter((_, j) => j !== 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_runtime3.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_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.6",
+                                  strokeLinecap: "round"
+                                }
+                              ) })
+                            }
+                          )
+                        }
+                      )
+                    ] }, i)),
+                    images.length < MAX_SELF_REPORT_IMAGES && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-gg-self-report-attach": "",
+                        "aria-label": "Add screenshot",
+                        title: "Add a screenshot \u2014 or paste one",
+                        onClick: () => {
+                          var _a;
+                          return (_a = fileRef.current) == null ? void 0 : _a.click();
+                        },
+                        style: {
+                          height: "48px",
+                          padding: "0 12px",
+                          boxSizing: "border-box",
+                          borderRadius: "8px",
+                          border: `1px dashed ${t2.inputBorder}`,
+                          background: "transparent",
+                          color: t2.textMuted,
+                          fontSize: "12.5px",
+                          fontWeight: 600,
+                          fontFamily: "inherit",
+                          cursor: "pointer"
+                        },
+                        children: images.length >= 3 ? "+ Add" : "+ Add screenshot"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "input",
+                      {
+                        ref: fileRef,
+                        type: "file",
+                        accept: "image/*",
+                        multiple: true,
+                        "data-gg-self-report-file": "",
+                        onChange: (e) => {
+                          var _a;
+                          addImages(Array.from((_a = e.target.files) != null ? _a : []));
+                          e.target.value = "";
+                        },
+                        style: { display: "none" }
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "p",
                 {
@@ -3106,7 +3468,7 @@ function GlitchgrabProblemPanel({
                   children: [
                     "Also sent, so we can see what happened:",
                     " ",
-                    describeSentAlong(conversationId !== null, screenshots.length),
+                    describeSentAlong(conversationId !== null, images.length),
                     "."
                   ]
                 }
@@ -3147,38 +3509,6 @@ function isMac() {
 function getShortcutLabel() {
   return isMac() ? GLITCHGRAB_SHORTCUT_MAC : GLITCHGRAB_SHORTCUT;
 }
-var ATTACHMENT_ACCEPT = [
-  "image/*",
-  // text — inlined into the issue body
-  ".html",
-  ".htm",
-  ".txt",
-  ".md",
-  ".json",
-  ".xml",
-  ".log",
-  ".yml",
-  ".yaml",
-  ".csv",
-  ".har",
-  ".js",
-  ".mjs",
-  ".cjs",
-  ".ts",
-  ".tsx",
-  ".jsx",
-  ".css",
-  ".scss",
-  ".py",
-  ".sh",
-  // binary documents
-  ".pdf",
-  ".doc",
-  ".docx",
-  ".xls",
-  ".xlsx",
-  ".zip"
-].join(",");
 var MAX_SCALE = 2;
 var FRAME_TIMEOUT_MS = 3e3;
 var GRAB_TIMEOUT_MS = FRAME_TIMEOUT_MS + 2e3;
@@ -6408,8 +6738,10 @@ function ReportDialog({
         theme: layerTheme,
         screenshots,
         pageShot,
-        onAddImages: addFiles,
+        onAddFiles: addFiles,
         onRemoveImage: (index) => setScreenshots((prev) => prev.filter((_, i) => i !== index)),
+        files: attachments,
+        onRemoveFile: (index) => setAttachments((prev) => prev.filter((_, i) => i !== index)),
         attachmentCount: screenshots.length + attachments.length,
         context: { ...assistContext != null ? assistContext : {}, reportType },
         reportTypeLabel: getTypeLabel(reportType),
@@ -6451,9 +6783,9 @@ function ReportDialog({
           setSelfReportPrefill(prefill != null ? prefill : "");
           setSelfReportFrom("assist");
         } : void 0,
-        onDegrade: (message) => {
+        onDegrade: (message, retryable) => {
           setAssistOpen(false);
-          setAssistUsed(true);
+          if (!retryable) setAssistUsed(true);
           setAssistNotice(message);
         },
         onClose: () => {