glitchgrab 1.30.0 → 1.31.0

package/dist/index.js

@@ -31,28 +31,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  GLITCHGRAB_SHORTCUT: () => GLITCHGRAB_SHORTCUT,
-  GLITCHGRAB_SHORTCUT_MAC: () => GLITCHGRAB_SHORTCUT_MAC,
+  FeedbackButton: () => FeedbackButton,
+  GLITCHGRAB_SHORTCUT: () => GLITCHGRAB_SHORTCUT2,
+  GLITCHGRAB_SHORTCUT_MAC: () => GLITCHGRAB_SHORTCUT_MAC2,
   GlitchgrabErrorBoundary: () => GlitchgrabErrorBoundary,
   GlitchgrabProvider: () => GlitchgrabProvider,
   ReportButton: () => ReportButton,
   addBreadcrumb: () => addBreadcrumb,
   captureContext: () => captureContext,
   captureDeviceInfo: () => captureDeviceInfo,
+  captureError: () => captureError,
+  clearAppContext: () => clearAppContext,
   clearBreadcrumbs: () => clearBreadcrumbs,
   clearDedupCache: () => clearDedupCache,
   computeSignature: () => computeSignature,
   enhanceText: () => enhanceText,
+  fetchGlitchgrabFeedback: () => fetchGlitchgrabFeedback,
   fetchGlitchgrabReports: () => fetchGlitchgrabReports,
+  getAppContext: () => getAppContext,
   getBreadcrumbs: () => getBreadcrumbs,
-  getShortcutLabel: () => getShortcutLabel,
+  getShortcutLabel: () => getShortcutLabel2,
   initBreadcrumbs: () => initBreadcrumbs,
   matchesShortcut: () => matchesShortcut,
   sanitizeUrl: () => sanitizeUrl,
+  sendFeedback: () => sendFeedback,
   sendReport: () => sendReport,
+  setContext: () => setContext,
+  setContexts: () => setContexts,
   shouldSkipDuplicate: () => shouldSkipDuplicate,
   useGlitchgrab: () => useGlitchgrab,
   useGlitchgrabActions: () => useGlitchgrabActions,
+  useGlitchgrabFeedback: () => useGlitchgrabFeedback,
   useGlitchgrabReports: () => useGlitchgrabReports
 });
 module.exports = __toCommonJS(index_exports);
@@ -63,18 +72,76 @@ var import_react3 = require("react");
 // src/error-boundary.tsx
 var React = __toESM(require("react"));
 
+// src/redact.ts
+var SENSITIVE_KEY_RE = /(pass|pwd|secret|token|auth|session|cookie|credential|apikey|api_key|access_key|private|signature|otp|pin|cvv|card|ssn|aadhaar|pan)/i;
+var EMAIL_RE = /[\w.+-]+@[\w-]+\.[\w.-]+/g;
+var JWT_RE = /\beyJ[\w-]{8,}\.[\w-]{8,}\.[\w-]{8,}\b/g;
+var BEARER_RE = /\b(bearer\s+)[\w-.~+/]{12,}=*/gi;
+var MAX_BODY_LENGTH = 500;
+function redactString(value) {
+  return value.replace(JWT_RE, "[REDACTED]").replace(BEARER_RE, "$1[REDACTED]").replace(EMAIL_RE, "[REDACTED_EMAIL]");
+}
+function redactValue(value, depth) {
+  if (depth > 4) return "[DEPTH]";
+  if (value === null || value === void 0) return value;
+  if (typeof value === "string") return redactString(value);
+  if (typeof value === "number" || typeof value === "boolean") return value;
+  if (Array.isArray(value)) return value.slice(0, 20).map((v) => redactValue(v, depth + 1));
+  if (typeof value === "object") {
+    const out = {};
+    for (const [key, inner] of Object.entries(value)) {
+      out[key] = SENSITIVE_KEY_RE.test(key) ? "[REDACTED]" : redactValue(inner, depth + 1);
+    }
+    return out;
+  }
+  return String(value);
+}
+function redactBody(body, maxLength = MAX_BODY_LENGTH) {
+  try {
+    const trimmed = body.trim();
+    if (!trimmed) return "";
+    let result;
+    try {
+      result = JSON.stringify(redactValue(JSON.parse(trimmed), 0));
+    } catch (e) {
+      result = redactString(trimmed);
+    }
+    return result.length > maxLength ? `${result.slice(0, maxLength)}\u2026[truncated]` : result;
+  } catch (e) {
+    return "";
+  }
+}
+
 // src/breadcrumbs.ts
 var MAX_DEFAULT = 50;
 var breadcrumbs = [];
 var maxBreadcrumbs = MAX_DEFAULT;
 var initialized = false;
-function initBreadcrumbs(max) {
+var responseBodyOrigins = [];
+function mayCaptureBody(url) {
+  try {
+    if (typeof window === "undefined") return false;
+    const origin = new URL(url, window.location.href).origin;
+    if (origin === window.location.origin) return true;
+    return responseBodyOrigins.includes(origin);
+  } catch (e) {
+    return false;
+  }
+}
+function initBreadcrumbs(max, options) {
+  var _a;
+  if ((_a = options == null ? void 0 : options.responseBodyOrigins) == null ? void 0 : _a.length) {
+    responseBodyOrigins = Array.from(
+      /* @__PURE__ */ new Set([...responseBodyOrigins, ...options.responseBodyOrigins])
+    );
+  }
   if (initialized) return;
   maxBreadcrumbs = max != null ? max : MAX_DEFAULT;
   try {
     if (typeof window === "undefined") return;
     interceptConsole();
     interceptFetch();
+    interceptXhr();
     interceptNavigation();
     interceptClicks();
     initialized = true;
@@ -133,6 +200,16 @@ function argsToString(args) {
     return "[unknown]";
   }
 }
+async function readErrorBody(response, url) {
+  try {
+    if (response.ok) return "";
+    if (!mayCaptureBody(url)) return "";
+    const text = await response.clone().text();
+    return redactBody(text);
+  } catch (e) {
+    return "";
+  }
+}
 function interceptFetch() {
   const origFetch = window.fetch;
   window.fetch = async function(input, init) {
@@ -145,10 +222,12 @@ function interceptFetch() {
         input,
         init
       );
+      const body = await readErrorBody(response, url);
       addBreadcrumb("api", `${method} ${url.slice(0, 100)} \u2192 ${response.status}`, {
         method,
         status: String(response.status),
-        duration: `${Date.now() - start}ms`
+        duration: `${Date.now() - start}ms`,
+        ...body ? { responseBody: body } : {}
       });
       return response;
     } catch (err) {
@@ -161,6 +240,67 @@ function interceptFetch() {
     }
   };
 }
+function interceptXhr() {
+  if (typeof XMLHttpRequest === "undefined") return;
+  const origOpen = XMLHttpRequest.prototype.open;
+  const origSend = XMLHttpRequest.prototype.send;
+  XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+    try {
+      this.__ggMethod = method;
+      this.__ggUrl = typeof url === "string" ? url : url.toString();
+      const record = () => {
+        var _a, _b, _c, _d;
+        try {
+          const recordedMethod = (_a = this.__ggMethod) != null ? _a : "GET";
+          const recordedUrl = ((_b = this.__ggUrl) != null ? _b : "").slice(0, 100);
+          const duration = `${Date.now() - ((_c = this.__ggStart) != null ? _c : Date.now())}ms`;
+          if (!this.status) {
+            addBreadcrumb("api", `${recordedMethod} ${recordedUrl} \u2192 FAILED`, {
+              method: recordedMethod,
+              duration
+            });
+            return;
+          }
+          const failed = this.status < 200 || this.status >= 300;
+          const body = failed && mayCaptureBody((_d = this.__ggUrl) != null ? _d : "") ? readXhrBody(this) : "";
+          addBreadcrumb("api", `${recordedMethod} ${recordedUrl} \u2192 ${this.status}`, {
+            method: recordedMethod,
+            status: String(this.status),
+            duration,
+            ...body ? { responseBody: body } : {}
+          });
+        } catch (e) {
+        }
+      };
+      if (!this.__ggListening) {
+        this.__ggListening = true;
+        this.addEventListener("loadend", record);
+      }
+    } catch (e) {
+    }
+    return origOpen.apply(this, [
+      method,
+      url,
+      ...rest
+    ]);
+  };
+  XMLHttpRequest.prototype.send = function(...args) {
+    try {
+      this.__ggStart = Date.now();
+    } catch (e) {
+    }
+    return origSend.apply(this, args);
+  };
+}
+function readXhrBody(xhr) {
+  try {
+    if (xhr.responseType && xhr.responseType !== "text" && xhr.responseType !== "json") return "";
+    const raw = xhr.responseType === "json" ? JSON.stringify(xhr.response) : xhr.responseText;
+    return raw ? redactBody(raw) : "";
+  } catch (e) {
+    return "";
+  }
+}
 function interceptNavigation() {
   const origPush = history.pushState.bind(history);
   const origReplace = history.replaceState.bind(history);
@@ -195,6 +335,90 @@ function interceptClicks() {
   );
 }
 
+// src/runtime.ts
+var pageLoadedAt = Date.now();
+var errorCount = 0;
+function incrementErrorCount() {
+  errorCount += 1;
+  return errorCount;
+}
+var toMb = (bytes) => typeof bytes === "number" ? Math.round(bytes / 1048576 * 10) / 10 : void 0;
+function captureRuntimeInfo() {
+  try {
+    if (typeof window === "undefined") return null;
+    const memory = performance == null ? void 0 : performance.memory;
+    const connection = navigator == null ? void 0 : navigator.connection;
+    return {
+      timeOnPageMs: Date.now() - pageLoadedAt,
+      errorCount,
+      visibility: typeof document !== "undefined" ? document.visibilityState : "unknown",
+      ...memory ? {
+        jsHeapUsedMb: toMb(memory.usedJSHeapSize),
+        jsHeapLimitMb: toMb(memory.jsHeapSizeLimit)
+      } : {},
+      ...connection ? {
+        connectionType: connection.effectiveType,
+        downlinkMbps: connection.downlink,
+        rttMs: connection.rtt,
+        saveData: connection.saveData
+      } : {}
+    };
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/app-context.ts
+var MAX_KEYS = 30;
+var MAX_VALUE_LENGTH = 200;
+var appContext = {};
+var release;
+function coerce(value) {
+  if (typeof value === "string") return value.slice(0, MAX_VALUE_LENGTH);
+  if (value === null || value === void 0) return "";
+  try {
+    return JSON.stringify(value).slice(0, MAX_VALUE_LENGTH);
+  } catch (e) {
+    return String(value).slice(0, MAX_VALUE_LENGTH);
+  }
+}
+function setContext(key, value) {
+  try {
+    if (!key) return;
+    if (value === null || value === void 0) {
+      delete appContext[key];
+      return;
+    }
+    if (!(key in appContext) && Object.keys(appContext).length >= MAX_KEYS) return;
+    appContext[key] = coerce(value);
+  } catch (e) {
+  }
+}
+function setContexts(values) {
+  try {
+    for (const [key, value] of Object.entries(values != null ? values : {})) setContext(key, value);
+  } catch (e) {
+  }
+}
+function getAppContext() {
+  return { ...appContext };
+}
+function clearAppContext() {
+  appContext = {};
+}
+function setRelease(value) {
+  if (value) release = value;
+}
+function getRelease() {
+  if (release) return release;
+  try {
+    const fromEnv = process.env.NEXT_PUBLIC_APP_VERSION || process.env.NEXT_PUBLIC_RELEASE || process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+    return fromEnv || void 0;
+  } catch (e) {
+    return void 0;
+  }
+}
+
 // src/utils.ts
 var SENSITIVE_PARAMS = [
   "token",
@@ -263,7 +487,10 @@ function captureContext(visitedPages) {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       visitedPages: visitedPages.map(sanitizeUrl),
       breadcrumbs: getBreadcrumbs(),
-      deviceInfo: captureDeviceInfo()
+      deviceInfo: captureDeviceInfo(),
+      runtime: captureRuntimeInfo(),
+      appContext: getAppContext(),
+      release: getRelease()
     };
   } catch (e) {
     return {
@@ -272,8 +499,40 @@ function captureContext(visitedPages) {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       visitedPages: [],
       breadcrumbs: [],
-      deviceInfo: null
+      deviceInfo: null,
+      runtime: null,
+      appContext: {}
+    };
+  }
+}
+function contextMetadata(context) {
+  var _a;
+  try {
+    const runtime = context.runtime;
+    const appContext2 = Object.entries((_a = context.appContext) != null ? _a : {}).reduce(
+      (acc, [key, value]) => {
+        acc[`ctx_${key}`] = value;
+        return acc;
+      },
+      {}
+    );
+    return {
+      ...context.release ? { release: context.release } : {},
+      ...runtime ? {
+        timeOnPageMs: String(runtime.timeOnPageMs),
+        errorCount: String(runtime.errorCount),
+        visibility: runtime.visibility,
+        ...runtime.jsHeapUsedMb !== void 0 ? { jsHeapUsedMb: String(runtime.jsHeapUsedMb) } : {},
+        ...runtime.jsHeapLimitMb !== void 0 ? { jsHeapLimitMb: String(runtime.jsHeapLimitMb) } : {},
+        ...runtime.connectionType ? { connectionType: runtime.connectionType } : {},
+        ...runtime.downlinkMbps !== void 0 ? { downlinkMbps: String(runtime.downlinkMbps) } : {},
+        ...runtime.rttMs !== void 0 ? { rttMs: String(runtime.rttMs) } : {},
+        ...runtime.saveData !== void 0 ? { saveData: String(runtime.saveData) } : {}
+      } : {},
+      ...appContext2
     };
+  } catch (e) {
+    return {};
   }
 }
 var DEFAULT_BASE_URL = "https://glitchgrab.dev";
@@ -323,6 +582,41 @@ async function sendReport(payload, baseUrl) {
     return null;
   }
 }
+async function sendFeedback(payload, baseUrl) {
+  var _a;
+  try {
+    const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/sdk/feedback`;
+    const body = JSON.stringify(payload);
+    for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${payload.token}`
+          },
+          body
+        });
+        if (response.ok) {
+          const envelope = await response.json();
+          return { success: envelope.success, ...(_a = envelope.data) != null ? _a : {} };
+        }
+        if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+          return null;
+        }
+      } catch (e) {
+      }
+      if (attempt < MAX_RETRIES - 1) {
+        await new Promise(
+          (resolve) => setTimeout(resolve, RETRY_BASE_MS * Math.pow(2, attempt))
+        );
+      }
+    }
+    return null;
+  } catch (e) {
+    return null;
+  }
+}
 async function enhanceText(text, token, baseUrl, screenshot, context) {
   var _a;
   try {
@@ -412,11 +706,12 @@ function stripUrlQuery(url) {
   }
 }
 function computeSignature(params) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const msg = (_b = (_a = params.errorMessage) == null ? void 0 : _a.trim()) != null ? _b : "";
   const page = stripUrlQuery(params.pageUrl);
   const frame = topStackFrame(params.errorStack);
-  return hashString(`${msg}|${page}|${frame}`);
+  const digest = (_d = (_c = params.digest) == null ? void 0 : _c.trim()) != null ? _d : "";
+  return hashString(digest ? `${msg}|${page}|${frame}|${digest}` : `${msg}|${page}|${frame}`);
 }
 function shouldSkipDuplicate(signature, windowMs = DEFAULT_WINDOW_MS, now = Date.now()) {
   const last = seen.get(signature);
@@ -441,6 +736,78 @@ function clearDedupCache() {
   seen.clear();
 }
 
+// src/capture.ts
+var config = null;
+function registerCaptureConfig(next) {
+  config = next;
+}
+function matchesIgnorePatterns(message, patterns) {
+  if (!patterns || patterns.length === 0) return false;
+  return patterns.some(
+    (pattern) => pattern instanceof RegExp ? pattern.test(message) : message.includes(pattern)
+  );
+}
+function sessionMetadata(session) {
+  return {
+    ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
+    ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
+    ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
+    ...(session == null ? void 0 : session.phone) ? { sessionUserPhone: String(session.phone) } : {}
+  };
+}
+function buildCapturedErrorPayload(error, options, cfg, capturedBy = "captureError") {
+  var _a, _b, _c;
+  const err = error instanceof Error ? error : void 0;
+  const errorMessage = err ? err.message : String(error);
+  if (!errorMessage) return null;
+  if (matchesIgnorePatterns(errorMessage, cfg.ignoreErrors)) return null;
+  incrementErrorCount();
+  const context = captureContext(cfg.getVisitedPages());
+  const digest = (_a = options == null ? void 0 : options.digest) != null ? _a : typeof (error == null ? void 0 : error.digest) === "string" ? error.digest : void 0;
+  const sig = computeSignature({
+    errorMessage,
+    pageUrl: context.url,
+    errorStack: err == null ? void 0 : err.stack,
+    digest
+  });
+  if (shouldSkipDuplicate(sig)) return null;
+  return {
+    token: cfg.token,
+    source: "SDK_AUTO",
+    type: "BUG",
+    errorMessage,
+    errorStack: err == null ? void 0 : err.stack,
+    componentStack: (_b = options == null ? void 0 : options.componentStack) != null ? _b : void 0,
+    pageUrl: context.url,
+    userAgent: context.userAgent,
+    breadcrumbs: context.breadcrumbs,
+    deviceInfo: (_c = context.deviceInfo) != null ? _c : void 0,
+    metadata: {
+      timestamp: context.timestamp,
+      visitedPages: JSON.stringify(context.visitedPages),
+      capturedBy,
+      ...contextMetadata(context),
+      ...(options == null ? void 0 : options.boundary) ? { boundary: options.boundary } : {},
+      ...digest ? { digest } : {},
+      ...sessionMetadata(cfg.session),
+      ...options == null ? void 0 : options.metadata
+    }
+  };
+}
+function captureError(error, options) {
+  try {
+    const cfg = config;
+    if (!(cfg == null ? void 0 : cfg.token)) return;
+    const payload = buildCapturedErrorPayload(error, options, cfg);
+    if (!payload) return;
+    void sendReport(payload, cfg.baseUrl).then((result) => {
+      if (result && cfg.onReportSent) cfg.onReportSent(result);
+    });
+    if (cfg.onError && error instanceof Error) cfg.onError(error);
+  } catch (e) {
+  }
+}
+
 // src/error-boundary.tsx
 var GlitchgrabErrorBoundary = class extends React.Component {
   constructor(props) {
@@ -451,40 +818,22 @@ var GlitchgrabErrorBoundary = class extends React.Component {
     return { hasError: true };
   }
   componentDidCatch(error, errorInfo) {
-    var _a, _b;
+    var _a;
     try {
-      const context = captureContext(this.props.visitedPages);
-      const sig = computeSignature({
-        errorMessage: error.message,
-        pageUrl: context.url,
-        errorStack: error.stack
-      });
-      if (shouldSkipDuplicate(sig)) {
-        if (this.props.onError) this.props.onError(error);
-        return;
+      const payload = buildCapturedErrorPayload(
+        error,
+        { componentStack: (_a = errorInfo.componentStack) != null ? _a : void 0 },
+        {
+          token: this.props.token,
+          baseUrl: this.props.baseUrl,
+          session: this.props.session,
+          getVisitedPages: () => this.props.visitedPages
+        },
+        "GlitchgrabErrorBoundary"
+      );
+      if (payload) {
+        sendReport(payload, this.props.baseUrl);
       }
-      const session = this.props.session;
-      const payload = {
-        token: this.props.token,
-        source: "SDK_AUTO",
-        type: "BUG",
-        errorMessage: error.message,
-        errorStack: error.stack,
-        componentStack: (_a = errorInfo.componentStack) != null ? _a : void 0,
-        pageUrl: context.url,
-        userAgent: context.userAgent,
-        breadcrumbs: context.breadcrumbs,
-        deviceInfo: (_b = context.deviceInfo) != null ? _b : void 0,
-        metadata: {
-          timestamp: context.timestamp,
-          visitedPages: JSON.stringify(context.visitedPages),
-          ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
-          ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
-          ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
-          ...(session == null ? void 0 : session.phone) ? { sessionUserPhone: String(session.phone) } : {}
-        }
-      };
-      sendReport(payload, this.props.baseUrl);
       if (this.props.onError) {
         this.props.onError(error);
       }
@@ -502,13 +851,41 @@ var GlitchgrabErrorBoundary = class extends React.Component {
   }
 };
 
-// src/report-dialog.tsx
-var import_react2 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/annotation-canvas.tsx
+// ../report-ui/dist/index.mjs
 var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = 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;
+function downscale(canvas, factor) {
+  const next = document.createElement("canvas");
+  next.width = Math.max(1, Math.round(canvas.width * factor));
+  next.height = Math.max(1, Math.round(canvas.height * factor));
+  const ctx = next.getContext("2d");
+  if (!ctx) return null;
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(canvas, 0, 0, next.width, next.height);
+  return next;
+}
+function encodeScreenshot(canvas, maxLength = MAX_SCREENSHOT_DATA_URL_LENGTH) {
+  let current = canvas;
+  for (let round = 0; round < 2; round++) {
+    let encoded = "";
+    for (const quality of QUALITY_LADDER) {
+      encoded = current.toDataURL("image/jpeg", quality);
+      if (encoded.length <= maxLength) return encoded;
+    }
+    if (round === 1) return encoded;
+    const smaller = downscale(current, DOWNSCALE_FACTOR);
+    if (!smaller) return encoded;
+    current = smaller;
+  }
+  return current.toDataURL("image/jpeg", QUALITY_LADDER[0]);
+}
 var PALETTE = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ffffff"];
 function drawStroke(ctx, s) {
   ctx.strokeStyle = s.color;
@@ -528,15 +905,15 @@ function drawStroke(ctx, s) {
   }
 }
 function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
-  const canvasRef = (0, import_react.useRef)(null);
-  const imgRef = (0, import_react.useRef)(null);
-  const [ready, setReady] = (0, import_react.useState)(false);
-  const [tool, setTool] = (0, import_react.useState)("pen");
-  const [color, setColor] = (0, import_react.useState)(PALETTE[0]);
-  const [strokeWidth, setStrokeWidth] = (0, import_react.useState)(4);
-  const [strokes, setStrokes] = (0, import_react.useState)([]);
-  const [currentStroke, setCurrentStroke] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
+  const canvasRef = (0, import_react2.useRef)(null);
+  const imgRef = (0, import_react2.useRef)(null);
+  const [ready, setReady] = (0, import_react2.useState)(false);
+  const [tool, setTool] = (0, import_react2.useState)("pen");
+  const [color, setColor] = (0, import_react2.useState)(PALETTE[0]);
+  const [strokeWidth, setStrokeWidth] = (0, import_react2.useState)(4);
+  const [strokes, setStrokes] = (0, import_react2.useState)([]);
+  const [currentStroke, setCurrentStroke] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     const img = new Image();
     img.onload = () => {
       imgRef.current = img;
@@ -549,7 +926,7 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
     };
     img.src = imageSrc;
   }, [imageSrc]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!ready) return;
     const canvas = canvasRef.current;
     const img = imgRef.current;
@@ -594,7 +971,7 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
   const handleSave = () => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    onSave(canvas.toDataURL("image/jpeg", 0.85));
+    onSave(encodeScreenshot(canvas));
   };
   const iconBtn = (active = false) => ({
     width: "30px",
@@ -784,8 +1161,6 @@ function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
     }
   );
 }
-
-// src/shortcut.ts
 var GLITCHGRAB_SHORTCUT = "Ctrl+Shift+G";
 var GLITCHGRAB_SHORTCUT_MAC = "\u2318\u21E7G";
 function isMac() {
@@ -799,12 +1174,38 @@ function isMac() {
 function getShortcutLabel() {
   return isMac() ? GLITCHGRAB_SHORTCUT_MAC : GLITCHGRAB_SHORTCUT;
 }
-function matchesShortcut(e) {
-  return (e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g";
-}
-
-// src/report-dialog.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+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(",");
 function useIsDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -917,6 +1318,98 @@ function detectHostAccent() {
     return null;
   }
 }
+function initialsOf(name) {
+  return name.trim().split(/\s+/).slice(0, 2).map((part) => {
+    var _a, _b;
+    return (_b = (_a = part[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
+  }).join("");
+}
+function ReporterChip({
+  reporter,
+  t
+}) {
+  var _a;
+  const [avatarFailed, setAvatarFailed] = (0, import_react.useState)(false);
+  const avatarUrl = (reporter == null ? void 0 : reporter.avatarUrl) || "";
+  (0, import_react.useEffect)(() => {
+    setAvatarFailed(false);
+  }, [avatarUrl]);
+  const name = ((_a = reporter == null ? void 0 : reporter.name) == null ? void 0 : _a.trim()) || "";
+  const isAnonymous = !name;
+  const initials = isAnonymous ? "" : initialsOf(name);
+  const label = isAnonymous ? "Anonymous" : name;
+  const title = isAnonymous ? "No reporter identity was passed to Glitchgrab \u2014 this report won't be attributed to anyone" : [name, reporter == null ? void 0 : reporter.email, reporter == null ? void 0 : reporter.role].filter(Boolean).join(" \xB7 ");
+  const showAvatarImage = !!avatarUrl && !avatarFailed;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      title,
+      style: { display: "flex", alignItems: "center", gap: "6px", minWidth: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: "18px",
+              height: "18px",
+              flexShrink: 0,
+              borderRadius: "50%",
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "8px",
+              fontWeight: 700,
+              letterSpacing: "0.02em",
+              background: isAnonymous ? t.inputBg : t.accent,
+              color: isAnonymous ? t.textMuted : t.accentText,
+              border: `1px solid ${isAnonymous ? t.inputBorder : "transparent"}`
+            },
+            children: showAvatarImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "img",
+              {
+                src: avatarUrl,
+                alt: "",
+                width: 18,
+                height: 18,
+                onError: () => setAvatarFailed(true),
+                style: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ) : initials ? initials : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 16 16", fill: "none", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "5.5", r: "2.75", stroke: "currentColor", strokeWidth: "1.4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "path",
+                {
+                  d: "M2.75 13.5c0-2.35 2.35-3.75 5.25-3.75s5.25 1.4 5.25 3.75",
+                  stroke: "currentColor",
+                  strokeWidth: "1.4",
+                  strokeLinecap: "round"
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              color: t.textMuted,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              label,
+              (reporter == null ? void 0 : reporter.role) ? ` \xB7 ${reporter.role}` : ""
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function getTheme(dark) {
   const hostAccent = detectHostAccent();
   const defaults = dark ? {
@@ -986,48 +1479,91 @@ 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;
+  }
+}
 function ReportDialog({
   report,
+  sendFeedback: sendFeedback2,
   enhanceText: enhanceText2,
   transcribeAudio: transcribeAudio2,
   types,
-  showSeverity = true
+  showSeverity = true,
+  captureScreenshot = captureViaHtml2Canvas,
+  reporter
 }) {
-  const [isEnhancing, setIsEnhancing] = (0, import_react2.useState)(false);
-  const [isEnhanced, setIsEnhanced] = (0, import_react2.useState)(false);
-  const [originalDescription, setOriginalDescription] = (0, import_react2.useState)(
+  const [isEnhancing, setIsEnhancing] = (0, import_react.useState)(false);
+  const [isEnhanced, setIsEnhanced] = (0, import_react.useState)(false);
+  const [originalDescription, setOriginalDescription] = (0, import_react.useState)(
     null
   );
-  const [isListening, setIsListening] = (0, import_react2.useState)(false);
-  const [isTranscribing, setIsTranscribing] = (0, import_react2.useState)(false);
-  const [voiceError, setVoiceError] = (0, import_react2.useState)(null);
-  const [screenshotDragOver, setScreenshotDragOver] = (0, import_react2.useState)(false);
-  const [mounted, setMounted] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
+  const [isListening, setIsListening] = (0, import_react.useState)(false);
+  const [isTranscribing, setIsTranscribing] = (0, import_react.useState)(false);
+  const [voiceError, setVoiceError] = (0, import_react.useState)(null);
+  const [screenshotDragOver, setScreenshotDragOver] = (0, import_react.useState)(false);
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
     setMounted(true);
   }, []);
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const [description, setDescription] = (0, import_react2.useState)("");
-  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
-  const [submitted, setSubmitted] = (0, import_react2.useState)(false);
-  const [screenshots, setScreenshots] = (0, import_react2.useState)([]);
-  const [attachments, setAttachments] = (0, import_react2.useState)([]);
-  const [previewIndex, setPreviewIndex] = (0, import_react2.useState)(null);
-  const [annotatingIndex, setAnnotatingIndex] = (0, import_react2.useState)(null);
-  const fileInputRef = (0, import_react2.useRef)(null);
-  const modalRef = (0, import_react2.useRef)(null);
-  const previewImgRef = (0, import_react2.useRef)(null);
-  const textareaRef = (0, import_react2.useRef)(null);
-  const recognitionRef = (0, import_react2.useRef)(null);
-  const voiceBaseRef = (0, import_react2.useRef)("");
-  const usingWebSpeechRef = (0, import_react2.useRef)(false);
-  const textBeforeVoiceRef = (0, import_react2.useRef)("");
-  const mediaRecorderRef = (0, import_react2.useRef)(null);
-  const streamRef = (0, import_react2.useRef)(null);
-  const sarvamChunksRef = (0, import_react2.useRef)([]);
-  const spaceTimerRef = (0, import_react2.useRef)(null);
-  const isPushToTalkRef = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [description, setDescription] = (0, import_react.useState)("");
+  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react.useState)(false);
+  const [screenshots, setScreenshots] = (0, import_react.useState)([]);
+  const [attachments, setAttachments] = (0, import_react.useState)([]);
+  const [previewIndex, setPreviewIndex] = (0, import_react.useState)(null);
+  const [annotatingIndex, setAnnotatingIndex] = (0, import_react.useState)(null);
+  const [previewZoomed, setPreviewZoomed] = (0, import_react.useState)(false);
+  const [previewNatural, setPreviewNatural] = (0, import_react.useState)(null);
+  const previewScrollRef = (0, import_react.useRef)(null);
+  const previewImgElRef = (0, import_react.useRef)(null);
+  const panRef = (0, import_react.useRef)(null);
+  const zoomAnchorRef = (0, import_react.useRef)(null);
+  const resetPreviewZoom = () => {
+    setPreviewZoomed(false);
+    setPreviewNatural(null);
+    zoomAnchorRef.current = null;
+  };
+  const openPreview = (i) => {
+    resetPreviewZoom();
+    setPreviewIndex(i);
+  };
+  const closePreview = () => {
+    resetPreviewZoom();
+    setPreviewIndex(null);
+  };
+  const fileInputRef = (0, import_react.useRef)(null);
+  const modalRef = (0, import_react.useRef)(null);
+  const previewImgRef = (0, import_react.useRef)(null);
+  const textareaRef = (0, import_react.useRef)(null);
+  const recognitionRef = (0, import_react.useRef)(null);
+  const voiceBaseRef = (0, import_react.useRef)("");
+  const usingWebSpeechRef = (0, import_react.useRef)(false);
+  const textBeforeVoiceRef = (0, import_react.useRef)("");
+  const mediaRecorderRef = (0, import_react.useRef)(null);
+  const streamRef = (0, import_react.useRef)(null);
+  const sarvamChunksRef = (0, import_react.useRef)([]);
+  const spaceTimerRef = (0, import_react.useRef)(null);
+  const isPushToTalkRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
     if (!isOpen) return;
     const dialogs = Array.from(
       document.querySelectorAll(
@@ -1037,22 +1573,69 @@ function ReportDialog({
     dialogs.forEach((d) => d.setAttribute("inert", ""));
     return () => dialogs.forEach((d) => d.removeAttribute("inert"));
   }, [isOpen]);
-  const [step, setStep] = (0, import_react2.useState)(1);
-  const [reportType, setReportType] = (0, import_react2.useState)("BUG");
-  const [severity, setSeverity] = (0, import_react2.useState)("medium");
-  const [validationError, setValidationError] = (0, import_react2.useState)(null);
-  const [placeholderIdx, setPlaceholderIdx] = (0, import_react2.useState)(0);
+  const [step, setStep] = (0, import_react.useState)(1);
+  const [reportType, setReportType] = (0, import_react.useState)("BUG");
+  const [severity, setSeverity] = (0, import_react.useState)("medium");
+  const [validationError, setValidationError] = (0, import_react.useState)(null);
+  const [placeholderIdx, setPlaceholderIdx] = (0, import_react.useState)(0);
+  const [rating, setRating] = (0, import_react.useState)(0);
+  const [hoveredStar, setHoveredStar] = (0, import_react.useState)(0);
+  const isRating = reportType === "RATING";
+  const submitDisabled = isSubmitting || (isRating ? rating < 1 : !description.trim());
   const availableTypes = types != null ? types : [
     "BUG",
     "FEATURE_REQUEST",
     "UI_IMPROVEMENT",
     "PERFORMANCE",
     "SECURITY",
-    "QUESTION",
-    "OTHER"
+    "QUESTION"
   ];
+  const tileGridRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!isOpen || step !== 1) return;
+    const onKey = (e) => {
+      const el = e.target;
+      const tag = el == null ? void 0 : el.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || (el == null ? void 0 : el.isContentEditable)) return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (sendFeedback2 && /^[1-5]$/.test(e.key)) {
+        e.preventDefault();
+        setRating(Number(e.key));
+        setReportType("RATING");
+        setStep(2);
+        return;
+      }
+      const letter = e.key.toLowerCase();
+      if (!/^[a-z]$/.test(letter)) return;
+      const match = availableTypes.find(
+        (type) => getTypeLabel(type).toLowerCase().startsWith(letter)
+      );
+      if (match) {
+        e.preventDefault();
+        setReportType(match);
+        setStep(2);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isOpen, step, sendFeedback2, availableTypes.join(",")]);
+  const handleTileGridKeyDown = (e) => {
+    var _a, _b, _c;
+    const keys = ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"];
+    if (!keys.includes(e.key)) return;
+    const tiles = Array.from(
+      (_b = (_a = tileGridRef.current) == null ? void 0 : _a.querySelectorAll("button[data-gg-type]")) != null ? _b : []
+    );
+    if (tiles.length === 0) return;
+    e.preventDefault();
+    const current = tiles.indexOf(document.activeElement);
+    const delta = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : e.key === "ArrowDown" ? 2 : -2;
+    const next = current === -1 ? 0 : Math.min(Math.max(current + delta, 0), tiles.length - 1);
+    (_c = tiles[next]) == null ? void 0 : _c.focus();
+  };
   const isDark = useIsDark();
   const t = getTheme(isDark);
+  const canZoomPreview = previewNatural !== null && typeof window !== "undefined" && (previewNatural.w > window.innerWidth - 32 || previewNatural.h > window.innerHeight - 80);
   const handleFileUpload = (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
@@ -1077,56 +1660,17 @@ function ReportDialog({
       reader.readAsDataURL(file);
     });
   };
-  const retakeScreenshot = async () => {
-    setPreviewIndex(null);
-    setIsOpen(false);
-    setScreenshots([]);
-    await new Promise((r) => setTimeout(r, 300));
-    try {
-      const { default: html2canvas } = await import("html2canvas-pro");
-      const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        logging: false,
-        useCORS: true,
-        allowTaint: true,
-        x: window.scrollX,
-        y: window.scrollY,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        windowWidth: window.innerWidth,
-        windowHeight: window.innerHeight
-      });
-      setScreenshots([canvas.toDataURL("image/jpeg", 0.6)]);
-    } catch (e) {
-    }
-    setIsOpen(true);
-  };
   const handleOpen = async () => {
     setSubmitted(false);
     if (availableTypes.length === 1) {
       setReportType(availableTypes[0]);
       setStep(2);
     }
-    try {
-      const { default: html2canvas } = await import("html2canvas-pro");
-      const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        logging: false,
-        useCORS: true,
-        allowTaint: true,
-        x: window.scrollX,
-        y: window.scrollY,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        windowWidth: window.innerWidth,
-        windowHeight: window.innerHeight
-      });
-      setScreenshots([canvas.toDataURL("image/jpeg", 0.6)]);
-    } catch (e) {
-    }
+    const shot = await captureScreenshot();
+    if (shot) setScreenshots([shot]);
     setIsOpen(true);
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     const handler = (e) => {
       if (isOpen) return;
       const detail = e.detail;
@@ -1140,54 +1684,115 @@ function ReportDialog({
     window.addEventListener("glitchgrab:open-report", handler);
     return () => window.removeEventListener("glitchgrab:open-report", handler);
   }, [isOpen, handleOpen]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
-        if (previewIndex !== null) setPreviewIndex(null);
+        if (previewZoomed) setPreviewZoomed(false);
+        else if (previewIndex !== null) closePreview();
         else handleClose();
       }
     };
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
-  }, [isOpen, previewIndex]);
-  (0, import_react2.useEffect)(() => {
+  }, [isOpen, previewIndex, previewZoomed]);
+  (0, import_react.useEffect)(() => {
     if (previewIndex === null || annotatingIndex !== null) return;
     const handlePointerDown = (e) => {
       var _a;
       if (!((_a = previewImgRef.current) == null ? void 0 : _a.contains(e.target))) {
-        setPreviewIndex(null);
+        closePreview();
       }
     };
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () => document.removeEventListener("pointerdown", handlePointerDown, true);
   }, [previewIndex, annotatingIndex]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
+    var _a;
+    const el = previewScrollRef.current;
+    if (!previewZoomed || !el) return;
+    const anchor = (_a = zoomAnchorRef.current) != null ? _a : { fx: 0.5, fy: 0.5 };
+    el.scrollLeft = anchor.fx * el.scrollWidth - el.clientWidth / 2;
+    el.scrollTop = anchor.fy * el.scrollHeight - el.clientHeight / 2;
+  }, [previewZoomed]);
+  const togglePreviewZoom = (e) => {
+    var _a;
+    e.stopPropagation();
+    if ((_a = panRef.current) == null ? void 0 : _a.moved) return;
+    if (!previewZoomed && !canZoomPreview) return;
+    const img = previewImgElRef.current;
+    if (!previewZoomed && img) {
+      const rect = img.getBoundingClientRect();
+      zoomAnchorRef.current = {
+        fx: (e.clientX - rect.left) / rect.width,
+        fy: (e.clientY - rect.top) / rect.height
+      };
+    }
+    setPreviewZoomed((z) => !z);
+  };
+  const handlePanStart = (e) => {
+    const el = previewScrollRef.current;
+    if (!previewZoomed || !el) return;
+    panRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      left: el.scrollLeft,
+      top: el.scrollTop,
+      moved: false
+    };
+    el.setPointerCapture(e.pointerId);
+  };
+  const handlePanMove = (e) => {
+    const el = previewScrollRef.current;
+    const start = panRef.current;
+    if (!el || !start) return;
+    const dx = e.clientX - start.x;
+    const dy = e.clientY - start.y;
+    if (Math.abs(dx) > 4 || Math.abs(dy) > 4) start.moved = true;
+    el.scrollLeft = start.left - dx;
+    el.scrollTop = start.top - dy;
+  };
+  const handlePanEnd = (e) => {
+    var _a, _b;
+    const el = previewScrollRef.current;
+    const moved = (_b = (_a = panRef.current) == null ? void 0 : _a.moved) != null ? _b : false;
+    try {
+      el == null ? void 0 : el.releasePointerCapture(e.pointerId);
+    } catch (e2) {
+    }
+    if (moved) {
+      panRef.current = { x: 0, y: 0, left: 0, top: 0, moved: true };
+      setTimeout(() => {
+        panRef.current = null;
+      }, 0);
+    } else {
+      panRef.current = null;
+    }
+  };
+  (0, import_react.useEffect)(() => {
     if (!isOpen) return;
     const handlePaste = (e) => {
       var _a;
       try {
         const items = (_a = e.clipboardData) == null ? void 0 : _a.items;
         if (!items) return;
-        let matched = false;
+        const pasted = [];
         for (let i = 0; i < items.length; i++) {
-          if (items[i].type.startsWith("image/")) {
-            const file = items[i].getAsFile();
-            if (!file) continue;
-            matched = true;
-            const reader = new FileReader();
-            reader.onload = () => setScreenshots((prev) => [...prev, reader.result]);
-            reader.readAsDataURL(file);
-          }
+          if (items[i].kind !== "file") continue;
+          const file = items[i].getAsFile();
+          if (file) pasted.push(file);
+        }
+        if (pasted.length > 0) {
+          e.preventDefault();
+          addFiles(pasted);
         }
-        if (matched) e.preventDefault();
       } catch (e2) {
       }
     };
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
   }, [isOpen]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!isOpen || !transcribeAudio2) return;
     const id = setInterval(() => {
       setPlaceholderIdx((i) => (i + 1) % 2);
@@ -1226,6 +1831,8 @@ function ReportDialog({
     stopVoice();
     setIsOpen(false);
     setStep(1);
+    setRating(0);
+    setHoveredStar(0);
     setReportType("BUG");
     setSeverity("medium");
     setValidationError(null);
@@ -1371,7 +1978,30 @@ function ReportDialog({
   };
   const handleSubmit = async () => {
     try {
-      if (!description.trim() || isSubmitting) return;
+      if (isSubmitting) return;
+      if (isRating) {
+        if (rating < 1) {
+          setValidationError("Pick a star rating first.");
+          return;
+        }
+        if (!sendFeedback2) return;
+        setIsSubmitting(true);
+        const result2 = await sendFeedback2(rating, description.trim() || void 0);
+        if (result2 == null ? void 0 : result2.success) {
+          setSubmitted(true);
+          setDescription("");
+          setRating(0);
+          setTimeout(() => {
+            setSubmitted(false);
+            handleClose();
+          }, 2e3);
+        } else {
+          setValidationError("Could not send \u2014 please try again.");
+        }
+        setIsSubmitting(false);
+        return;
+      }
+      if (!description.trim()) return;
       const qualityError = isLowQualityText(description);
       if (qualityError) {
         setValidationError(qualityError);
@@ -1386,6 +2016,8 @@ function ReportDialog({
         metadata.severity = severity;
       }
       const result = await report(
+        // The RATING branch returned above, so anything reaching here is a real
+        // ReportType — the widened tile union can't leak into the report API.
         reportType,
         description.trim(),
         Object.keys(metadata).length > 0 ? metadata : void 0
@@ -1429,6 +2061,18 @@ function ReportDialog({
           button[data-gg-type="SECURITY"] > svg{animation:gg-shield-pulse 2.2s ease-in-out infinite;transform-origin:top}
           button[data-gg-type="QUESTION"] > svg{animation:gg-question-shake 2s ease-in-out infinite}
           button[data-gg-type="OTHER"] > svg{animation:gg-chat-tilt 2.2s ease-in-out infinite}
+          /* Lift on hover, settle on press. Cheaper and steadier than doing it
+             through React state, and :focus-visible keeps the ring off mouse users
+             while leaving it for the arrow-key path. */
+          button[data-gg-type]{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
+          button[data-gg-type]:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
+          button[data-gg-type]:active{transform:translateY(0) scale(.985);box-shadow:none}
+          button[data-gg-type]:focus-visible{outline:2px solid ${t.accent};outline-offset:2px}
+          @keyframes gg-star-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
+          button[data-gg-star]{transition:transform .12s ease}
+          button[data-gg-star]:hover{transform:scale(1.18)}
+          button[data-gg-star]:active{transform:scale(.94)}
+          button[data-gg-star]:focus-visible{outline:2px solid #f59e0b;outline-offset:3px;border-radius:4px}
         ` }),
       document.body
     ),
@@ -1460,7 +2104,7 @@ function ReportDialog({
               style: {
                 position: "relative",
                 zIndex: 2147483647,
-                width: "340px",
+                width: "420px",
                 maxWidth: "calc(100% - 32px)",
                 maxHeight: "calc(100dvh - 32px)",
                 display: "flex",
@@ -1670,7 +2314,7 @@ function ReportDialog({
                   "div",
                   {
                     style: {
-                      padding: "16px",
+                      padding: "18px",
                       overflowY: "auto",
                       flex: "1 1 auto",
                       minHeight: 0
@@ -1691,13 +2335,145 @@ function ReportDialog({
                         ]
                       }
                     ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            border: "1px solid rgba(245,158,11,0.35)",
+                            background: "rgba(245,158,11,0.07)",
+                            borderRadius: "10px",
+                            padding: "14px 16px",
+                            marginBottom: "16px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            gap: "12px",
+                            flexWrap: "wrap"
+                          },
+                          onMouseLeave: () => setHoveredStar(0),
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "span",
+                              {
+                                style: { fontSize: "13px", fontWeight: 600, color: t.text },
+                                children: "How are we doing?"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { display: "flex", gap: "4px" }, children: [1, 2, 3, 4, 5].map((star) => {
+                              const filled = star <= (hoveredStar || rating);
+                              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-gg-star": star,
+                                  "aria-label": `${star} star${star > 1 ? "s" : ""}`,
+                                  onMouseEnter: () => setHoveredStar(star),
+                                  onFocus: () => setHoveredStar(star),
+                                  onClick: () => {
+                                    setRating(star);
+                                    setReportType("RATING");
+                                    setStep(2);
+                                  },
+                                  style: {
+                                    border: "none",
+                                    background: "transparent",
+                                    padding: 0,
+                                    cursor: "pointer",
+                                    lineHeight: 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "26", height: "26", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "path",
+                                    {
+                                      d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
+                                      fill: filled ? "#f59e0b" : "transparent",
+                                      stroke: "#f59e0b",
+                                      strokeWidth: "1.5",
+                                      strokeLinejoin: "round"
+                                    }
+                                  ) })
+                                },
+                                star
+                              );
+                            }) })
+                          ]
+                        }
+                      ),
+                      step === 1 && sendFeedback2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            marginBottom: "16px"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1, height: "1px", background: t.border } }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "or report something" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { flex: 1, height: "1px", background: t.border } })
+                          ]
+                        }
+                      ),
+                      step === 1 && screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            marginBottom: "14px",
+                            padding: "8px 10px",
+                            border: `1px solid ${t.inputBorder}`,
+                            borderRadius: "8px",
+                            background: t.inputBg
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "img",
+                              {
+                                src: screenshots[0],
+                                alt: "",
+                                style: {
+                                  width: "34px",
+                                  height: "24px",
+                                  objectFit: "cover",
+                                  borderRadius: "4px",
+                                  border: `1px solid ${t.border}`,
+                                  flexShrink: 0
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted, flex: 1 }, children: "Screenshot attached" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => setScreenshots([]),
+                                "aria-label": "Remove screenshot",
+                                style: {
+                                  border: "none",
+                                  background: "transparent",
+                                  color: t.textMuted,
+                                  cursor: "pointer",
+                                  fontSize: "15px",
+                                  lineHeight: 1,
+                                  padding: "2px 4px"
+                                },
+                                children: "\xD7"
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
+                          ref: tileGridRef,
+                          onKeyDown: handleTileGridKeyDown,
                           style: {
                             display: "grid",
-                            gridTemplateColumns: "1fr 1fr",
-                            gap: "8px"
+                            gridTemplateColumns: "1fr 1fr 1fr",
+                            gap: "10px"
                           },
                           children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "button",
@@ -1712,15 +2488,14 @@ function ReportDialog({
                                 display: "flex",
                                 flexDirection: "column",
                                 alignItems: "center",
-                                gap: "8px",
-                                padding: "16px 8px",
+                                gap: "9px",
+                                padding: "18px 10px",
                                 borderRadius: "8px",
                                 border: `1px solid ${t.inputBorder}`,
                                 background: t.inputBg,
                                 cursor: "pointer",
                                 color: t.text,
-                                fontFamily: "inherit",
-                                transition: "border-color 0.15s ease"
+                                fontFamily: "inherit"
                               },
                               onMouseEnter: (e) => {
                                 e.currentTarget.style.borderColor = t.accent;
@@ -1729,17 +2504,17 @@ function ReportDialog({
                                 e.currentTarget.style.borderColor = t.inputBorder;
                               },
                               children: [
-                                getTypeIcon(type, t.accent),
-                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
+                                getTypeIcon(type, t.accent, 22),
                                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "span",
                                   {
                                     style: {
-                                      fontSize: "11px",
-                                      color: t.textMuted,
-                                      lineHeight: "1.3"
+                                      fontSize: "12px",
+                                      fontWeight: 600,
+                                      textAlign: "center",
+                                      lineHeight: "1.2"
                                     },
-                                    children: getTypeSubtitle(type)
+                                    children: getTypeLabel(type)
                                   }
                                 )
                               ]
@@ -1749,6 +2524,77 @@ function ReportDialog({
                         }
                       ),
                       step === 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setStep(1),
+                            style: {
+                              display: "inline-flex",
+                              alignItems: "center",
+                              gap: "6px",
+                              marginBottom: "10px",
+                              padding: "4px 10px 4px 8px",
+                              borderRadius: "999px",
+                              border: `1px solid ${isRating ? "rgba(245,158,11,0.4)" : t.inputBorder}`,
+                              background: isRating ? "rgba(245,158,11,0.1)" : t.inputBg,
+                              color: t.text,
+                              fontSize: "11px",
+                              fontWeight: 600,
+                              fontFamily: "inherit",
+                              cursor: "pointer"
+                            },
+                            children: [
+                              getTypeIcon(reportType, isRating ? "#f59e0b" : t.accent, 13),
+                              getTypeLabel(reportType),
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: t.textMuted, fontWeight: 400 }, children: "\xB7 change" })
+                            ]
+                          }
+                        ),
+                        isRating && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              gap: "6px",
+                              marginBottom: "12px"
+                            },
+                            onMouseLeave: () => setHoveredStar(0),
+                            children: [1, 2, 3, 4, 5].map((star) => {
+                              const filled = star <= (hoveredStar || rating);
+                              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  "aria-label": `${star} star${star > 1 ? "s" : ""}`,
+                                  onClick: () => {
+                                    setRating(star);
+                                    if (validationError) setValidationError(null);
+                                  },
+                                  onMouseEnter: () => setHoveredStar(star),
+                                  style: {
+                                    border: "none",
+                                    background: "transparent",
+                                    padding: 0,
+                                    cursor: "pointer",
+                                    lineHeight: 0
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "30", height: "30", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "path",
+                                    {
+                                      d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
+                                      fill: filled ? "#f59e0b" : "transparent",
+                                      stroke: filled ? "#f59e0b" : t.inputBorder,
+                                      strokeWidth: "1.5",
+                                      strokeLinejoin: "round"
+                                    }
+                                  ) })
+                                },
+                                star
+                              );
+                            })
+                          }
+                        ),
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "textarea",
@@ -2147,7 +2993,7 @@ function ReportDialog({
                             children: voiceError
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                        !isRating && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "span",
                             {
@@ -2187,7 +3033,7 @@ function ReportDialog({
                                       {
                                         src,
                                         alt: `Screenshot ${i + 1}`,
-                                        onClick: () => setPreviewIndex(i),
+                                        onClick: () => openPreview(i),
                                         style: {
                                           width: "100%",
                                           height: "100%",
@@ -2591,37 +3437,54 @@ function ReportDialog({
                           {
                             type: "button",
                             onClick: handleSubmit,
-                            disabled: !description.trim() || isSubmitting,
+                            disabled: submitDisabled,
                             style: {
                               marginTop: "12px",
                               width: "100%",
                               padding: "10px",
                               borderRadius: "8px",
                               border: "none",
-                              backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
-                              color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
+                              backgroundColor: submitDisabled ? t.bgSecondary : t.accent,
+                              color: submitDisabled ? t.textMuted : t.accentText,
                               fontSize: "14px",
                               fontWeight: 600,
-                              cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
+                              cursor: submitDisabled ? "not-allowed" : "pointer",
                               fontFamily: "inherit",
                               transition: "background-color 0.15s ease"
                             },
-                            children: isSubmitting ? "Sending..." : "Send Report"
+                            children: isSubmitting ? "Sending..." : isRating ? "Send Rating" : "Send Report"
                           }
                         )
                       ] })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "div",
                   {
                     style: {
                       padding: "8px 16px 10px",
                       borderTop: `1px solid ${t.border}`,
-                      textAlign: "center"
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: "12px"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReporterChip, { reporter, t }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: t.textMuted,
+                            whiteSpace: "nowrap",
+                            flexShrink: 0
+                          },
+                          children: "Powered by Glitchgrab"
+                        }
+                      )
+                    ]
                   }
                 )
               ]
@@ -2636,7 +3499,7 @@ function ReportDialog({
       {
         ref: fileInputRef,
         type: "file",
-        accept: "image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv",
+        accept: ATTACHMENT_ACCEPT,
         multiple: true,
         onChange: handleFileUpload,
         style: { display: "none" }
@@ -2660,7 +3523,7 @@ function ReportDialog({
           },
           onClick: (e) => {
             e.stopPropagation();
-            setPreviewIndex(null);
+            closePreview();
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
@@ -2668,22 +3531,59 @@ function ReportDialog({
               "div",
               {
                 ref: previewImgRef,
-                style: { position: "relative", maxWidth: "100%" },
+                style: {
+                  position: "relative",
+                  display: "flex",
+                  maxWidth: "100%",
+                  maxHeight: "calc(100vh - 80px)"
+                },
                 onClick: (e) => e.stopPropagation(),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "img",
+                    "div",
                     {
-                      src: screenshots[previewIndex],
-                      alt: "Screenshot preview",
-                      style: {
-                        maxWidth: "100%",
-                        maxHeight: "calc(100vh - 80px)",
+                      ref: previewScrollRef,
+                      onPointerDown: handlePanStart,
+                      onPointerMove: handlePanMove,
+                      onPointerUp: handlePanEnd,
+                      onPointerCancel: handlePanEnd,
+                      onClick: togglePreviewZoom,
+                      style: previewZoomed ? {
+                        // Fill the overlay so there is room to pan around a
+                        // full-resolution screenshot.
+                        width: "calc(100vw - 32px)",
+                        height: "calc(100vh - 80px)",
+                        overflow: "auto",
                         borderRadius: "8px",
-                        objectFit: "contain",
-                        cursor: "default",
-                        display: "block"
-                      }
+                        touchAction: "none",
+                        cursor: "grab"
+                      } : { maxWidth: "100%", lineHeight: 0 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "img",
+                        {
+                          ref: previewImgElRef,
+                          src: screenshots[previewIndex],
+                          alt: "Screenshot preview",
+                          onLoad: (e) => setPreviewNatural({
+                            w: e.currentTarget.naturalWidth,
+                            h: e.currentTarget.naturalHeight
+                          }),
+                          style: previewZoomed ? {
+                            // Natural size — one image pixel per CSS pixel.
+                            maxWidth: "none",
+                            maxHeight: "none",
+                            display: "block",
+                            cursor: "zoom-out"
+                          } : {
+                            maxWidth: "100%",
+                            maxHeight: "calc(100vh - 80px)",
+                            borderRadius: "8px",
+                            objectFit: "contain",
+                            cursor: canZoomPreview ? "zoom-in" : "default",
+                            display: "block"
+                          }
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -2747,7 +3647,11 @@ function ReportDialog({
                       color: t.textMuted,
                       fontSize: "12px"
                     },
-                    children: screenshots.length > 1 ? `${previewIndex + 1} / ${screenshots.length} \xB7 Click outside to close` : "Click outside to close"
+                    children: [
+                      screenshots.length > 1 ? `${previewIndex + 1} / ${screenshots.length}` : null,
+                      canZoomPreview ? previewZoomed ? "Drag to pan \xB7 click image to fit" : "Click image to zoom to full size" : null,
+                      previewZoomed ? "Esc to fit" : "Click outside to close"
+                    ].filter(Boolean).join(" \xB7 ")
                   }
                 )
               }
@@ -2777,6 +3681,8 @@ function ReportDialog({
 }
 function getTypeLabel(type) {
   switch (type) {
+    case "RATING":
+      return "Rating";
     case "BUG":
       return "Bug Report";
     case "FEATURE_REQUEST":
@@ -2793,25 +3699,8 @@ function getTypeLabel(type) {
       return "Other";
   }
 }
-function getTypeSubtitle(type) {
-  switch (type) {
-    case "BUG":
-      return "Something isn't working";
-    case "FEATURE_REQUEST":
-      return "Suggest an improvement";
-    case "UI_IMPROVEMENT":
-      return "Something looks off";
-    case "PERFORMANCE":
-      return "Something is slow";
-    case "SECURITY":
-      return "Report a security concern";
-    case "QUESTION":
-      return "Ask a question";
-    case "OTHER":
-      return "General feedback";
-  }
-}
 function getPlaceholder(type, idx = 0, hasVoice = false) {
+  if (type === "RATING") return "What made it good \u2014 or what let you down? (optional)";
   if (hasVoice && idx === 1) return "Hold Space to speak \u2014 we'll transcribe it";
   switch (type) {
     case "BUG":
@@ -2839,6 +3728,16 @@ function getTypeIcon(type, color, size = 24) {
     style: { flexShrink: 0 }
   };
   switch (type) {
+    case "RATING":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M12 3l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9L12 3z",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ) });
     case "BUG":
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
@@ -2931,6 +3830,112 @@ function getTypeIcon(type, color, size = 24) {
   }
 }
 
+// src/rejection.ts
+var DETAILS_MAX_LENGTH = 1e3;
+var MESSAGE_MAX_LENGTH = 200;
+function isUnactionableRejection(description) {
+  if (description.stack) return false;
+  const message = description.message.trim();
+  return message === "" || message === "[object Object]";
+}
+function readString(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  if (trimmed === "" || trimmed === "[object Object]") return void 0;
+  return trimmed.slice(0, MESSAGE_MAX_LENGTH);
+}
+function readScalar(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return readString(value);
+}
+function readStack(reason) {
+  try {
+    const stack = reason == null ? void 0 : reason.stack;
+    return typeof stack === "string" && stack.trim() !== "" ? stack : void 0;
+  } catch (e) {
+    return void 0;
+  }
+}
+function serialize(reason) {
+  try {
+    const seen2 = /* @__PURE__ */ new WeakSet();
+    const json = JSON.stringify(reason, (_key, value) => {
+      if (typeof value === "bigint") return `${value}n`;
+      if (typeof value === "object" && value !== null) {
+        if (seen2.has(value)) return "[Circular]";
+        seen2.add(value);
+      }
+      return value;
+    });
+    if (!json || json === "{}" || json === "null") return void 0;
+    return json.slice(0, DETAILS_MAX_LENGTH);
+  } catch (e) {
+    return void 0;
+  }
+}
+var SHAPE_MAX_KEYS = 5;
+function describeShape(reason) {
+  try {
+    const keys = Object.keys(reason);
+    if (keys.length === 0) return "";
+    const listed = keys.slice(0, SHAPE_MAX_KEYS).join(", ");
+    const suffix = keys.length > SHAPE_MAX_KEYS ? ", \u2026" : "";
+    return `Rejected object: ${listed}${suffix}`.slice(0, MESSAGE_MAX_LENGTH);
+  } catch (e) {
+    return "";
+  }
+}
+function describeRejection(reason) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  try {
+    if (reason instanceof Error) {
+      return {
+        message: reason.message || reason.name || "",
+        stack: reason.stack
+      };
+    }
+    const stack = readStack(reason);
+    if (typeof reason === "string") {
+      return { message: (_a = readString(reason)) != null ? _a : "", stack };
+    }
+    if (typeof reason === "number" || typeof reason === "boolean") {
+      return { message: String(reason), stack };
+    }
+    if (reason === null || reason === void 0) {
+      return { message: "" };
+    }
+    const source = reason;
+    const nestedError = source.error;
+    const message = (_h = (_g = (_f = (_e = (_d = (_c = (_b = readString(source.message)) != null ? _b : readString(nestedError)) != null ? _c : readString(nestedError == null ? void 0 : nestedError.message)) != null ? _d : readScalar(source.code)) != null ? _e : readString(source.name)) != null ? _f : readScalar(source.status)) != null ? _g : readString(source.statusText)) != null ? _h : "";
+    const details = serialize(reason);
+    return {
+      message: message || describeShape(reason),
+      stack,
+      details
+    };
+  } catch (e) {
+    return { message: "" };
+  }
+}
+
+// src/shortcut.ts
+var GLITCHGRAB_SHORTCUT2 = "Ctrl+Shift+G";
+var GLITCHGRAB_SHORTCUT_MAC2 = "\u2318\u21E7G";
+function isMac2() {
+  try {
+    if (typeof navigator === "undefined") return false;
+    return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+  } catch (e) {
+    return false;
+  }
+}
+function getShortcutLabel2() {
+  return isMac2() ? GLITCHGRAB_SHORTCUT_MAC2 : GLITCHGRAB_SHORTCUT2;
+}
+function matchesShortcut(e) {
+  return (e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g";
+}
+
 // src/provider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
@@ -2954,14 +3959,28 @@ function GlitchgrabProviderInner({
   fallback,
   types,
   showSeverity,
-  ignoreErrors
+  ignoreErrors,
+  release: release2,
+  context: appContext2,
+  responseBodyOrigins: responseBodyOrigins2
 }) {
   const visitedPagesRef = (0, import_react3.useRef)([]);
+  setRelease(release2);
+  if (appContext2) setContexts(appContext2);
+  registerCaptureConfig({
+    token,
+    baseUrl,
+    session,
+    ignoreErrors,
+    getVisitedPages: () => visitedPagesRef.current,
+    onError,
+    onReportSent
+  });
   (0, import_react3.useEffect)(() => {
     if (enableBreadcrumbs) {
-      initBreadcrumbs(maxBreadcrumbs2);
+      initBreadcrumbs(maxBreadcrumbs2, { responseBodyOrigins: responseBodyOrigins2 });
     }
-  }, [enableBreadcrumbs, maxBreadcrumbs2]);
+  }, [enableBreadcrumbs, maxBreadcrumbs2, responseBodyOrigins2 == null ? void 0 : responseBodyOrigins2.join(",")]);
   (0, import_react3.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
@@ -3009,10 +4028,7 @@ function GlitchgrabProviderInner({
       ];
       const matchesIgnore = (message) => {
         if (KNOWN_NOISE_RE.some((pattern) => pattern.test(message))) return true;
-        if (!ignoreErrors || ignoreErrors.length === 0) return false;
-        return ignoreErrors.some(
-          (pattern) => pattern instanceof RegExp ? pattern.test(message) : message.includes(pattern)
-        );
+        return matchesIgnorePatterns(message, ignoreErrors);
       };
       const handleError = (event) => {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -3030,6 +4046,7 @@ function GlitchgrabProviderInner({
           if (event.filename && EXTENSION_ORIGIN_RE.test(event.filename) || ((_a = event.error) == null ? void 0 : _a.stack) && EXTENSION_ORIGIN_RE.test(event.error.stack)) {
             return;
           }
+          incrementErrorCount();
           const context = captureContext(visitedPagesRef.current);
           const sig = computeSignature({
             errorMessage: event.message,
@@ -3050,6 +4067,7 @@ function GlitchgrabProviderInner({
             metadata: {
               timestamp: context.timestamp,
               visitedPages: JSON.stringify(context.visitedPages),
+              ...contextMetadata(context),
               filename: (_e = event.filename) != null ? _e : "",
               lineno: String((_f = event.lineno) != null ? _f : ""),
               colno: String((_g = event.colno) != null ? _g : ""),
@@ -3069,17 +4087,20 @@ function GlitchgrabProviderInner({
       const handleRejection = (event) => {
         var _a;
         try {
-          const context = captureContext(visitedPagesRef.current);
           const reason = event.reason;
-          const errMsg = reason instanceof Error ? reason.message : String(reason);
+          const description = describeRejection(reason);
+          const errMsg = description.message;
+          const errStack = description.stack;
           if (errMsg === "Script error." || errMsg === "Script error") {
             return;
           }
           if (matchesIgnore(errMsg)) {
             return;
           }
-          const errStack = reason instanceof Error ? reason.stack : void 0;
           if (errStack && EXTENSION_ORIGIN_RE.test(errStack)) return;
+          if (isUnactionableRejection(description)) return;
+          incrementErrorCount();
+          const context = captureContext(visitedPagesRef.current);
           const sig = computeSignature({
             errorMessage: errMsg,
             pageUrl: context.url,
@@ -3099,7 +4120,9 @@ function GlitchgrabProviderInner({
             metadata: {
               timestamp: context.timestamp,
               visitedPages: JSON.stringify(context.visitedPages),
+              ...contextMetadata(context),
               type: "unhandledrejection",
+              ...description.details ? { rejectionReason: description.details } : {},
               ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
               ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
               ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
@@ -3139,6 +4162,7 @@ function GlitchgrabProviderInner({
           metadata: {
             timestamp: context.timestamp,
             visitedPages: JSON.stringify(context.visitedPages),
+            ...contextMetadata(context),
             ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
             ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
             ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
@@ -3159,6 +4183,53 @@ function GlitchgrabProviderInner({
     (description, metadata) => report("BUG", description, metadata),
     [report]
   );
+  const feedback = (0, import_react3.useCallback)(
+    async (rating, message, metadata) => {
+      try {
+        const context = captureContext(visitedPagesRef.current);
+        return await sendFeedback(
+          {
+            token,
+            rating,
+            message,
+            pageUrl: context.url,
+            userAgent: context.userAgent,
+            metadata: {
+              timestamp: context.timestamp,
+              ...(session == null ? void 0 : session.userId) ? { sessionUserId: session.userId } : {},
+              ...(session == null ? void 0 : session.name) ? { sessionUserName: String(session.name) } : {},
+              ...(session == null ? void 0 : session.email) ? { sessionUserEmail: String(session.email) } : {},
+              ...(session == null ? void 0 : session.phone) ? { sessionUserPhone: String(session.phone) } : {},
+              ...metadata
+            }
+          },
+          baseUrl
+        );
+      } catch (e) {
+        return null;
+      }
+    },
+    [token, baseUrl, session]
+  );
+  const openFeedbackDialog = (0, import_react3.useCallback)(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("glitchgrab:open-report", { detail: { type: "RATING" } })
+      );
+    }
+  }, []);
+  const captureError2 = (0, import_react3.useCallback)(
+    (error, options) => {
+      captureError(error, options);
+    },
+    []
+  );
+  const setContext2 = (0, import_react3.useCallback)((key, value) => {
+    setContext(key, value);
+  }, []);
+  const setContexts2 = (0, import_react3.useCallback)((values) => {
+    setContexts(values);
+  }, []);
   const addBreadcrumb2 = (0, import_react3.useCallback)(
     (message, data) => {
       addBreadcrumb("custom", message, data);
@@ -3210,9 +4281,19 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  const [shortcutLabel, setShortcutLabel] = (0, import_react3.useState)(GLITCHGRAB_SHORTCUT);
+  const reporter = (0, import_react3.useMemo)(() => {
+    var _a;
+    if (!session) return null;
+    const avatar = (_a = session.avatarUrl) != null ? _a : session.image;
+    return {
+      name: session.name,
+      email: session.email,
+      avatarUrl: typeof avatar === "string" ? avatar : null
+    };
+  }, [session]);
+  const [shortcutLabel, setShortcutLabel] = (0, import_react3.useState)(GLITCHGRAB_SHORTCUT2);
   (0, import_react3.useEffect)(() => {
-    setShortcutLabel(getShortcutLabel());
+    setShortcutLabel(getShortcutLabel2());
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     GlitchgrabContext.Provider,
@@ -3222,6 +4303,11 @@ function GlitchgrabProviderInner({
         baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
         reportBug,
         report,
+        captureError: captureError2,
+        setContext: setContext2,
+        setContexts: setContexts2,
+        sendFeedback: feedback,
+        openFeedbackDialog,
         addBreadcrumb: addBreadcrumb2,
         openReportDialog,
         enhanceText: enhance,
@@ -3240,7 +4326,7 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportDialog, { report, sendFeedback: feedback, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity, reporter })
       ]
     }
   );
@@ -3350,6 +4436,91 @@ function ReportButton({
   );
 }
 
+// src/feedback-button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function useGlitchgrabSafe2() {
+  try {
+    return useGlitchgrab();
+  } catch (e) {
+    return null;
+  }
+}
+function FeedbackButton({
+  position = "bottom-left",
+  label = "Feedback",
+  className,
+  children
+}) {
+  var _a, _b;
+  const glitchgrab = useGlitchgrabSafe2();
+  if (!glitchgrab) return null;
+  const handleClick = () => glitchgrab.openFeedbackDialog();
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ onClick: handleClick }) });
+  }
+  const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
+  const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
+  const positionStyles = {
+    ...isLeft ? { left: "16px" } : { right: "16px" },
+    ...isTop ? { top: "16px" } : { bottom: "16px" }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className,
+      style: {
+        position: "fixed",
+        ...positionStyles,
+        zIndex: 99999,
+        padding: "10px 18px",
+        borderRadius: "24px",
+        border: "none",
+        backgroundColor: "#18181b",
+        color: "#fafafa",
+        fontSize: "14px",
+        fontWeight: 500,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        cursor: "pointer",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+        display: "flex",
+        alignItems: "center",
+        gap: "6px"
+      },
+      onMouseEnter: (e) => {
+        e.target.style.transform = "scale(1.05)";
+      },
+      onMouseLeave: (e) => {
+        e.target.style.transform = "scale(1)";
+      },
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            style: { flexShrink: 0 },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "path",
+              {
+                d: "M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3 1.1-6.5L2.6 9.3l6.5-.9L12 2.5z",
+                fill: "currentColor"
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
 // src/use-reports.ts
 var import_react5 = require("react");
 var BASE_URL = "https://glitchgrab.dev";
@@ -3455,8 +4626,70 @@ function useGlitchgrabActions({
     error
   };
 }
+
+// src/use-feedback.ts
+var import_react6 = require("react");
+var DEFAULT_BASE_URL3 = "https://glitchgrab.dev";
+function buildUrl({
+  approvedOnly,
+  userId,
+  minRating,
+  limit = 50,
+  baseUrl
+}) {
+  const params = new URLSearchParams({ limit: String(limit) });
+  if (approvedOnly) params.set("approved", "true");
+  if (userId) params.set("reporterPrimaryKey", userId);
+  if (minRating) params.set("minRating", String(minRating));
+  return `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL3}/api/v1/sdk/feedback?${params.toString()}`;
+}
+async function fetchGlitchgrabFeedback(query) {
+  var _a, _b;
+  const res = await fetch(buildUrl(query), {
+    headers: { Authorization: `Bearer ${query.token}` }
+  });
+  const data = await res.json();
+  if (!data.success) throw new Error((_a = data.error) != null ? _a : "Failed to fetch feedback");
+  return (_b = data.data) != null ? _b : [];
+}
+function useGlitchgrabFeedback(query) {
+  const { token, approvedOnly, userId, minRating, limit, baseUrl } = query;
+  const [feedback, setFeedback] = (0, import_react6.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const load = (0, import_react6.useCallback)(async () => {
+    if (!token) {
+      setIsLoading(false);
+      return;
+    }
+    setIsFetching(true);
+    setError(null);
+    try {
+      const data = await fetchGlitchgrabFeedback({
+        token,
+        approvedOnly,
+        userId,
+        minRating,
+        limit,
+        baseUrl
+      });
+      setFeedback(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Network error");
+    } finally {
+      setIsLoading(false);
+      setIsFetching(false);
+    }
+  }, [token, approvedOnly, userId, minRating, limit, baseUrl]);
+  (0, import_react6.useEffect)(() => {
+    load();
+  }, [load]);
+  return { feedback, isLoading, isFetching, error, refetch: load };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FeedbackButton,
   GLITCHGRAB_SHORTCUT,
   GLITCHGRAB_SHORTCUT_MAC,
   GlitchgrabErrorBoundary,
@@ -3465,20 +4698,28 @@ function useGlitchgrabActions({
   addBreadcrumb,
   captureContext,
   captureDeviceInfo,
+  captureError,
+  clearAppContext,
   clearBreadcrumbs,
   clearDedupCache,
   computeSignature,
   enhanceText,
+  fetchGlitchgrabFeedback,
   fetchGlitchgrabReports,
+  getAppContext,
   getBreadcrumbs,
   getShortcutLabel,
   initBreadcrumbs,
   matchesShortcut,
   sanitizeUrl,
+  sendFeedback,
   sendReport,
+  setContext,
+  setContexts,
   shouldSkipDuplicate,
   useGlitchgrab,
   useGlitchgrabActions,
+  useGlitchgrabFeedback,
   useGlitchgrabReports
 });
 //# sourceMappingURL=index.js.map