issue-sticker 0.11.0 → 0.13.0

package/dist/issue-sticker-headless.js

@@ -1,5 +1,6 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureWithModernScreenshot, b as buildJiraCreateFields, e as buildNotionCreateFields, f as buildGuestOwnerQuery, h as composeIssueFilterGroups, i as buildIssueIntegrationsPayload, j as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, t as sanitizeString, v as serializeSocketTranscript, w as uploadSocketTranscript, x as getCurrentPageUrl, S as ScreenRecordingController, y as SessionReplayCaptureController, z as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX } from "./externalUserPayload-BbOEmKZD.js";
-import { r } from "./three-DQdLNs7v.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureViewportAndElementShots, b as captureScreenshotWithMasks, i as isCapturedScreenshot, M as MaskingCaptureError, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, j as composeIssueFilterGroups, k as buildIssueIntegrationsPayload, l as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, m as filterExcludeServiceRelatedLogs, n as filterExcludeServiceRelatedConsoleLogs, o as compactNetworkLogsForTransport, q as CONSOLE_LOG_SUBMIT_LIMIT, r as buildExternalUserPayload, t as shrinkNetworkLogsToFit, v as measureJsonBytes, w as sanitizeString, x as runMaskedSubmit, y as applySubmitMasking, z as collectAttachmentUploads, A as maskPositionForSubmit, B as hasReplayUpload, D as appendMaskingNotice, E as screenshotExclusionNotice, F as collectSnapshotSelectors, G as MaskingScreenRulesChangedError, H as screenRulesChangedMessage, I as MaskingPolicyUnavailableError, J as MaskingSelectorUnsupportedError, K as assertScreenRulesCovered, L as isMaskingFailure, O as maskScreenshotsForSubmit, P as getCurrentPageUrl, Q as createIssueUploadQueues, S as ScreenRecordingController, R as SessionReplayCaptureController, T as preloadModernScreenshot, U as enqueueIssueUploads, V as normalizeUploadMimeType, X as ISSUE_STICKER_INTERNAL_LOG_PREFIX, Y as MASKING_POLICY_PREFETCH_TIMEOUT_MS, Z as toSessionReplayMeta, _ as loadCaptureSelectors, $ as loadMaskingPolicyForSubmit, a0 as resolveEffectivePolicy, a1 as createMaskingPolicySource, a2 as loadTusClient, a3 as createIndexedDbPendingUploadStore, a4 as ATTACHMENT_UPLOAD_DB_NAME, a5 as VIDEO_UPLOAD_DB_NAME, a6 as createMediaUploadApi, a7 as createMemoryMaskingPolicyCache } from "./externalUserPayload-CdzgCq4t.js";
+import { M as MASKING_COPY, R as ReplayMaskingError } from "./three-FamoZZKK.js";
+import { r } from "./three-FamoZZKK.js";
 import "react/jsx-runtime";
 import "react";
 const WINDOW_MS = 6e4;
@@ -30,10 +31,11 @@ class AutoIssueRateLimit {
   }
 }
 class IssueStickerHeadlessError extends Error {
-  constructor(code, message, cause) {
+  constructor(code, message, cause, status) {
     super(message);
     this.code = code;
     this.cause = cause;
+    this.status = status;
     this.name = "IssueStickerHeadlessError";
   }
 }
@@ -98,7 +100,8 @@ class HeadlessTransport {
     const execute = (nextHeaders) => pristineFetch(`${getApiBaseUrl()}${endpoint}`, {
       method: options.method ?? "GET",
       headers: nextHeaders,
-      body: options.body === void 0 ? void 0 : JSON.stringify(options.body)
+      body: options.body === void 0 ? void 0 : JSON.stringify(options.body),
+      ...options.cache ? { cache: options.cache } : {}
     });
     let response = await execute(headers);
     if (!options.skipAuth && response.status === 401 && this.options.getAuthMode() === "member") {
@@ -114,10 +117,12 @@ class HeadlessTransport {
     }
     const json = await response.json().catch(() => null);
     if (!response.ok || !(json == null ? void 0 : json.success)) {
+      const unauthorizedCode = this.options.getAuthMode() === "member" ? "MEMBER_AUTH_REQUIRED" : "AUTH_FAILED";
       throw new IssueStickerHeadlessError(
-        response.status === 401 ? "MEMBER_AUTH_REQUIRED" : "NETWORK_ERROR",
+        response.status === 401 ? unauthorizedCode : "NETWORK_ERROR",
         extractErrorMessage(json == null ? void 0 : json.error, (json == null ? void 0 : json.message) || `요청 실패: ${response.status}`),
-        json
+        json,
+        response.status
       );
     }
     return json;
@@ -471,28 +476,34 @@ function buildHeadlessCaptureContext({
     sessionReplayPreview: null
   };
 }
+const NO_HEADLESS_SCREENSHOTS = {
+  screenshots: [],
+  maskingDropped: false
+};
 async function captureHeadlessScreenshots({
   target,
-  excludeSelectors
+  excludeSelectors,
+  maskSelectors
 }) {
   const targetIsDocumentRoot = target === document.body || target === document.documentElement;
-  const screenshots = await Promise.all([
-    captureWithModernScreenshot({
-      element: document.documentElement,
-      excludeSelectors,
-      width: window.innerWidth,
-      height: window.innerHeight
-    }).catch(() => void 0),
-    ...targetIsDocumentRoot ? [] : [
-      captureWithModernScreenshot({
-        element: target,
-        excludeSelectors
-      }).catch(() => void 0)
-    ]
-  ]);
-  return screenshots.filter(
-    (dataUrl) => typeof dataUrl === "string" && dataUrl.length > 0
-  );
+  const viewport = await captureViewportAndElementShots({
+    element: target,
+    excludeSelectors,
+    maskSelectors
+  });
+  let maskingDropped = Boolean(viewport.maskingDropped);
+  const elementShot = targetIsDocumentRoot || viewport.element ? viewport.element : await captureScreenshotWithMasks({
+    element: target,
+    excludeSelectors,
+    maskSelectors
+  }).catch((error) => {
+    maskingDropped || (maskingDropped = error instanceof MaskingCaptureError);
+    return void 0;
+  });
+  return {
+    screenshots: [viewport.full, elementShot].filter(isCapturedScreenshot),
+    maskingDropped
+  };
 }
 function normalizeCustomInputType(fieldType) {
   if (fieldType === "number") return "number";
@@ -954,20 +965,6 @@ class HeadlessPendingMedia {
     this.file = null;
   }
 }
-function createReplayFile(snapshot) {
-  return new File([snapshot.payload], "session-replay.gz", {
-    type: "application/gzip"
-  });
-}
-function createSessionReplayMeta(snapshot) {
-  return {
-    window_seconds: snapshot.windowSeconds,
-    event_count: snapshot.eventCount,
-    size_bytes: snapshot.sizeBytes,
-    rrweb_version: snapshot.rrwebVersion,
-    privacy_config_version: snapshot.privacyConfigVersion
-  };
-}
 function createInitialHeadlessSnapshot() {
   return {
     phase: "idle",
@@ -993,6 +990,8 @@ function createInitialHeadlessSnapshot() {
       enabled: true,
       error: null
     },
+    videoUploads: [],
+    attachmentUploads: [],
     formSchema: null,
     filterSchema: null,
     error: null
@@ -1104,7 +1103,8 @@ function buildIssueCreatePayload({
   uploads,
   logs,
   currentUrl,
-  userAgent
+  userAgent,
+  maskingPolicyVersion
 }) {
   var _a, _b, _c;
   const title = (_a = draft.title) == null ? void 0 : _a.trim();
@@ -1117,17 +1117,14 @@ function buildIssueCreatePayload({
     ...intent ? { intent } : {},
     position: draft.position,
     ...uploads.screenshotUploadIds.length > 0 ? { screenshot_upload_ids: uploads.screenshotUploadIds } : {},
-    ...uploads.videoUpload ? { video_upload_id: uploads.videoUpload.id } : {},
-    ...uploads.replayUpload ? {
-      session_replay_upload_id: uploads.replayUpload.uploadId,
-      session_replay_meta: uploads.replayUpload.meta
-    } : {},
-    ...uploads.socketUpload ? { socket_log_upload_id: uploads.socketUpload.uploadId } : {},
+    ...uploads.videoPending ? { video_pending: true } : {},
+    ...uploads.replayPending ? { session_replay_pending: true } : {},
     console_logs: logs.consoleLogs.length > 0 ? logs.consoleLogs : void 0,
     user_agent: userAgent,
     tenant_id: auth.tenantId,
     project_id: projectId,
     account_id: auth.accountId ?? void 0,
+    masking_policy_version: maskingPolicyVersion,
     ...buildExternalUserPayload(config.user)
   };
   const { networkLogs, stillOverBudget } = shrinkNetworkLogsToFit(
@@ -1142,8 +1139,67 @@ function buildIssueCreatePayload({
     stillOverBudget
   };
 }
+async function prepareHeadlessScreenAttachments(input) {
+  var _a, _b;
+  const { context } = input;
+  const includeScreenshots = input.draft.mediaMode === "screenshot" || Boolean((_a = context.rules) == null ? void 0 : _a.screen.exclude_video);
+  const screenshots = includeScreenshots ? input.screenshots : [];
+  const sessionReplay = input.draft.sessionReplayEnabled ? input.sessionReplay : null;
+  await (sessionReplay == null ? void 0 : sessionReplay.whenRestarted());
+  const memoSelectors = (sessionReplay == null ? void 0 : sessionReplay.getMaskMemoSelectors()) ?? null;
+  assertScreenRulesCovered(context.rules, [
+    ...screenshots.map((shot) => shot.masks.selectors),
+    ...memoSelectors ? [memoSelectors] : []
+  ]);
+  const replay = sessionReplay ? await sessionReplay.takeSnapshot(((_b = context.rules) == null ? void 0 : _b.screen.mask_selectors) ?? []).catch((error) => {
+    if (isMaskingFailure(error)) throw error;
+    return null;
+  }) : null;
+  const uploads = includeScreenshots ? await input.transport.uploadScreenshotPreviews(
+    await maskScreenshotsForSubmit(screenshots, context.rules)
+  ) : [];
+  return {
+    screenshotUploadIds: uploads.map((upload) => upload.id),
+    replay,
+    screenshotExcluded: includeScreenshots && input.screenshotsDroppedByMasking ? uploads.length > 0 ? "partial" : "all" : null
+  };
+}
+function toHeadlessMaskingError(error, options) {
+  var _a;
+  if (error instanceof MaskingScreenRulesChangedError) {
+    (_a = options.onScreenRulesChanged) == null ? void 0 : _a.call(options);
+    return new IssueStickerHeadlessError(
+      "MASKING_POLICY_CHANGED",
+      screenRulesChangedMessage({
+        screenshots: options.recapturesScreenshots,
+        replay: options.replayRecording
+      }),
+      error
+    );
+  }
+  if (error instanceof MaskingPolicyUnavailableError) {
+    return new IssueStickerHeadlessError(
+      "MASKING_POLICY_UNAVAILABLE",
+      MASKING_COPY.policyUnavailable,
+      error
+    );
+  }
+  if (error instanceof MaskingSelectorUnsupportedError) {
+    return new IssueStickerHeadlessError(
+      "MASKING_SELECTOR_UNSUPPORTED",
+      MASKING_COPY.selectorUnsupported,
+      error
+    );
+  }
+  if (error instanceof ReplayMaskingError) {
+    options.restartReplay();
+    return new IssueStickerHeadlessError("CAPTURE_FAILED", MASKING_COPY.replayMaskFailed, error);
+  }
+  return error;
+}
 async function submitHeadlessIssueDraft({
   draft,
+  target,
   pendingVideoFile,
   transport,
   issueRepository,
@@ -1154,41 +1210,104 @@ async function submitHeadlessIssueDraft({
   logs,
   currentUrl,
   userAgent,
-  uploadSessionReplaySnapshot,
-  getSocketConnections
+  screenshots,
+  screenshotsDroppedByMasking,
+  sessionReplay,
+  getSocketConnections,
+  maskingPolicy,
+  onScreenRulesChanged,
+  recapturesScreenshots
 }) {
-  const screenshotUploads = draft.mediaMode === "screenshot" ? await transport.uploadScreenshotPreviews(draft.screenshotPreviewUrls) : [];
-  const screenshotUploadIds = screenshotUploads.map((upload) => upload.id);
-  const videoUpload = draft.mediaMode === "video" && pendingVideoFile ? await transport.uploadSignedMedia(pendingVideoFile, "video") : null;
-  const replayUpload = draft.sessionReplayEnabled ? await uploadSessionReplaySnapshot() : null;
-  const socketSnapshot = await serializeSocketTranscript(getSocketConnections());
-  const socketUpload = socketSnapshot ? await uploadSocketTranscript(
-    {
-      post: (endpoint, body) => transport.request(endpoint, { method: "POST", body }),
-      directUpload: directUploadToSignedUrl
-    },
-    socketSnapshot
-  ) : null;
-  const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
-    draft,
-    auth,
-    config,
-    projectId,
-    uploads: { screenshotUploadIds, videoUpload, replayUpload, socketUpload },
-    logs,
-    currentUrl,
-    userAgent
-  });
-  if (stillOverBudget) {
-    throw new IssueStickerHeadlessError(
-      "PAYLOAD_TOO_LARGE",
-      "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
-    );
-  }
+  const hasVideo = draft.mediaMode === "video" && Boolean(pendingVideoFile);
+  const socketConnections = getSocketConnections();
   const integrations = await issueRepository.buildIntegrationsPayload(draft, formSchema);
-  const createdIssue = await issueRepository.createIssue({ ...issueData, integrations });
-  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema);
-  return createdIssue;
+  let result;
+  try {
+    result = await runMaskedSubmit({
+      source: maskingPolicy,
+      projectId,
+      prepareScreen: (context) => prepareHeadlessScreenAttachments({
+        context,
+        draft,
+        transport,
+        screenshots,
+        screenshotsDroppedByMasking,
+        sessionReplay
+      }),
+      submit: async (context, screen) => {
+        var _a, _b, _c;
+        const masked = applySubmitMasking({
+          snapshot: context.snapshot,
+          projectId,
+          networkLogs: logs.networkLogs,
+          consoleLogs: logs.consoleLogs,
+          socketConnections,
+          pageUrl: currentUrl
+        });
+        const videoExcluded = hasVideo && Boolean((_a = masked.rules) == null ? void 0 : _a.screen.exclude_video);
+        const replay = screen.replay;
+        const attachments = await collectAttachmentUploads({
+          takeReplay: replay ? async () => replay : void 0,
+          getConnections: () => masked.socketConnections
+        });
+        const maskSelectors = ((_b = context.rules) == null ? void 0 : _b.screen.mask_selectors) ?? [];
+        const position = {
+          ...draft.position,
+          ...maskPositionForSubmit(draft.position, target, maskSelectors)
+        };
+        const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
+          draft: {
+            ...draft,
+            position,
+            // 마스킹 정책 때문에 버린 스크린샷은 이슈에도 남긴다. 말없이 빼지 않는다.
+            ...screen.screenshotExcluded ? {
+              description: appendMaskingNotice(
+                draft.description,
+                screenshotExclusionNotice(screen.screenshotExcluded)
+              )
+            } : {}
+          },
+          auth,
+          config,
+          projectId,
+          uploads: {
+            screenshotUploadIds: screen.screenshotUploadIds,
+            videoPending: hasVideo && !videoExcluded,
+            replayPending: hasReplayUpload(attachments)
+          },
+          logs: { networkLogs: masked.networkLogs, consoleLogs: masked.consoleLogs },
+          currentUrl: masked.pageUrl,
+          userAgent,
+          maskingPolicyVersion: masked.version
+        });
+        if (stillOverBudget) {
+          throw new IssueStickerHeadlessError(
+            "PAYLOAD_TOO_LARGE",
+            "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
+          );
+        }
+        const issue = await issueRepository.createIssue({ ...issueData, integrations });
+        if (draft.sessionReplayEnabled && ((_c = sessionReplay.getMaskMemoSelectors()) == null ? void 0 : _c.length) === 0 && collectSnapshotSelectors(context.snapshot).length > 0) {
+          sessionReplay.restartRecording();
+        }
+        return {
+          issue,
+          attachments,
+          videoExcluded,
+          screenshotExcluded: screen.screenshotExcluded !== null
+        };
+      }
+    });
+  } catch (error) {
+    throw toHeadlessMaskingError(error, {
+      onScreenRulesChanged,
+      replayRecording: sessionReplay.isRecording(),
+      recapturesScreenshots,
+      restartReplay: () => sessionReplay.restartRecording()
+    });
+  }
+  await issueRepository.syncDynamicFields(result.issue, draft, formSchema);
+  return result;
 }
 const HEADLESS_CAPTURE_STYLE_ID = "issue-sticker-headless-capture-style";
 const HEADLESS_CAPTURE_STYLE = `
@@ -1280,6 +1399,28 @@ const DEFAULT_EXCLUDE_SELECTORS = [
   "#issue-sticker-host",
   '[data-issue-sticker-headless-auth="true"]'
 ];
+function toHeadlessVideoUpload(state) {
+  return {
+    issueId: state.issueId,
+    status: state.status,
+    progress: state.bytesTotal > 0 ? state.bytesSent / state.bytesTotal : 0
+  };
+}
+function toHeadlessAttachmentUpload(state) {
+  return {
+    issueId: state.issueId,
+    kind: state.mediaType === "socket" ? "socket" : "replay",
+    status: state.status,
+    progress: state.bytesTotal > 0 ? state.bytesSent / state.bytesTotal : 0
+  };
+}
+function withExclusions(issue, flags) {
+  return {
+    ...issue,
+    ...flags.videoExcluded ? { videoExcluded: true } : {},
+    ...flags.screenshotExcluded ? { screenshotExcluded: true } : {}
+  };
+}
 class HeadlessClientImpl {
   constructor(config) {
     var _a;
@@ -1290,7 +1431,14 @@ class HeadlessClientImpl {
     this.initializePromise = null;
     this.captureCleanup = null;
     this.captureSession = null;
+    this.livePolicySource = {
+      getMaskingPolicySnapshot: () => this.maskingPolicy.getMaskingPolicySnapshot(),
+      refreshMaskingPolicySnapshot: (options) => this.maskingPolicy.refreshMaskingPolicySnapshot(options)
+    };
+    this.maskingPolicyPrefetch = null;
+    this.maskingPolicyFetchedAt = null;
     this.suppressNextVideoStopSelection = false;
+    this.destroyed = false;
     if (!((_a = config.apiKey) == null ? void 0 : _a.trim())) {
       throw new IssueStickerHeadlessError("VALIDATION_ERROR", "apiKey가 필요합니다.");
     }
@@ -1298,12 +1446,13 @@ class HeadlessClientImpl {
       apiKey: config.apiKey,
       getTenantId: () => this.snapshot.auth.tenantId,
       getProjectId: () => this.snapshot.auth.projectId,
-      onToken: (result) => this.state.applyBridgeToken(result)
+      onToken: (result) => this.applyBridgeToken(result)
     });
     this.transport = new HeadlessTransport({
       getAuthMode: () => this.snapshot.auth.mode,
       resolveAuthorizationHeader: (forceRefreshMemberToken) => this.resolveAuthorizationHeader(forceRefreshMemberToken)
     });
+    this.maskingPolicy = this.createMaskingPolicy();
     this.issueRepository = new HeadlessIssueRepository({
       transport: this.transport,
       getProjectId: () => this.state.requireProjectId(),
@@ -1314,6 +1463,22 @@ class HeadlessClientImpl {
       },
       getCurrentUrl: () => getCurrentPageUrl() || void 0
     });
+    this.uploadQueues = createIssueUploadQueues({
+      api: createMediaUploadApi({
+        post: (endpoint, body) => this.transport.request(endpoint, { method: "POST", body })
+      }),
+      clientInfo: "issue-sticker-sdk",
+      videoStore: createIndexedDbPendingUploadStore(VIDEO_UPLOAD_DB_NAME),
+      attachmentStore: createIndexedDbPendingUploadStore(ATTACHMENT_UPLOAD_DB_NAME),
+      loadTus: loadTusClient,
+      onEvent: (event) => event.mediaType === "video" ? void this.handleVideoUploadEvent(event) : this.handleAttachmentUploadEvent(event)
+    });
+    this.uploadQueues.video.subscribe((states) => {
+      this.state.setSnapshot({ videoUploads: states.map(toHeadlessVideoUpload) });
+    });
+    this.uploadQueues.attachments.subscribe((states) => {
+      this.state.setSnapshot({ attachmentUploads: states.map(toHeadlessAttachmentUpload) });
+    });
     this.logCollectors = new HeadlessLogCollectors(this.config, getApiBaseUrl);
     this.screenRecordingController = new ScreenRecordingController({
       onStopped: (file) => {
@@ -1330,7 +1495,14 @@ class HeadlessClientImpl {
       });
     });
     this.sessionReplayController = new SessionReplayCaptureController({
-      loadCapabilities: () => this.request("/api/session-replays/capabilities")
+      loadCapabilities: () => this.request("/api/session-replays/capabilities"),
+      // 녹화는 초기화(initializeInternal)가 정책 요청을 띄운 뒤에 시작한다. 같은 요청을 기다린다.
+      maskingPolicy: {
+        source: this.livePolicySource,
+        pendingRefresh: () => this.maskingPolicyPrefetch,
+        refreshedWithin: (maxAgeMs) => this.maskingPolicyFetchedAt !== null && Date.now() - this.maskingPolicyFetchedAt <= maxAgeMs
+      },
+      reportInProgress: () => this.snapshot.draft !== null
     });
     this.sessionReplayController.subscribe((sessionReplay) => {
       this.applySessionReplaySnapshot(sessionReplay);
@@ -1366,7 +1538,7 @@ class HeadlessClientImpl {
     this.state.setSnapshot({ phase: "loadingIssues", error: null });
     try {
       const issues = await this.issueRepository.fetchAllIssueStickers(filters);
-      this.state.setSnapshot({ issues, phase: "idle" });
+      this.state.setSnapshot({ issues: this.keepKnownVideos(issues), phase: "idle" });
     } catch (error) {
       const nextError = this.toHeadlessError(error);
       this.state.setSnapshot({ phase: "idle", error: nextError });
@@ -1502,18 +1674,24 @@ class HeadlessClientImpl {
     this.state.setSnapshot({ phase: "submittingIssue", error: null });
     try {
       const session = this.captureSession;
-      const screenshotPreviewUrls = (session == null ? void 0 : session.screenshots) ? await session.screenshots : this.state.requireDraft().screenshotPreviewUrls;
+      const captured = (session == null ? void 0 : session.screenshots) ? await session.screenshots : NO_HEADLESS_SCREENSHOTS;
       const formSchema = this.snapshot.formSchema ?? ((session == null ? void 0 : session.formSchema) ? await session.formSchema : null);
       const submission = {
         ...this.state.requireDraft(),
-        screenshotPreviewUrls,
         title: input.title,
         description: input.description,
         intent: input.intent,
         dynamicFields: input.dynamicFields ?? {}
       };
-      const createdIssue = await submitHeadlessIssueDraft({
+      const videoFile = submission.mediaMode === "video" ? this.pendingMedia.videoFile : null;
+      const {
+        issue: createdIssue,
+        attachments,
+        videoExcluded,
+        screenshotExcluded
+      } = await submitHeadlessIssueDraft({
         draft: submission,
+        target: (session == null ? void 0 : session.target) ?? null,
         pendingVideoFile: this.pendingMedia.videoFile,
         transport: this.transport,
         issueRepository: this.issueRepository,
@@ -1524,8 +1702,27 @@ class HeadlessClientImpl {
         logs: this.logCollectors.collect(),
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
-        getSocketConnections: () => this.logCollectors.getSocketConnections()
+        screenshots: captured.screenshots,
+        screenshotsDroppedByMasking: captured.maskingDropped,
+        sessionReplay: this.submitReplay(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections(),
+        maskingPolicy: this.livePolicySource,
+        // 화면 규칙이 바뀌어 제출이 실패하면 불린다. 같은 대상을 다시 찍어 미리보기를 바꾸고
+        // 리플레이 녹화를 새로 시작한다. 재시작은 거절하지 않는다.
+        onScreenRulesChanged: () => {
+          this.recaptureScreenshots();
+          void this.sessionReplayController.restartRecording();
+        },
+        // 스크린샷 모드로 시작한 캡처만 다시 찍는다(recaptureScreenshots).
+        recapturesScreenshots: Boolean(session == null ? void 0 : session.screenshots)
+      });
+      await enqueueIssueUploads({
+        videoQueue: this.uploadQueues.video,
+        attachmentQueue: this.uploadQueues.attachments,
+        issueId: createdIssue.id,
+        projectKey: this.state.requireProjectId(),
+        video: videoFile && !videoExcluded ? { blob: videoFile, mimeType: normalizeUploadMimeType(videoFile.type, "video") } : null,
+        attachments
       });
       this.clearCaptureListeners();
       this.clearPendingMedia();
@@ -1536,26 +1733,44 @@ class HeadlessClientImpl {
         formSchema: null,
         issues: [createdIssue, ...this.snapshot.issues]
       });
-      return createdIssue;
+      return withExclusions(createdIssue, { videoExcluded, screenshotExcluded });
     } catch (error) {
       const nextError = this.toHeadlessError(error);
       this.state.setSnapshot({ phase: "draftingIssue", error: nextError });
       throw nextError;
     }
   }
+  retryVideoUpload(issueId) {
+    this.uploadQueues.retry(issueId);
+  }
   async createIssue(input) {
     var _a, _b;
+    const onError = input == null ? void 0 : input.onError;
+    let created = null;
     try {
-      if (!((_a = input.title) == null ? void 0 : _a.trim()) || !((_b = input.description) == null ? void 0 : _b.trim())) {
-        return this.skipCreateIssue("제목과 설명이 모두 필요합니다.");
+      if (!((_a = input == null ? void 0 : input.title) == null ? void 0 : _a.trim()) || !((_b = input.description) == null ? void 0 : _b.trim())) {
+        return this.skipCreateIssue(
+          new IssueStickerHeadlessError("VALIDATION_ERROR", "제목과 설명이 모두 필요합니다."),
+          onError
+        );
       }
       if (typeof document === "undefined" || typeof window === "undefined") {
-        return this.skipCreateIssue("브라우저 DOM 에서만 이슈를 만들 수 있습니다.");
+        return this.skipCreateIssue(
+          new IssueStickerHeadlessError(
+            "VALIDATION_ERROR",
+            "브라우저 DOM 에서만 이슈를 만들 수 있습니다."
+          ),
+          onError
+        );
       }
       await this.ensureInitialized();
       if (!this.autoIssueRateLimit.claim()) {
         return this.skipCreateIssue(
-          `${this.autoIssueRateLimit.label}까지 호출할 수 있습니다. 호출 조건을 다시 확인해주세요.`
+          new IssueStickerHeadlessError(
+            "RATE_LIMITED",
+            `${this.autoIssueRateLimit.label}까지 호출할 수 있습니다. 호출 조건을 다시 확인해주세요.`
+          ),
+          onError
         );
       }
       const target = input.target ?? document.body;
@@ -1565,18 +1780,21 @@ class HeadlessClientImpl {
         sessionReplayEnabled: Boolean(sessionReplay.enabled && sessionReplay.canAttach)
       });
       const logs = this.logCollectors.collect();
-      const screenshotPreviewUrls = input.media === "none" ? [] : await this.logCollectors.pauseNetworkWhile(
-        () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
-      );
+      const captured = input.media === "none" ? NO_HEADLESS_SCREENSHOTS : await this.captureScreenshots(target, await this.freshCaptureSelectors());
       const formSchema = this.snapshot.auth.mode === "member" && Object.keys(input.dynamicFields ?? {}).length > 0 ? await this.loadFormSchema({}) : null;
-      const createdIssue = await submitHeadlessIssueDraft({
+      const {
+        issue: createdIssue,
+        attachments,
+        screenshotExcluded
+      } = await submitHeadlessIssueDraft({
         draft: {
           ...draft,
-          screenshotPreviewUrls,
+          screenshotPreviewUrls: [],
           title: input.title,
           description: input.description,
           dynamicFields: input.dynamicFields ?? {}
         },
+        target,
         pendingVideoFile: null,
         transport: this.transport,
         issueRepository: this.issueRepository,
@@ -1587,28 +1805,72 @@ class HeadlessClientImpl {
         logs,
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
-        getSocketConnections: () => this.logCollectors.getSocketConnections()
+        screenshots: captured.screenshots,
+        screenshotsDroppedByMasking: captured.maskingDropped,
+        sessionReplay: this.submitReplay(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections(),
+        maskingPolicy: this.livePolicySource,
+        // 미리보기가 없어 다시 찍지 않는다. 다음 호출이 새 규칙을 덮도록 리플레이 녹화만 새로 시작한다.
+        onScreenRulesChanged: () => void this.sessionReplayController.restartRecording(),
+        recapturesScreenshots: false
+      });
+      created = withExclusions(createdIssue, { screenshotExcluded });
+      await enqueueIssueUploads({
+        videoQueue: this.uploadQueues.video,
+        attachmentQueue: this.uploadQueues.attachments,
+        issueId: createdIssue.id,
+        projectKey: this.state.requireProjectId(),
+        video: null,
+        attachments
       });
       this.state.setSnapshot({
         issues: [createdIssue, ...this.snapshot.issues]
       });
-      return createdIssue;
+      return created;
     } catch (error) {
-      return this.skipCreateIssue("이슈를 생성하지 못했습니다.", error);
+      if (created) {
+        console.warn(
+          ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+          "[headless] createIssue: 이슈를 생성한 뒤 후속 처리에 실패했습니다.",
+          error
+        );
+        return created;
+      }
+      const replay = this.submitReplay();
+      const mapped = toHeadlessMaskingError(error, {
+        onScreenRulesChanged: () => replay.restartRecording(),
+        replayRecording: replay.isRecording(),
+        recapturesScreenshots: false,
+        restartReplay: () => replay.restartRecording()
+      });
+      return this.skipCreateIssue(this.toHeadlessError(mapped), onError);
     }
   }
   /**
-   * createIssue 가 이슈를 만들지 않고 끝난 이유를 남긴다.
+   * createIssue 가 이슈를 만들지 않고 끝난 이유를 남기고 onError 로 넘긴다.
    *
    * devLogger 는 프로덕션 빌드에서 침묵하는데, 이 실패는 예외로 드러나지 않으므로
    * 통합한 쪽이 프로덕션에서도 알아야 한다. 접두어가 붙어 있어 우리 수집기가
    * 자기 로그로 걸러내므로 고객 이슈의 콘솔 로그를 오염시키지 않는다.
+   * onError 가 던져도 createIssue 는 던지지 않는다 — 전역 핸들러 안에서 부른 경우 루프가 된다.
    */
-  skipCreateIssue(reason, cause) {
-    const args = [ISSUE_STICKER_INTERNAL_LOG_PREFIX, "[headless] createIssue:", reason];
-    if (cause !== void 0) args.push(cause);
+  skipCreateIssue(error, onError) {
+    const args = [
+      ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+      "[headless] createIssue:",
+      error.message
+    ];
+    if (error.cause !== void 0) args.push(error.cause);
     console.warn(...args);
+    try {
+      onError == null ? void 0 : onError(error);
+    } catch (callbackError) {
+      console.warn(
+        ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+        "[headless] createIssue onError:",
+        callbackError
+      );
+    }
     return null;
   }
   async loginAsMember() {
@@ -1642,6 +1904,8 @@ class HeadlessClientImpl {
     void this.sessionReplayController.refresh();
   }
   destroy() {
+    this.destroyed = true;
+    this.uploadQueues.stop();
     this.clearCaptureListeners();
     this.suppressNextVideoStopSelection = true;
     this.captureSession = null;
@@ -1651,8 +1915,35 @@ class HeadlessClientImpl {
     this.logCollectors.stop();
     this.autoIssueRateLimit.reset();
     this.authBridge.destroy();
+    this.maskingPolicy = this.createMaskingPolicy();
+    this.maskingPolicyPrefetch = null;
+    this.maskingPolicyFetchedAt = null;
     this.state.reset();
   }
+  createMaskingPolicy() {
+    const inner = createMaskingPolicySource({
+      // 제출 직전 재확인이 브라우저 캐시의 옛 버전을 받으면 409 를 부른다.
+      fetchSnapshot: () => this.transport.request("/api/sdk/masking-policy", { cache: "no-store" }),
+      cache: createMemoryMaskingPolicyCache()
+    });
+    const source = {
+      getMaskingPolicySnapshot: () => inner.getMaskingPolicySnapshot(),
+      refreshMaskingPolicySnapshot: async (options) => {
+        const snapshot = await inner.refreshMaskingPolicySnapshot(options);
+        if (this.maskingPolicy === source) this.maskingPolicyFetchedAt = Date.now();
+        return snapshot;
+      }
+    };
+    return source;
+  }
+  /** 정책을 미리 받는다. 녹화 시작은 캐시가 없으면 이 요청을 기다린다. */
+  prefetchMaskingPolicy() {
+    const prefetch = this.maskingPolicy.refreshMaskingPolicySnapshot({
+      timeoutMs: MASKING_POLICY_PREFETCH_TIMEOUT_MS
+    });
+    prefetch.catch(() => void 0);
+    this.maskingPolicyPrefetch = prefetch;
+  }
   async initializeInternal() {
     this.state.setSnapshot({ phase: "initializing", error: null });
     try {
@@ -1675,6 +1966,12 @@ class HeadlessClientImpl {
         filterSchema: { groups: [], unavailableReason: "public-mode" }
       });
       this.logCollectors.start();
+      this.prefetchMaskingPolicy();
+      const { video, attachments } = this.uploadQueues;
+      void this.uploadQueues.resume([result.projectId]).then(() => {
+        void video.pruneExpired();
+        void attachments.pruneExpired();
+      });
       this.authBridge.mountHiddenBridgeFrame();
       void this.sessionReplayController.initialize();
     } catch (error) {
@@ -1687,28 +1984,97 @@ class HeadlessClientImpl {
     const sessionReplay = this.sessionReplayController.getSnapshot();
     if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
     try {
-      const snapshot = await this.sessionReplayController.takeSnapshot();
-      return snapshot ? createSessionReplayMeta(snapshot) : null;
+      const snapshot = await this.sessionReplayController.takeSnapshot([]);
+      return snapshot ? toSessionReplayMeta(snapshot) : null;
     } catch {
       return null;
     }
   }
-  async uploadSessionReplaySnapshot() {
-    const sessionReplay = this.sessionReplayController.getSnapshot();
-    if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
-    try {
-      const snapshot = await this.sessionReplayController.takeSnapshot();
-      if (!snapshot) return null;
-      if (snapshot.eventCount <= 0) return null;
-      const upload = await this.transport.uploadSignedMedia(createReplayFile(snapshot), "replay");
+  /**
+   * 제출이 사용하는 리플레이 녹화. 꺼졌거나 한도를 넘으면 메모와 스냅샷이 null 이다. 스냅샷의
+   * 마스킹 실패는 삼키지 않는다 — submitDraft 가 이슈 생성을 멈추고 CAPTURE_FAILED 로 바꾼다.
+   */
+  submitReplay() {
+    const controller = this.sessionReplayController;
+    const attached = () => {
+      const sessionReplay = controller.getSnapshot();
+      return sessionReplay.enabled && sessionReplay.canAttach;
+    };
+    return {
+      whenRestarted: () => controller.whenRestarted(),
+      getMaskMemoSelectors: () => attached() ? controller.getMaskMemoSelectors() : null,
+      takeSnapshot: async (maskSelectors) => attached() ? controller.takeSnapshot(maskSelectors) : null,
+      isRecording: () => controller.isRecording(),
+      restartRecording: () => void controller.restartRecording()
+    };
+  }
+  /**
+   * 다른 워크스페이스·프로젝트 컨텍스트로 바뀌면 정책을 새로 받고, 그 정책 선택자로 리플레이 녹화를
+   * 새로 시작한다.
+   */
+  applyBridgeToken(result) {
+    const { tenantId, projectId } = this.snapshot.auth;
+    this.state.applyBridgeToken(result);
+    const next = this.snapshot.auth;
+    if (tenantId !== null && (next.tenantId !== tenantId || next.projectId !== projectId)) {
+      this.maskingPolicy = this.createMaskingPolicy();
+      this.maskingPolicyFetchedAt = null;
+      this.prefetchMaskingPolicy();
+      void this.sessionReplayController.restartRecording();
+    }
+  }
+  /**
+   * 스티커 목록에는 영상 URL 도 업로드를 포기한 까닭도 없다. 업로드가 끝날 때 받아 둔 값을 같은
+   * 이슈에 남긴다. 까닭은 여전히 실패 상태일 때만 남긴다.
+   */
+  keepKnownVideos(issues) {
+    const known = new Map(this.snapshot.issues.map((issue) => [issue.id, issue]));
+    return issues.map((issue) => {
+      const previous = known.get(issue.id);
+      const video = !issue.video ? previous == null ? void 0 : previous.video : void 0;
+      const reason = issue.video_status === "failed" ? previous == null ? void 0 : previous.video_failure_reason : void 0;
+      if (!video && !reason) return issue;
       return {
-        uploadId: upload.id,
-        url: upload.url,
-        meta: createSessionReplayMeta(snapshot)
+        ...issue,
+        ...video ? { video } : {},
+        ...reason ? { video_failure_reason: reason } : {}
       };
-    } catch {
-      return null;
-    }
+    });
+  }
+  /**
+   * 업로드가 끝나면 목록·상세의 같은 이슈에 영상 상태를 반영한다. 완료는 재조회해 영상 URL 까지
+   * 채우고, 재조회가 안 되면(config.user 없는 게스트 등) 상태만 고친다.
+   */
+  async handleVideoUploadEvent(event) {
+    if (event.type === "failed" || this.destroyed) return;
+    const refreshed = event.type === "completed" ? await this.issueRepository.openIssue(event.issueId).catch(() => null) : null;
+    if (this.destroyed) return;
+    const videoStatus = event.type === "completed" ? "ready" : "failed";
+    const failure = event.reason ? { video_failure_reason: event.reason } : {};
+    const { issues, activeIssue } = this.snapshot;
+    this.state.setSnapshot({
+      issues: issues.map(
+        (issue) => issue.id === event.issueId ? {
+          ...issue,
+          video: (refreshed == null ? void 0 : refreshed.video) ?? issue.video,
+          video_status: videoStatus,
+          ...failure
+        } : issue
+      ),
+      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? refreshed ?? { ...activeIssue, video_status: videoStatus, ...failure } : activeIssue
+    });
+  }
+  /** 리플레이가 연결되거나 포기되면 목록·상세의 같은 이슈에 상태를 반영한다. 소켓 전사는 상태가 없다. */
+  handleAttachmentUploadEvent(event) {
+    if (event.mediaType !== "replay" || event.type === "failed" || this.destroyed) return;
+    const replayStatus = event.type === "completed" ? "ready" : "failed";
+    const { issues, activeIssue } = this.snapshot;
+    this.state.setSnapshot({
+      issues: issues.map(
+        (issue) => issue.id === event.issueId ? { ...issue, replay_status: replayStatus } : issue
+      ),
+      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? { ...activeIssue, replay_status: replayStatus } : activeIssue
+    });
   }
   async handleRecordedVideoStopped(file) {
     if (this.suppressNextVideoStopSelection) {
@@ -1778,15 +2144,16 @@ class HeadlessClientImpl {
     this.beginBackgroundCapturePreparation(draft, target);
   }
   beginBackgroundCapturePreparation(draft, target) {
-    var _a, _b;
+    var _a;
     const token = {};
     this.captureSession = {
       token,
+      target,
       screenshots: draft.mediaMode === "screenshot" ? (
-        // 스크린샷은 웹폰트·이미지를 fetch 로 인라인한다. 그 사이 수집을 멈추지 않으면
-        // 최근 50건이 그 요청들로 채워져 진짜 앱 요청이 밀려난다.
-        this.logCollectors.pauseNetworkWhile(
-          () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
+        // 영역은 초기화 때 받아 둔 정책 캐시의 선택자로 계산한다. 캐시가 없으면 빈 목록이고,
+        // 미리보기를 칠할 때 덮개 검사에 걸려 한 번 다시 찍는다.
+        loadCaptureSelectors(() => this.livePolicySource.getMaskingPolicySnapshot()).then(
+          (selectors) => this.captureScreenshots(target, selectors ?? [])
         )
       ) : null,
       formSchema: this.loadFormSchema({})
@@ -1795,11 +2162,10 @@ class HeadlessClientImpl {
       var _a2;
       return ((_a2 = this.captureSession) == null ? void 0 : _a2.token) === token;
     };
-    void ((_a = this.captureSession.screenshots) == null ? void 0 : _a.then((screenshotPreviewUrls) => {
-      if (!isCurrentSession()) return;
-      this.mergeDraft({ screenshotPreviewUrls });
-    }));
-    void ((_b = this.captureSession.formSchema) == null ? void 0 : _b.then((formSchema) => {
+    if (this.captureSession.screenshots) {
+      this.publishPreview(this.captureSession.screenshots, true);
+    }
+    void ((_a = this.captureSession.formSchema) == null ? void 0 : _a.then((formSchema) => {
       if (!isCurrentSession()) return;
       this.state.setSnapshot({ formSchema });
     }));
@@ -1812,6 +2178,64 @@ class HeadlessClientImpl {
       });
     }
   }
+  /**
+   * 화면 규칙이 바뀌어 지금 원본을 쓸 수 없다. 같은 대상을 다시 찍어 미리보기를 바꾼다.
+   *
+   * 선택자는 캐시가 아니라 제출과 같은 방식으로 다시 받아 읽는다. 받은 스냅샷의 캐시 쓰기는
+   * 기다리지 않고 떠나므로 캐시만 읽으면 바뀌기 전 선택자로 찍을 수 있다. 정책을 받지 못하면
+   * 스크린샷 없이 두고, 마스킹 정책 때문에 버렸다고 표시해 제출 때 알린다.
+   */
+  recaptureScreenshots(autoRecapture = true) {
+    const session = this.captureSession;
+    if (!(session == null ? void 0 : session.screenshots)) return;
+    const screenshots = this.freshCaptureSelectors().then(
+      (selectors) => this.captureScreenshots(session.target, selectors),
+      () => ({ screenshots: [], maskingDropped: true })
+    );
+    this.captureSession = { ...session, screenshots };
+    this.mergeDraft({ screenshotPreviewUrls: [] });
+    this.publishPreview(screenshots, autoRecapture);
+  }
+  /**
+   * 원본이 준비되면 칠한 미리보기를 draft 에 싣는다. 칠하지 못하면 원본을 내보내지 않고 비워 둔다.
+   *
+   * 덮개 검사에 걸리면(캐시 없이 빈 선택자로 찍었거나 그 사이 정책이 바뀌었다) 그대로 두면 첫 제출이
+   * 반드시 실패하므로 같은 대상을 한 번 다시 찍는다. 다시 찍은 캡처는 또 다시 찍지 않는다.
+   */
+  publishPreview(screenshots, autoRecapture) {
+    const isCurrent = () => {
+      var _a;
+      return ((_a = this.captureSession) == null ? void 0 : _a.screenshots) === screenshots;
+    };
+    void screenshots.then((captured) => this.previewScreenshots(captured.screenshots)).then(
+      (screenshotPreviewUrls) => {
+        if (isCurrent()) this.mergeDraft({ screenshotPreviewUrls });
+      },
+      (error) => {
+        if (isCurrent() && autoRecapture && error instanceof MaskingScreenRulesChangedError) {
+          this.recaptureScreenshots(false);
+        }
+      }
+    );
+  }
+  /** 제출과 같은 방식(짧게 다시 받고 실패하면 캐시)으로 읽은 정책 선택자. 둘 다 없으면 실패한다. */
+  async freshCaptureSelectors() {
+    return collectSnapshotSelectors(await loadMaskingPolicyForSubmit(this.livePolicySource));
+  }
+  captureScreenshots(target, maskSelectors) {
+    return this.logCollectors.pauseNetworkWhile(
+      () => captureHeadlessScreenshots({
+        target,
+        excludeSelectors: this.getExcludeSelectors(),
+        maskSelectors
+      })
+    );
+  }
+  async previewScreenshots(shots) {
+    const snapshot = await loadMaskingPolicyForSubmit(this.livePolicySource);
+    const rules = resolveEffectivePolicy(snapshot, this.state.requireProjectId());
+    return maskScreenshotsForSubmit(shots, rules);
+  }
   mergeDraft(patch) {
     const draft = this.snapshot.draft;
     if (!draft) return;