spaps-issue-reporting-react 0.5.0 → 0.6.0

package/dist/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,6 +30,553 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/voice/VoiceCapture.tsx
+var VoiceCapture_exports = {};
+__export(VoiceCapture_exports, {
+  VoiceCapture: () => VoiceCapture,
+  default: () => VoiceCapture_default
+});
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function resolveErrorMessage(error, fallback) {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  if (error && typeof error === "object" && "message" in error && typeof error.message === "string" && error.message.trim()) {
+    return error.message;
+  }
+  return fallback;
+}
+function getCommittedTranscriptText(committedTranscripts) {
+  return committedTranscripts.map((segment) => segment.text.trim()).filter(Boolean).join(" ").trim();
+}
+function IssueReportVoicePanel({
+  canUseText,
+  effectiveInputMode,
+  isSubmitting,
+  isVoiceActive,
+  isVoiceConnecting,
+  voice,
+  voiceTokenResult,
+  committedTranscript,
+  voiceError,
+  scribeError,
+  onSelectText,
+  onSelectVoice,
+  onStartVoiceInput,
+  onStopVoiceInput,
+  onAppendTranscript
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    canUseText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
+            effectiveInputMode === "text" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
+          ),
+          onClick: onSelectText,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.TextT, { className: "h-3.5 w-3.5" }),
+            "Text Input"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
+            effectiveInputMode === "voice" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
+          ),
+          onClick: onSelectVoice,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Microphone, { className: "h-3.5 w-3.5" }),
+            "Voice Input"
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: "Voice Input" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "mt-1 text-xs text-slate-600", children: [
+            "Provider: ",
+            voiceTokenResult?.provider ?? voice.provider,
+            " \xB7 Model:",
+            " ",
+            voiceTokenResult?.model_id ?? voice.modelId
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: voice.requireMicrophonePermission ? "Microphone access is required to transcribe." : "Microphone access policy is optional." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+          isVoiceActive || isVoiceConnecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100",
+              onClick: onStopVoiceInput,
+              disabled: isSubmitting,
+              children: "Stop Voice Input"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800",
+              onClick: onStartVoiceInput,
+              disabled: isSubmitting,
+              children: "Start Voice Input"
+            }
+          ),
+          canUseText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60",
+              onClick: onAppendTranscript,
+              disabled: isSubmitting || !committedTranscript.trim(),
+              children: "Append Transcript"
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-3 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700", children: committedTranscript ? committedTranscript : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-slate-500", children: "No committed transcript yet." }) }),
+      voiceError || scribeError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700", children: voiceError ?? scribeError }) : isVoiceConnecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 flex items-center gap-1.5 text-xs text-slate-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+        "Connecting voice transcription..."
+      ] }) : null
+    ] })
+  ] });
+}
+function VoiceCapture({
+  canUseText,
+  effectiveInputMode,
+  isSubmitting,
+  voice,
+  createVoiceToken,
+  startRequestId,
+  appendRequestId,
+  onSelectText,
+  onSelectVoice,
+  onTranscriptCommitted,
+  onSubmitMetadataChange,
+  onAppendTranscript
+}) {
+  const [voiceTokenResult, setVoiceTokenResult] = (0, import_react5.useState)(null);
+  const [voiceSubmitMetadata, setVoiceSubmitMetadata] = (0, import_react5.useState)(null);
+  const [voiceError, setVoiceError] = (0, import_react5.useState)(null);
+  const startInFlightRef = (0, import_react5.useRef)(false);
+  const lastStartRequestId = (0, import_react5.useRef)(0);
+  const lastAppendRequestId = (0, import_react5.useRef)(0);
+  const {
+    status: scribeStatus,
+    isConnected,
+    isTranscribing,
+    committedTranscripts,
+    error: scribeError,
+    connect: connectScribe,
+    disconnect: disconnectScribe
+  } = (0, import_react3.useScribe)({
+    autoConnect: false,
+    modelId: voice.modelId,
+    microphone: voice.microphone
+  });
+  const committedTranscript = (0, import_react5.useMemo)(
+    () => getCommittedTranscriptText(committedTranscripts),
+    [committedTranscripts]
+  );
+  const isVoiceConnecting = scribeStatus === "connecting";
+  const isVoiceActive = isConnected || isTranscribing;
+  (0, import_react5.useEffect)(() => {
+    onTranscriptCommitted(committedTranscript);
+  }, [committedTranscript, onTranscriptCommitted]);
+  (0, import_react5.useEffect)(() => {
+    onSubmitMetadataChange(voiceSubmitMetadata);
+  }, [onSubmitMetadataChange, voiceSubmitMetadata]);
+  (0, import_react5.useEffect)(() => {
+    return () => {
+      disconnectScribe();
+    };
+  }, [disconnectScribe]);
+  const startVoiceInput = (0, import_react5.useCallback)(async () => {
+    if (startInFlightRef.current || isSubmitting || isVoiceActive || isVoiceConnecting) {
+      return;
+    }
+    if (!createVoiceToken) {
+      setVoiceError("Voice input is unavailable for this client.");
+      return;
+    }
+    startInFlightRef.current = true;
+    setVoiceError(null);
+    try {
+      const tokenResult = await createVoiceToken();
+      setVoiceTokenResult(tokenResult);
+      setVoiceSubmitMetadata(tokenResult);
+      await connectScribe({
+        token: tokenResult.token,
+        modelId: tokenResult.model_id,
+        microphone: voice.microphone
+      });
+      onSelectVoice();
+    } catch (startError) {
+      setVoiceError(resolveErrorMessage(startError, "Failed to start voice input."));
+    } finally {
+      startInFlightRef.current = false;
+    }
+  }, [
+    connectScribe,
+    createVoiceToken,
+    isSubmitting,
+    isVoiceActive,
+    isVoiceConnecting,
+    onSelectVoice,
+    voice.microphone
+  ]);
+  const appendTranscript = (0, import_react5.useCallback)(() => {
+    if (!committedTranscript.trim()) {
+      return;
+    }
+    onAppendTranscript(committedTranscript);
+  }, [committedTranscript, onAppendTranscript]);
+  (0, import_react5.useEffect)(() => {
+    if (startRequestId === 0 || startRequestId === lastStartRequestId.current) {
+      return;
+    }
+    lastStartRequestId.current = startRequestId;
+    void startVoiceInput();
+  }, [startRequestId, startVoiceInput]);
+  (0, import_react5.useEffect)(() => {
+    if (appendRequestId === 0 || appendRequestId === lastAppendRequestId.current) {
+      return;
+    }
+    lastAppendRequestId.current = appendRequestId;
+    appendTranscript();
+  }, [appendRequestId, appendTranscript]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    IssueReportVoicePanel,
+    {
+      canUseText,
+      effectiveInputMode,
+      isSubmitting,
+      isVoiceActive,
+      isVoiceConnecting,
+      voice,
+      voiceTokenResult,
+      committedTranscript,
+      voiceError,
+      scribeError,
+      onSelectText,
+      onSelectVoice,
+      onStartVoiceInput: () => void startVoiceInput(),
+      onStopVoiceInput: disconnectScribe,
+      onAppendTranscript: appendTranscript
+    }
+  );
+}
+var import_react3, import_react4, import_react5, import_jsx_runtime2, VoiceCapture_default;
+var init_VoiceCapture = __esm({
+  "src/voice/VoiceCapture.tsx"() {
+    "use strict";
+    import_react3 = require("@elevenlabs/react");
+    import_react4 = require("@phosphor-icons/react");
+    import_react5 = require("react");
+    import_jsx_runtime2 = require("react/jsx-runtime");
+    VoiceCapture_default = VoiceCapture;
+  }
+});
+
+// src/screenshot-capture.ts
+var screenshot_capture_exports = {};
+__export(screenshot_capture_exports, {
+  ATTACHMENT_MAX_BYTES: () => ATTACHMENT_MAX_BYTES2,
+  SCREENSHOT_CAPTURE_REDACTION_TEXT: () => SCREENSHOT_CAPTURE_REDACTION_TEXT,
+  captureScreenshot: () => captureScreenshot,
+  maskScreenshotCaptureDocument: () => maskScreenshotCaptureDocument,
+  resetHtml2CanvasCache: () => resetHtml2CanvasCache
+});
+function loadHtml2Canvas() {
+  if (!html2canvasPromise) {
+    html2canvasPromise = import("html2canvas");
+  }
+  return html2canvasPromise;
+}
+function resolveFilename(config, context) {
+  const imageType = config.imageType ?? "image/png";
+  const ext = MIME_TO_EXTENSION[imageType] ?? "png";
+  if (typeof config.filename === "function") {
+    return config.filename(context);
+  }
+  if (typeof config.filename === "string") {
+    return config.filename;
+  }
+  return `screenshot-${context.target.componentKey}-${Date.now()}.${ext}`;
+}
+function resolveRootElement(config) {
+  if (typeof config.rootElement === "function") {
+    return config.rootElement();
+  }
+  if (typeof HTMLElement !== "undefined" && config.rootElement instanceof HTMLElement) {
+    return config.rootElement;
+  }
+  return document.documentElement;
+}
+function buildIgnoreSelectors(config) {
+  const selectors = [...DEFAULT_EXCLUDE_SELECTORS];
+  if (config.excludeSelectors) {
+    selectors.push(...config.excludeSelectors.map((selector) => selector.trim()));
+  }
+  return selectors.filter(Boolean);
+}
+function safelyMatchesSelector(element, selector) {
+  try {
+    return element.matches(selector);
+  } catch {
+    return false;
+  }
+}
+function buildIgnoreElementPredicate(config) {
+  const selectors = buildIgnoreSelectors(config);
+  return (element) => selectors.some((selector) => safelyMatchesSelector(element, selector));
+}
+function canvasToBlobAsync(canvas, mimeType, quality) {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, mimeType, quality);
+  });
+}
+async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
+  const initial = await canvasToBlobAsync(canvas, imageType, quality);
+  if (initial && initial.size <= maxBytes) {
+    return { blob: initial, scaled: false };
+  }
+  const fallbackTypes = imageType === "image/png" ? ["image/webp", "image/jpeg"] : [imageType, "image/webp", "image/jpeg"];
+  let currentCanvas = canvas;
+  let scaled = false;
+  for (const scale of [0.85, 0.7, 0.55, 0.4]) {
+    currentCanvas = scaleCanvas(currentCanvas, scale);
+    scaled = true;
+    for (const format of fallbackTypes) {
+      for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
+        const attempt = await canvasToBlobAsync(
+          currentCanvas,
+          format,
+          candidateQuality
+        );
+        if (attempt && attempt.size <= maxBytes) {
+          return { blob: attempt, scaled };
+        }
+      }
+    }
+  }
+  throw new Error(
+    `Screenshot exceeds ${Math.round(maxBytes / 1024 / 1024)} MiB after compression`
+  );
+}
+async function captureScreenshot(config, context) {
+  if (!config.enabled) {
+    throw new Error("Screenshot capture is not enabled");
+  }
+  if (!canUseBrowserCapture()) {
+    throw new Error("Browser screenshot capture is unavailable");
+  }
+  const { default: html2canvas } = await loadHtml2Canvas();
+  const rootElement = resolveRootElement(config);
+  if (!rootElement) {
+    throw new Error("Screenshot root element not found");
+  }
+  const ignoreElements = buildIgnoreElementPredicate(config);
+  const imageType = config.imageType ?? "image/png";
+  const maxBytes = Math.min(config.maxBytes ?? ATTACHMENT_MAX_BYTES2, ATTACHMENT_MAX_BYTES2);
+  const viewport = readViewport();
+  const rect = resolveCaptureRect(config, viewport);
+  const pixelRatio = Math.min(
+    Math.max(config.pixelRatio ?? window.devicePixelRatio ?? 1, 1),
+    2
+  );
+  const ignoreSelectors = buildIgnoreSelectors(config);
+  const canvas = await html2canvas(rootElement, {
+    useCORS: true,
+    allowTaint: false,
+    backgroundColor: null,
+    logging: false,
+    ignoreElements,
+    onclone: (clonedDocument) => {
+      maskScreenshotCaptureDocument(
+        clonedDocument,
+        ignoreSelectors,
+        config.maskSelectors
+      );
+    },
+    removeContainer: true,
+    scale: pixelRatio,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+    width: rect.width,
+    height: rect.height,
+    windowWidth: viewport.width,
+    windowHeight: viewport.height,
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY
+  });
+  const output = await canvasToSizedBlob(
+    canvas,
+    imageType,
+    config.quality,
+    maxBytes
+  );
+  const filename = resolveFilename(config, context);
+  return {
+    blob: new Blob([output.blob], { type: output.blob.type || imageType }),
+    filename: replaceFilenameExtension(
+      filename,
+      MIME_TO_EXTENSION[output.blob.type || imageType] ?? MIME_TO_EXTENSION[imageType]
+    ),
+    mimeType: output.blob.type || imageType,
+    byteSize: output.blob.size,
+    rect,
+    scaled: output.scaled
+  };
+}
+function resetHtml2CanvasCache() {
+  html2canvasPromise = null;
+}
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+  clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
+  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
+}
+function canUseBrowserCapture() {
+  return typeof window !== "undefined" && typeof document !== "undefined" && typeof Blob !== "undefined" && typeof document.createElement === "function";
+}
+function readViewport() {
+  return {
+    width: Math.max(
+      1,
+      Math.round(window.innerWidth || document.documentElement.clientWidth || 1)
+    ),
+    height: Math.max(
+      1,
+      Math.round(window.innerHeight || document.documentElement.clientHeight || 1)
+    )
+  };
+}
+function resolveCaptureRect(config, viewport) {
+  const configuredRect = typeof config.rect === "function" ? config.rect() : config.rect;
+  const source = configuredRect && configuredRect.width > 0 && configuredRect.height > 0 ? configuredRect : { top: 0, left: 0, width: viewport.width, height: viewport.height };
+  const left = clamp(Math.round(source.left), 0, viewport.width - 1);
+  const top = clamp(Math.round(source.top), 0, viewport.height - 1);
+  const right = clamp(
+    Math.round(source.left + source.width),
+    left + 1,
+    viewport.width
+  );
+  const bottom = clamp(
+    Math.round(source.top + source.height),
+    top + 1,
+    viewport.height
+  );
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function maskCaptureElement(element) {
+  if (element instanceof HTMLInputElement) {
+    element.value = "";
+    element.setAttribute("value", "");
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLTextAreaElement) {
+    element.value = "";
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    element.setAttribute("placeholder", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+  } else if (element instanceof HTMLSelectElement) {
+    element.querySelectorAll("option").forEach((option) => {
+      option.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+    });
+  } else {
+    element.textContent = SCREENSHOT_CAPTURE_REDACTION_TEXT;
+  }
+  if (element instanceof HTMLElement) {
+    element.setAttribute("aria-label", SCREENSHOT_CAPTURE_REDACTION_TEXT);
+    element.style.color = "#1d1914";
+    element.style.backgroundColor = "#d8d0c1";
+  }
+}
+function redactSensitiveTextNodes(root) {
+  if (!root) {
+    return;
+  }
+  const ownerDocument = root.ownerDocument ?? document;
+  const walker = ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
+  while (node) {
+    if (node.textContent) {
+      node.textContent = redactSensitiveText(node.textContent);
+    }
+    node = walker.nextNode();
+  }
+}
+function redactSensitiveText(value) {
+  return value.replace(
+    /\b((?:access|refresh|id)_token)=([^&#\s]+)/gi,
+    (_, key, token) => `${key}=${redactValue(token)}`
+  ).replace(/\bBearer\s+[A-Za-z0-9._~+/=-]+/gi, "Bearer [redacted]").replace(/\b[ps]k_(?:live|test)_[A-Za-z0-9_=-]+/g, SCREENSHOT_CAPTURE_REDACTION_TEXT).replace(/\b(?:token|secret|password|signature)[_-]?[A-Za-z0-9._~+/=-]{8,}/gi, SCREENSHOT_CAPTURE_REDACTION_TEXT);
+}
+function redactValue(value) {
+  return value ? SCREENSHOT_CAPTURE_REDACTION_TEXT : value;
+}
+function scaleCanvas(source, ratio) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(source.width * ratio));
+  canvas.height = Math.max(1, Math.round(source.height * ratio));
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D context is unavailable");
+  }
+  context.drawImage(source, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+function replaceFilenameExtension(filename, extension) {
+  return filename.replace(/\.(png|jpe?g|webp)$/i, `.${extension}`);
+}
+var DEFAULT_EXCLUDE_SELECTORS, DEFAULT_MASK_SELECTORS, SCREENSHOT_CAPTURE_REDACTION_TEXT, ATTACHMENT_MAX_BYTES2, MIME_TO_EXTENSION, html2canvasPromise;
+var init_screenshot_capture = __esm({
+  "src/screenshot-capture.ts"() {
+    "use strict";
+    DEFAULT_EXCLUDE_SELECTORS = [
+      "[data-spaps-screenshot-exclude]",
+      "[data-spaps-private]"
+    ];
+    DEFAULT_MASK_SELECTORS = [
+      "input",
+      "option",
+      "select",
+      "textarea",
+      '[contenteditable="true"]'
+    ];
+    SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
+    ATTACHMENT_MAX_BYTES2 = 10 * 1024 * 1024;
+    MIME_TO_EXTENSION = {
+      "image/png": "png",
+      "image/jpeg": "jpg",
+      "image/webp": "webp"
+    };
+    html2canvasPromise = null;
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -61,10 +611,9 @@ module.exports = __toCommonJS(index_exports);
 // src/components.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var Popover = __toESM(require("@radix-ui/react-popover"));
-var import_react3 = require("@elevenlabs/react");
-var import_react4 = require("@phosphor-icons/react");
+var import_react6 = require("@phosphor-icons/react");
 var import_date_fns = require("date-fns");
-var import_react5 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/provider.tsx
 var import_react2 = require("react");
@@ -546,6 +1095,7 @@ function IssueReportingProvider({
   inputModes,
   defaultInputMode,
   voice,
+  screenshotCapture,
   copy,
   children
 }) {
@@ -791,6 +1341,7 @@ function IssueReportingProvider({
       inputModes: resolvedInputModes,
       defaultInputMode: resolvedDefaultInputMode,
       voice: resolvedVoiceConfig,
+      screenshotCapture,
       needsResponseIssueIds,
       setNeedsResponse
     }),
@@ -819,6 +1370,7 @@ function IssueReportingProvider({
       resolvedInputModes,
       resolvedVoiceConfig,
       scope,
+      screenshotCapture,
       selectPanel,
       setNeedsResponse,
       startNewIssue
@@ -859,8 +1411,8 @@ function IssueReportingProvider({
 }
 
 // src/components.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function cn(...values) {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cn2(...values) {
   return values.filter(Boolean).join(" ");
 }
 var Z_FLOATING_BUTTON = "z-[65]";
@@ -875,6 +1427,9 @@ var POPOVER_SHADOW = "shadow-[0_18px_48px_rgba(15,23,42,0.18)]";
 var MODAL_SHADOW = "shadow-[0_28px_80px_rgba(15,23,42,0.24)]";
 var BADGE_TEXT = "text-[11px]";
 var LABEL_TEXT = "text-[11px]";
+var VoiceCapture2 = import_react7.default.lazy(() => Promise.resolve().then(() => (init_VoiceCapture(), VoiceCapture_exports)));
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react7.useEffect : import_react7.default.useLayoutEffect;
+var SCREENSHOT_CAPTURE_METADATA_KEY = "screenshot_capture";
 function truncate(value, max = 80) {
   if (value.length <= max) {
     return value;
@@ -886,7 +1441,7 @@ function formatRelativeTime(timestamp) {
     addSuffix: true
   });
 }
-function resolveErrorMessage(error, fallback) {
+function resolveErrorMessage2(error, fallback) {
   if (error instanceof Error && error.message.trim()) {
     return error.message;
   }
@@ -895,8 +1450,13 @@ function resolveErrorMessage(error, fallback) {
   }
   return fallback;
 }
-function getCommittedTranscriptText(committedTranscripts) {
-  return committedTranscripts.map((segment) => segment.text.trim()).filter(Boolean).join(" ").trim();
+function buildScreenshotCaptureMetadata(config, status) {
+  return {
+    status,
+    scope: config.scope ?? "visible_viewport",
+    image_type: config.imageType ?? "image/png",
+    ...status === "failed" ? { failure_reason: "capture_failed" } : {}
+  };
 }
 function appendTranscriptToNote(current, transcript) {
   const normalizedCurrent = current.trim();
@@ -937,105 +1497,129 @@ function getIssueOriginText(issue, copy) {
   const humanName = issue.reporter_display_name?.trim();
   return humanName ? `${copy.originHumanLabel} \xB7 ${humanName}` : copy.originHumanLabel;
 }
-function IssueReportVoicePanel({
+function IssueReportVoiceActivationPanel({
   canUseText,
   effectiveInputMode,
   isSubmitting,
-  isVoiceActive,
-  isVoiceConnecting,
-  voice,
-  voiceTokenResult,
-  committedTranscript,
-  voiceError,
-  scribeError,
   onSelectText,
   onSelectVoice,
-  onStartVoiceInput,
-  onStopVoiceInput,
-  onAppendTranscript
+  onRequestStartVoiceInput,
+  onRequestAppendTranscript
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    canUseText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    canUseText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "button",
         {
           type: "button",
-          className: cn(
+          className: cn2(
             "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
             effectiveInputMode === "text" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
           ),
           onClick: onSelectText,
           disabled: isSubmitting,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.TextT, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.TextT, { className: "h-3.5 w-3.5" }),
             "Text Input"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "button",
         {
           type: "button",
-          className: cn(
+          className: cn2(
             "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
             effectiveInputMode === "voice" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
           ),
           onClick: onSelectVoice,
           disabled: isSubmitting,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Microphone, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Microphone, { className: "h-3.5 w-3.5" }),
             "Voice Input"
           ]
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: "Voice Input" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "mt-1 text-xs text-slate-600", children: [
-            "Provider: ",
-            voiceTokenResult?.provider ?? voice.provider,
-            " \xB7 Model:",
-            " ",
-            voiceTokenResult?.model_id ?? voice.modelId
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: voice.requireMicrophonePermission ? "Microphone access is required to transcribe." : "Microphone access policy is optional." })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
-          isVoiceActive || isVoiceConnecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100",
-              onClick: onStopVoiceInput,
-              disabled: isSubmitting,
-              children: "Stop Voice Input"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800",
-              onClick: onStartVoiceInput,
-              disabled: isSubmitting,
-              children: "Start Voice Input"
-            }
-          ),
-          canUseText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60",
-              onClick: onAppendTranscript,
-              disabled: isSubmitting || !committedTranscript.trim(),
-              children: "Append Transcript"
-            }
-          ) : null
-        ] })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: "Voice Input" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-xs text-slate-600", children: "Voice capture loads when selected." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-3 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700", children: committedTranscript ? committedTranscript : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-slate-500", children: "No committed transcript yet." }) }),
-      voiceError || scribeError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700", children: voiceError ?? scribeError }) : isVoiceConnecting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 text-xs text-slate-500", children: "Connecting voice transcription..." }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800",
+            onClick: onRequestStartVoiceInput,
+            disabled: isSubmitting,
+            children: "Start Voice Input"
+          }
+        ),
+        canUseText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60",
+            onClick: onRequestAppendTranscript,
+            disabled: isSubmitting,
+            children: "Append Transcript"
+          }
+        ) : null
+      ] })
+    ] }) })
+  ] });
+}
+function IssueReportVoiceFallback({
+  canUseText,
+  isSubmitting,
+  onSelectText,
+  onSelectVoice,
+  onRequestStartVoiceInput
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    canUseText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 rounded-full border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50",
+          onClick: onSelectText,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.TextT, { className: "h-3.5 w-3.5" }),
+            "Text Input"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 rounded-full border border-slate-900 bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition",
+          onClick: onSelectVoice,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Microphone, { className: "h-3.5 w-3.5" }),
+            "Voice Input"
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1", children: "Loading voice input..." }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800",
+          onClick: onRequestStartVoiceInput,
+          disabled: isSubmitting,
+          children: "Start Voice Input"
+        }
+      )
     ] })
   ] });
 }
@@ -1049,13 +1633,13 @@ function IssueReportNoteEditor({
   onSubmit
 }) {
   if (!canUseText) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: getIssueNoteLengthMessage(normalizedNote, copy) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-1", children: "Submit is enabled after a committed transcript reaches 10-2000 characters." })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: getIssueNoteLengthMessage(normalizedNote, copy) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-1", children: "Submit is enabled after a committed transcript reaches 10-2000 characters." })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "textarea",
       {
         value: note,
@@ -1072,9 +1656,9 @@ function IssueReportNoteEditor({
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between text-xs text-slate-500", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: getIssueNoteLengthMessage(note, copy) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.keyboardShortcutHint })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between text-xs text-slate-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: getIssueNoteLengthMessage(note, copy) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: copy.keyboardShortcutHint })
     ] })
   ] });
 }
@@ -1084,10 +1668,10 @@ function IssueReportModalDescription({
   target
 }) {
   if (mode === "create" && target) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       copy.createDescriptionPrefix,
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-700", children: target.page_url })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-700", children: target.page_url })
     ] });
   }
   return mode === "edit" ? copy.editDescription : copy.replyDescription;
@@ -1106,13 +1690,10 @@ function IssueReportModalBody({
   normalizedNote,
   isValid,
   isSubmitting,
-  isVoiceActive,
-  isVoiceConnecting,
   voice,
-  voiceTokenResult,
-  committedTranscript,
-  voiceError,
-  scribeError,
+  createVoiceToken,
+  voiceStartRequestId,
+  voiceAppendRequestId,
   submitError,
   existingAttachments,
   removedExistingIds,
@@ -1123,8 +1704,10 @@ function IssueReportModalBody({
   onClose,
   onSelectText,
   onSelectVoice,
-  onStartVoiceInput,
-  onStopVoiceInput,
+  onRequestStartVoiceInput,
+  onRequestAppendTranscript,
+  onTranscriptCommitted,
+  onVoiceSubmitMetadataChange,
   onAppendTranscript,
   onNoteChange,
   onSubmit,
@@ -1133,16 +1716,16 @@ function IssueReportModalBody({
   onRemovePendingAttachment
 }) {
   if (isHydrating) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.hydrateLoading })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Spinner, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: copy.hydrateLoading })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             type: "button",
@@ -1151,7 +1734,7 @@ function IssueReportModalBody({
             children: copy.retryAction
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             type: "button",
@@ -1163,32 +1746,55 @@ function IssueReportModalBody({
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    mode === "create" && canUseVoice ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      IssueReportVoicePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    mode === "create" && canUseVoice ? effectiveInputMode === "voice" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react7.default.Suspense,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          IssueReportVoiceFallback,
+          {
+            canUseText,
+            isSubmitting,
+            onSelectText,
+            onSelectVoice,
+            onRequestStartVoiceInput
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          VoiceCapture2,
+          {
+            canUseText,
+            effectiveInputMode,
+            isSubmitting,
+            voice,
+            createVoiceToken,
+            startRequestId: voiceStartRequestId,
+            appendRequestId: voiceAppendRequestId,
+            onSelectText,
+            onSelectVoice,
+            onTranscriptCommitted,
+            onSubmitMetadataChange: onVoiceSubmitMetadataChange,
+            onAppendTranscript
+          }
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      IssueReportVoiceActivationPanel,
       {
         canUseText,
         effectiveInputMode,
         isSubmitting,
-        isVoiceActive,
-        isVoiceConnecting,
-        voice,
-        voiceTokenResult,
-        committedTranscript,
-        voiceError,
-        scribeError,
         onSelectText,
         onSelectVoice,
-        onStartVoiceInput,
-        onStopVoiceInput,
-        onAppendTranscript
+        onRequestStartVoiceInput,
+        onRequestAppendTranscript
       }
     ) : null,
-    mode === "reply" && issue ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: copy.originalIssueLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-sm text-slate-700", children: issue.note })
+    mode === "reply" && issue ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-5 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: copy.originalIssueLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-slate-700", children: issue.note })
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       IssueReportNoteEditor,
       {
         canUseText,
@@ -1200,7 +1806,7 @@ function IssueReportModalBody({
         onSubmit
       }
     ),
-    canUseAttachments && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    canUseAttachments && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       AttachmentPicker,
       {
         existingAttachments,
@@ -1214,9 +1820,9 @@ function IssueReportModalBody({
         onRemovePending: onRemovePendingAttachment
       }
     ),
-    submitError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700", children: submitError }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-6 flex justify-end gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    submitError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700", children: submitError }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-6 flex justify-end gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           type: "button",
@@ -1226,11 +1832,11 @@ function IssueReportModalBody({
           children: copy.cancelAction
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           type: "button",
-          className: cn(
+          className: cn2(
             "rounded-full px-4 py-2 text-sm font-semibold text-white transition",
             isValid && !isSubmitting ? "bg-slate-900 hover:bg-slate-800" : "cursor-not-allowed bg-slate-300"
           ),
@@ -1240,104 +1846,9 @@ function IssueReportModalBody({
         }
       )
     ] }),
-    mode !== "create" && issue ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportMessageThread, { issueReportId: issue.id }) : null
+    mode !== "create" && issue ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportMessageThread, { issueReportId: issue.id }) : null
   ] });
 }
-function useIssueReportVoiceCapture({
-  canUseVoice,
-  defaultInputMode,
-  isSubmitting,
-  voice
-}) {
-  const [inputMode, setInputMode] = (0, import_react5.useState)(defaultInputMode);
-  const [voiceTokenResult, setVoiceTokenResult] = (0, import_react5.useState)(null);
-  const [voiceSubmitMetadata, setVoiceSubmitMetadata] = (0, import_react5.useState)(null);
-  const [voiceError, setVoiceError] = (0, import_react5.useState)(null);
-  const {
-    status: scribeStatus,
-    isConnected,
-    isTranscribing,
-    committedTranscripts,
-    error: scribeError,
-    connect: connectScribe,
-    disconnect: disconnectScribe
-  } = (0, import_react3.useScribe)({
-    autoConnect: false,
-    modelId: voice.modelId,
-    microphone: voice.microphone
-  });
-  const committedTranscript = (0, import_react5.useMemo)(
-    () => getCommittedTranscriptText(committedTranscripts),
-    [committedTranscripts]
-  );
-  const isVoiceConnecting = scribeStatus === "connecting";
-  const isVoiceActive = isConnected || isTranscribing;
-  const resetVoiceCapture = (0, import_react5.useCallback)(() => {
-    disconnectScribe();
-    setInputMode(defaultInputMode);
-    setVoiceTokenResult(null);
-    setVoiceSubmitMetadata(null);
-    setVoiceError(null);
-  }, [defaultInputMode, disconnectScribe]);
-  const startVoiceInput = (0, import_react5.useCallback)(
-    async (createVoiceToken) => {
-      if (!canUseVoice || isSubmitting || isVoiceActive || isVoiceConnecting) {
-        return;
-      }
-      if (!createVoiceToken) {
-        setVoiceError("Voice input is unavailable for this client.");
-        return;
-      }
-      setVoiceError(null);
-      try {
-        const tokenResult = await createVoiceToken();
-        setVoiceTokenResult(tokenResult);
-        setVoiceSubmitMetadata(tokenResult);
-        await connectScribe({
-          token: tokenResult.token,
-          modelId: tokenResult.model_id,
-          microphone: voice.microphone
-        });
-        setInputMode("voice");
-      } catch (startError) {
-        setVoiceError(resolveErrorMessage(startError, "Failed to start voice input."));
-      }
-    },
-    [
-      canUseVoice,
-      connectScribe,
-      isSubmitting,
-      isVoiceActive,
-      isVoiceConnecting,
-      voice.microphone
-    ]
-  );
-  const appendTranscript = (0, import_react5.useCallback)(
-    (setNote) => {
-      if (!committedTranscript.trim()) {
-        return;
-      }
-      setNote((current) => appendTranscriptToNote(current, committedTranscript));
-      setInputMode("text");
-    },
-    [committedTranscript]
-  );
-  return {
-    inputMode,
-    setInputMode,
-    voiceTokenResult,
-    voiceSubmitMetadata,
-    committedTranscript,
-    voiceError,
-    scribeError,
-    isVoiceConnecting,
-    isVoiceActive,
-    resetVoiceCapture,
-    startVoiceInput,
-    stopVoiceInput: disconnectScribe,
-    appendTranscript
-  };
-}
 var INITIAL_UPLOAD_PROGRESS = {
   phase: "idle",
   uploaded: 0,
@@ -1373,23 +1884,23 @@ function AttachmentPicker({
   onRemoveExisting,
   onRemovePending
 }) {
-  const fileInputRef = (0, import_react5.useRef)(null);
+  const fileInputRef = (0, import_react7.useRef)(null);
   const retainedExisting = existingAttachments.filter(
     (a) => !removedExistingIds.has(a.id)
   );
   const totalCount = retainedExisting.length + pendingFiles.length;
   const canAdd = totalCount < ATTACHMENT_MAX_COUNT && !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Image, { className: "h-3.5 w-3.5" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Image, { className: "h-3.5 w-3.5" }),
         "Screenshots (",
         totalCount,
         "/",
         ATTACHMENT_MAX_COUNT,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           ref: fileInputRef,
@@ -1407,11 +1918,11 @@ function AttachmentPicker({
           "aria-label": "Select screenshot files"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           type: "button",
-          className: cn(
+          className: cn2(
             "rounded-full border px-3 py-1 text-xs font-medium transition",
             canAdd ? "border-slate-300 text-slate-700 hover:bg-slate-50" : "cursor-not-allowed border-slate-200 text-slate-400"
           ),
@@ -1422,7 +1933,7 @@ function AttachmentPicker({
         }
       )
     ] }),
-    validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1", children: validationErrors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "space-y-1", children: validationErrors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
@@ -1431,15 +1942,15 @@ function AttachmentPicker({
       },
       i
     )) }),
-    uploadProgress.phase === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+    uploadProgress.phase === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
       "Uploading ",
       uploadProgress.uploaded,
       " of ",
       uploadProgress.total,
       "..."
     ] }),
-    uploadProgress.phase === "error" && uploadProgress.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    uploadProgress.phase === "error" && uploadProgress.error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
@@ -1447,18 +1958,18 @@ function AttachmentPicker({
         children: uploadProgress.error
       }
     ),
-    (retainedExisting.length > 0 || pendingFiles.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
-      retainedExisting.map((att) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    (retainedExisting.length > 0 || pendingFiles.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+      retainedExisting.map((att) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Image, { className: "h-4 w-4 flex-shrink-0 text-slate-400" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: att.original_filename }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(att.byte_size) })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Image, { className: "h-4 w-4 flex-shrink-0 text-slate-400" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: att.original_filename }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(att.byte_size) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
@@ -1466,19 +1977,19 @@ function AttachmentPicker({
                 onClick: () => onRemoveExisting(att.id),
                 disabled,
                 "aria-label": `Remove ${att.original_filename}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Trash, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Trash, { className: "h-3.5 w-3.5" })
               }
             )
           ]
         },
         att.id
       )),
-      pendingFiles.map((pf) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      pendingFiles.map((pf) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "img",
               {
                 src: pf.previewUrl,
@@ -1486,11 +1997,11 @@ function AttachmentPicker({
                 className: "h-8 w-8 flex-shrink-0 rounded object-cover"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: pf.file.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(pf.file.size) })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: pf.file.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(pf.file.size) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "button",
               {
                 type: "button",
@@ -1498,7 +2009,7 @@ function AttachmentPicker({
                 onClick: () => onRemovePending(pf.clientId),
                 disabled,
                 "aria-label": `Remove ${pf.file.name}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Trash, { className: "h-3.5 w-3.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Trash, { className: "h-3.5 w-3.5" })
               }
             )
           ]
@@ -1509,16 +2020,16 @@ function AttachmentPicker({
   ] });
 }
 function useAttachmentState(existingAttachments) {
-  const [pendingFiles, setPendingFiles] = (0, import_react5.useState)([]);
-  const [removedExistingIds, setRemovedExistingIds] = (0, import_react5.useState)(
+  const [pendingFiles, setPendingFiles] = (0, import_react7.useState)([]);
+  const [removedExistingIds, setRemovedExistingIds] = (0, import_react7.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [validationErrors, setValidationErrors] = (0, import_react5.useState)([]);
-  const [uploadProgress, setUploadProgress] = (0, import_react5.useState)(INITIAL_UPLOAD_PROGRESS);
+  const [validationErrors, setValidationErrors] = (0, import_react7.useState)([]);
+  const [uploadProgress, setUploadProgress] = (0, import_react7.useState)(INITIAL_UPLOAD_PROGRESS);
   const retainedExistingCount = existingAttachments.filter(
     (a) => !removedExistingIds.has(a.id)
   ).length;
-  const reset = (0, import_react5.useCallback)(() => {
+  const reset = (0, import_react7.useCallback)(() => {
     for (const pf of pendingFiles) {
       URL.revokeObjectURL(pf.previewUrl);
     }
@@ -1527,7 +2038,7 @@ function useAttachmentState(existingAttachments) {
     setValidationErrors([]);
     setUploadProgress(INITIAL_UPLOAD_PROGRESS);
   }, [pendingFiles]);
-  const addFiles = (0, import_react5.useCallback)(
+  const addFiles = (0, import_react7.useCallback)(
     (fileList) => {
       const currentTotal = retainedExistingCount + pendingFiles.length;
       const errors = [];
@@ -1561,10 +2072,10 @@ function useAttachmentState(existingAttachments) {
     },
     [pendingFiles.length, retainedExistingCount]
   );
-  const removeExisting = (0, import_react5.useCallback)((id) => {
+  const removeExisting = (0, import_react7.useCallback)((id) => {
     setRemovedExistingIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
   }, []);
-  const removePending = (0, import_react5.useCallback)((clientId) => {
+  const removePending = (0, import_react7.useCallback)((clientId) => {
     setPendingFiles((prev) => {
       const removed = prev.find((pf) => pf.clientId === clientId);
       if (removed) {
@@ -1574,7 +2085,7 @@ function useAttachmentState(existingAttachments) {
     });
     setUploadProgress(INITIAL_UPLOAD_PROGRESS);
   }, []);
-  const markPendingUploaded = (0, import_react5.useCallback)((clientId, attachmentId) => {
+  const markPendingUploaded = (0, import_react7.useCallback)((clientId, attachmentId) => {
     setPendingFiles(
       (prev) => prev.map(
         (pf) => pf.clientId === clientId ? { ...pf, uploadedAttachmentId: attachmentId } : pf
@@ -1632,19 +2143,19 @@ function MessageBubble({
   const isReporter = message.actor.author_type === "reporter";
   const isFinal = message.kind === "final_response";
   const authorLabel = isReporter ? copy.threadAuthorReporter : copy.threadAuthorOperator;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "li",
     {
-      className: cn(
+      className: cn2(
         "flex flex-col gap-1",
         isReporter ? "items-end" : "items-start"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
-              className: cn(
+              className: cn2(
                 "rounded-full px-2 py-0.5 font-medium",
                 BADGE_TEXT,
                 getMessageKindClassName(message.kind)
@@ -1652,8 +2163,8 @@ function MessageBubble({
               children: getMessageKindLabel(message.kind, copy)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("font-medium text-slate-600", LABEL_TEXT), children: authorLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn2("font-medium text-slate-600", LABEL_TEXT), children: authorLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "time",
             {
               className: "text-xs text-slate-400",
@@ -1662,10 +2173,10 @@ function MessageBubble({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "div",
           {
-            className: cn(
+            className: cn2(
               "max-w-[85%] whitespace-pre-wrap rounded-2xl border px-3 py-2 text-sm",
               isReporter ? "border-slate-900 bg-slate-900 text-white" : isFinal ? "border-emerald-200 bg-emerald-50 text-emerald-950" : "border-slate-200 bg-white text-slate-800"
             ),
@@ -1681,9 +2192,9 @@ function ReporterResponseComposer({
   copy
 }) {
   const mutation = useIssueReportingMessageMutation(issueReportId);
-  const idempotencyKeyRef = (0, import_react5.useRef)(generateIdempotencyKey());
-  const [body, setBody] = (0, import_react5.useState)("");
-  const [submitError, setSubmitError] = (0, import_react5.useState)(null);
+  const idempotencyKeyRef = (0, import_react7.useRef)(generateIdempotencyKey());
+  const [body, setBody] = (0, import_react7.useState)("");
+  const [submitError, setSubmitError] = (0, import_react7.useState)(null);
   const normalized = body.trim();
   const isValid = normalized.length >= REPORTER_MESSAGE_MIN_LENGTH && normalized.length <= REPORTER_MESSAGE_MAX_LENGTH;
   const isSubmitting = mutation.isPending;
@@ -1705,22 +2216,22 @@ function ReporterResponseComposer({
         idempotencyKeyRef.current = generateIdempotencyKey();
         return;
       }
-      setSubmitError(resolveErrorMessage(error, copy.threadResponseFailed));
+      setSubmitError(resolveErrorMessage2(error, copy.threadResponseFailed));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-3 space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-3 space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "label",
       {
         htmlFor: "issue-report-thread-response",
-        className: cn(
+        className: cn2(
           "block font-medium uppercase tracking-wide text-slate-500",
           LABEL_TEXT
         ),
         children: copy.threadResponseLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "textarea",
       {
         id: "issue-report-thread-response",
@@ -1737,7 +2248,7 @@ function ReporterResponseComposer({
         disabled: isSubmitting
       }
     ),
-    submitError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    submitError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
@@ -1745,11 +2256,11 @@ function ReporterResponseComposer({
         children: submitError
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
-        className: cn(
+        className: cn2(
           "rounded-full px-4 py-2 text-sm font-semibold text-white transition",
           isValid && !isSubmitting ? "bg-slate-900 hover:bg-slate-800" : "cursor-not-allowed bg-slate-300"
         ),
@@ -1768,7 +2279,7 @@ function IssueReportMessageThread({
   const supportsSubmit = Boolean(client.issueReporting.submitMessage);
   const query = useIssueReportingMessages(issueReportId);
   const needsResponse = query.data?.needs_response ?? false;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setNeedsResponse(issueReportId, needsResponse);
     return () => {
       setNeedsResponse(issueReportId, false);
@@ -1778,18 +2289,18 @@ function IssueReportMessageThread({
     return null;
   }
   const visibleMessages = selectReporterVisibleMessages(query.data?.items ?? []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "section",
     {
       "aria-label": copy.threadTitle,
       className: "mt-6 border-t border-slate-100 pt-5",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold text-slate-900", children: copy.threadTitle }),
-          needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-sm font-semibold text-slate-900", children: copy.threadTitle }),
+          needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
-              className: cn(
+              className: cn2(
                 "rounded-full px-2 py-0.5 font-medium",
                 BADGE_TEXT,
                 "bg-amber-100 text-amber-700"
@@ -1798,13 +2309,13 @@ function IssueReportMessageThread({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: copy.threadDescription }),
-        query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-4 w-4 animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.threadLoading })
-        ] }) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: resolveErrorMessage(query.error, copy.threadLoadFailed) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: copy.threadDescription }),
+        query.isPending ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Spinner, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: copy.threadLoading })
+        ] }) : query.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: resolveErrorMessage2(query.error, copy.threadLoadFailed) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
@@ -1813,8 +2324,8 @@ function IssueReportMessageThread({
               children: copy.retryAction
             }
           )
-        ] }) : visibleMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-center text-sm text-slate-500", children: copy.threadEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mt-4 space-y-3", children: visibleMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MessageBubble, { message, copy }, message.id)) }),
-        supportsSubmit ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ] }) : visibleMessages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-6 text-center text-sm text-slate-500", children: copy.threadEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "mt-4 space-y-3", children: visibleMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MessageBubble, { message, copy }, message.id)) }),
+        supportsSubmit ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           ReporterResponseComposer,
           {
             issueReportId,
@@ -1831,10 +2342,10 @@ function IssueReportModeBanner() {
   if (!reportMode?.isReportMode) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("fixed inset-x-4 top-4 flex justify-center", Z_BANNER), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-medium", children: copy.reportModeTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn2("fixed inset-x-4 top-4 flex justify-center", Z_BANNER), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-medium", children: copy.reportModeTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
@@ -1853,15 +2364,15 @@ function IssueList({
   const { copy, principalId } = useIssueReporting();
   const history = useIssueReportingHistory(filter);
   if (history.isPending) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-sm text-slate-600", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-4 w-4 animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.historyLoading })
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-sm text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Spinner, { className: "h-4 w-4 animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: copy.historyLoading })
     ] });
   }
   if (history.error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: history.error.message || copy.historyLoadFailed }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: history.error.message || copy.historyLoadFailed }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           type: "button",
@@ -1874,26 +2385,26 @@ function IssueList({
   }
   if (history.items.length === 0) {
     const emptyMessage = filter === "unresolved" ? copy.emptyUnresolved : filter === "resolved" ? copy.emptyResolved : copy.emptyAll;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500", children: emptyMessage });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-2xl border border-dashed border-slate-200 bg-slate-50 px-4 py-8 text-center text-sm text-slate-500", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-h-80 space-y-2 overflow-y-auto pr-1", children: history.items.map((issue) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-h-80 space-y-2 overflow-y-auto pr-1", children: history.items.map((issue) => {
     const action = getIssueAction(issue, principalId);
     const onAction = action === "edit" ? () => onEdit(issue.id) : action === "reply" ? () => onReply(issue.id) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "rounded-2xl border border-slate-200 bg-white px-3 py-3 shadow-sm",
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-0.5 flex-shrink-0", children: isClosedIssueStatus(issue.status) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.CheckCircle, { className: "h-4 w-4 text-emerald-600", weight: "fill" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Circle, { className: "h-4 w-4 text-rose-600", weight: "fill" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "truncate text-sm font-semibold text-slate-900", children: issue.target.component_label }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-0.5 flex-shrink-0", children: isClosedIssueStatus(issue.status) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.CheckCircle, { className: "h-4 w-4 text-emerald-600", weight: "fill" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Circle, { className: "h-4 w-4 text-rose-600", weight: "fill" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "truncate text-sm font-semibold text-slate-900", children: issue.target.component_label }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "span",
                     {
-                      className: cn(
+                      className: cn2(
                         "rounded-full px-2 py-0.5 font-medium",
                         BADGE_TEXT,
                         getIssueStatusClassName(issue.status)
@@ -1901,11 +2412,11 @@ function IssueList({
                       children: getIssueStatusBadgeLabel(issue.status)
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("rounded-full bg-slate-100 px-2 py-0.5 font-medium text-slate-600", BADGE_TEXT), children: getIssueOriginText(issue, copy) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-slate-400", children: formatRelativeTime(issue.updated_at) })
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn2("rounded-full bg-slate-100 px-2 py-0.5 font-medium text-slate-600", BADGE_TEXT), children: getIssueOriginText(issue, copy) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-slate-400", children: formatRelativeTime(issue.updated_at) })
                 ] })
               ] }),
-              action && onAction ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              action && onAction ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -1915,8 +2426,8 @@ function IssueList({
                 }
               ) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-2 text-sm text-slate-600", children: truncate(issue.note) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 truncate text-xs text-slate-400", children: issue.target.page_url })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-2 text-sm text-slate-600", children: truncate(issue.note) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-2 truncate text-xs text-slate-400", children: issue.target.page_url })
           ] })
         ] })
       },
@@ -1925,7 +2436,7 @@ function IssueList({
   }) });
 }
 function IssueReportPopover({ children }) {
-  const [filter, setFilter] = (0, import_react5.useState)("all");
+  const [filter, setFilter] = (0, import_react7.useState)("all");
   const {
     copy,
     isPopoverOpen,
@@ -1943,7 +2454,7 @@ function IssueReportPopover({ children }) {
   const history = useIssueReportingHistory("all");
   const status = useIssueReportingStatus();
   const allItems = history.data?.items ?? [];
-  const counts = (0, import_react5.useMemo)(
+  const counts = (0, import_react7.useMemo)(
     () => ({
       all: allItems.length,
       unresolved: filterIssueReports(allItems, "unresolved").length,
@@ -1955,37 +2466,37 @@ function IssueReportPopover({ children }) {
   const showSectionFirst = createMode === "surface_required" || createMode === "surface_preferred" && hasRegisteredTargets;
   const sectionActionDisabled = !hasRegisteredTargets;
   const helperText = createMode === "surface_required" ? hasRegisteredTargets ? copy.surfaceRequiredDescription : copy.specificSectionUnavailableDescription : createMode === "surface_preferred" && !hasRegisteredTargets ? copy.specificSectionUnavailableDescription : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Popover.Root,
     {
       open: isPopoverOpen,
       onOpenChange: (open) => open ? openPopover() : closePopover(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Popover.Content,
           {
             align: "end",
             side: "top",
             sideOffset: 12,
-            className: cn(
+            className: cn2(
               "rounded-3xl border border-slate-200 bg-white p-4",
               Z_POPOVER,
               POPOVER_WIDTH,
               POPOVER_SHADOW
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-sm font-semibold text-slate-900", children: copy.popoverTitle }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: statusSummary })
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-sm font-semibold text-slate-900", children: copy.popoverTitle }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-xs text-slate-500", children: statusSummary })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-wrap justify-end gap-2", children: showSectionFirst ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-wrap justify-end gap-2", children: showSectionFirst ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "button",
                     {
                       type: "button",
-                      className: cn(
+                      className: cn2(
                         "rounded-full px-3 py-2 text-xs font-semibold transition",
                         sectionActionDisabled ? "cursor-not-allowed bg-slate-200 text-slate-500" : "bg-slate-900 text-white hover:bg-slate-800"
                       ),
@@ -2000,7 +2511,7 @@ function IssueReportPopover({ children }) {
                       children: createMode === "surface_required" ? copy.reportNewAction : copy.reportSpecificAction
                     }
                   ),
-                  createMode !== "surface_required" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  createMode !== "surface_required" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2012,8 +2523,8 @@ function IssueReportPopover({ children }) {
                       children: copy.reportPageAction
                     }
                   ) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2025,7 +2536,7 @@ function IssueReportPopover({ children }) {
                       children: createMode === "general_page" ? copy.reportPageAction : copy.reportNewAction
                     }
                   ),
-                  hasRegisteredTargets ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  hasRegisteredTargets ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2039,10 +2550,10 @@ function IssueReportPopover({ children }) {
                   ) : null
                 ] }) })
               ] }),
-              helperText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-900", children: helperText }) : null,
-              status.error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: status.error.message || copy.statusLoadFailed }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              helperText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-900", children: helperText }) : null,
+              status.error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-4 text-sm text-rose-700", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: status.error.message || copy.statusLoadFailed }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2052,16 +2563,16 @@ function IssueReportPopover({ children }) {
                   }
                 )
               ] }) : null,
-              allowTenantScope ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("font-medium uppercase tracking-wide text-slate-500", LABEL_TEXT), children: copy.scopeLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: [
+              allowTenantScope ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn2("font-medium uppercase tracking-wide text-slate-500", LABEL_TEXT), children: copy.scopeLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-2", children: [
                   ["tenant", copy.scopeTenant],
                   ["mine", copy.scopeMine]
-                ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
-                    className: cn(
+                    className: cn2(
                       "rounded-full px-3 py-1.5 text-xs font-medium transition",
                       scope === value ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                     ),
@@ -2071,15 +2582,15 @@ function IssueReportPopover({ children }) {
                   value
                 )) })
               ] }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-2", children: [
                 ["all", copy.filtersAll, counts.all],
                 ["unresolved", copy.filtersUnresolved, counts.unresolved],
                 ["resolved", copy.filtersResolved, counts.resolved]
-              ].map(([value, label, count]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              ].map(([value, label, count]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "button",
                 {
                   type: "button",
-                  className: cn(
+                  className: cn2(
                     "rounded-full px-3 py-1.5 text-xs font-medium transition",
                     filter === value ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                   ),
@@ -2091,7 +2602,7 @@ function IssueReportPopover({ children }) {
                 },
                 value
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 IssueList,
                 {
                   filter,
@@ -2099,7 +2610,7 @@ function IssueReportPopover({ children }) {
                   onReply: (issueReportId) => openExistingIssueModal(issueReportId, "reply")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "border-t border-slate-100 pt-3 text-xs leading-relaxed text-slate-500", children: copy.historyHelpText })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "border-t border-slate-100 pt-3 text-xs leading-relaxed text-slate-500", children: copy.historyHelpText })
             ] })
           }
         ) })
@@ -2117,42 +2628,36 @@ function IssueReportModal() {
     retryModalHydration,
     inputModes,
     defaultInputMode,
-    voice
+    voice,
+    screenshotCapture,
+    createMode
   } = useIssueReporting();
   const { createMutation, updateMutation, replyMutation } = useIssueReportingMutations();
-  const [note, setNote] = (0, import_react5.useState)("");
-  const [submitError, setSubmitError] = (0, import_react5.useState)(null);
+  const [note, setNote] = (0, import_react7.useState)("");
+  const [submitError, setSubmitError] = (0, import_react7.useState)(null);
+  const [inputMode, setInputMode] = (0, import_react7.useState)(defaultInputMode);
+  const [committedTranscript, setCommittedTranscript] = (0, import_react7.useState)("");
+  const [voiceSubmitMetadata, setVoiceSubmitMetadata] = (0, import_react7.useState)(null);
+  const [voiceStartRequestId, setVoiceStartRequestId] = (0, import_react7.useState)(0);
+  const [voiceAppendRequestId, setVoiceAppendRequestId] = (0, import_react7.useState)(0);
   const { isOpen, mode, issue, target, isHydrating, error } = modalState;
   const canUseVoice = mode === "create" && inputModes.includes("voice");
   const canUseText = mode !== "create" || inputModes.includes("text");
   const canUseAttachments = Boolean(client.issueReporting.uploadAttachment);
-  const existingAttachments = (0, import_react5.useMemo)(
+  const existingAttachments = (0, import_react7.useMemo)(
     () => mode === "edit" && issue ? issue.attachments ?? [] : [],
     [issue, mode]
   );
   const attachmentState = useAttachmentState(existingAttachments);
   const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
-  const {
-    inputMode,
-    setInputMode,
-    voiceTokenResult,
-    voiceSubmitMetadata,
-    committedTranscript,
-    voiceError,
-    scribeError,
-    isVoiceConnecting,
-    isVoiceActive,
-    resetVoiceCapture,
-    startVoiceInput,
-    stopVoiceInput,
-    appendTranscript
-  } = useIssueReportVoiceCapture({
-    canUseVoice,
-    defaultInputMode,
-    isSubmitting,
-    voice
-  });
-  (0, import_react5.useEffect)(() => {
+  const resetVoiceCapture = (0, import_react7.useCallback)(() => {
+    setInputMode(defaultInputMode);
+    setCommittedTranscript("");
+    setVoiceSubmitMetadata(null);
+    setVoiceStartRequestId(0);
+    setVoiceAppendRequestId(0);
+  }, [defaultInputMode]);
+  useIsomorphicLayoutEffect(() => {
     if (!isOpen) {
       resetVoiceCapture();
       attachmentState.reset();
@@ -2178,14 +2683,17 @@ function IssueReportModal() {
     attachmentState.reset();
     closeModal();
   };
-  const handleStartVoiceInput = async () => {
-    await startVoiceInput(client.issueReporting.createVoiceToken);
+  const handleRequestAppendTranscript = () => {
+    setInputMode("voice");
+    setVoiceAppendRequestId((current) => current + 1);
   };
-  const handleStopVoiceInput = () => {
-    stopVoiceInput();
+  const handleRequestStartVoiceInput = () => {
+    setInputMode("voice");
+    setVoiceStartRequestId((current) => current + 1);
   };
-  const handleAppendTranscript = () => {
-    appendTranscript(setNote);
+  const handleAppendTranscript = (transcript) => {
+    setNote((current) => appendTranscriptToNote(current, transcript));
+    setInputMode("text");
   };
   const uploadPendingFiles = async () => {
     const upload = client.issueReporting.uploadAttachment;
@@ -2227,8 +2735,41 @@ function IssueReportModal() {
     try {
       const noteForSubmit = normalizedNote;
       let newAttachmentIds = [];
+      let screenshotCaptureMetadata = null;
+      if (screenshotCapture?.enabled && mode === "create" && canUseAttachments && client.issueReporting.uploadAttachment) {
+        try {
+          const { captureScreenshot: captureScreenshot2 } = await Promise.resolve().then(() => (init_screenshot_capture(), screenshot_capture_exports));
+          const captureResult = await captureScreenshot2(screenshotCapture, {
+            pageUrl: target.page_url,
+            createMode,
+            inputMode: effectiveInputMode,
+            target: {
+              componentKey: target.component_key,
+              componentLabel: target.component_label,
+              surfaceRef: target.surface_ref,
+              metadata: target.metadata
+            }
+          });
+          const uploaded = await client.issueReporting.uploadAttachment(
+            captureResult.blob,
+            { filename: captureResult.filename }
+          );
+          newAttachmentIds.push(uploaded.id);
+          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+            screenshotCapture,
+            "attached"
+          );
+        } catch (captureError) {
+          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+            screenshotCapture,
+            "failed"
+          );
+          screenshotCapture.onCaptureError?.(captureError);
+        }
+      }
       if (canUseAttachments && attachmentState.pendingFiles.length > 0) {
-        newAttachmentIds = await uploadPendingFiles();
+        const manualIds = await uploadPendingFiles();
+        newAttachmentIds.push(...manualIds);
       }
       const effectiveVoiceMetadata = effectiveInputMode === "voice" ? voiceSubmitMetadata ?? {
         provider: voice.provider,
@@ -2239,20 +2780,26 @@ function IssueReportModal() {
         attach_transcript: true
       } : null;
       if (mode === "create") {
+        const targetMetadata = {
+          ...target.metadata ?? {},
+          ...screenshotCaptureMetadata ? {
+            [SCREENSHOT_CAPTURE_METADATA_KEY]: screenshotCaptureMetadata
+          } : {},
+          ...effectiveVoiceMetadata && effectiveInputMode === "voice" ? {
+            capture: {
+              input_mode: "voice",
+              provider: effectiveVoiceMetadata.provider,
+              model_id: effectiveVoiceMetadata.model_id,
+              retain_audio: effectiveVoiceMetadata.retain_audio,
+              attach_transcript: effectiveVoiceMetadata.attach_transcript
+            }
+          } : {}
+        };
         await createMutation.mutateAsync({
-          target: effectiveVoiceMetadata && effectiveInputMode === "voice" ? {
+          target: {
             ...target,
-            metadata: {
-              ...target.metadata ?? {},
-              capture: {
-                input_mode: "voice",
-                provider: effectiveVoiceMetadata.provider,
-                model_id: effectiveVoiceMetadata.model_id,
-                retain_audio: effectiveVoiceMetadata.retain_audio,
-                attach_transcript: effectiveVoiceMetadata.attach_transcript
-              }
-            }
-          } : target,
+            metadata: targetMetadata
+          },
           note: noteForSubmit,
           reporter_role_hint: reporterRoleHint,
           attachment_ids: newAttachmentIds.length > 0 ? newAttachmentIds : void 0
@@ -2277,7 +2824,7 @@ function IssueReportModal() {
       attachmentState.reset();
       closeModal();
     } catch (submissionError) {
-      const message = resolveErrorMessage(
+      const message = resolveErrorMessage2(
         submissionError,
         "Failed to submit issue report"
       );
@@ -2287,12 +2834,12 @@ function IssueReportModal() {
       setSubmitError(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Overlay, { className: cn("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: cn2("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       Dialog.Content,
       {
-        className: cn(
+        className: cn2(
           "fixed left-1/2 top-1/2 max-h-[90vh] max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-y-auto border border-slate-200 bg-white p-6 focus:outline-none",
           Z_MODAL_CONTENT,
           MODAL_WIDTH,
@@ -2300,8 +2847,8 @@ function IssueReportModal() {
           MODAL_SHADOW
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Title, { className: "text-lg font-semibold text-slate-950", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Description, { className: "mt-2 text-sm text-slate-600", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Title, { className: "text-lg font-semibold text-slate-950", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Description, { className: "mt-2 text-sm text-slate-600", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             IssueReportModalDescription,
             {
               copy,
@@ -2309,7 +2856,7 @@ function IssueReportModal() {
               target
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             IssueReportModalBody,
             {
               copy,
@@ -2325,13 +2872,10 @@ function IssueReportModal() {
               normalizedNote,
               isValid,
               isSubmitting,
-              isVoiceActive,
-              isVoiceConnecting,
               voice,
-              voiceTokenResult,
-              committedTranscript,
-              voiceError,
-              scribeError,
+              createVoiceToken: client.issueReporting.createVoiceToken,
+              voiceStartRequestId,
+              voiceAppendRequestId,
               submitError,
               existingAttachments,
               removedExistingIds: attachmentState.removedExistingIds,
@@ -2342,8 +2886,10 @@ function IssueReportModal() {
               onClose: handleCloseModal,
               onSelectText: () => setInputMode("text"),
               onSelectVoice: () => setInputMode("voice"),
-              onStartVoiceInput: () => void handleStartVoiceInput(),
-              onStopVoiceInput: handleStopVoiceInput,
+              onRequestStartVoiceInput: handleRequestStartVoiceInput,
+              onRequestAppendTranscript: handleRequestAppendTranscript,
+              onTranscriptCommitted: setCommittedTranscript,
+              onVoiceSubmitMetadataChange: setVoiceSubmitMetadata,
               onAppendTranscript: handleAppendTranscript,
               onNoteChange: setNote,
               onSubmit: () => void handleSubmit(),
@@ -2352,13 +2898,13 @@ function IssueReportModal() {
               onRemovePendingAttachment: attachmentState.removePending
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
               className: "absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-slate-500 transition hover:bg-slate-50 hover:text-slate-900",
               "aria-label": "Close issue report modal",
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.X, { className: "h-4 w-4" })
             }
           ) })
         ]
@@ -2385,28 +2931,28 @@ function FloatingIssueReportButton({
   if (!isEligible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportModeBanner, {}),
-    !isReportMode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportModeBanner, {}),
+    !isReportMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn2("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         type: "button",
         "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
         onClick: () => isPopoverOpen ? closePopover() : openPopover(),
-        className: cn(
+        className: cn2(
           "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
           status.isPending && "animate-pulse",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_react4.BugBeetle,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_react6.BugBeetle,
             {
-              className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
+              className: cn2("h-6 w-6", getEntryPointClassName(entryPointState)),
               weight: "fill"
             }
           ),
-          needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "span",
             {
               "data-testid": "issue-report-needs-response-badge",
@@ -2416,7 +2962,7 @@ function FloatingIssueReportButton({
         ]
       }
     ) }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportModal, {})
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportModal, {})
   ] });
 }
 function ReportableSection({
@@ -2427,9 +2973,9 @@ function ReportableSection({
 }) {
   const reportMode = useReportMode();
   const isSelectable = Boolean(reportMode?.isReportMode);
-  const targetId = import_react5.default.useRef(/* @__PURE__ */ Symbol("reportable-section"));
-  const elementRef = import_react5.default.useRef(null);
-  (0, import_react5.useEffect)(() => {
+  const targetId = import_react7.default.useRef(/* @__PURE__ */ Symbol("reportable-section"));
+  const elementRef = import_react7.default.useRef(null);
+  (0, import_react7.useEffect)(() => {
     if (!reportMode) {
       return;
     }
@@ -2438,13 +2984,13 @@ function ReportableSection({
       reportMode.unregisterTarget(targetId.current);
     };
   }, [reportMode, reportableName]);
-  return import_react5.default.createElement(
+  return import_react7.default.createElement(
     Component,
     {
       ref: (node) => {
         elementRef.current = node;
       },
-      className: cn(
+      className: cn2(
         className,
         isSelectable && "cursor-pointer ring-2 ring-amber-400 transition hover:ring-amber-500"
       ),