glitchgrab 1.22.0 → 1.23.0

package/dist/index.js

@@ -319,7 +319,7 @@ async function sendReport(payload, baseUrl) {
     return null;
   }
 }
-async function enhanceText(text, token, baseUrl) {
+async function enhanceText(text, token, baseUrl, screenshot, context) {
   var _a;
   try {
     const trimmed = text.trim();
@@ -331,7 +331,11 @@ async function enhanceText(text, token, baseUrl) {
         "Content-Type": "application/json",
         Authorization: `Bearer ${token}`
       },
-      body: JSON.stringify({ text: trimmed })
+      body: JSON.stringify({
+        text: trimmed,
+        ...screenshot ? { screenshot } : {},
+        ...context ? { context } : {}
+      })
     });
     if (!response.ok) return text;
     const envelope = await response.json();
@@ -343,6 +347,28 @@ async function enhanceText(text, token, baseUrl) {
     return text;
   }
 }
+async function transcribeAudio(blob, token, baseUrl) {
+  var _a;
+  try {
+    if (blob.size === 0) return "";
+    const url = `${baseUrl != null ? baseUrl : DEFAULT_BASE_URL}/api/v1/sdk/stt`;
+    const form = new FormData();
+    form.append("file", blob, "audio.webm");
+    const response = await fetch(url, {
+      method: "POST",
+      headers: { Authorization: `Bearer ${token}` },
+      body: form
+    });
+    if (!response.ok) return "";
+    const envelope = await response.json();
+    if ((envelope == null ? void 0 : envelope.success) && typeof ((_a = envelope.data) == null ? void 0 : _a.transcript) === "string") {
+      return envelope.data.transcript;
+    }
+    return "";
+  } catch (e) {
+    return "";
+  }
+}
 
 // src/dedup.ts
 var DEFAULT_WINDOW_MS = 5 * 60 * 1e3;
@@ -481,11 +507,17 @@ function useIsDark() {
   try {
     for (const el of [document.body, document.documentElement]) {
       const bg = getComputedStyle(el).backgroundColor;
-      const match = bg.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
+      const match = bg.match(
+        /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/
+      );
       if (match) {
         const alpha = match[4] !== void 0 ? parseFloat(match[4]) : 1;
         if (alpha < 0.05) continue;
-        const [r, g, b] = [Number(match[1]), Number(match[2]), Number(match[3])];
+        const [r, g, b] = [
+          Number(match[1]),
+          Number(match[2]),
+          Number(match[3])
+        ];
         return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
       }
     }
@@ -511,14 +543,26 @@ function parseColorToRgb(value) {
     const hexMatch = trimmed.match(/^#([0-9a-f]{3,8})$/i);
     if (hexMatch) {
       let hex = hexMatch[1];
-      if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-      return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+      if (hex.length === 3)
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      return [
+        parseInt(hex.slice(0, 2), 16),
+        parseInt(hex.slice(2, 4), 16),
+        parseInt(hex.slice(4, 6), 16)
+      ];
     }
     const rgbMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-    if (rgbMatch) return [Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])];
-    const hslMatch = trimmed.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
+    if (rgbMatch)
+      return [Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3])];
+    const hslMatch = trimmed.match(
+      /hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/
+    );
     if (hslMatch) {
-      const hex = hslToHex(Number(hslMatch[1]), Number(hslMatch[2]), Number(hslMatch[3]));
+      const hex = hslToHex(
+        Number(hslMatch[1]),
+        Number(hslMatch[2]),
+        Number(hslMatch[3])
+      );
       return parseColorToRgb(hex);
     }
     return null;
@@ -548,9 +592,16 @@ function detectHostAccent() {
       if (!raw) continue;
       const hslSpaceMatch = raw.match(/^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/);
       if (hslSpaceMatch) {
-        const hex = hslToHex(Number(hslSpaceMatch[1]), Number(hslSpaceMatch[2]), Number(hslSpaceMatch[3]));
+        const hex = hslToHex(
+          Number(hslSpaceMatch[1]),
+          Number(hslSpaceMatch[2]),
+          Number(hslSpaceMatch[3])
+        );
         const rgb2 = parseColorToRgb(hex);
-        return { accent: hex, accentText: rgb2 ? getContrastText(...rgb2) : "#ffffff" };
+        return {
+          accent: hex,
+          accentText: rgb2 ? getContrastText(...rgb2) : "#ffffff"
+        };
       }
       const rgb = parseColorToRgb(raw);
       if (rgb) {
@@ -565,7 +616,27 @@ function detectHostAccent() {
 }
 function getTheme(dark) {
   const hostAccent = detectHostAccent();
-  const defaults = dark ? { bg: "#1c1c1e", bgSecondary: "#27272a", border: "#2c2c2e", text: "#fafafa", textMuted: "#a1a1aa", accent: "#22d3ee", accentText: "#09090b", inputBg: "#27272a", inputBorder: "#3f3f46" } : { bg: "#ffffff", bgSecondary: "#f4f4f5", border: "#e4e4e7", text: "#18181b", textMuted: "#71717a", accent: "#0891b2", accentText: "#ffffff", inputBg: "#fafafa", inputBorder: "#d4d4d8" };
+  const defaults = dark ? {
+    bg: "#1c1c1e",
+    bgSecondary: "#27272a",
+    border: "#2c2c2e",
+    text: "#fafafa",
+    textMuted: "#a1a1aa",
+    accent: "#22d3ee",
+    accentText: "#09090b",
+    inputBg: "#27272a",
+    inputBorder: "#3f3f46"
+  } : {
+    bg: "#ffffff",
+    bgSecondary: "#f4f4f5",
+    border: "#e4e4e7",
+    text: "#18181b",
+    textMuted: "#71717a",
+    accent: "#0891b2",
+    accentText: "#ffffff",
+    inputBg: "#fafafa",
+    inputBorder: "#d4d4d8"
+  };
   if (hostAccent) {
     defaults.accent = hostAccent.accent;
     defaults.accentText = hostAccent.accentText;
@@ -615,10 +686,18 @@ function isLowQualityText(text) {
 function ReportDialog({
   report,
   enhanceText: enhanceText2,
+  transcribeAudio: transcribeAudio2,
   types,
   showSeverity = true
 }) {
   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_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)(() => {
@@ -632,10 +711,22 @@ function ReportDialog({
   const [previewOpen, setPreviewOpen] = (0, import_react.useState)(false);
   const fileInputRef = (0, import_react.useRef)(null);
   const modalRef = (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('[role="dialog"][data-state="open"]')
+      document.querySelectorAll(
+        '[role="dialog"][data-state="open"]'
+      )
     );
     dialogs.forEach((d) => d.setAttribute("inert", ""));
     return () => dialogs.forEach((d) => d.removeAttribute("inert"));
@@ -644,7 +735,13 @@ function ReportDialog({
   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 availableTypes = types != null ? types : ["BUG", "FEATURE_REQUEST", "QUESTION", "OTHER"];
+  const [placeholderIdx, setPlaceholderIdx] = (0, import_react.useState)(0);
+  const availableTypes = types != null ? types : [
+    "BUG",
+    "FEATURE_REQUEST",
+    "QUESTION",
+    "OTHER"
+  ];
   const isDark = useIsDark();
   const t = getTheme(isDark);
   const handleFileUpload = (e) => {
@@ -744,12 +841,185 @@ function ReportDialog({
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
   }, [isOpen]);
+  (0, import_react.useEffect)(() => {
+    if (!isOpen || !transcribeAudio2) return;
+    const id = setInterval(() => {
+      setPlaceholderIdx((i) => (i + 1) % 2);
+    }, 3e3);
+    return () => clearInterval(id);
+  }, [isOpen, transcribeAudio2]);
+  const stopVoice = () => {
+    var _a, _b;
+    usingWebSpeechRef.current = false;
+    (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+    recognitionRef.current = null;
+    sarvamChunksRef.current = [];
+    const stream = streamRef.current;
+    streamRef.current = null;
+    stream == null ? void 0 : stream.getTracks().forEach((t2) => t2.stop());
+    try {
+      (_b = mediaRecorderRef.current) == null ? void 0 : _b.stop();
+    } catch (e) {
+    }
+    mediaRecorderRef.current = null;
+    setIsListening(false);
+    setIsTranscribing(false);
+  };
+  const stopListeningAndTranscribe = () => {
+    var _a, _b;
+    usingWebSpeechRef.current = false;
+    (_a = recognitionRef.current) == null ? void 0 : _a.stop();
+    recognitionRef.current = null;
+    setIsListening(false);
+    try {
+      (_b = mediaRecorderRef.current) == null ? void 0 : _b.stop();
+    } catch (e) {
+    }
+  };
   const handleClose = () => {
+    stopVoice();
     setIsOpen(false);
     setStep(1);
     setReportType("BUG");
     setSeverity("medium");
     setValidationError(null);
+    setVoiceError(null);
+    setIsEnhanced(false);
+    setOriginalDescription(null);
+  };
+  const toggleVoice = async () => {
+    if (isListening) {
+      stopListeningAndTranscribe();
+      return;
+    }
+    const SpeechRec = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : void 0;
+    let stream = null;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch (e) {
+      if (!SpeechRec) {
+        setVoiceError("Microphone access denied");
+        return;
+      }
+    }
+    if (stream && transcribeAudio2) {
+      streamRef.current = stream;
+      sarvamChunksRef.current = [];
+      textBeforeVoiceRef.current = description;
+      const rec = new MediaRecorder(stream);
+      mediaRecorderRef.current = rec;
+      rec.ondataavailable = (e) => {
+        if (e.data.size > 0) sarvamChunksRef.current.push(e.data);
+      };
+      rec.onstop = async () => {
+        stream.getTracks().forEach((t2) => t2.stop());
+        if (streamRef.current === stream) streamRef.current = null;
+        mediaRecorderRef.current = null;
+        const chunks = sarvamChunksRef.current;
+        sarvamChunksRef.current = [];
+        if (!chunks.length || !transcribeAudio2) return;
+        setIsTranscribing(true);
+        try {
+          const blob = new Blob(chunks, { type: rec.mimeType || "audio/webm" });
+          const text = await transcribeAudio2(blob);
+          if (text.trim()) {
+            const sep = textBeforeVoiceRef.current.trim() ? " " : "";
+            setDescription(textBeforeVoiceRef.current + sep + text.trim());
+            setValidationError(null);
+            setIsEnhanced(false);
+            setOriginalDescription(null);
+          }
+        } catch (e) {
+        }
+        setIsTranscribing(false);
+      };
+      rec.start();
+    }
+    if (SpeechRec) {
+      setVoiceError(null);
+      usingWebSpeechRef.current = true;
+      voiceBaseRef.current = description;
+      textBeforeVoiceRef.current = description;
+      const recognition = new SpeechRec();
+      recognition.lang = "en-IN";
+      recognition.interimResults = true;
+      recognition.continuous = true;
+      recognitionRef.current = recognition;
+      recognition.onstart = () => setIsListening(true);
+      recognition.onresult = (event) => {
+        let finalText = "";
+        let interimText = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const text = event.results[i][0].transcript;
+          if (event.results[i].isFinal) finalText += text;
+          else interimText += text;
+        }
+        if (finalText) {
+          const sep = voiceBaseRef.current.trim() ? " " : "";
+          voiceBaseRef.current += sep + finalText.trim();
+        }
+        const liveText = interimText ? voiceBaseRef.current + (voiceBaseRef.current.trim() ? " " : "") + interimText : voiceBaseRef.current;
+        setDescription(liveText);
+        setValidationError(null);
+      };
+      recognition.onend = () => {
+        if (usingWebSpeechRef.current && recognitionRef.current === recognition) {
+          try {
+            recognition.start();
+          } catch (e) {
+          }
+        } else {
+          setIsListening(false);
+        }
+      };
+      recognition.onerror = (event) => {
+        if (event.error === "aborted" || event.error === "no-speech") return;
+        setVoiceError("Speech recognition not available \u2014 try Chrome");
+        usingWebSpeechRef.current = false;
+        recognitionRef.current = null;
+        setIsListening(false);
+      };
+      recognition.start();
+    } else if (stream) {
+      setVoiceError(null);
+      setIsListening(true);
+    }
+  };
+  const handleSpaceDown = (e) => {
+    if (e.code !== "Space") return;
+    if (spaceTimerRef.current || isListening || isPushToTalkRef.current) {
+      e.preventDefault();
+      return;
+    }
+    if (e.repeat || !transcribeAudio2 || isTranscribing) return;
+    e.preventDefault();
+    spaceTimerRef.current = setTimeout(() => {
+      isPushToTalkRef.current = true;
+      void toggleVoice();
+    }, 400);
+  };
+  const handleSpaceUp = (e) => {
+    var _a;
+    if (e.code !== "Space") return;
+    if (spaceTimerRef.current) {
+      clearTimeout(spaceTimerRef.current);
+      spaceTimerRef.current = null;
+      if (!isPushToTalkRef.current) {
+        const ta = textareaRef.current;
+        const pos = ta ? (_a = ta.selectionStart) != null ? _a : description.length : description.length;
+        setDescription((prev) => prev.slice(0, pos) + " " + prev.slice(pos));
+        requestAnimationFrame(() => {
+          if (textareaRef.current) {
+            textareaRef.current.selectionStart = pos + 1;
+            textareaRef.current.selectionEnd = pos + 1;
+          }
+        });
+      }
+    }
+    if (isPushToTalkRef.current) {
+      isPushToTalkRef.current = false;
+      stopListeningAndTranscribe();
+    }
   };
   const handleSubmit = async () => {
     try {
@@ -766,7 +1036,11 @@ function ReportDialog({
       if (showSeverity && reportType === "BUG") {
         metadata.severity = severity;
       }
-      const result = await report(reportType, description.trim(), Object.keys(metadata).length > 0 ? metadata : void 0);
+      const result = await report(
+        reportType,
+        description.trim(),
+        Object.keys(metadata).length > 0 ? metadata : void 0
+      );
       if (result) {
         setSubmitted(true);
         setDescription("");
@@ -783,6 +1057,16 @@ function ReportDialog({
   };
   if (!mounted) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    isOpen && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          @keyframes gg-pulse{0%,100%{opacity:1}50%{opacity:0.35}}
+          @keyframes gg-b1{0%,100%{height:3px}40%{height:13px}}
+          @keyframes gg-b2{0%,100%{height:8px}50%{height:3px}}
+          @keyframes gg-b3{0%,100%{height:4px}30%{height:14px}70%{height:5px}}
+          @keyframes gg-b4{0%,100%{height:6px}60%{height:13px}}
+        ` }),
+      document.body
+    ),
     isOpen && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -839,36 +1123,64 @@ function ReportDialog({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                              step > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => setStep((s) => s - 1),
-                                  style: {
-                                    background: "none",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    padding: "2px",
-                                    display: "flex",
-                                    alignItems: "center"
-                                  },
-                                  "aria-label": "Back",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 3L5 8L10 13", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: "15px",
-                                    fontWeight: 600,
-                                    color: t.text
-                                  },
-                                  children: step === 1 ? "What's on your mind?" : step === 2 ? "Tell us more" : "Review & Send"
-                                }
-                              )
-                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "8px"
+                                },
+                                children: [
+                                  step > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: () => setStep((s) => s - 1),
+                                      style: {
+                                        background: "none",
+                                        border: "none",
+                                        cursor: "pointer",
+                                        padding: "2px",
+                                        display: "flex",
+                                        alignItems: "center"
+                                      },
+                                      "aria-label": "Back",
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        "svg",
+                                        {
+                                          width: "16",
+                                          height: "16",
+                                          viewBox: "0 0 16 16",
+                                          fill: "none",
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                            "path",
+                                            {
+                                              d: "M10 3L5 8L10 13",
+                                              stroke: t.textMuted,
+                                              strokeWidth: "2",
+                                              strokeLinecap: "round",
+                                              strokeLinejoin: "round"
+                                            }
+                                          )
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    "span",
+                                    {
+                                      style: {
+                                        fontSize: "15px",
+                                        fontWeight: 600,
+                                        color: t.text
+                                      },
+                                      children: step === 1 ? "What's on your mind?" : "Tell us more"
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               "button",
                               {
@@ -884,27 +1196,74 @@ function ReportDialog({
                                   justifyContent: "center"
                                 },
                                 "aria-label": "Close",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "svg",
+                                  {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    style: { display: "block" },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "path",
+                                      {
+                                        d: "M4 4L12 12M12 4L4 12",
+                                        stroke: t.textMuted,
+                                        strokeWidth: "2",
+                                        strokeLinecap: "round"
+                                      }
+                                    )
+                                  }
+                                )
                               }
                             )
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "0", marginTop: "12px" }, children: [1, 2, 3].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-                          width: "8px",
-                          height: "8px",
-                          borderRadius: "50%",
-                          backgroundColor: s <= step ? t.accent : t.inputBorder,
-                          transition: "background-color 0.2s ease"
-                        } }),
-                        i < 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-                          width: "40px",
-                          height: "2px",
-                          backgroundColor: s < step ? t.accent : t.inputBorder,
-                          transition: "background-color 0.2s ease"
-                        } })
-                      ] }, s)) })
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: "0",
+                            marginTop: "12px"
+                          },
+                          children: [1, 2].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "div",
+                            {
+                              style: { display: "flex", alignItems: "center" },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "div",
+                                  {
+                                    style: {
+                                      width: "8px",
+                                      height: "8px",
+                                      borderRadius: "50%",
+                                      backgroundColor: s <= step ? t.accent : t.inputBorder,
+                                      transition: "background-color 0.2s ease"
+                                    }
+                                  }
+                                ),
+                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "div",
+                                  {
+                                    style: {
+                                      width: "40px",
+                                      height: "2px",
+                                      backgroundColor: s < step ? t.accent : t.inputBorder,
+                                      transition: "background-color 0.2s ease"
+                                    }
+                                  }
+                                )
+                              ]
+                            },
+                            s
+                          ))
+                        }
+                      )
                     ]
                   }
                 ),
@@ -924,76 +1283,185 @@ function ReportDialog({
                     ]
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "button",
+                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
                     {
-                      type: "button",
-                      onClick: () => {
-                        setReportType(type);
-                        setStep(2);
-                      },
                       style: {
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        gap: "8px",
-                        padding: "16px 8px",
-                        borderRadius: "8px",
-                        border: `1px solid ${t.inputBorder}`,
-                        background: t.inputBg,
-                        cursor: "pointer",
-                        color: t.text,
-                        fontFamily: "inherit",
-                        transition: "border-color 0.15s ease"
-                      },
-                      onMouseEnter: (e) => {
-                        e.currentTarget.style.borderColor = t.accent;
-                      },
-                      onMouseLeave: (e) => {
-                        e.currentTarget.style.borderColor = t.inputBorder;
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr",
+                        gap: "8px"
                       },
-                      children: [
-                        getTypeIcon(type, t.accent),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: t.textMuted, lineHeight: "1.3" }, children: getTypeSubtitle(type) })
-                      ]
-                    },
-                    type
-                  )) }),
+                      children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setReportType(type);
+                            setStep(2);
+                          },
+                          style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: "8px",
+                            padding: "16px 8px",
+                            borderRadius: "8px",
+                            border: `1px solid ${t.inputBorder}`,
+                            background: t.inputBg,
+                            cursor: "pointer",
+                            color: t.text,
+                            fontFamily: "inherit",
+                            transition: "border-color 0.15s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.borderColor = t.accent;
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.borderColor = t.inputBorder;
+                          },
+                          children: [
+                            getTypeIcon(type, t.accent),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "11px",
+                                  color: t.textMuted,
+                                  lineHeight: "1.3"
+                                },
+                                children: getTypeSubtitle(type)
+                              }
+                            )
+                          ]
+                        },
+                        type
+                      ))
+                    }
+                  ),
                   step === 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "textarea",
                         {
+                          ref: textareaRef,
                           value: description,
                           onChange: (e) => {
                             setDescription(e.target.value);
                             if (validationError) setValidationError(null);
+                            if (isEnhanced) {
+                              setIsEnhanced(false);
+                              setOriginalDescription(null);
+                            }
                           },
-                          placeholder: getPlaceholder(reportType),
+                          placeholder: isTranscribing ? "Transcribing your speech\u2026" : isListening ? "Listening\u2026 speak now" : getPlaceholder(reportType, placeholderIdx, !!transcribeAudio2),
                           style: {
                             width: "100%",
                             minHeight: "100px",
-                            padding: enhanceText2 ? "28px 12px 10px" : "10px 12px",
+                            padding: enhanceText2 ? "28px 12px 36px" : transcribeAudio2 ? "10px 12px 36px" : "10px 12px",
                             borderRadius: "8px",
-                            border: `1px solid ${t.inputBorder}`,
+                            border: `1px solid ${isTranscribing ? "#f59e0b" : isListening ? t.accent : t.inputBorder}`,
                             fontSize: "14px",
                             fontFamily: "inherit",
-                            resize: "vertical",
+                            resize: "none",
                             outline: "none",
                             boxSizing: "border-box",
                             color: t.text,
-                            backgroundColor: t.inputBg
+                            backgroundColor: t.inputBg,
+                            transition: "border-color 0.2s ease"
                           },
+                          onKeyDown: handleSpaceDown,
+                          onKeyUp: handleSpaceUp,
                           onFocus: (e) => {
                             e.target.style.borderColor = t.accent;
                           },
                           onBlur: (e) => {
-                            e.target.style.borderColor = t.inputBorder;
+                            if (!isListening && !isTranscribing)
+                              e.target.style.borderColor = t.inputBorder;
                           },
                           autoFocus: true
                         }
                       ),
+                      (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "span",
+                        {
+                          style: {
+                            position: "absolute",
+                            bottom: "10px",
+                            left: "10px",
+                            display: "inline-flex",
+                            alignItems: "center",
+                            gap: "4px",
+                            fontSize: "10px",
+                            fontWeight: 700,
+                            letterSpacing: "0.04em",
+                            color: isTranscribing ? "#f59e0b" : "#ef4444",
+                            pointerEvents: "none",
+                            zIndex: 1
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "span",
+                              {
+                                style: {
+                                  width: "6px",
+                                  height: "6px",
+                                  borderRadius: "50%",
+                                  backgroundColor: "currentColor",
+                                  animation: "gg-pulse 1.2s ease-in-out infinite",
+                                  display: "inline-block",
+                                  flexShrink: 0
+                                }
+                              }
+                            ),
+                            isTranscribing ? "Transcribing\u2026" : "REC",
+                            isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "span",
+                              {
+                                style: {
+                                  display: "inline-flex",
+                                  alignItems: "flex-end",
+                                  gap: "2px",
+                                  height: "14px",
+                                  marginLeft: "3px"
+                                },
+                                children: [
+                                  { anim: "gg-b1", dur: "0.6s", delay: "0s" },
+                                  {
+                                    anim: "gg-b2",
+                                    dur: "0.5s",
+                                    delay: "0.1s"
+                                  },
+                                  {
+                                    anim: "gg-b3",
+                                    dur: "0.7s",
+                                    delay: "0.05s"
+                                  },
+                                  {
+                                    anim: "gg-b4",
+                                    dur: "0.55s",
+                                    delay: "0.15s"
+                                  }
+                                ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "span",
+                                  {
+                                    style: {
+                                      width: "2.5px",
+                                      height: "4px",
+                                      borderRadius: "1px",
+                                      backgroundColor: "#ef4444",
+                                      animation: `${b.anim} ${b.dur} ease-in-out ${b.delay} infinite`,
+                                      display: "inline-block",
+                                      alignSelf: "center"
+                                    }
+                                  },
+                                  i
+                                ))
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         "button",
                         {
@@ -1002,16 +1470,22 @@ function ReportDialog({
                             if (!description.trim() || isEnhancing) return;
                             setIsEnhancing(true);
                             try {
-                              const polished = await enhanceText2(description);
+                              const polished = await enhanceText2(
+                                description,
+                                screenshot
+                              );
                               if (polished && polished !== description) {
+                                setOriginalDescription(description);
                                 setDescription(polished);
-                                if (validationError) setValidationError(null);
+                                setIsEnhanced(true);
+                                if (validationError)
+                                  setValidationError(null);
                               }
                             } finally {
                               setIsEnhancing(false);
                             }
                           },
-                          disabled: !description.trim() || isEnhancing,
+                          disabled: !description.trim() || isEnhancing || isEnhanced,
                           style: {
                             position: "absolute",
                             top: "6px",
@@ -1032,105 +1506,393 @@ function ReportDialog({
                           },
                           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" }) }),
+                            /* @__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"
                           ]
                         }
+                      ),
+                      transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            void toggleVoice();
+                          },
+                          title: isListening ? "Stop recording" : "Speak your report",
+                          style: {
+                            position: "absolute",
+                            bottom: "14px",
+                            right: "7px",
+                            width: "26px",
+                            height: "26px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            background: "transparent",
+                            border: `1.5px solid ${isListening ? "#ef4444" : t.inputBorder}`,
+                            borderRadius: "6px",
+                            color: isListening ? "#ef4444" : t.textMuted,
+                            cursor: "pointer",
+                            zIndex: 1,
+                            padding: 0,
+                            transition: "border-color 0.2s ease, color 0.2s ease"
+                          },
+                          children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "svg",
+                            {
+                              width: "12",
+                              height: "12",
+                              viewBox: "0 0 24 24",
+                              fill: "currentColor",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "rect",
+                                {
+                                  x: "6",
+                                  y: "6",
+                                  width: "12",
+                                  height: "12",
+                                  rx: "2"
+                                }
+                              )
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "svg",
+                            {
+                              width: "13",
+                              height: "13",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              "aria-hidden": "true",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "rect",
+                                  {
+                                    x: "9",
+                                    y: "2",
+                                    width: "6",
+                                    height: "12",
+                                    rx: "3",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.8"
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "path",
+                                  {
+                                    d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
+                                    stroke: "currentColor",
+                                    strokeWidth: "1.8",
+                                    strokeLinecap: "round"
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        }
                       )
                     ] }),
-                    /* @__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", fontWeight: 500 }, children: "Screenshot" }),
-                      screenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+                    transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "5px",
+                          marginTop: "5px",
+                          fontSize: "11px",
+                          color: t.text,
+                          opacity: 0.55,
+                          userSelect: "none"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                          ] }),
+                          "Hold Space to speak \u2014 we'll transcribe it"
+                        ]
+                      }
+                    ),
+                    isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          marginTop: "6px",
+                          padding: "6px 8px",
+                          borderRadius: "6px",
+                          background: isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.05)",
+                          border: `1px solid ${t.accent}40`
+                        },
+                        children: [
                           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "img",
+                            "svg",
+                            {
+                              width: "12",
+                              height: "12",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              style: { flexShrink: 0 },
+                              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 3z",
+                                  stroke: t.accent,
+                                  strokeWidth: "1.5",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "span",
                             {
-                              src: screenshot,
-                              alt: "Page screenshot",
-                              onClick: () => setPreviewOpen(true),
                               style: {
-                                width: "100%",
-                                borderRadius: "6px",
-                                border: `1px solid ${t.border}`,
-                                maxHeight: "64px",
-                                objectFit: "cover",
-                                objectPosition: "top",
-                                cursor: "zoom-in",
-                                display: "block"
-                              }
+                                fontSize: "11px",
+                                color: t.textMuted,
+                                flex: 1
+                              },
+                              children: "AI enhanced"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
-                            position: "absolute",
-                            bottom: "5px",
-                            left: "6px",
-                            background: "rgba(0,0,0,0.55)",
-                            color: "#fff",
-                            fontSize: "10px",
-                            padding: "1px 5px",
-                            borderRadius: "3px",
-                            pointerEvents: "none"
-                          }, children: "click to preview" })
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", marginTop: "6px" }, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                             "button",
                             {
                               type: "button",
-                              onClick: () => setScreenshot(null),
+                              onClick: () => {
+                                setIsEnhanced(false);
+                                setOriginalDescription(null);
+                              },
                               style: {
-                                flex: 1,
-                                padding: "6px 0",
-                                borderRadius: "6px",
-                                border: `1px solid ${t.inputBorder}`,
-                                background: "transparent",
-                                color: "#ef4444",
-                                fontSize: "12px",
-                                fontWeight: 500,
+                                padding: "2px 8px",
+                                borderRadius: "4px",
+                                border: `1px solid ${t.accent}`,
+                                background: t.accent,
+                                color: t.accentText,
+                                fontSize: "11px",
+                                fontWeight: 600,
                                 cursor: "pointer",
-                                fontFamily: "inherit",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                gap: "4px"
+                                fontFamily: "inherit"
                               },
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
-                                "Remove"
-                              ]
+                              children: "Keep"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                             "button",
                             {
                               type: "button",
                               onClick: () => {
-                                var _a;
-                                return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+                                setDescription(originalDescription);
+                                setIsEnhanced(false);
+                                setOriginalDescription(null);
                               },
                               style: {
-                                flex: 1,
-                                padding: "6px 0",
-                                borderRadius: "6px",
+                                padding: "2px 8px",
+                                borderRadius: "4px",
                                 border: `1px solid ${t.inputBorder}`,
                                 background: "transparent",
                                 color: t.textMuted,
-                                fontSize: "12px",
-                                fontWeight: 500,
+                                fontSize: "11px",
+                                fontWeight: 600,
                                 cursor: "pointer",
-                                fontFamily: "inherit",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                gap: "4px"
+                                fontFamily: "inherit"
                               },
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-                                "Replace"
-                              ]
+                              children: "Restore"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    voiceError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "p",
+                      {
+                        style: {
+                          color: "#ef4444",
+                          fontSize: "11px",
+                          marginTop: "4px",
+                          marginBottom: 0
+                        },
+                        children: voiceError
+                      }
+                    ),
+                    /* @__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",
+                            fontWeight: 500
+                          },
+                          children: "Screenshot"
+                        }
+                      ),
+                      screenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "img",
+                            {
+                              src: screenshot,
+                              alt: "Page screenshot",
+                              onClick: () => setPreviewOpen(true),
+                              style: {
+                                width: "100%",
+                                borderRadius: "6px",
+                                border: `1px solid ${t.border}`,
+                                maxHeight: "64px",
+                                objectFit: "cover",
+                                objectPosition: "top",
+                                cursor: "zoom-in",
+                                display: "block"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "span",
+                            {
+                              style: {
+                                position: "absolute",
+                                bottom: "5px",
+                                left: "6px",
+                                background: "rgba(0,0,0,0.55)",
+                                color: "#fff",
+                                fontSize: "10px",
+                                padding: "1px 5px",
+                                borderRadius: "3px",
+                                pointerEvents: "none"
+                              },
+                              children: "click to preview"
                             }
                           )
-                        ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              gap: "6px",
+                              marginTop: "6px"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setScreenshot(null),
+                                  style: {
+                                    flex: 1,
+                                    padding: "6px 0",
+                                    borderRadius: "6px",
+                                    border: `1px solid ${t.inputBorder}`,
+                                    background: "transparent",
+                                    color: "#ef4444",
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    cursor: "pointer",
+                                    fontFamily: "inherit",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: "4px"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "svg",
+                                      {
+                                        width: "11",
+                                        height: "11",
+                                        viewBox: "0 0 10 10",
+                                        fill: "none",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "path",
+                                          {
+                                            d: "M1 1L9 9M9 1L1 9",
+                                            stroke: "currentColor",
+                                            strokeWidth: "1.5",
+                                            strokeLinecap: "round"
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    "Remove"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    var _a;
+                                    return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+                                  },
+                                  style: {
+                                    flex: 1,
+                                    padding: "6px 0",
+                                    borderRadius: "6px",
+                                    border: `1px solid ${t.inputBorder}`,
+                                    background: "transparent",
+                                    color: t.textMuted,
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    cursor: "pointer",
+                                    fontFamily: "inherit",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: "4px"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "svg",
+                                      {
+                                        width: "11",
+                                        height: "11",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "path",
+                                          {
+                                            d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12",
+                                            stroke: "currentColor",
+                                            strokeWidth: "2",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round"
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    "Replace"
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
                       ] }) : (
                         /* Drop zone */
                         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1143,7 +1905,9 @@ function ReportDialog({
                             onDrop: (e) => {
                               e.preventDefault();
                               setScreenshotDragOver(false);
-                              const file = Array.from(e.dataTransfer.files).find((f) => f.type.startsWith("image/"));
+                              const file = Array.from(
+                                e.dataTransfer.files
+                              ).find((f) => f.type.startsWith("image/"));
                               if (!file) return;
                               const reader = new FileReader();
                               reader.onload = () => setScreenshot(reader.result);
@@ -1164,20 +1928,95 @@ function ReportDialog({
                               transition: "border-color 0.15s ease, background 0.15s ease"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", style: { margin: "0 auto 6px", display: "block", opacity: 0.45 }, children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: t.textMuted, strokeWidth: "1.5" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", stroke: t.textMuted, strokeWidth: "1.5" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15l-5-5L5 21", stroke: t.textMuted, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-                              ] }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: "12px", fontWeight: 600, color: t.text }, children: screenshotDragOver ? "Drop to attach" : "Add a screenshot" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "3px 0 0", fontSize: "11px", color: t.textMuted }, children: "Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse" })
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "svg",
+                                {
+                                  width: "22",
+                                  height: "22",
+                                  viewBox: "0 0 24 24",
+                                  fill: "none",
+                                  style: {
+                                    margin: "0 auto 6px",
+                                    display: "block",
+                                    opacity: 0.45
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "rect",
+                                      {
+                                        x: "3",
+                                        y: "3",
+                                        width: "18",
+                                        height: "18",
+                                        rx: "2",
+                                        stroke: t.textMuted,
+                                        strokeWidth: "1.5"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "circle",
+                                      {
+                                        cx: "8.5",
+                                        cy: "8.5",
+                                        r: "1.5",
+                                        stroke: t.textMuted,
+                                        strokeWidth: "1.5"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      "path",
+                                      {
+                                        d: "M21 15l-5-5L5 21",
+                                        stroke: t.textMuted,
+                                        strokeWidth: "1.5",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round"
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "p",
+                                {
+                                  style: {
+                                    margin: 0,
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                    color: t.text
+                                  },
+                                  children: screenshotDragOver ? "Drop to attach" : "Add a screenshot"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "p",
+                                {
+                                  style: {
+                                    margin: "3px 0 0",
+                                    fontSize: "11px",
+                                    color: t.textMuted
+                                  },
+                                  children: "Drag & drop \xB7 Paste \u2318V / Ctrl+V \xB7 Click to browse"
+                                }
+                              )
                             ]
                           }
                         )
                       )
                     ] }),
                     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)(
+                        "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)(
                         "button",
                         {
@@ -1202,114 +2041,34 @@ function ReportDialog({
                         s
                       )) })
                     ] }),
-                    validationError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "#ef4444", fontSize: "12px", marginTop: "6px" }, children: validationError }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
+                    validationError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "p",
                       {
-                        type: "button",
-                        onClick: () => {
-                          const err = isLowQualityText(description);
-                          if (err) {
-                            setValidationError(err);
-                            return;
-                          }
-                          setValidationError(null);
-                          setStep(3);
-                        },
-                        disabled: !description.trim(),
                         style: {
-                          marginTop: "12px",
-                          width: "100%",
-                          padding: "10px",
-                          borderRadius: "8px",
-                          border: "none",
-                          backgroundColor: !description.trim() ? t.bgSecondary : t.accent,
-                          color: !description.trim() ? t.textMuted : t.accentText,
-                          fontSize: "14px",
-                          fontWeight: 600,
-                          cursor: !description.trim() ? "not-allowed" : "pointer",
-                          fontFamily: "inherit",
-                          transition: "background-color 0.15s ease"
+                          color: "#ef4444",
+                          fontSize: "12px",
+                          marginTop: "6px"
                         },
-                        children: "Next"
+                        children: validationError
                       }
-                    )
-                  ] }),
-                  step === 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "12px" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: "4px",
-                        padding: "4px 10px",
-                        borderRadius: "12px",
-                        fontSize: "12px",
-                        fontWeight: 600,
-                        backgroundColor: t.bgSecondary,
-                        color: t.text,
-                        border: `1px solid ${t.border}`
-                      }, children: [
-                        getTypeIcon(reportType, t.accent, 12),
-                        getTypeLabel(reportType)
-                      ] }),
-                      showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        padding: "4px 10px",
-                        borderRadius: "12px",
-                        fontSize: "12px",
-                        fontWeight: 600,
-                        backgroundColor: severity === "high" ? "#fef2f2" : severity === "medium" ? "#fffbeb" : "#f0fdf4",
-                        color: severity === "high" ? "#dc2626" : severity === "medium" ? "#d97706" : "#16a34a",
-                        border: `1px solid ${severity === "high" ? "#fecaca" : severity === "medium" ? "#fde68a" : "#bbf7d0"}`,
-                        textTransform: "capitalize"
-                      }, children: severity })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-                      padding: "10px 12px",
-                      borderRadius: "8px",
-                      border: `1px solid ${t.inputBorder}`,
-                      backgroundColor: t.inputBg,
-                      fontSize: "13px",
-                      color: t.text,
-                      marginBottom: "10px",
-                      maxHeight: "80px",
-                      overflow: "hidden",
-                      lineHeight: "1.4"
-                    }, children: description.length > 200 ? description.slice(0, 200) + "..." : description }),
-                    screenshot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: "10px", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "img",
-                      {
-                        src: screenshot,
-                        alt: "Page screenshot",
-                        onClick: () => setPreviewOpen(true),
-                        style: {
-                          width: "100%",
-                          borderRadius: "6px",
-                          border: `1px solid ${t.border}`,
-                          maxHeight: "80px",
-                          objectFit: "cover",
-                          objectPosition: "top",
-                          cursor: "pointer"
-                        }
-                      }
-                    ) }),
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       "button",
                       {
                         type: "button",
                         onClick: handleSubmit,
-                        disabled: isSubmitting,
+                        disabled: !description.trim() || isSubmitting,
                         style: {
+                          marginTop: "12px",
                           width: "100%",
                           padding: "10px",
                           borderRadius: "8px",
                           border: "none",
-                          backgroundColor: isSubmitting ? t.bgSecondary : t.accent,
-                          color: isSubmitting ? t.textMuted : t.accentText,
+                          backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
+                          color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
                           fontSize: "14px",
                           fontWeight: 600,
-                          cursor: isSubmitting ? "not-allowed" : "pointer",
+                          cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
                           fontFamily: "inherit",
                           transition: "background-color 0.15s ease"
                         },
@@ -1425,10 +2184,11 @@ function getTypeSubtitle(type) {
       return "General feedback";
   }
 }
-function getPlaceholder(type) {
+function getPlaceholder(type, idx = 0, hasVoice = false) {
+  if (hasVoice && idx === 1) return "Hold Space to speak \u2014 we'll transcribe it";
   switch (type) {
     case "BUG":
-      return "What went wrong?";
+      return "What went wrong? Describe it or paste an error...";
     case "FEATURE_REQUEST":
       return "Describe the feature you'd like...";
     case "QUESTION":
@@ -1438,19 +2198,58 @@ function getPlaceholder(type) {
   }
 }
 function getTypeIcon(type, color, size = 24) {
-  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 } };
+  const props = {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    style: { flexShrink: 0 }
+  };
   switch (type) {
     case "BUG":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ) });
     case "FEATURE_REQUEST":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ) });
     case "QUESTION":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
       ] });
     case "OTHER":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ) });
   }
 }
 
@@ -1672,15 +2471,31 @@ function GlitchgrabProviderInner({
     []
   );
   const enhance = (0, import_react2.useCallback)(
-    async (text) => {
+    async (text, screenshot) => {
       try {
-        return await enhanceText(text, token, baseUrl);
+        const ctx = captureContext(visitedPagesRef.current);
+        const context = {
+          url: ctx.url,
+          visitedPages: ctx.visitedPages.slice(-5),
+          breadcrumbs: ctx.breadcrumbs.slice(-10).map((b) => ({ type: b.type, message: b.message }))
+        };
+        return await enhanceText(text, token, baseUrl, screenshot, context);
       } catch (e) {
         return text;
       }
     },
     [token, baseUrl]
   );
+  const transcribe = (0, import_react2.useCallback)(
+    async (blob) => {
+      try {
+        return await transcribeAudio(blob, token, baseUrl);
+      } catch (e) {
+        return "";
+      }
+    },
+    [token, baseUrl]
+  );
   const openReportDialog = (0, import_react2.useCallback)((options) => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
@@ -1725,7 +2540,7 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, enhanceText: enhance, types, showSeverity })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
       ]
     }
   );