spaps-issue-reporting-react 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [Unreleased]
+
+- Added optional screenshot attachment UI that uploads private PNG/JPEG/WebP evidence through `issueReporting.uploadAttachment`, validates size/count locally, and submits only backend attachment IDs.
+
+## [0.4.0] - 2026-05-11
+
+- Maintenance: align the React issue-reporting package version after release automation.
+
+## [0.3.0] - 2026-05-11
+
+- Maintenance: align the React issue-reporting package version after release automation.
+
 ## [0.2.0] - 2026-05-09
 
 - Added voice input support through SPAPS-minted ElevenLabs realtime tokens.

package/README.md

@@ -18,6 +18,7 @@ This package targets `Node.js >=18` and React 18+. Voice input uses the package'
 | --- | --- |
 | A visible issue-report entry point | Floating button with open/recent state |
 | A guided reporting flow | Page-first create flow, optional section picking, create/edit/reply modal |
+| Screenshot evidence | Optional picker that uploads private PNG/JPEG/WebP attachments through the host client |
 | A lightweight integration contract | Any client that exposes `issueReporting.*` methods |
 | App-level control | Eligibility, reporter identity, scope, page policy, and copy stay in your app |
 
@@ -71,6 +72,7 @@ export function AppShell() {
 
 - A client with `issueReporting.getStatus`, `list`, `get`, `create`, `update`, and `reply`.
 - A client with `issueReporting.createVoiceToken` when `inputModes` includes `voice`.
+- A client with `issueReporting.uploadAttachment(file, { filename })` when you want screenshot uploads.
 - Any auth and token refresh behavior needed by that client.
 - Eligibility rules such as feature flags, account state, or role checks.
 - The current principal ID and optional role hint passed into the provider.
@@ -78,6 +80,7 @@ export function AppShell() {
   supports `mine` only; use `allowTenantScope` only with a client that implements tenant reads.
 - Whether a page defaults to `general_page`, `surface_required`, or `surface_preferred` reporting.
 - Whether the app allows `["text"]`, `["voice"]`, or `["text", "voice"]` report input.
+- User-facing screenshot sensitivity warnings for surfaces that may capture private data.
 - Styling integration if your build strips package utility classes.
 - Any app-specific copy overrides.
 - Origin registration on the owning SPAPS application if the browser calls SPAPS directly with a publishable key.
@@ -127,6 +130,24 @@ The SPAPS server also needs `ELEVENLABS_API_KEY`. The browser calls your normal
 
 When text and voice are both enabled, the modal keeps the textarea available and lets the user append a committed transcript into the editable note.
 
+## Screenshot Attachments
+
+Screenshot attachments are opt-in through the client contract. If the client passed to `IssueReportingProvider` exposes `issueReporting.uploadAttachment`, the modal renders a screenshot picker. If the method is absent, the picker stays hidden and text/voice reporting works unchanged.
+
+```tsx
+const client = {
+  issueReporting: {
+    ...spaps.issueReporting,
+    uploadAttachment: (file: Blob, options?: { filename?: string }) =>
+      spaps.issueReporting.uploadAttachment(file, options),
+  },
+};
+```
+
+The picker accepts PNG, JPEG, and WebP files, enforces the 10 MiB per-file limit and 5-screenshot report limit, previews pending files, and preserves existing attachments while editing. On submit, it uploads pending files first and sends only attachment IDs through `attachment_ids`, `add_attachment_ids`, or `remove_attachment_ids`.
+
+This package does not store screenshots, generate public URLs, or redact image content. SPAPS stores screenshots through its shared hosted-asset boundary as private objects, and access URLs are minted by the backend after authorization. Host apps should warn users before upload when a screenshot might include PHI, credentials, payment data, or other sensitive content.
+
 ## Exported Surface
 
 | Export | Purpose |
@@ -192,6 +213,10 @@ Pass `inputModes={["voice"]}` or `inputModes={["text", "voice"]}` to the provide
 
 Confirm that the SPAPS server has `ELEVENLABS_API_KEY` set and that the current user is authenticated and eligible for issue reporting.
 
+### Screenshot controls do not appear
+
+Expose `issueReporting.uploadAttachment` on the client passed to `IssueReportingProvider`. The package intentionally hides the picker when the upload helper is absent.
+
 ## Limitations
 
 - This package assumes React Query is already part of the host app.
@@ -231,7 +256,7 @@ No. This package is UI only. If your browser app calls SPAPS directly with a pub
 ## Metadata
 
 - `package_name`: `spaps-issue-reporting-react`
-- `latest_version`: `0.2.0`
+- `latest_version`: `0.4.0`
 - `minimum_runtime`: `Node.js >=18.0.0`
 - `api_base_url`: `https://api.sweetpotato.dev`
 

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as spaps_types from 'spaps-types';
-import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
-export { CreateIssueReportRequest, IssueReport, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
+import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportAttachmentOut, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
+export { CreateIssueReportRequest, IssueReport, IssueReportAttachmentOut, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
@@ -36,6 +36,9 @@ interface IssueReportingClient {
         update: (issueReportId: string, payload: UpdateIssueReportRequest) => Promise<IssueReport>;
         reply: (issueReportId: string, payload: ReplyIssueReportRequest) => Promise<IssueReport>;
         createVoiceToken?: () => Promise<IssueReportingVoiceTokenResult>;
+        uploadAttachment?: (file: Blob, options?: {
+            filename?: string;
+        }) => Promise<IssueReportAttachmentOut>;
     };
 }
 interface ReportableTargetDescriptor {
@@ -373,15 +376,19 @@ declare function useIssueReportingMutations(): {
         target: ResolvedTarget;
         note: string;
         reporter_role_hint?: string;
+        attachment_ids?: string[];
     }, unknown>;
     updateMutation: _tanstack_react_query.UseMutationResult<IssueReport, Error, {
         issueReportId: string;
         note: string;
+        add_attachment_ids?: string[];
+        remove_attachment_ids?: string[];
     }, unknown>;
     replyMutation: _tanstack_react_query.UseMutationResult<IssueReport, Error, {
         issueReportId: string;
         note: string;
         reporterRoleHint?: string;
+        attachment_ids?: string[];
     }, unknown>;
 };
 declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as spaps_types from 'spaps-types';
-import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
-export { CreateIssueReportRequest, IssueReport, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
+import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportAttachmentOut, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
+export { CreateIssueReportRequest, IssueReport, IssueReportAttachmentOut, IssueReportListResult, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 
@@ -36,6 +36,9 @@ interface IssueReportingClient {
         update: (issueReportId: string, payload: UpdateIssueReportRequest) => Promise<IssueReport>;
         reply: (issueReportId: string, payload: ReplyIssueReportRequest) => Promise<IssueReport>;
         createVoiceToken?: () => Promise<IssueReportingVoiceTokenResult>;
+        uploadAttachment?: (file: Blob, options?: {
+            filename?: string;
+        }) => Promise<IssueReportAttachmentOut>;
     };
 }
 interface ReportableTargetDescriptor {
@@ -373,15 +376,19 @@ declare function useIssueReportingMutations(): {
         target: ResolvedTarget;
         note: string;
         reporter_role_hint?: string;
+        attachment_ids?: string[];
     }, unknown>;
     updateMutation: _tanstack_react_query.UseMutationResult<IssueReport, Error, {
         issueReportId: string;
         note: string;
+        add_attachment_ids?: string[];
+        remove_attachment_ids?: string[];
     }, unknown>;
     replyMutation: _tanstack_react_query.UseMutationResult<IssueReport, Error, {
         issueReportId: string;
         note: string;
         reporterRoleHint?: string;
+        attachment_ids?: string[];
     }, unknown>;
 };
 declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -79,6 +79,13 @@ var import_jsx_runtime = require("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";
@@ -421,18 +428,26 @@ function useIssueReportingMutations() {
   const updateMutation = (0, import_react_query.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 = (0, import_react_query.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
   });
@@ -988,6 +1003,7 @@ function IssueReportModalBody({
   error,
   canUseVoice,
   canUseText,
+  canUseAttachments,
   effectiveInputMode,
   note,
   normalizedNote,
@@ -1001,6 +1017,11 @@ function IssueReportModalBody({
   voiceError,
   scribeError,
   submitError,
+  existingAttachments,
+  removedExistingIds,
+  pendingFiles,
+  uploadProgress,
+  attachmentValidationErrors,
   onRetryHydration,
   onClose,
   onSelectText,
@@ -1009,7 +1030,10 @@ function IssueReportModalBody({
   onStopVoiceInput,
   onAppendTranscript,
   onNoteChange,
-  onSubmit
+  onSubmit,
+  onAddFiles,
+  onRemoveExistingAttachment,
+  onRemovePendingAttachment
 }) {
   if (isHydrating) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-5 flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600", children: [
@@ -1079,6 +1103,20 @@ function IssueReportModalBody({
         onSubmit
       }
     ),
+    canUseAttachments && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      AttachmentPicker,
+      {
+        existingAttachments,
+        removedExistingIds,
+        pendingFiles,
+        uploadProgress,
+        validationErrors: attachmentValidationErrors,
+        disabled: isSubmitting,
+        onAddFiles,
+        onRemoveExisting: onRemoveExistingAttachment,
+        onRemovePending: onRemovePendingAttachment
+      }
+    ),
     submitError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700", children: submitError }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-6 flex justify-end gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -1202,6 +1240,262 @@ 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 = (0, import_react5.useRef)(null);
+  const retainedExisting = existingAttachments.filter(
+    (a) => !removedExistingIds.has(a.id)
+  );
+  const totalCount = retainedExisting.length + pendingFiles.length;
+  const canAdd = totalCount < ATTACHMENT_MAX_COUNT && !disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-4 space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Image, { className: "h-3.5 w-3.5" }),
+        "Screenshots (",
+        totalCount,
+        "/",
+        ATTACHMENT_MAX_COUNT,
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "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__ */ (0, import_jsx_runtime2.jsx)(
+        "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1", children: validationErrors.map((err, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+      "Uploading ",
+      uploadProgress.uploaded,
+      " of ",
+      uploadProgress.total,
+      "..."
+    ] }),
+    uploadProgress.phase === "error" && uploadProgress.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+      retainedExisting.map((att) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Image, { className: "h-4 w-4 flex-shrink-0 text-slate-400" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: att.original_filename }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(att.byte_size) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsx)(import_react4.Trash, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        att.id
+      )),
+      pendingFiles.map((pf) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "group relative flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "img",
+              {
+                src: pf.previewUrl,
+                alt: pf.file.name,
+                className: "h-8 w-8 flex-shrink-0 rounded object-cover"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-[140px] truncate text-xs font-medium text-slate-700", children: pf.file.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-slate-400", children: formatFileSize(pf.file.size) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsx)(import_react4.Trash, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        },
+        pf.clientId
+      ))
+    ] })
+  ] });
+}
+function useAttachmentState(existingAttachments) {
+  const [pendingFiles, setPendingFiles] = (0, import_react5.useState)([]);
+  const [removedExistingIds, setRemovedExistingIds] = (0, import_react5.useState)(
+    /* @__PURE__ */ new Set()
+  );
+  const [validationErrors, setValidationErrors] = (0, import_react5.useState)([]);
+  const [uploadProgress, setUploadProgress] = (0, import_react5.useState)(INITIAL_UPLOAD_PROGRESS);
+  const retainedExistingCount = existingAttachments.filter(
+    (a) => !removedExistingIds.has(a.id)
+  ).length;
+  const reset = (0, import_react5.useCallback)(() => {
+    for (const pf of pendingFiles) {
+      URL.revokeObjectURL(pf.previewUrl);
+    }
+    setPendingFiles([]);
+    setRemovedExistingIds(/* @__PURE__ */ new Set());
+    setValidationErrors([]);
+    setUploadProgress(INITIAL_UPLOAD_PROGRESS);
+  }, [pendingFiles]);
+  const addFiles = (0, import_react5.useCallback)(
+    (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 = (0, import_react5.useCallback)((id) => {
+    setRemovedExistingIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
+  }, []);
+  const removePending = (0, import_react5.useCallback)((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 = (0, import_react5.useCallback)((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
+  };
+}
 function IssueReportModeBanner() {
   const { copy } = useIssueReporting();
   const reportMode = useReportMode();
@@ -1502,7 +1796,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 = (0, import_react5.useMemo)(
+    () => mode === "edit" && issue ? issue.attachments ?? [] : [],
+    [issue, mode]
+  );
+  const attachmentState = useAttachmentState(existingAttachments);
+  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
   const {
     inputMode,
     setInputMode,
@@ -1526,6 +1826,7 @@ function IssueReportModal() {
   (0, import_react5.useEffect)(() => {
     if (!isOpen) {
       resetVoiceCapture();
+      attachmentState.reset();
       setNote("");
       setSubmitError(null);
       return;
@@ -1536,6 +1837,7 @@ function IssueReportModal() {
       setNote("");
     }
     resetVoiceCapture();
+    attachmentState.reset();
     setSubmitError(null);
   }, [isOpen, issue, mode, resetVoiceCapture]);
   const effectiveInputMode = mode !== "create" ? "text" : canUseVoice && inputMode === "voice" ? "voice" : "text";
@@ -1544,6 +1846,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 () => {
@@ -1555,6 +1858,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;
@@ -1562,6 +1897,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: "",
@@ -1586,24 +1925,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__ */ (0, import_jsx_runtime2.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Portal, { children: [
@@ -1612,7 +1964,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,
@@ -1638,6 +1990,7 @@ function IssueReportModal() {
               error,
               canUseVoice,
               canUseText,
+              canUseAttachments,
               effectiveInputMode,
               note,
               normalizedNote,
@@ -1651,6 +2004,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"),
@@ -1659,7 +2017,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__ */ (0, import_jsx_runtime2.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(

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";
@@ -386,18 +395,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
   });
@@ -953,6 +970,7 @@ function IssueReportModalBody({
   error,
   canUseVoice,
   canUseText,
+  canUseAttachments,
   effectiveInputMode,
   note,
   normalizedNote,
@@ -966,6 +984,11 @@ function IssueReportModalBody({
   voiceError,
   scribeError,
   submitError,
+  existingAttachments,
+  removedExistingIds,
+  pendingFiles,
+  uploadProgress,
+  attachmentValidationErrors,
   onRetryHydration,
   onClose,
   onSelectText,
@@ -974,7 +997,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 +1070,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(
@@ -1167,6 +1207,262 @@ 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
+  };
+}
 function IssueReportModeBanner() {
   const { copy } = useIssueReporting();
   const reportMode = useReportMode();
@@ -1467,7 +1763,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 +1793,7 @@ function IssueReportModal() {
   useEffect2(() => {
     if (!isOpen) {
       resetVoiceCapture();
+      attachmentState.reset();
       setNote("");
       setSubmitError(null);
       return;
@@ -1501,6 +1804,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 +1813,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 +1825,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 +1864,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 +1892,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 +1931,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 +1957,7 @@ function IssueReportModal() {
               error,
               canUseVoice,
               canUseText,
+              canUseAttachments,
               effectiveInputMode,
               note,
               normalizedNote,
@@ -1616,6 +1971,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 +1984,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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spaps-issue-reporting-react",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Shared React issue-reporting UI for Sweet Potato platform consumers",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,7 +40,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "date-fns": "^4.1.0",
-    "spaps-types": "^1.3.0"
+    "spaps-types": "^1.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",