glitchgrab 1.19.1 → 1.20.1

package/README.md

@@ -2,7 +2,7 @@
 
 Turn messy bugs into structured GitHub issues with AI. Drop-in SDK for Next.js apps.
 
-## Install
+## How do I install Glitchgrab?
 
 ```bash
 npm install glitchgrab
@@ -10,7 +10,7 @@ npm install glitchgrab
 bun add glitchgrab
 ```
 
-## Quick Start
+## How do I get started?
 
 Wrap your app with `GlitchgrabProvider`:
 
@@ -27,7 +27,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-## Session (User Tracking)
+## How does user session tracking work?
 
 Pass a `session` prop so bug reports include the reporter's identity. This lets you trace which user reported each bug.
 
@@ -73,7 +73,7 @@ interface GlitchgrabSession {
 
 The `userId` is stored with every report. Use it to look up which user reported a bug in your own database.
 
-## Report Button
+## How do I add a report button?
 
 ### Default floating button
 
@@ -102,7 +102,7 @@ import { ReportButton } from "glitchgrab";
 
 The modal handles screenshot capture, preview, upload, retake, and submission. Your custom button just triggers it.
 
-## Programmatic Reporting
+## How do I report bugs programmatically?
 
 Use the `useGlitchgrab` hook to report bugs from code:
 
@@ -146,7 +146,7 @@ function FeedbackWidget() {
 
 Note: `openReportDialog()` requires a `<ReportButton>` to be mounted somewhere in the component tree. It triggers the same modal with screenshot capture.
 
-## Keyboard Shortcuts
+## What keyboard shortcuts are available?
 
 Once `GlitchgrabProvider` is mounted, these shortcuts work globally:
 
@@ -158,7 +158,7 @@ Once `GlitchgrabProvider` is mounted, these shortcuts work globally:
 
 No configuration needed — shortcuts are active as long as the provider is in the tree.
 
-## Fetching Reports by User
+## How do I fetch reports by user?
 
 ### React hook (recommended)
 
@@ -255,7 +255,7 @@ curl -H "Authorization: Bearer gg_your_token" \
 
 | Field | Description |
 |-------|-------------|
-| `id` | Report ID — use this for [managing issues](#managing-issues-approve--reject--close) |
+| `id` | Report ID — use this for [managing issues](#how-do-i-approve-reject-or-close-issues) |
 | `source` | `SDK_AUTO` (crash) or `SDK_USER_REPORT` (user clicked report) |
 | `status` | `PENDING`, `PROCESSING`, `CREATED`, `FAILED` |
 | `reporterPrimaryKey` | The `userId` you passed in the session prop |
@@ -265,7 +265,7 @@ curl -H "Authorization: Bearer gg_your_token" \
 | `issue.severity` | AI-assigned severity |
 ```
 
-## Managing Issues (Approve / Reject / Close)
+## How do I approve, reject, or close issues?
 
 ### React hook
 
@@ -365,7 +365,7 @@ curl -X POST \
 
 ### How to get the report ID
 
-Use the [Fetching Reports API](#fetching-reports-by-user) to list reports. Each report has an `id` field — use that as `REPORT_ID`.
+Use the [Fetching Reports API](#how-do-i-fetch-reports-by-user) to list reports. Each report has an `id` field — use that as `REPORT_ID`.
 
 ### How it works
 
@@ -374,7 +374,7 @@ Use the [Fetching Reports API](#fetching-reports-by-user) to list reports. Each
 3. Approve/reject/close via API or dashboard buttons
 4. Labels and state sync directly to GitHub — GitHub is the source of truth
 
-## Conversation Thread (Comments)
+## How do I add comments to a report?
 
 Each report has a conversation thread powered by GitHub issue comments. No extra database — comments live on GitHub.
 
@@ -430,7 +430,7 @@ The comment is posted to the GitHub issue with attribution: "Commented by: **Viv
 
 Click any report on the Reports page to see the full conversation thread. Reply directly from the dashboard — comments sync to GitHub.
 
-## Error Boundary
+## How do I add an error boundary?
 
 Wrap components to auto-capture React errors:
 
@@ -442,7 +442,7 @@ import { GlitchgrabErrorBoundary } from "glitchgrab";
 </GlitchgrabErrorBoundary>
 ```
 
-## Configuration
+## What configuration options are available?
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
@@ -455,7 +455,7 @@ import { GlitchgrabErrorBoundary } from "glitchgrab";
 | `onReportSent` | `(result: ReportResult) => void` | - | Called after a report is sent |
 | `fallback` | `ReactNode` | - | Error boundary fallback UI |
 
-## Auto-Capture
+## How does auto-capture work?
 
 In production (`NODE_ENV=production`), the SDK automatically captures:
 - Unhandled JavaScript errors
@@ -466,7 +466,7 @@ In production (`NODE_ENV=production`), the SDK automatically captures:
 
 Auto-capture is **disabled in development** to avoid noisy issues.
 
-## What gets included in each report
+## What data is included in each report?
 
 - Description from the user
 - Screenshot (auto-captured or uploaded)

package/dist/index.d.mts

@@ -109,6 +109,12 @@ interface UseGlitchgrabReturn {
         description?: string;
         type?: ReportType;
     }) => void;
+    /**
+     * Optional: polish user-written description text via the Glitchgrab AI enhance endpoint.
+     * Fixes grammar / clarity only — never invents details or changes meaning.
+     * Returns the polished text, or the original text on any failure (never throws).
+     */
+    enhanceText: (text: string) => Promise<string>;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -288,6 +294,12 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
  * Never throws — returns null on failure.
  */
 declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
+/**
+ * Polish raw description text via the Glitchgrab AI enhance endpoint.
+ * Returns the polished text on success, or the original text on any failure.
+ * Never throws.
+ */
+declare function enhanceText(text: string, token: string, baseUrl?: string): Promise<string>;
 
 declare function computeSignature(params: {
     errorMessage: string | undefined;
@@ -297,4 +309,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, clearDedupCache, computeSignature, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };

package/dist/index.d.ts

@@ -109,6 +109,12 @@ interface UseGlitchgrabReturn {
         description?: string;
         type?: ReportType;
     }) => void;
+    /**
+     * Optional: polish user-written description text via the Glitchgrab AI enhance endpoint.
+     * Fixes grammar / clarity only — never invents details or changes meaning.
+     * Returns the polished text, or the original text on any failure (never throws).
+     */
+    enhanceText: (text: string) => Promise<string>;
     /** The token being used */
     token: string;
     /** The base URL of the Glitchgrab API */
@@ -288,6 +294,12 @@ declare function captureContext(visitedPages: string[]): CapturedContext;
  * Never throws — returns null on failure.
  */
 declare function sendReport(payload: ReportPayload, baseUrl?: string): Promise<ReportResult | null>;
+/**
+ * Polish raw description text via the Glitchgrab AI enhance endpoint.
+ * Returns the polished text on success, or the original text on any failure.
+ * Never throws.
+ */
+declare function enhanceText(text: string, token: string, baseUrl?: string): Promise<string>;
 
 declare function computeSignature(params: {
     errorMessage: string | undefined;
@@ -297,4 +309,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, clearDedupCache, computeSignature, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };
+export { type Breadcrumb, type BreadcrumbType, type CapturedContext, type DeviceInfo, type GlitchgrabConfig, GlitchgrabErrorBoundary, GlitchgrabProvider, type GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabSession, ReportButton, type ReportButtonProps, type ReportPayload, type ReportResult, type ReportSeverity, type ReportType, type UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabReports, getBreadcrumbs, initBreadcrumbs, sanitizeUrl, sendReport, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabReports };

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   clearBreadcrumbs: () => clearBreadcrumbs,
   clearDedupCache: () => clearDedupCache,
   computeSignature: () => computeSignature,
+  enhanceText: () => enhanceText,
   fetchGlitchgrabReports: () => fetchGlitchgrabReports,
   getBreadcrumbs: () => getBreadcrumbs,
   initBreadcrumbs: () => initBreadcrumbs,
@@ -315,6 +316,30 @@ async function sendReport(payload, baseUrl) {
     return null;
   }
 }
+async function enhanceText(text, token, baseUrl) {
+  var _a;
+  try {
+    const trimmed = text.trim();
+    if (!trimmed) return text;
+    const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/ai/enhance-text`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`
+      },
+      body: JSON.stringify({ text: trimmed })
+    });
+    if (!response.ok) return text;
+    const envelope = await response.json();
+    if ((envelope == null ? void 0 : envelope.success) && typeof ((_a = envelope.data) == null ? void 0 : _a.text) === "string") {
+      return envelope.data.text;
+    }
+    return text;
+  } catch (e) {
+    return text;
+  }
+}
 
 // src/dedup.ts
 var DEFAULT_WINDOW_MS = 5 * 60 * 1e3;
@@ -586,9 +611,11 @@ function isLowQualityText(text) {
 }
 function ReportDialog({
   report,
+  enhanceText: enhanceText2,
   types,
   showSeverity = true
 }) {
+  const [isEnhancing, setIsEnhancing] = (0, import_react.useState)(false);
   const [mounted, setMounted] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     setMounted(true);
@@ -601,6 +628,14 @@ function ReportDialog({
   const [previewOpen, setPreviewOpen] = (0, import_react.useState)(false);
   const fileInputRef = (0, import_react.useRef)(null);
   const modalRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!isOpen) return;
+    const dialogs = Array.from(
+      document.querySelectorAll('[role="dialog"][data-state="open"]')
+    );
+    dialogs.forEach((d) => d.setAttribute("inert", ""));
+    return () => dialogs.forEach((d) => d.removeAttribute("inert"));
+  }, [isOpen]);
   const [step, setStep] = (0, import_react.useState)(1);
   const [reportType, setReportType] = (0, import_react.useState)("BUG");
   const [severity, setSeverity] = (0, import_react.useState)("medium");
@@ -922,38 +957,83 @@ function ReportDialog({
                     type
                   )) }),
                   step === 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "textarea",
-                      {
-                        value: description,
-                        onChange: (e) => {
-                          setDescription(e.target.value);
-                          if (validationError) setValidationError(null);
-                        },
-                        placeholder: getPlaceholder(reportType),
-                        style: {
-                          width: "100%",
-                          minHeight: "100px",
-                          padding: "10px 12px",
-                          borderRadius: "8px",
-                          border: `1px solid ${t.inputBorder}`,
-                          fontSize: "14px",
-                          fontFamily: "inherit",
-                          resize: "vertical",
-                          outline: "none",
-                          boxSizing: "border-box",
-                          color: t.text,
-                          backgroundColor: t.inputBg
-                        },
-                        onFocus: (e) => {
-                          e.target.style.borderColor = t.accent;
-                        },
-                        onBlur: (e) => {
-                          e.target.style.borderColor = t.inputBorder;
-                        },
-                        autoFocus: true
-                      }
-                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "textarea",
+                        {
+                          value: description,
+                          onChange: (e) => {
+                            setDescription(e.target.value);
+                            if (validationError) setValidationError(null);
+                          },
+                          placeholder: getPlaceholder(reportType),
+                          style: {
+                            width: "100%",
+                            minHeight: "100px",
+                            padding: enhanceText2 ? "28px 12px 10px" : "10px 12px",
+                            borderRadius: "8px",
+                            border: `1px solid ${t.inputBorder}`,
+                            fontSize: "14px",
+                            fontFamily: "inherit",
+                            resize: "vertical",
+                            outline: "none",
+                            boxSizing: "border-box",
+                            color: t.text,
+                            backgroundColor: t.inputBg
+                          },
+                          onFocus: (e) => {
+                            e.target.style.borderColor = t.accent;
+                          },
+                          onBlur: (e) => {
+                            e.target.style.borderColor = t.inputBorder;
+                          },
+                          autoFocus: true
+                        }
+                      ),
+                      enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: async () => {
+                            if (!description.trim() || isEnhancing) return;
+                            setIsEnhancing(true);
+                            try {
+                              const polished = await enhanceText2(description);
+                              if (polished && polished !== description) {
+                                setDescription(polished);
+                                if (validationError) setValidationError(null);
+                              }
+                            } finally {
+                              setIsEnhancing(false);
+                            }
+                          },
+                          disabled: !description.trim() || isEnhancing,
+                          style: {
+                            position: "absolute",
+                            top: "6px",
+                            right: "6px",
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: "4px",
+                            background: t.inputBg,
+                            border: "none",
+                            padding: "2px 6px",
+                            borderRadius: "4px",
+                            fontFamily: "inherit",
+                            fontSize: "11px",
+                            color: t.textMuted,
+                            cursor: !description.trim() || isEnhancing ? "default" : "pointer",
+                            opacity: !description.trim() ? 0.5 : 1,
+                            zIndex: 1
+                          },
+                          title: "Polish grammar \u2014 preserves your meaning",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z", stroke: t.textMuted, strokeWidth: "1.5", strokeLinejoin: "round" }) }),
+                            isEnhancing ? "Enhancing..." : "AI enhance"
+                          ]
+                        }
+                      )
+                    ] }),
                     showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "10px" }, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: t.textMuted, marginBottom: "6px", display: "block" }, children: "Severity" }),
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1374,6 +1454,10 @@ function GlitchgrabProviderInner({
       const handleError = (event) => {
         var _a, _b, _c, _d, _e, _f;
         try {
+          const isOpaqueCrossOrigin = event.message === "Script error." || event.message === "Script error" || !event.error && !event.filename;
+          if (isOpaqueCrossOrigin) {
+            return;
+          }
           const context = captureContext(visitedPagesRef.current);
           const sig = computeSignature({
             errorMessage: event.message,
@@ -1416,6 +1500,9 @@ function GlitchgrabProviderInner({
           const context = captureContext(visitedPagesRef.current);
           const reason = event.reason;
           const errMsg = reason instanceof Error ? reason.message : String(reason);
+          if (errMsg === "Script error." || errMsg === "Script error") {
+            return;
+          }
           const errStack = reason instanceof Error ? reason.stack : void 0;
           const sig = computeSignature({
             errorMessage: errMsg,
@@ -1502,6 +1589,16 @@ function GlitchgrabProviderInner({
     },
     []
   );
+  const enhance = (0, import_react2.useCallback)(
+    async (text) => {
+      try {
+        return await enhanceText(text, token, baseUrl);
+      } catch (e) {
+        return text;
+      }
+    },
+    [token, baseUrl]
+  );
   const openReportDialog = (0, import_react2.useCallback)((options) => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
@@ -1530,7 +1627,8 @@ function GlitchgrabProviderInner({
         reportBug,
         report,
         addBreadcrumb: addBreadcrumb2,
-        openReportDialog
+        openReportDialog,
+        enhanceText: enhance
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1545,7 +1643,7 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, types, showSeverity })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, enhanceText: enhance, types, showSeverity })
       ]
     }
   );
@@ -1771,6 +1869,7 @@ function useGlitchgrabActions({
   clearBreadcrumbs,
   clearDedupCache,
   computeSignature,
+  enhanceText,
   fetchGlitchgrabReports,
   getBreadcrumbs,
   initBreadcrumbs,