spaps-issue-reporting-react 0.1.2 → 0.1.4

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FloatingIssueReportButton: () => FloatingIssueReportButton,
+  IssueReportingPageConfig: () => IssueReportingPageConfig,
   IssueReportingProvider: () => IssueReportingProvider,
   ReportModeContext: () => ReportModeContext,
   ReportableSection: () => ReportableSection,
@@ -55,9 +56,10 @@ 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("@phosphor-icons/react");
+var import_react3 = require("@elevenlabs/react");
+var import_react4 = require("@phosphor-icons/react");
 var import_date_fns = require("date-fns");
-var import_react4 = require("react");
+var import_react5 = __toESM(require("react"));
 
 // src/provider.tsx
 var import_react2 = require("react");
@@ -77,6 +79,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var LIST_LIMIT = 200;
 var NOTE_MIN_LENGTH = 10;
 var NOTE_MAX_LENGTH = 2e3;
+var DEFAULT_INPUT_MODES = ["text"];
+var DEFAULT_VOICE_PROVIDER = "elevenlabs_scribe_realtime";
+var DEFAULT_VOICE_MODEL_ID = "scribe_v2_realtime";
 var initialModalState = {
   isOpen: false,
   mode: "create",
@@ -89,10 +94,24 @@ var initialModalState = {
 var IssueReportingContext = (0, import_react2.createContext)(
   void 0
 );
+var IssueReportingPageConfigRegistryContext = (0, import_react2.createContext)(void 0);
+var hiddenMarkerStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
 var defaultIssueReportingCopy = {
   entryAriaLabel: "Report issue",
   popoverTitle: "Issue Reports",
   reportNewAction: "Report New Issue",
+  reportPageAction: "Report This Page",
+  reportSpecificAction: "Pick Specific Section",
   filtersAll: "All",
   filtersUnresolved: "Unresolved",
   filtersResolved: "Resolved",
@@ -109,6 +128,9 @@ var defaultIssueReportingCopy = {
   reportModeTitle: "Report mode is active",
   reportModeDescription: "Click a highlighted section to capture the broken surface.",
   reportModeCancelAction: "Cancel",
+  generalPageTargetLabel: "Current Page",
+  surfaceRequiredDescription: "This page requires selecting a specific section before you submit a report.",
+  specificSectionUnavailableDescription: "No specific sections are registered on this page right now.",
   createTitlePrefix: "Report Issue",
   editTitlePrefix: "Edit Issue",
   replyTitlePrefix: "Reply to",
@@ -152,6 +174,25 @@ function resolveInitialScope(defaultScope, allowTenantScope) {
   }
   return "mine";
 }
+function normalizeInputModes(inputModes) {
+  if (!inputModes || inputModes.length === 0) {
+    return DEFAULT_INPUT_MODES;
+  }
+  const unique = Array.from(new Set(inputModes));
+  const supported = unique.filter(
+    (mode) => mode === "text" || mode === "voice"
+  );
+  if (supported.length === 0) {
+    return DEFAULT_INPUT_MODES;
+  }
+  return supported;
+}
+function resolveDefaultInputMode(defaultInputMode, inputModes) {
+  if (defaultInputMode && inputModes.includes(defaultInputMode)) {
+    return defaultInputMode;
+  }
+  return inputModes[0] ?? "text";
+}
 function normalizeTarget(target, getPageUrl) {
   if (typeof target === "string") {
     const normalized = target.trim();
@@ -173,6 +214,44 @@ function normalizeTarget(target, getPageUrl) {
     metadata: target.metadata ?? {}
   };
 }
+function summarizeTarget(target) {
+  if (typeof target === "string") {
+    const normalized = target.trim();
+    return {
+      component_key: normalized,
+      component_label: normalized,
+      surface_ref: null,
+      metadata: {}
+    };
+  }
+  const key = target.componentKey.trim();
+  return {
+    component_key: key,
+    component_label: (target.componentLabel ?? key).trim(),
+    surface_ref: target.surfaceRef ?? null,
+    metadata: target.metadata ?? {}
+  };
+}
+function isElementVisibleForReporting(element) {
+  if (!element || typeof window === "undefined") {
+    return true;
+  }
+  let current = element;
+  while (current) {
+    if (current.getAttribute("aria-hidden") === "true") {
+      return false;
+    }
+    if (current instanceof HTMLElement && (current.hidden || current.inert)) {
+      return false;
+    }
+    const computedStyle = window.getComputedStyle(current);
+    if (computedStyle.display === "none" || computedStyle.visibility === "hidden" || computedStyle.visibility === "collapse") {
+      return false;
+    }
+    current = current.parentElement;
+  }
+  return true;
+}
 function normalizeIssueTarget(issue) {
   return {
     component_key: issue.target.component_key,
@@ -254,6 +333,23 @@ function getIssueNoteLengthMessage(note, copy) {
   }
   return `${note.length}/${NOTE_MAX_LENGTH}`;
 }
+function buildGeneralPageTarget(copy, registeredTargets, getPageUrl) {
+  return {
+    component_key: "general_page",
+    component_label: copy.generalPageTargetLabel,
+    page_url: resolvePageUrl(getPageUrl),
+    surface_ref: null,
+    metadata: {
+      capture_mode: "general_page",
+      registered_target_count: registeredTargets.length,
+      ...registeredTargets.length > 0 ? {
+        registered_targets: registeredTargets.map(
+          ({ target }) => summarizeTarget(target)
+        )
+      } : {}
+    }
+  };
+}
 function useIssueReporting() {
   const context = (0, import_react2.useContext)(IssueReportingContext);
   if (!context) {
@@ -263,6 +359,25 @@ function useIssueReporting() {
   }
   return context;
 }
+function IssueReportingPageConfig({
+  createMode
+}) {
+  const registry = (0, import_react2.useContext)(IssueReportingPageConfigRegistryContext);
+  const configId = (0, import_react2.useRef)(/* @__PURE__ */ Symbol("issue-reporting-page-config"));
+  const markerRef = (0, import_react2.useRef)(null);
+  if (!registry) {
+    throw new Error(
+      "IssueReportingPageConfig must be used within an IssueReportingProvider"
+    );
+  }
+  (0, import_react2.useEffect)(() => {
+    registry.registerPageConfig(configId.current, createMode, () => markerRef.current);
+    return () => {
+      registry.unregisterPageConfig(configId.current);
+    };
+  }, [createMode, registry]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: markerRef, style: hiddenMarkerStyle });
+}
 function useIssueReportingStatus() {
   const { client, isEligible, scope } = useIssueReporting();
   return (0, import_react_query.useQuery)({
@@ -335,6 +450,10 @@ function IssueReportingProvider({
   getPageUrl,
   defaultScope,
   allowTenantScope = false,
+  defaultCreateMode = "general_page",
+  inputModes,
+  defaultInputMode,
+  voice,
   copy,
   children
 }) {
@@ -352,6 +471,27 @@ function IssueReportingProvider({
   const [scope, setScope] = (0, import_react2.useState)(
     () => resolveInitialScope(defaultScope, allowTenantScope)
   );
+  const [pageConfigs, setPageConfigs] = (0, import_react2.useState)([]);
+  const [registeredTargets, setRegisteredTargets] = (0, import_react2.useState)(
+    []
+  );
+  const resolvedInputModes = (0, import_react2.useMemo)(
+    () => normalizeInputModes(inputModes),
+    [inputModes]
+  );
+  const resolvedDefaultInputMode = (0, import_react2.useMemo)(
+    () => resolveDefaultInputMode(defaultInputMode, resolvedInputModes),
+    [defaultInputMode, resolvedInputModes]
+  );
+  const resolvedVoiceConfig = (0, import_react2.useMemo)(
+    () => ({
+      provider: voice?.provider ?? DEFAULT_VOICE_PROVIDER,
+      modelId: voice?.modelId ?? DEFAULT_VOICE_MODEL_ID,
+      requireMicrophonePermission: voice?.requireMicrophonePermission ?? true,
+      microphone: voice?.microphone
+    }),
+    [voice]
+  );
   (0, import_react2.useEffect)(() => {
     setScope(resolveInitialScope(defaultScope, allowTenantScope));
   }, [allowTenantScope, defaultScope]);
@@ -361,6 +501,51 @@ function IssueReportingProvider({
   const openPopover = (0, import_react2.useCallback)(() => {
     setIsPopoverOpen(true);
   }, []);
+  const openCreateModal = (0, import_react2.useCallback)((target) => {
+    setIsPopoverOpen(false);
+    setIsReportMode(false);
+    setModalState({
+      isOpen: true,
+      mode: "create",
+      issueReportId: null,
+      issue: null,
+      target,
+      error: null,
+      isHydrating: false
+    });
+  }, []);
+  const registerPageConfig = (0, import_react2.useCallback)(
+    (id, createMode2, getElement) => {
+      setPageConfigs((current) => [
+        ...current.filter((entry) => entry.id !== id),
+        { id, createMode: createMode2, getElement }
+      ]);
+    },
+    []
+  );
+  const unregisterPageConfig = (0, import_react2.useCallback)((id) => {
+    setPageConfigs((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+  const registerTarget = (0, import_react2.useCallback)(
+    (id, target, getElement) => {
+      setRegisteredTargets((current) => [
+        ...current.filter((entry) => entry.id !== id),
+        { id, target, getElement }
+      ]);
+    },
+    []
+  );
+  const unregisterTarget = (0, import_react2.useCallback)((id) => {
+    setRegisteredTargets((current) => current.filter((entry) => entry.id !== id));
+  }, []);
+  const visiblePageConfigs = pageConfigs.filter(
+    ({ getElement }) => isElementVisibleForReporting(getElement())
+  );
+  const visibleRegisteredTargets = registeredTargets.filter(
+    ({ getElement }) => isElementVisibleForReporting(getElement())
+  );
+  const createMode = visiblePageConfigs.length > 0 ? visiblePageConfigs[visiblePageConfigs.length - 1].createMode : defaultCreateMode;
+  const hasRegisteredTargets = visibleRegisteredTargets.length > 0;
   const enterReportMode = (0, import_react2.useCallback)(() => {
     setIsReportMode(true);
     setIsPopoverOpen(false);
@@ -372,6 +557,42 @@ function IssueReportingProvider({
     setModalState(initialModalState);
     setIsPopoverOpen(true);
   }, []);
+  const openPageIssueModal = (0, import_react2.useCallback)(() => {
+    if (!isEligible) {
+      return;
+    }
+    openCreateModal(
+      buildGeneralPageTarget(mergedCopy, visibleRegisteredTargets, getPageUrl)
+    );
+  }, [
+    getPageUrl,
+    isEligible,
+    mergedCopy,
+    openCreateModal,
+    visibleRegisteredTargets
+  ]);
+  const startNewIssue = (0, import_react2.useCallback)(() => {
+    if (!isEligible) {
+      return;
+    }
+    if (createMode === "surface_required") {
+      if (hasRegisteredTargets) {
+        enterReportMode();
+      }
+      return;
+    }
+    if (createMode === "surface_preferred" && hasRegisteredTargets) {
+      enterReportMode();
+      return;
+    }
+    openPageIssueModal();
+  }, [
+    createMode,
+    enterReportMode,
+    hasRegisteredTargets,
+    isEligible,
+    openPageIssueModal
+  ]);
   const hydrateIssueIntoModal = (0, import_react2.useCallback)(
     async (issueReportId, mode) => {
       setModalState({
@@ -430,18 +651,9 @@ function IssueReportingProvider({
         return;
       }
       const normalizedTarget = normalizeTarget(target, getPageUrl);
-      setIsReportMode(false);
-      setModalState({
-        isOpen: true,
-        mode: "create",
-        issueReportId: null,
-        issue: null,
-        target: normalizedTarget,
-        error: null,
-        isHydrating: false
-      });
+      openCreateModal(normalizedTarget);
     },
-    [getPageUrl, isEligible]
+    [getPageUrl, isEligible, openCreateModal]
   );
   const contextValue = (0, import_react2.useMemo)(
     () => ({
@@ -451,9 +663,12 @@ function IssueReportingProvider({
       principalId: principalId ?? null,
       copy: mergedCopy,
       isReportMode,
+      hasRegisteredTargets,
       enterReportMode,
       cancelReportMode,
       selectPanel,
+      openPageIssueModal,
+      startNewIssue,
       isPopoverOpen,
       openPopover,
       closePopover,
@@ -463,7 +678,11 @@ function IssueReportingProvider({
       retryModalHydration,
       scope,
       setScope,
-      allowTenantScope
+      allowTenantScope,
+      createMode,
+      inputModes: resolvedInputModes,
+      defaultInputMode: resolvedDefaultInputMode,
+      voice: resolvedVoiceConfig
     }),
     [
       allowTenantScope,
@@ -471,30 +690,60 @@ function IssueReportingProvider({
       client,
       closeModal,
       closePopover,
+      createMode,
       enterReportMode,
+      hasRegisteredTargets,
       isEligible,
       isPopoverOpen,
       isReportMode,
       mergedCopy,
       modalState,
       openExistingIssueModal,
+      openPageIssueModal,
       openPopover,
       principalId,
       reporterRoleHint,
       retryModalHydration,
+      resolvedDefaultInputMode,
+      resolvedInputModes,
+      resolvedVoiceConfig,
       scope,
-      selectPanel
+      selectPanel,
+      startNewIssue
     ]
   );
   const reportModeValue = (0, import_react2.useMemo)(
     () => ({
       isReportMode,
       selectPanel,
-      cancelReportMode
+      cancelReportMode,
+      hasRegisteredTargets,
+      registerTarget,
+      unregisterTarget
+    }),
+    [
+      cancelReportMode,
+      hasRegisteredTargets,
+      isReportMode,
+      registerTarget,
+      selectPanel,
+      unregisterTarget
+    ]
+  );
+  const pageConfigRegistryValue = (0, import_react2.useMemo)(
+    () => ({
+      registerPageConfig,
+      unregisterPageConfig
     }),
-    [cancelReportMode, isReportMode, selectPanel]
+    [registerPageConfig, unregisterPageConfig]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    IssueReportingPageConfigRegistryContext.Provider,
+    {
+      value: pageConfigRegistryValue,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReportModeContext.Provider, { value: reportModeValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IssueReportingContext.Provider, { value: contextValue, children }) })
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReportModeContext.Provider, { value: reportModeValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IssueReportingContext.Provider, { value: contextValue, children }) });
 }
 
 // src/components.tsx
@@ -502,6 +751,18 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function cn(...values) {
   return values.filter(Boolean).join(" ");
 }
+var Z_FLOATING_BUTTON = "z-[65]";
+var Z_BANNER = "z-[70]";
+var Z_POPOVER = "z-[70]";
+var Z_MODAL_OVERLAY = "z-[80]";
+var Z_MODAL_CONTENT = "z-[81]";
+var POPOVER_WIDTH = "w-[360px]";
+var MODAL_WIDTH = "w-[calc(100vw-2rem)]";
+var MODAL_RADIUS = "rounded-[28px]";
+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]";
 function truncate(value, max = 80) {
   if (value.length <= max) {
     return value;
@@ -522,6 +783,16 @@ function resolveErrorMessage(error, fallback) {
   }
   return fallback;
 }
+function getCommittedTranscriptText(committedTranscripts) {
+  return committedTranscripts.map((segment) => segment.text.trim()).filter(Boolean).join(" ").trim();
+}
+function appendTranscriptToNote(current, transcript) {
+  const normalizedCurrent = current.trim();
+  if (!normalizedCurrent) {
+    return transcript;
+  }
+  return `${normalizedCurrent} ${transcript}`;
+}
 function resolveReporterId(issue) {
   return issue.reporter_principal_id ?? issue.reporter_user_id ?? null;
 }
@@ -554,13 +825,390 @@ function getIssueOriginText(issue, copy) {
   const humanName = issue.reporter_display_name?.trim();
   return humanName ? `${copy.originHumanLabel} \xB7 ${humanName}` : copy.originHumanLabel;
 }
+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.jsx)("div", { className: "mt-2 text-xs text-slate-500", children: "Connecting voice transcription..." }) : null
+    ] })
+  ] });
+}
+function IssueReportNoteEditor({
+  canUseText,
+  note,
+  normalizedNote,
+  isSubmitting,
+  copy,
+  onNoteChange,
+  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_runtime2.jsxs)("div", { className: "mt-5 space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "textarea",
+      {
+        value: note,
+        onChange: (event) => onNoteChange(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            onSubmit();
+          }
+        },
+        placeholder: copy.notePlaceholder,
+        className: "h-36 w-full resize-none rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200",
+        disabled: isSubmitting,
+        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 })
+    ] })
+  ] });
+}
+function IssueReportModalDescription({
+  copy,
+  mode,
+  target
+}) {
+  if (mode === "create" && target) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.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 })
+    ] });
+  }
+  return mode === "edit" ? copy.editDescription : copy.replyDescription;
+}
+function IssueReportModalBody({
+  copy,
+  mode,
+  issue,
+  isHydrating,
+  error,
+  canUseVoice,
+  canUseText,
+  effectiveInputMode,
+  note,
+  normalizedNote,
+  isValid,
+  isSubmitting,
+  isVoiceActive,
+  isVoiceConnecting,
+  voice,
+  voiceTokenResult,
+  committedTranscript,
+  voiceError,
+  scribeError,
+  submitError,
+  onRetryHydration,
+  onClose,
+  onSelectText,
+  onSelectVoice,
+  onStartVoiceInput,
+  onStopVoiceInput,
+  onAppendTranscript,
+  onNoteChange,
+  onSubmit
+}) {
+  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 })
+    ] });
+  }
+  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)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
+            onClick: onRetryHydration,
+            children: copy.retryAction
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full border border-slate-300 px-3 py-1 font-medium text-slate-700 transition hover:bg-slate-50",
+            onClick: onClose,
+            children: copy.cancelAction
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    mode === "create" && canUseVoice ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      IssueReportVoicePanel,
+      {
+        canUseText,
+        effectiveInputMode,
+        isSubmitting,
+        isVoiceActive,
+        isVoiceConnecting,
+        voice,
+        voiceTokenResult,
+        committedTranscript,
+        voiceError,
+        scribeError,
+        onSelectText,
+        onSelectVoice,
+        onStartVoiceInput,
+        onStopVoiceInput,
+        onAppendTranscript
+      }
+    ) : 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 })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      IssueReportNoteEditor,
+      {
+        canUseText,
+        note,
+        normalizedNote,
+        isSubmitting,
+        copy,
+        onNoteChange,
+        onSubmit
+      }
+    ),
+    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)(
+        "button",
+        {
+          type: "button",
+          className: "rounded-full border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50",
+          onClick: onClose,
+          disabled: isSubmitting,
+          children: copy.cancelAction
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "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"
+          ),
+          onClick: onSubmit,
+          disabled: !isValid || isSubmitting,
+          children: isSubmitting ? copy.submittingAction : copy.submitAction
+        }
+      )
+    ] })
+  ] });
+}
+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
+  };
+}
 function IssueReportModeBanner() {
   const { copy } = useIssueReporting();
   const reportMode = useReportMode();
   if (!reportMode?.isReportMode) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-x-4 top-4 z-[70] flex justify-center", 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: [
+  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)(
@@ -583,7 +1231,7 @@ function IssueList({
   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_react3.Spinner, { className: "h-4 w-4 animate-spin" }),
+      /* @__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 })
     ] });
   }
@@ -613,7 +1261,7 @@ function IssueList({
       {
         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_react3.CheckCircle, { className: "h-4 w-4 text-emerald-600", weight: "fill" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Circle, { className: "h-4 w-4 text-rose-600", weight: "fill" }) }),
+          /* @__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: [
@@ -623,13 +1271,14 @@ function IssueList({
                     "span",
                     {
                       className: cn(
-                        "rounded-full px-2 py-0.5 text-[11px] font-medium",
+                        "rounded-full px-2 py-0.5 font-medium",
+                        BADGE_TEXT,
                         getIssueStatusClassName(issue.status)
                       ),
                       children: getIssueStatusBadgeLabel(issue.status)
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600", children: getIssueOriginText(issue, copy) }),
+                  /* @__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) })
                 ] })
               ] }),
@@ -653,22 +1302,25 @@ function IssueList({
   }) });
 }
 function IssueReportPopover({ children }) {
-  const [filter, setFilter] = (0, import_react4.useState)("all");
+  const [filter, setFilter] = (0, import_react5.useState)("all");
   const {
     copy,
     isPopoverOpen,
     openPopover,
     closePopover,
     enterReportMode,
+    openPageIssueModal,
     openExistingIssueModal,
     scope,
     setScope,
-    allowTenantScope
+    allowTenantScope,
+    createMode,
+    hasRegisteredTargets
   } = useIssueReporting();
   const history = useIssueReportingHistory("all");
   const status = useIssueReportingStatus();
   const allItems = history.data?.items ?? [];
-  const counts = (0, import_react4.useMemo)(
+  const counts = (0, import_react5.useMemo)(
     () => ({
       all: allItems.length,
       unresolved: filterIssueReports(allItems, "unresolved").length,
@@ -677,6 +1329,9 @@ function IssueReportPopover({ children }) {
     [allItems]
   );
   const statusSummary = status.data ? `${status.data.open_count} open \xB7 ${status.data.recent_resolved_count} recently resolved` : "Status reflects the active scope.";
+  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)(
     Popover.Root,
     {
@@ -690,26 +1345,78 @@ function IssueReportPopover({ children }) {
             align: "end",
             side: "top",
             sideOffset: 12,
-            className: "z-[70] w-[360px] rounded-3xl border border-slate-200 bg-white p-4 shadow-[0_18px_48px_rgba(15,23,42,0.18)]",
+            className: cn(
+              "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 })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "rounded-full bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800",
-                    onClick: () => {
-                      closePopover();
-                      enterReportMode();
-                    },
-                    children: copy.reportNewAction
-                  }
-                )
+                /* @__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)(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        "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"
+                      ),
+                      onClick: () => {
+                        if (sectionActionDisabled) {
+                          return;
+                        }
+                        closePopover();
+                        enterReportMode();
+                      },
+                      disabled: sectionActionDisabled,
+                      children: createMode === "surface_required" ? copy.reportNewAction : copy.reportSpecificAction
+                    }
+                  ),
+                  createMode !== "surface_required" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded-full border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50",
+                      onClick: () => {
+                        closePopover();
+                        openPageIssueModal();
+                      },
+                      children: copy.reportPageAction
+                    }
+                  ) : null
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded-full bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-800",
+                      onClick: () => {
+                        closePopover();
+                        openPageIssueModal();
+                      },
+                      children: createMode === "general_page" ? copy.reportPageAction : copy.reportNewAction
+                    }
+                  ),
+                  hasRegisteredTargets ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded-full border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 transition hover:bg-slate-50",
+                      onClick: () => {
+                        closePopover();
+                        enterReportMode();
+                      },
+                      children: copy.reportSpecificAction
+                    }
+                  ) : 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)(
@@ -723,7 +1430,7 @@ 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: "text-[11px] font-medium uppercase tracking-wide text-slate-500", children: copy.scopeLabel }),
+                /* @__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: [
                   ["tenant", copy.scopeTenant],
                   ["mine", copy.scopeMine]
@@ -779,18 +1486,46 @@ function IssueReportPopover({ children }) {
 }
 function IssueReportModal() {
   const {
+    client,
     copy,
     reporterRoleHint,
     modalState,
     closeModal,
-    retryModalHydration
+    retryModalHydration,
+    inputModes,
+    defaultInputMode,
+    voice
   } = useIssueReporting();
   const { createMutation, updateMutation, replyMutation } = useIssueReportingMutations();
-  const [note, setNote] = (0, import_react4.useState)("");
-  const [submitError, setSubmitError] = (0, import_react4.useState)(null);
+  const [note, setNote] = (0, import_react5.useState)("");
+  const [submitError, setSubmitError] = (0, import_react5.useState)(null);
   const { isOpen, mode, issue, target, isHydrating, error } = modalState;
-  (0, import_react4.useEffect)(() => {
+  const canUseVoice = mode === "create" && inputModes.includes("voice");
+  const canUseText = mode !== "create" || inputModes.includes("text");
+  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending;
+  const {
+    inputMode,
+    setInputMode,
+    voiceTokenResult,
+    voiceSubmitMetadata,
+    committedTranscript,
+    voiceError,
+    scribeError,
+    isVoiceConnecting,
+    isVoiceActive,
+    resetVoiceCapture,
+    startVoiceInput,
+    stopVoiceInput,
+    appendTranscript
+  } = useIssueReportVoiceCapture({
+    canUseVoice,
+    defaultInputMode,
+    isSubmitting,
+    voice
+  });
+  (0, import_react5.useEffect)(() => {
     if (!isOpen) {
+      resetVoiceCapture();
       setNote("");
       setSubmitError(null);
       return;
@@ -800,140 +1535,145 @@ function IssueReportModal() {
     } else {
       setNote("");
     }
+    resetVoiceCapture();
     setSubmitError(null);
-  }, [isOpen, mode, issue]);
-  const isValid = note.trim().length >= 10 && note.trim().length <= 2e3;
-  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending;
+  }, [isOpen, issue, mode, resetVoiceCapture]);
+  const effectiveInputMode = mode !== "create" ? "text" : canUseVoice && inputMode === "voice" ? "voice" : "text";
+  const normalizedNote = effectiveInputMode === "voice" ? committedTranscript.trim() : note.trim();
+  const isValid = normalizedNote.length >= 10 && normalizedNote.length <= 2e3;
   const title = mode === "create" ? `${copy.createTitlePrefix}: ${target?.component_label ?? ""}` : mode === "edit" ? `${copy.editTitlePrefix}: ${target?.component_label ?? ""}` : `${copy.replyTitlePrefix}: ${target?.component_label ?? ""}`;
+  const handleCloseModal = () => {
+    resetVoiceCapture();
+    closeModal();
+  };
+  const handleStartVoiceInput = async () => {
+    await startVoiceInput(client.issueReporting.createVoiceToken);
+  };
+  const handleStopVoiceInput = () => {
+    stopVoiceInput();
+  };
+  const handleAppendTranscript = () => {
+    appendTranscript(setNote);
+  };
   const handleSubmit = async () => {
     if (!target || !isValid || isSubmitting) {
       return;
     }
     setSubmitError(null);
     try {
-      const normalizedNote = note.trim();
+      const noteForSubmit = normalizedNote;
+      const effectiveVoiceMetadata = effectiveInputMode === "voice" ? voiceSubmitMetadata ?? {
+        provider: voice.provider,
+        token: "",
+        model_id: voice.modelId,
+        expires_in_seconds: 0,
+        retain_audio: false,
+        attach_transcript: true
+      } : null;
       if (mode === "create") {
         await createMutation.mutateAsync({
-          target,
-          note: normalizedNote,
+          target: effectiveVoiceMetadata && effectiveInputMode === "voice" ? {
+            ...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,
+          note: noteForSubmit,
           reporter_role_hint: reporterRoleHint
         });
       } else if (mode === "edit" && issue) {
         await updateMutation.mutateAsync({
           issueReportId: issue.id,
-          note: normalizedNote
+          note: noteForSubmit
         });
       } else if (mode === "reply" && issue) {
         await replyMutation.mutateAsync({
           issueReportId: issue.id,
-          note: normalizedNote,
+          note: noteForSubmit,
           reporterRoleHint
         });
       }
+      resetVoiceCapture();
       closeModal();
     } catch (submissionError) {
       setSubmitError(resolveErrorMessage(submissionError, "Failed to submit issue report"));
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && closeModal(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-[80] bg-slate-950/45 backdrop-blur-sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Content, { className: "fixed left-1/2 top-1/2 z-[81] w-[calc(100vw-2rem)] max-w-xl -translate-x-1/2 -translate-y-1/2 rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_28px_80px_rgba(15,23,42,0.24)] focus:outline-none", 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: mode === "create" && target ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.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 })
-      ] }) : mode === "edit" ? copy.editDescription : copy.replyDescription }),
-      isHydrating ? /* @__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_react3.Spinner, { className: "h-4 w-4 animate-spin" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.hydrateLoading })
-      ] }) : error ? /* @__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)(
-            "button",
-            {
-              type: "button",
-              className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
-              onClick: () => retryModalHydration(),
-              children: copy.retryAction
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "button",
+  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)(
+      Dialog.Content,
+      {
+        className: cn(
+          "fixed left-1/2 top-1/2 max-w-xl -translate-x-1/2 -translate-y-1/2 border border-slate-200 bg-white p-6 focus:outline-none",
+          Z_MODAL_CONTENT,
+          MODAL_WIDTH,
+          MODAL_RADIUS,
+          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)(
+            IssueReportModalDescription,
             {
-              type: "button",
-              className: "rounded-full border border-slate-300 px-3 py-1 font-medium text-slate-700 transition hover:bg-slate-50",
-              onClick: closeModal,
-              children: copy.cancelAction
+              copy,
+              mode,
+              target
             }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-        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 })
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 space-y-2", children: [
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "textarea",
+            IssueReportModalBody,
             {
-              value: note,
-              onChange: (event) => setNote(event.target.value),
-              onKeyDown: (event) => {
-                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-                  event.preventDefault();
-                  void handleSubmit();
-                }
-              },
-              placeholder: copy.notePlaceholder,
-              className: "h-36 w-full resize-none rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200",
-              disabled: isSubmitting,
-              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 })
-          ] })
-        ] }),
-        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)(
-            "button",
-            {
-              type: "button",
-              className: "rounded-full border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50",
-              onClick: closeModal,
-              disabled: isSubmitting,
-              children: copy.cancelAction
+              copy,
+              mode,
+              issue,
+              isHydrating,
+              error,
+              canUseVoice,
+              canUseText,
+              effectiveInputMode,
+              note,
+              normalizedNote,
+              isValid,
+              isSubmitting,
+              isVoiceActive,
+              isVoiceConnecting,
+              voice,
+              voiceTokenResult,
+              committedTranscript,
+              voiceError,
+              scribeError,
+              submitError,
+              onRetryHydration: () => void retryModalHydration(),
+              onClose: handleCloseModal,
+              onSelectText: () => setInputMode("text"),
+              onSelectVoice: () => setInputMode("voice"),
+              onStartVoiceInput: () => void handleStartVoiceInput(),
+              onStopVoiceInput: handleStopVoiceInput,
+              onAppendTranscript: handleAppendTranscript,
+              onNoteChange: setNote,
+              onSubmit: () => void handleSubmit()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
               type: "button",
-              className: cn(
-                "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"
-              ),
-              onClick: () => void handleSubmit(),
-              disabled: !isValid || isSubmitting,
-              children: isSubmitting ? copy.submittingAction : copy.submitAction
+              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" })
             }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.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_react3.X, { className: "h-4 w-4" })
-        }
-      ) })
-    ] })
+          ) })
+        ]
+      }
+    )
   ] }) });
 }
 function FloatingIssueReportButton({
@@ -955,7 +1695,7 @@ function FloatingIssueReportButton({
   }
   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-[65]", positionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    !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.jsx)(
       "button",
       {
         type: "button",
@@ -967,7 +1707,7 @@ function FloatingIssueReportButton({
           className
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react3.BugBeetle,
+          import_react4.BugBeetle,
           {
             className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
             weight: "fill"
@@ -986,9 +1726,23 @@ function ReportableSection({
 }) {
   const reportMode = useReportMode();
   const isSelectable = Boolean(reportMode?.isReportMode);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const targetId = import_react5.default.useRef(/* @__PURE__ */ Symbol("reportable-section"));
+  const elementRef = import_react5.default.useRef(null);
+  (0, import_react5.useEffect)(() => {
+    if (!reportMode) {
+      return;
+    }
+    reportMode.registerTarget(targetId.current, reportableName, () => elementRef.current);
+    return () => {
+      reportMode.unregisterTarget(targetId.current);
+    };
+  }, [reportMode, reportableName]);
+  return import_react5.default.createElement(
     Component,
     {
+      ref: (node) => {
+        elementRef.current = node;
+      },
       className: cn(
         className,
         isSelectable && "cursor-pointer ring-2 ring-amber-400 transition hover:ring-amber-500"
@@ -1003,14 +1757,15 @@ function ReportableSection({
         }
       } : void 0,
       role: isSelectable ? "button" : void 0,
-      tabIndex: isSelectable ? 0 : void 0,
-      children
-    }
+      tabIndex: isSelectable ? 0 : void 0
+    },
+    children
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FloatingIssueReportButton,
+  IssueReportingPageConfig,
   IssueReportingProvider,
   ReportModeContext,
   ReportableSection,