spaps-issue-reporting-react 0.4.0 → 0.4.2

package/dist/index.mjs

@@ -6,13 +6,15 @@ import {
   BugBeetle,
   CheckCircle,
   Circle,
+  Image,
   Microphone,
   Spinner,
   TextT,
+  Trash,
   X
 } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns";
-import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/provider.tsx
 import {
@@ -44,6 +46,13 @@ import { jsx } from "react/jsx-runtime";
 var LIST_LIMIT = 200;
 var NOTE_MIN_LENGTH = 10;
 var NOTE_MAX_LENGTH = 2e3;
+var ATTACHMENT_MAX_COUNT = 5;
+var ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
+var ATTACHMENT_ALLOWED_MIMES = /* @__PURE__ */ new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp"
+]);
 var DEFAULT_INPUT_MODES = ["text"];
 var DEFAULT_VOICE_PROVIDER = "elevenlabs_scribe_realtime";
 var DEFAULT_VOICE_MODEL_ID = "scribe_v2_realtime";
@@ -116,13 +125,31 @@ var defaultIssueReportingCopy = {
   retryAction: "Retry",
   originHumanLabel: "Human",
   originMachineLabel: "Machine",
-  machineOriginFallback: "system"
+  machineOriginFallback: "system",
+  threadTitle: "Conversation",
+  threadDescription: "Messages from the support team about this report, and your replies.",
+  threadLoading: "Loading conversation...",
+  threadLoadFailed: "Failed to load the conversation",
+  threadEmpty: "No messages on this report yet.",
+  threadNeedsResponseBadge: "Needs your response",
+  threadAuthorOperator: "Support",
+  threadAuthorReporter: "You",
+  threadKindClarificationRequest: "Question",
+  threadKindReporterResponse: "Your reply",
+  threadKindFinalResponse: "Resolution",
+  threadResponsePlaceholder: "Write your response...",
+  threadResponseLabel: "Respond to the support team",
+  threadResponseSubmitAction: "Send response",
+  threadResponseSubmittingAction: "Sending...",
+  threadResponseConflict: "That response was already sent, or the message changed. Refresh and try again.",
+  threadResponseFailed: "Failed to send your response"
 };
 var issueReportingKeys = {
   all: ["spaps-issue-reporting"],
   status: (scope) => [...issueReportingKeys.all, "status", scope],
   history: (scope) => [...issueReportingKeys.all, "history", scope],
-  detail: (issueReportId) => [...issueReportingKeys.all, "detail", issueReportId]
+  detail: (issueReportId) => [...issueReportingKeys.all, "detail", issueReportId],
+  messages: (issueReportId) => [...issueReportingKeys.all, "messages", issueReportId]
 };
 function resolvePageUrl(getPageUrl) {
   if (getPageUrl) {
@@ -292,6 +319,27 @@ function getEntryPointClassName(state) {
   }
   return "text-slate-500";
 }
+function selectReporterVisibleMessages(messages) {
+  return messages.filter(
+    (message) => message.reporter_visible && message.state === "active"
+  ).slice().sort((a, b) => a.created_at.localeCompare(b.created_at));
+}
+function isReporterMessageConflict(error) {
+  if (!error || typeof error !== "object") {
+    return false;
+  }
+  const record = error;
+  const code = record.code ?? record.error?.code;
+  if (typeof code === "string" && code === "ISSUE_REPORT_MESSAGE_CONFLICT") {
+    return true;
+  }
+  const status = record.status ?? record.statusCode ?? record.status_code ?? void 0;
+  if (status === 409) {
+    return true;
+  }
+  const message = error instanceof Error ? error.message : typeof record.message === "string" ? record.message : "";
+  return /ISSUE_REPORT_MESSAGE_CONFLICT/i.test(message) || /\b409\b/.test(message);
+}
 function getIssueNoteLengthMessage(note, copy) {
   if (note.length < NOTE_MIN_LENGTH) {
     return `${NOTE_MIN_LENGTH - note.length} ${copy.noteMinimumSuffix}`;
@@ -386,18 +434,26 @@ function useIssueReportingMutations() {
   const updateMutation = useMutation({
     mutationFn: ({
       issueReportId,
-      note
-    }) => client.issueReporting.update(issueReportId, { note }),
+      note,
+      add_attachment_ids,
+      remove_attachment_ids
+    }) => client.issueReporting.update(issueReportId, {
+      note,
+      add_attachment_ids,
+      remove_attachment_ids
+    }),
     onSuccess: invalidateAll
   });
   const replyMutation = useMutation({
     mutationFn: ({
       issueReportId,
       note,
-      reporterRoleHint
+      reporterRoleHint,
+      attachment_ids
     }) => client.issueReporting.reply(issueReportId, {
       note,
-      reporter_role_hint: reporterRoleHint
+      reporter_role_hint: reporterRoleHint,
+      attachment_ids
     }),
     onSuccess: invalidateAll
   });
@@ -407,6 +463,39 @@ function useIssueReportingMutations() {
     replyMutation
   };
 }
+function useIssueReportingMessages(issueReportId) {
+  const { client, isEligible } = useIssueReporting();
+  const listMessages = client.issueReporting.listMessages;
+  return useQuery({
+    queryKey: issueReportingKeys.messages(issueReportId ?? "none"),
+    queryFn: () => listMessages(issueReportId),
+    enabled: isEligible && Boolean(issueReportId) && Boolean(listMessages),
+    retry: false
+  });
+}
+function useIssueReportingMessageMutation(issueReportId) {
+  const queryClient = useQueryClient();
+  const { client } = useIssueReporting();
+  return useMutation({
+    mutationFn: (payload) => {
+      const submit = client.issueReporting.submitMessage;
+      if (!submit || !issueReportId) {
+        return Promise.reject(
+          new Error("This client does not support submitting messages.")
+        );
+      }
+      return submit(issueReportId, payload);
+    },
+    onSuccess: async () => {
+      if (!issueReportId) {
+        return;
+      }
+      await queryClient.invalidateQueries({
+        queryKey: issueReportingKeys.messages(issueReportId)
+      });
+    }
+  });
+}
 function IssueReportingProvider({
   client,
   isEligible,
@@ -436,6 +525,7 @@ function IssueReportingProvider({
   const [scope, setScope] = useState(
     () => resolveInitialScope(defaultScope, allowTenantScope)
   );
+  const [needsResponseMap, setNeedsResponseMap] = useState({});
   const [pageConfigs, setPageConfigs] = useState([]);
   const [registeredTargets, setRegisteredTargets] = useState(
     []
@@ -460,6 +550,21 @@ function IssueReportingProvider({
   useEffect(() => {
     setScope(resolveInitialScope(defaultScope, allowTenantScope));
   }, [allowTenantScope, defaultScope]);
+  const setNeedsResponse = useCallback(
+    (issueReportId, needsResponse) => {
+      setNeedsResponseMap((current) => {
+        if (Boolean(current[issueReportId]) === needsResponse) {
+          return current;
+        }
+        return { ...current, [issueReportId]: needsResponse };
+      });
+    },
+    []
+  );
+  const needsResponseIssueIds = useMemo(
+    () => Object.entries(needsResponseMap).filter(([, needs]) => needs).map(([id]) => id),
+    [needsResponseMap]
+  );
   const closePopover = useCallback(() => {
     setIsPopoverOpen(false);
   }, []);
@@ -647,7 +752,9 @@ function IssueReportingProvider({
       createMode,
       inputModes: resolvedInputModes,
       defaultInputMode: resolvedDefaultInputMode,
-      voice: resolvedVoiceConfig
+      voice: resolvedVoiceConfig,
+      needsResponseIssueIds,
+      setNeedsResponse
     }),
     [
       allowTenantScope,
@@ -663,6 +770,7 @@ function IssueReportingProvider({
       isReportMode,
       mergedCopy,
       modalState,
+      needsResponseIssueIds,
       openExistingIssueModal,
       openPageIssueModal,
       openPopover,
@@ -674,6 +782,7 @@ function IssueReportingProvider({
       resolvedVoiceConfig,
       scope,
       selectPanel,
+      setNeedsResponse,
       startNewIssue
     ]
   );
@@ -953,6 +1062,7 @@ function IssueReportModalBody({
   error,
   canUseVoice,
   canUseText,
+  canUseAttachments,
   effectiveInputMode,
   note,
   normalizedNote,
@@ -966,6 +1076,11 @@ function IssueReportModalBody({
   voiceError,
   scribeError,
   submitError,
+  existingAttachments,
+  removedExistingIds,
+  pendingFiles,
+  uploadProgress,
+  attachmentValidationErrors,
   onRetryHydration,
   onClose,
   onSelectText,
@@ -974,7 +1089,10 @@ function IssueReportModalBody({
   onStopVoiceInput,
   onAppendTranscript,
   onNoteChange,
-  onSubmit
+  onSubmit,
+  onAddFiles,
+  onRemoveExistingAttachment,
+  onRemovePendingAttachment
 }) {
   if (isHydrating) {
     return /* @__PURE__ */ 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: [
@@ -1044,6 +1162,20 @@ function IssueReportModalBody({
         onSubmit
       }
     ),
+    canUseAttachments && /* @__PURE__ */ jsx2(
+      AttachmentPicker,
+      {
+        existingAttachments,
+        removedExistingIds,
+        pendingFiles,
+        uploadProgress,
+        validationErrors: attachmentValidationErrors,
+        disabled: isSubmitting,
+        onAddFiles,
+        onRemoveExisting: onRemoveExistingAttachment,
+        onRemovePending: onRemovePendingAttachment
+      }
+    ),
     submitError ? /* @__PURE__ */ jsx2("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__ */ jsxs("div", { className: "mt-6 flex justify-end gap-3", children: [
       /* @__PURE__ */ jsx2(
@@ -1069,7 +1201,8 @@ function IssueReportModalBody({
           children: isSubmitting ? copy.submittingAction : copy.submitAction
         }
       )
-    ] })
+    ] }),
+    mode !== "create" && issue ? /* @__PURE__ */ jsx2(IssueReportMessageThread, { issueReportId: issue.id }) : null
   ] });
 }
 function useIssueReportVoiceCapture({
@@ -1167,6 +1300,493 @@ function useIssueReportVoiceCapture({
     appendTranscript
   };
 }
+var INITIAL_UPLOAD_PROGRESS = {
+  phase: "idle",
+  uploaded: 0,
+  total: 0
+};
+var pendingFileCounter = 0;
+function nextPendingId() {
+  pendingFileCounter += 1;
+  return `pending-${pendingFileCounter}`;
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function validateAttachmentFile(file) {
+  if (!ATTACHMENT_ALLOWED_MIMES.has(file.type)) {
+    return `"${file.name}" is not a supported image type (PNG, JPEG, or WebP).`;
+  }
+  if (file.size > ATTACHMENT_MAX_BYTES) {
+    return `"${file.name}" exceeds the 10 MB limit.`;
+  }
+  return null;
+}
+function AttachmentPicker({
+  existingAttachments,
+  removedExistingIds,
+  pendingFiles,
+  uploadProgress,
+  validationErrors,
+  disabled,
+  onAddFiles,
+  onRemoveExisting,
+  onRemovePending
+}) {
+  const fileInputRef = useRef2(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__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500", children: [
+        /* @__PURE__ */ jsx2(Image, { className: "h-3.5 w-3.5" }),
+        "Screenshots (",
+        totalCount,
+        "/",
+        ATTACHMENT_MAX_COUNT,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/png,image/jpeg,image/webp",
+          multiple: true,
+          className: "hidden",
+          onChange: (e) => {
+            if (e.target.files && e.target.files.length > 0) {
+              onAddFiles(e.target.files);
+            }
+            e.target.value = "";
+          },
+          disabled: !canAdd,
+          "aria-label": "Select screenshot files"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "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"
+          ),
+          onClick: () => fileInputRef.current?.click(),
+          disabled: !canAdd,
+          "aria-label": "Add screenshots",
+          children: "Add"
+        }
+      )
+    ] }),
+    validationErrors.length > 0 && /* @__PURE__ */ jsx2("div", { className: "space-y-1", children: validationErrors.map((err, i) => /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
+        role: "alert",
+        children: err
+      },
+      i
+    )) }),
+    uploadProgress.phase === "uploading" && /* @__PURE__ */ 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__ */ jsx2(Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+      "Uploading ",
+      uploadProgress.uploaded,
+      " of ",
+      uploadProgress.total,
+      "..."
+    ] }),
+    uploadProgress.phase === "error" && uploadProgress.error && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
+        role: "alert",
+        children: uploadProgress.error
+      }
+    ),
+    (retainedExisting.length > 0 || pendingFiles.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      retainedExisting.map((att) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsx2(Image, { className: "h-4 w-4 flex-shrink-0 text-slate-400" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx2("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: att.original_filename }),
+              /* @__PURE__ */ jsx2("div", { className: "text-xs text-slate-400", children: formatFileSize(att.byte_size) })
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "ml-1 rounded-full p-0.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700",
+                onClick: () => onRemoveExisting(att.id),
+                disabled,
+                "aria-label": `Remove ${att.original_filename}`,
+                children: /* @__PURE__ */ jsx2(Trash, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        att.id
+      )),
+      pendingFiles.map((pf) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: pf.previewUrl,
+                alt: pf.file.name,
+                className: "h-8 w-8 flex-shrink-0 rounded object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx2("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: pf.file.name }),
+              /* @__PURE__ */ jsx2("div", { className: "text-xs text-slate-400", children: formatFileSize(pf.file.size) })
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: "ml-1 rounded-full p-0.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700",
+                onClick: () => onRemovePending(pf.clientId),
+                disabled,
+                "aria-label": `Remove ${pf.file.name}`,
+                children: /* @__PURE__ */ jsx2(Trash, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        pf.clientId
+      ))
+    ] })
+  ] });
+}
+function useAttachmentState(existingAttachments) {
+  const [pendingFiles, setPendingFiles] = useState2([]);
+  const [removedExistingIds, setRemovedExistingIds] = useState2(
+    /* @__PURE__ */ new Set()
+  );
+  const [validationErrors, setValidationErrors] = useState2([]);
+  const [uploadProgress, setUploadProgress] = useState2(INITIAL_UPLOAD_PROGRESS);
+  const retainedExistingCount = existingAttachments.filter(
+    (a) => !removedExistingIds.has(a.id)
+  ).length;
+  const reset = useCallback2(() => {
+    for (const pf of pendingFiles) {
+      URL.revokeObjectURL(pf.previewUrl);
+    }
+    setPendingFiles([]);
+    setRemovedExistingIds(/* @__PURE__ */ new Set());
+    setValidationErrors([]);
+    setUploadProgress(INITIAL_UPLOAD_PROGRESS);
+  }, [pendingFiles]);
+  const addFiles = useCallback2(
+    (fileList) => {
+      const currentTotal = retainedExistingCount + pendingFiles.length;
+      const errors = [];
+      const accepted = [];
+      let count = currentTotal;
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList[i];
+        if (count >= ATTACHMENT_MAX_COUNT) {
+          errors.push(
+            `"${file.name}" was not added; maximum ${ATTACHMENT_MAX_COUNT} screenshots reached.`
+          );
+          continue;
+        }
+        const err = validateAttachmentFile(file);
+        if (err) {
+          errors.push(err);
+          continue;
+        }
+        accepted.push({
+          clientId: nextPendingId(),
+          file,
+          previewUrl: URL.createObjectURL(file)
+        });
+        count += 1;
+      }
+      if (accepted.length > 0) {
+        setPendingFiles((prev) => [...prev, ...accepted]);
+      }
+      setValidationErrors(errors);
+      setUploadProgress(INITIAL_UPLOAD_PROGRESS);
+    },
+    [pendingFiles.length, retainedExistingCount]
+  );
+  const removeExisting = useCallback2((id) => {
+    setRemovedExistingIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
+  }, []);
+  const removePending = useCallback2((clientId) => {
+    setPendingFiles((prev) => {
+      const removed = prev.find((pf) => pf.clientId === clientId);
+      if (removed) {
+        URL.revokeObjectURL(removed.previewUrl);
+      }
+      return prev.filter((pf) => pf.clientId !== clientId);
+    });
+    setUploadProgress(INITIAL_UPLOAD_PROGRESS);
+  }, []);
+  const markPendingUploaded = useCallback2((clientId, attachmentId) => {
+    setPendingFiles(
+      (prev) => prev.map(
+        (pf) => pf.clientId === clientId ? { ...pf, uploadedAttachmentId: attachmentId } : pf
+      )
+    );
+  }, []);
+  return {
+    pendingFiles,
+    removedExistingIds,
+    validationErrors,
+    uploadProgress,
+    setUploadProgress,
+    addFiles,
+    removeExisting,
+    removePending,
+    markPendingUploaded,
+    reset
+  };
+}
+var REPORTER_MESSAGE_MIN_LENGTH = 1;
+var REPORTER_MESSAGE_MAX_LENGTH = 2e3;
+function generateIdempotencyKey() {
+  const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
+  if (cryptoObj && typeof cryptoObj.randomUUID === "function") {
+    return `reporter-msg-${cryptoObj.randomUUID()}`;
+  }
+  return `reporter-msg-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function getMessageKindLabel(kind, copy) {
+  switch (kind) {
+    case "clarification_request":
+      return copy.threadKindClarificationRequest;
+    case "reporter_response":
+      return copy.threadKindReporterResponse;
+    case "final_response":
+      return copy.threadKindFinalResponse;
+    default:
+      return kind;
+  }
+}
+function getMessageKindClassName(kind) {
+  switch (kind) {
+    case "clarification_request":
+      return "bg-amber-100 text-amber-700";
+    case "final_response":
+      return "bg-emerald-100 text-emerald-700";
+    default:
+      return "bg-slate-100 text-slate-600";
+  }
+}
+function MessageBubble({
+  message,
+  copy
+}) {
+  const isReporter = message.actor.author_type === "reporter";
+  const isFinal = message.kind === "final_response";
+  const authorLabel = isReporter ? copy.threadAuthorReporter : copy.threadAuthorOperator;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "flex flex-col gap-1",
+        isReporter ? "items-end" : "items-start"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 font-medium",
+                BADGE_TEXT,
+                getMessageKindClassName(message.kind)
+              ),
+              children: getMessageKindLabel(message.kind, copy)
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: cn("font-medium text-slate-600", LABEL_TEXT), children: authorLabel }),
+          /* @__PURE__ */ jsx2(
+            "time",
+            {
+              className: "text-xs text-slate-400",
+              dateTime: message.created_at,
+              children: formatRelativeTime(message.created_at)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "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"
+            ),
+            children: message.body
+          }
+        )
+      ]
+    }
+  );
+}
+function ReporterResponseComposer({
+  issueReportId,
+  copy
+}) {
+  const mutation = useIssueReportingMessageMutation(issueReportId);
+  const idempotencyKeyRef = useRef2(generateIdempotencyKey());
+  const [body, setBody] = useState2("");
+  const [submitError, setSubmitError] = useState2(null);
+  const normalized = body.trim();
+  const isValid = normalized.length >= REPORTER_MESSAGE_MIN_LENGTH && normalized.length <= REPORTER_MESSAGE_MAX_LENGTH;
+  const isSubmitting = mutation.isPending;
+  const handleSubmit = async () => {
+    if (!isValid || isSubmitting) {
+      return;
+    }
+    setSubmitError(null);
+    try {
+      await mutation.mutateAsync({
+        body: normalized,
+        idempotency_key: idempotencyKeyRef.current
+      });
+      setBody("");
+      idempotencyKeyRef.current = generateIdempotencyKey();
+    } catch (error) {
+      if (isReporterMessageConflict(error)) {
+        setSubmitError(copy.threadResponseConflict);
+        idempotencyKeyRef.current = generateIdempotencyKey();
+        return;
+      }
+      setSubmitError(resolveErrorMessage(error, copy.threadResponseFailed));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+    /* @__PURE__ */ jsx2(
+      "label",
+      {
+        htmlFor: "issue-report-thread-response",
+        className: cn(
+          "block font-medium uppercase tracking-wide text-slate-500",
+          LABEL_TEXT
+        ),
+        children: copy.threadResponseLabel
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        id: "issue-report-thread-response",
+        value: body,
+        onChange: (event) => setBody(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            void handleSubmit();
+          }
+        },
+        placeholder: copy.threadResponsePlaceholder,
+        className: "h-24 w-full resize-none rounded-2xl border border-slate-300 px-3 py-2 text-sm text-slate-800 outline-none transition focus:border-slate-500 focus:ring-2 focus:ring-slate-200",
+        disabled: isSubmitting
+      }
+    ),
+    submitError ? /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700",
+        role: "alert",
+        children: submitError
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(
+      "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.threadResponseSubmittingAction : copy.threadResponseSubmitAction
+      }
+    ) })
+  ] });
+}
+function IssueReportMessageThread({
+  issueReportId
+}) {
+  const { copy, client, setNeedsResponse } = useIssueReporting();
+  const supportsMessages = Boolean(client.issueReporting.listMessages);
+  const supportsSubmit = Boolean(client.issueReporting.submitMessage);
+  const query = useIssueReportingMessages(issueReportId);
+  const needsResponse = query.data?.needs_response ?? false;
+  useEffect2(() => {
+    setNeedsResponse(issueReportId, needsResponse);
+    return () => {
+      setNeedsResponse(issueReportId, false);
+    };
+  }, [issueReportId, needsResponse, setNeedsResponse]);
+  if (!supportsMessages) {
+    return null;
+  }
+  const visibleMessages = selectReporterVisibleMessages(query.data?.items ?? []);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": copy.threadTitle,
+      className: "mt-6 border-t border-slate-100 pt-5",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx2("h3", { className: "text-sm font-semibold text-slate-900", children: copy.threadTitle }),
+          needsResponse ? /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 font-medium",
+                BADGE_TEXT,
+                "bg-amber-100 text-amber-700"
+              ),
+              children: copy.threadNeedsResponseBadge
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "mt-1 text-xs text-slate-500", children: copy.threadDescription }),
+        query.isPending ? /* @__PURE__ */ 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__ */ jsx2(Spinner, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx2("span", { children: copy.threadLoading })
+        ] }) : query.error ? /* @__PURE__ */ 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__ */ jsx2("div", { children: resolveErrorMessage(query.error, copy.threadLoadFailed) }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-rose-300 px-3 py-1 font-medium transition hover:bg-rose-100",
+              onClick: () => void query.refetch(),
+              children: copy.retryAction
+            }
+          )
+        ] }) : visibleMessages.length === 0 ? /* @__PURE__ */ jsx2("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__ */ jsx2("ul", { className: "mt-4 space-y-3", children: visibleMessages.map((message) => /* @__PURE__ */ jsx2(MessageBubble, { message, copy }, message.id)) }),
+        supportsSubmit ? /* @__PURE__ */ jsx2(
+          ReporterResponseComposer,
+          {
+            issueReportId,
+            copy
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function IssueReportModeBanner() {
   const { copy } = useIssueReporting();
   const reportMode = useReportMode();
@@ -1467,7 +2087,13 @@ function IssueReportModal() {
   const { isOpen, mode, issue, target, isHydrating, error } = modalState;
   const canUseVoice = mode === "create" && inputModes.includes("voice");
   const canUseText = mode !== "create" || inputModes.includes("text");
-  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending;
+  const canUseAttachments = Boolean(client.issueReporting.uploadAttachment);
+  const existingAttachments = useMemo2(
+    () => 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,
@@ -1491,6 +2117,7 @@ function IssueReportModal() {
   useEffect2(() => {
     if (!isOpen) {
       resetVoiceCapture();
+      attachmentState.reset();
       setNote("");
       setSubmitError(null);
       return;
@@ -1501,6 +2128,7 @@ function IssueReportModal() {
       setNote("");
     }
     resetVoiceCapture();
+    attachmentState.reset();
     setSubmitError(null);
   }, [isOpen, issue, mode, resetVoiceCapture]);
   const effectiveInputMode = mode !== "create" ? "text" : canUseVoice && inputMode === "voice" ? "voice" : "text";
@@ -1509,6 +2137,7 @@ function IssueReportModal() {
   const title = mode === "create" ? `${copy.createTitlePrefix}: ${target?.component_label ?? ""}` : mode === "edit" ? `${copy.editTitlePrefix}: ${target?.component_label ?? ""}` : `${copy.replyTitlePrefix}: ${target?.component_label ?? ""}`;
   const handleCloseModal = () => {
     resetVoiceCapture();
+    attachmentState.reset();
     closeModal();
   };
   const handleStartVoiceInput = async () => {
@@ -1520,6 +2149,38 @@ function IssueReportModal() {
   const handleAppendTranscript = () => {
     appendTranscript(setNote);
   };
+  const uploadPendingFiles = async () => {
+    const upload = client.issueReporting.uploadAttachment;
+    if (!upload || attachmentState.pendingFiles.length === 0) {
+      return [];
+    }
+    const files = attachmentState.pendingFiles;
+    attachmentState.setUploadProgress({
+      phase: "uploading",
+      uploaded: 0,
+      total: files.length
+    });
+    const ids = [];
+    for (let i = 0; i < files.length; i++) {
+      const pf = files[i];
+      const attachmentId = pf.uploadedAttachmentId ?? (await upload(pf.file, { filename: pf.file.name })).id;
+      if (!pf.uploadedAttachmentId) {
+        attachmentState.markPendingUploaded(pf.clientId, attachmentId);
+      }
+      ids.push(attachmentId);
+      attachmentState.setUploadProgress({
+        phase: "uploading",
+        uploaded: i + 1,
+        total: files.length
+      });
+    }
+    attachmentState.setUploadProgress({
+      phase: "done",
+      uploaded: files.length,
+      total: files.length
+    });
+    return ids;
+  };
   const handleSubmit = async () => {
     if (!target || !isValid || isSubmitting) {
       return;
@@ -1527,6 +2188,10 @@ function IssueReportModal() {
     setSubmitError(null);
     try {
       const noteForSubmit = normalizedNote;
+      let newAttachmentIds = [];
+      if (canUseAttachments && attachmentState.pendingFiles.length > 0) {
+        newAttachmentIds = await uploadPendingFiles();
+      }
       const effectiveVoiceMetadata = effectiveInputMode === "voice" ? voiceSubmitMetadata ?? {
         provider: voice.provider,
         token: "",
@@ -1551,24 +2216,37 @@ function IssueReportModal() {
             }
           } : target,
           note: noteForSubmit,
-          reporter_role_hint: reporterRoleHint
+          reporter_role_hint: reporterRoleHint,
+          attachment_ids: newAttachmentIds.length > 0 ? newAttachmentIds : void 0
         });
       } else if (mode === "edit" && issue) {
+        const removedIds = [...attachmentState.removedExistingIds];
         await updateMutation.mutateAsync({
           issueReportId: issue.id,
-          note: noteForSubmit
+          note: noteForSubmit,
+          add_attachment_ids: newAttachmentIds.length > 0 ? newAttachmentIds : void 0,
+          remove_attachment_ids: removedIds.length > 0 ? removedIds : void 0
         });
       } else if (mode === "reply" && issue) {
         await replyMutation.mutateAsync({
           issueReportId: issue.id,
           note: noteForSubmit,
-          reporterRoleHint
+          reporterRoleHint,
+          attachment_ids: newAttachmentIds.length > 0 ? newAttachmentIds : void 0
         });
       }
       resetVoiceCapture();
+      attachmentState.reset();
       closeModal();
     } catch (submissionError) {
-      setSubmitError(resolveErrorMessage(submissionError, "Failed to submit issue report"));
+      const message = resolveErrorMessage(
+        submissionError,
+        "Failed to submit issue report"
+      );
+      attachmentState.setUploadProgress(
+        (current) => current.phase === "uploading" ? { ...current, phase: "error", error: message } : current
+      );
+      setSubmitError(message);
     }
   };
   return /* @__PURE__ */ jsx2(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
@@ -1577,7 +2255,7 @@ function IssueReportModal() {
       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",
+          "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,
           MODAL_RADIUS,
@@ -1603,6 +2281,7 @@ function IssueReportModal() {
               error,
               canUseVoice,
               canUseText,
+              canUseAttachments,
               effectiveInputMode,
               note,
               normalizedNote,
@@ -1616,6 +2295,11 @@ function IssueReportModal() {
               voiceError,
               scribeError,
               submitError,
+              existingAttachments,
+              removedExistingIds: attachmentState.removedExistingIds,
+              pendingFiles: attachmentState.pendingFiles,
+              uploadProgress: attachmentState.uploadProgress,
+              attachmentValidationErrors: attachmentState.validationErrors,
               onRetryHydration: () => void retryModalHydration(),
               onClose: handleCloseModal,
               onSelectText: () => setInputMode("text"),
@@ -1624,7 +2308,10 @@ function IssueReportModal() {
               onStopVoiceInput: handleStopVoiceInput,
               onAppendTranscript: handleAppendTranscript,
               onNoteChange: setNote,
-              onSubmit: () => void handleSubmit()
+              onSubmit: () => void handleSubmit(),
+              onAddFiles: attachmentState.addFiles,
+              onRemoveExistingAttachment: attachmentState.removeExisting,
+              onRemovePendingAttachment: attachmentState.removePending
             }
           ),
           /* @__PURE__ */ jsx2(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx2(
@@ -1651,33 +2338,44 @@ function FloatingIssueReportButton({
     isReportMode,
     isPopoverOpen,
     openPopover,
-    closePopover
+    closePopover,
+    needsResponseIssueIds
   } = useIssueReporting();
   const status = useIssueReportingStatus();
   const entryPointState = getEntryPointState(status.data);
+  const needsResponse = needsResponseIssueIds.length > 0;
   if (!isEligible) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(IssueReportModeBanner, {}),
-    !isReportMode ? /* @__PURE__ */ jsx2("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsx2(
+    !isReportMode ? /* @__PURE__ */ jsx2("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        "aria-label": copy.entryAriaLabel,
+        "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
         onClick: () => isPopoverOpen ? closePopover() : openPopover(),
         className: cn(
-          "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",
+          "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__ */ jsx2(
-          BugBeetle,
-          {
-            className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
-            weight: "fill"
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx2(
+            BugBeetle,
+            {
+              className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
+              weight: "fill"
+            }
+          ),
+          needsResponse ? /* @__PURE__ */ jsx2(
+            "span",
+            {
+              "data-testid": "issue-report-needs-response-badge",
+              className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
+            }
+          ) : null
+        ]
       }
     ) }) }) : null,
     /* @__PURE__ */ jsx2(IssueReportModal, {})
@@ -1729,6 +2427,7 @@ function ReportableSection({
 }
 export {
   FloatingIssueReportButton,
+  IssueReportMessageThread,
   IssueReportingPageConfig,
   IssueReportingProvider,
   ReportModeContext,
@@ -1742,9 +2441,13 @@ export {
   getIssueStatusClassName,
   isClosedIssueStatus,
   isOpenIssueStatus,
+  isReporterMessageConflict,
   issueReportingKeys,
+  selectReporterVisibleMessages,
   useIssueReporting,
   useIssueReportingHistory,
+  useIssueReportingMessageMutation,
+  useIssueReportingMessages,
   useIssueReportingMutations,
   useIssueReportingStatus,
   useReportMode