issue-sticker 0.3.1 → 0.4.0

package/dist/issue-sticker-headless-react.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useCallback, useEffect } from "react";
-import { c as createLucideIcon, u as ungzip_1, a as cn, R as Replayer } from "./createLucideIcon-CmSNiW63.js";
-import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-DciWyUWs.js";
+import { c as createLucideIcon, u as ungzip_1, a as cn, R as Replayer } from "./createLucideIcon-C0Ldhp96.js";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-CEc_RGfI.js";
 /**
  * @license lucide-react v0.468.0 - ISC
  *
@@ -72,8 +72,107 @@ async function loadReplayEvents(url) {
   }
   return parsed;
 }
+const TYPE_LABEL = {
+  click: "클릭",
+  input: "입력",
+  nav: "이동"
+};
+const NODE_TYPE_ELEMENT = 2;
+const NODE_TYPE_TEXT = 3;
+class NodeIndex {
+  constructor() {
+    this.nodes = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 색인을 비우고 주어진 트리로 다시 채운다.
+   *
+   * FullSnapshot 마다 호출한다. rrweb 은 문서마다 `record()` 를 새로 돌리며 nodeId 를
+   * 1부터 다시 매기므로, 문서가 바뀌면 앞 문서의 색인이 남아 있으면 안 된다 — 남으면
+   * 같은 id 의 엉뚱한 요소 이름이 조용히 붙는다.
+   */
+  reset(root) {
+    this.nodes = /* @__PURE__ */ new Map();
+    if (root) this.add(root);
+  }
+  /** 노드와 그 하위 트리를 색인에 넣는다. `parentId` 를 주면 부모의 자식으로도 잇는다. */
+  add(node, parentId) {
+    var _a;
+    if (!node || typeof node.id !== "number") return;
+    this.nodes.set(node.id, { node, childIds: [] });
+    if (parentId !== void 0) {
+      (_a = this.nodes.get(parentId)) == null ? void 0 : _a.childIds.push(node.id);
+    }
+    for (const child of node.childNodes ?? []) {
+      this.add(child, node.id);
+    }
+  }
+  get(id) {
+    var _a;
+    return (_a = this.nodes.get(id)) == null ? void 0 : _a.node;
+  }
+  /** 직접 자식 노드들. 트리 안의 childNodes 와 mutation 으로 붙은 것을 함께 본다. */
+  childrenOf(id) {
+    const entry = this.nodes.get(id);
+    if (!entry) return [];
+    const fromTree = entry.node.childNodes ?? [];
+    const fromMutation = entry.childIds.map((childId) => {
+      var _a;
+      return (_a = this.nodes.get(childId)) == null ? void 0 : _a.node;
+    }).filter((n) => n !== void 0 && !fromTree.includes(n));
+    return [...fromTree, ...fromMutation];
+  }
+  /** 하위 텍스트를 모두 이어 붙인다. button·a 같은 리프 레이블용. */
+  deepText(id, depth = 0) {
+    if (depth > 10) return "";
+    const node = this.get(id);
+    if (!node) return "";
+    if (node.type === NODE_TYPE_TEXT) return node.textContent ?? "";
+    return this.childrenOf(id).map(
+      (child) => child.type === NODE_TYPE_TEXT ? child.textContent ?? "" : typeof child.id === "number" ? this.deepText(child.id, depth + 1) : ""
+    ).join("");
+  }
+  /**
+   * 상호작용 대상을 사람이 읽을 짧은 레이블로 바꾼다. 우선순위는 다음과 같다.
+   *  1. aria-label / title
+   *  2. form 컨트롤: placeholder → name → type (예: input[email])
+   *  3. 직접 자식 Text 노드만 결합 (컨테이너가 자손 텍스트를 통째로 빨아들이는 것 방지)
+   *  4. button / a: 하위 텍스트 전체 (리프 레이블이라 짧다)
+   *  5. 압축 셀렉터: tag.firstClass 또는 <tag>
+   *
+   * 40자로 자른다. 색인에 없으면 `TYPE_LABEL[type]` 폴백.
+   */
+  describe(id, type) {
+    const node = id === void 0 ? void 0 : this.get(id);
+    if (!node || node.type !== NODE_TYPE_ELEMENT || id === void 0) return TYPE_LABEL[type];
+    const attrs = node.attributes ?? {};
+    const attr = (name) => {
+      const value = attrs[name];
+      return typeof value === "string" ? value : "";
+    };
+    const ariaLabel = (attr("aria-label") || attr("title")).trim();
+    if (ariaLabel) return ariaLabel.slice(0, 40);
+    const tag = (node.tagName ?? "").toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select") {
+      const placeholder = tag === "select" ? "" : attr("placeholder");
+      const name = attr("name");
+      const inputType = tag === "input" ? attr("type") : "";
+      const label = placeholder || name || (inputType ? `${tag}[${inputType}]` : tag);
+      return label.trim().slice(0, 40);
+    }
+    const directText = this.childrenOf(id).filter((child) => child.type === NODE_TYPE_TEXT).map((child) => child.textContent ?? "").join("").trim().replace(/\s+/g, " ");
+    if (directText) return directText.slice(0, 40);
+    if (tag === "button" || tag === "a") {
+      const deep = this.deepText(id).trim().replace(/\s+/g, " ");
+      if (deep) return deep.slice(0, 40);
+    }
+    const firstClass = attr("class").trim().split(/\s+/)[0];
+    return (firstClass ? `${tag}.${firstClass}` : `<${tag}>`).slice(0, 40);
+  }
+}
+const EVENT_TYPE_FULL_SNAPSHOT = 2;
 const EVENT_TYPE_INCREMENTAL = 3;
 const EVENT_TYPE_META = 4;
+const SOURCE_MUTATION$1 = 0;
 const SOURCE_MOUSE_INTERACTION = 2;
 const SOURCE_INPUT = 5;
 const MOUSE_CLICK = 2;
@@ -85,6 +184,7 @@ function deriveTimeline(events) {
   let recordedHeight = 0;
   let seenFirstMeta = false;
   const out = [];
+  const index = new NodeIndex();
   for (const ev of list) {
     const ts = Number((ev == null ? void 0 : ev.timestamp) ?? 0);
     const t = ts - startTime;
@@ -96,15 +196,26 @@ function deriveTimeline(events) {
         recordedHeight = Number(data.height ?? 0);
         continue;
       }
-      out.push({ t, type: "nav", href: String(data.href ?? "") });
+      const href = String(data.href ?? "");
+      out.push({ t, type: "nav", href, label: href || TYPE_LABEL.nav });
+      continue;
+    }
+    if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_FULL_SNAPSHOT) {
+      index.reset(data.node);
       continue;
     }
     if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_INCREMENTAL) {
       const source = Number(data.source);
-      if (source === SOURCE_MOUSE_INTERACTION && Number(data.type) === MOUSE_CLICK) {
-        out.push({ t, type: "click", nodeId: Number(data.id) });
+      if (source === SOURCE_MUTATION$1) {
+        for (const add of data.adds ?? []) {
+          index.add(add == null ? void 0 : add.node, add == null ? void 0 : add.parentId);
+        }
+      } else if (source === SOURCE_MOUSE_INTERACTION && Number(data.type) === MOUSE_CLICK) {
+        const nodeId = Number(data.id);
+        out.push({ t, type: "click", nodeId, label: index.describe(nodeId, "click") });
       } else if (source === SOURCE_INPUT) {
-        out.push({ t, type: "input", nodeId: Number(data.id) });
+        const nodeId = Number(data.id);
+        out.push({ t, type: "input", nodeId, label: index.describe(nodeId, "input") });
       }
     }
   }
@@ -265,38 +376,6 @@ function stripWidgetEvents(events) {
   }
   return { events: out, stripped: widgetIds.size > 0, removedEvents };
 }
-const TYPE_LABEL = {
-  click: "클릭",
-  input: "입력",
-  nav: "이동"
-};
-function describeNode(el, type) {
-  if (!el) return TYPE_LABEL[type];
-  const ariaLabel = (el.getAttribute("aria-label") ?? el.getAttribute("title") ?? "").trim();
-  if (ariaLabel) return ariaLabel.slice(0, 40);
-  const tag = el.tagName.toLowerCase();
-  if (tag === "input" || tag === "textarea" || tag === "select") {
-    const placeholder = tag !== "select" ? el.placeholder ?? "" : "";
-    const name = el.name ?? "";
-    const inputType = tag === "input" ? el.type ?? "" : "";
-    const label = placeholder || name || (inputType ? `${tag}[${inputType}]` : tag);
-    return label.trim().slice(0, 40);
-  }
-  let directText = "";
-  for (const child of Array.from(el.childNodes)) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      directText += child.textContent ?? "";
-    }
-  }
-  directText = directText.trim().replace(/\s+/g, " ");
-  if (directText) return directText.slice(0, 40);
-  if (tag === "button" || tag === "a") {
-    const text = (el.textContent ?? "").trim().replace(/\s+/g, " ");
-    if (text) return text.slice(0, 40);
-  }
-  const firstClass = el.classList.item(0);
-  return (firstClass ? `${tag}.${firstClass}` : `<${tag}>`).slice(0, 40);
-}
 const MOUSE_TAIL_CONFIG = {
   lineCap: "round",
   lineWidth: 3,
@@ -315,36 +394,14 @@ function formatTime(ms) {
   const s = total % 60;
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
-function describeEvent(mirror, ev) {
-  if (ev.type === "nav") return ev.href || TYPE_LABEL.nav;
-  const node = ev.nodeId != null && mirror ? mirror.getNode(ev.nodeId) : null;
-  return describeNode(node, ev.type);
-}
-function resolveLabel(mirror, row, cache) {
-  if (row.type === "nav") return row.href || TYPE_LABEL.nav;
-  if (row.nodeId == null) return TYPE_LABEL[row.type];
-  const cached = cache.get(row.nodeId);
-  if (cached !== void 0) return cached;
-  const label = describeEvent(mirror, row);
-  if (label !== TYPE_LABEL[row.type]) cache.set(row.nodeId, label);
-  return label;
-}
 const EventLog = memo(function EventLog2({
   rows,
   currentIndex,
   filter,
   onFilterChange,
   onSeek,
-  total,
-  mirror
+  total
 }) {
-  const labelCacheRef = useRef(/* @__PURE__ */ new Map());
-  const prevRowsRef = useRef(rows);
-  if (prevRowsRef.current !== rows) {
-    prevRowsRef.current = rows;
-    labelCacheRef.current = /* @__PURE__ */ new Map();
-  }
-  const labelCache = labelCacheRef.current;
   const filtered = filter === "all" ? rows : rows.filter((r) => r.type === filter);
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col rounded-md border border-line-subtle bg-surface-1", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-line-subtle px-3 py-2.5", children: [
@@ -381,7 +438,7 @@ const EventLog = memo(function EventLog2({
           children: [
             /* @__PURE__ */ jsx("span", { className: "w-9 shrink-0 tabular-nums text-text-tertiary", children: formatTime(row.t) }),
             /* @__PURE__ */ jsx("span", { className: cn("h-2 w-2 shrink-0 rounded-sm", TYPE_DOT[row.type]) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-secondary", children: resolveLabel(mirror, row, labelCache) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-secondary", children: row.label }),
             /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-tertiary", children: TYPE_LABEL[row.type] })
           ]
         },
@@ -400,7 +457,6 @@ function SessionReplayPlayer({ url }) {
   const durationRef = useRef(0);
   const isPlayingRef = useRef(false);
   const showTrailRef = useRef(INITIAL_SHOW_TRAIL);
-  const mirrorRef = useRef(null);
   const [state, setState] = useState("loading");
   const [isPlaying, setIsPlaying] = useState(false);
   const [showTrail, setShowTrail] = useState(INITIAL_SHOW_TRAIL);
@@ -438,7 +494,6 @@ function SessionReplayPlayer({ url }) {
     applyIsPlaying(false);
     setShowTrail(INITIAL_SHOW_TRAIL);
     showTrailRef.current = INITIAL_SHOW_TRAIL;
-    mirrorRef.current = null;
     setCurrentMs(0);
     startedRef.current = false;
     (async () => {
@@ -463,6 +518,7 @@ function SessionReplayPlayer({ url }) {
         }
         (_a = stageRef.current) == null ? void 0 : _a.remove();
         const stage = document.createElement("div");
+        stage.style.pointerEvents = "none";
         if (derived.recordedWidth > 0) {
           const recW = derived.recordedWidth;
           const recH = derived.recordedHeight || derived.recordedWidth;
@@ -494,15 +550,13 @@ function SessionReplayPlayer({ url }) {
           stopRaf();
         });
         replayerRef.current = replayer;
-        mirrorRef.current = replayer.getMirror();
         setTimeline(derived.events);
         const totalTime = replayer.getMetaData().totalTime;
         applyDuration(totalTime);
         const rows = derived.events.map((ev, i) => ({
           t: ev.t,
           type: ev.type,
-          nodeId: ev.nodeId,
-          href: ev.href,
+          label: ev.label,
           index: i
         }));
         setLogRows(rows);
@@ -596,10 +650,10 @@ function SessionReplayPlayer({ url }) {
   );
   const currentIndex = logRows.reduce((acc, row) => row.t <= currentMs ? row.index : acc, -1);
   if (state === "error") {
-    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이를 불러오지 못했어요." });
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이를 불러오지 못했습니다." });
   }
   if (state === "empty") {
-    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "재생할 리플레이 데이터가 없어요." });
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "재생할 리플레이 데이터가 없습니다." });
   }
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(
     "div",
@@ -620,7 +674,11 @@ function SessionReplayPlayer({ url }) {
             {
               ref: hostRef,
               "data-testid": "session-replay-host",
-              className: "overflow-hidden rounded-t-md border border-line-subtle bg-surface-2",
+              onClick: state === "ready" ? togglePlay : void 0,
+              className: cn(
+                "overflow-hidden rounded-t-md border border-line-subtle bg-surface-2",
+                state === "ready" && "cursor-pointer"
+              ),
               style: { position: "relative", maxHeight: "80vh" }
             }
           ),
@@ -708,8 +766,7 @@ function SessionReplayPlayer({ url }) {
             filter,
             onFilterChange: setFilter,
             onSeek: seek,
-            total: timeline.length,
-            mirror: mirrorRef.current
+            total: timeline.length
           }
         ) }) }) : null
       ]

package/dist/issue-sticker-headless.js

@@ -1,7 +1,7 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, n as normalizeExposedJiraFields, b as normalizeJiraFieldId, g as getElementPosition, c as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, s as syncExternalIssueIntegrations, i as devLogger, C as ConsoleCollector, N as NetworkCollector, j as filterExcludeServiceRelatedLogs, k as filterExcludeServiceRelatedConsoleLogs, l as compactNetworkLogsForTransport, m as sanitizeString, o as buildExternalUserPayload, S as ScreenRecordingController, p as SessionReplayCaptureController, q as preloadModernScreenshot } from "./externalUserPayload-hJjuUx6q.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, n as normalizeExposedJiraFields, b as normalizeJiraFieldId, g as getElementPosition, c as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, i as buildIssueIntegrationsPayload, j as devLogger, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, o as CONSOLE_LOG_SUBMIT_LIMIT, q as buildExternalUserPayload, r as shrinkNetworkLogsToFit, t as measureJsonBytes, v as sanitizeString, w as getCurrentPageUrl, S as ScreenRecordingController, x as SessionReplayCaptureController, y as preloadModernScreenshot, z as isIssueStickerExtensionRuntimeActive } from "./externalUserPayload-BVNl_35M.js";
 import "react/jsx-runtime";
 import "react";
-import "./createLucideIcon-CmSNiW63.js";
+import "./createLucideIcon-C0Ldhp96.js";
 class IssueStickerHeadlessError extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -68,7 +68,7 @@ class HeadlessTransport {
       const authHeader = await this.options.resolveAuthorizationHeader();
       if (authHeader) headers.Authorization = authHeader;
     }
-    const execute = (nextHeaders) => fetch(`${getApiBaseUrl()}${endpoint}`, {
+    const execute = (nextHeaders) => pristineFetch(`${getApiBaseUrl()}${endpoint}`, {
       method: options.method ?? "GET",
       headers: nextHeaders,
       body: options.body === void 0 ? void 0 : JSON.stringify(options.body)
@@ -827,9 +827,7 @@ class HeadlessIssueRepository {
       this.options.getAuthMode(),
       this.options.getDefaultExternalUserId()
     );
-    return this.request(
-      `/api/sdk/issues/${encodeURIComponent(issueId)}${ownerQuery}`
-    );
+    return this.request(`/api/sdk/issues/${encodeURIComponent(issueId)}${ownerQuery}`);
   }
   createIssue(issueData) {
     return this.request("/api/sdk/issues", {
@@ -865,73 +863,60 @@ class HeadlessIssueRepository {
     return Array.isArray(fields) ? fields : [];
   }
   /**
-   * 이슈 저장 이후의 외부 연동(Jira/Notion/커스텀 필드)을 이어서 실행한다.
+   * Jira/Notion 외부 이슈 생성 페이로드를 만든다. 서버가 이슈 생성과 같은 요청
+   * 안에서 외부 연동을 수행하므로, 생성 요청(createIssue)에 실어 보낸다.
+   *
+   * 판정 규칙은 기존과 동일 — getActiveIntegration() 이 돌려주는 활성 연동의
+   * service_type 기준(jira 는 `active?.service_type === 'JIRA'`, notion 은
+   * `active?.service_type === 'NOTION'`). 담을 게 없으면 undefined 를 돌려줘
+   * 호출자가 `integrations` 키 자체를 빼게 한다.
+   */
+  async buildIntegrationsPayload(draft, schema) {
+    if (this.options.getAuthMode() !== "member") {
+      return void 0;
+    }
+    const active = await this.getActiveIntegration().catch(() => null);
+    const fields = (schema == null ? void 0 : schema.fields) ?? [];
+    return buildIssueIntegrationsPayload({
+      jiraEnabled: (active == null ? void 0 : active.service_type) === "JIRA",
+      jiraFields: getFilledDynamicValues(draft, fields, "jira"),
+      notionEnabled: (active == null ? void 0 : active.service_type) === "NOTION",
+      notionProperties: getFilledDynamicValues(draft, fields, "notion")
+    });
+  }
+  /**
+   * 이슈 저장 이후 커스텀 필드 값을 반영한다. Jira/Notion 외부 이슈 생성은
+   * buildIntegrationsPayload 를 통해 생성 요청 안에서 서버가 수행하므로 여기서는
+   * 다루지 않는다.
    *
    * 실패는 이슈 저장을 되돌리지 않으므로 throw 하지 않고 결과로 돌려준다. headless 는
    * UI 가 없어 toast 를 띄울 수 없으니, 통합하는 쪽이 이 값을 보고 판단해야 한다.
    */
-  async syncDynamicFields(createdIssue, draft, schema, context) {
+  async syncDynamicFields(createdIssue, draft, schema) {
     if (this.options.getAuthMode() !== "member") {
       return { failedServices: [] };
     }
-    const active = await this.getActiveIntegration().catch(() => null);
     const fields = (schema == null ? void 0 : schema.fields) ?? [];
-    const jiraValues = getFilledDynamicValues(draft, fields, "jira");
-    const notionValues = getFilledDynamicValues(draft, fields, "notion");
     const customValues = getFilledDynamicValues(draft, fields, "custom");
-    return syncExternalIssueIntegrations({
-      issueId: createdIssue.id,
-      title: draft.title.trim(),
-      description: draft.description.trim(),
-      url: this.options.getCurrentUrl() ?? "",
-      screenshotUrl: context.screenshotUrl,
-      videoUrl: context.videoUrl,
-      jira: {
-        enabled: (active == null ? void 0 : active.service_type) === "JIRA",
-        fields: jiraValues,
-        createIssue: (input) => this.request("/api/jira/issues", {
-          method: "POST",
-          body: {
-            projectId: this.options.getProjectId(),
-            issueId: input.issueId,
-            issueData: {
-              title: input.title,
-              description: input.description,
-              url: input.url,
-              screenshotUrl: input.screenshotUrl,
-              videoUrl: input.videoUrl,
-              fields: input.fields
+    let hasCustomFieldFailure = false;
+    await Promise.all(
+      Object.entries(customValues).map(
+        ([fieldDefinitionId, value]) => this.request(
+          `/api/sdk/custom-field-values/issues/${encodeURIComponent(createdIssue.id)}/values`,
+          {
+            method: "PUT",
+            body: {
+              field_definition_id: fieldDefinitionId,
+              value
             }
           }
+        ).catch((error) => {
+          hasCustomFieldFailure = true;
+          devLogger.error("headless", `custom-field 연동 실패 (이슈 저장은 성공):`, error);
         })
-      },
-      notion: {
-        enabled: (active == null ? void 0 : active.service_type) === "NOTION",
-        properties: notionValues,
-        createPage: (input) => this.request("/api/notion/pages", {
-          method: "POST",
-          body: {
-            projectId: this.options.getProjectId(),
-            issueId: input.issueId,
-            properties: input.properties
-          }
-        })
-      },
-      customFieldValues: customValues,
-      upsertCustomFieldValue: (fieldDefinitionId, value) => this.request(
-        `/api/sdk/custom-field-values/issues/${encodeURIComponent(createdIssue.id)}/values`,
-        {
-          method: "PUT",
-          body: {
-            field_definition_id: fieldDefinitionId,
-            value
-          }
-        }
-      ),
-      onError: (service, error) => {
-        devLogger.error("headless", `${service} 연동 실패 (이슈 저장은 성공):`, error);
-      }
-    });
+      )
+    );
+    return { failedServices: hasCustomFieldFailure ? ["custom-field"] : [] };
   }
   async fetchAllIssueStickers(filters) {
     var _a, _b, _c;
@@ -1043,14 +1028,24 @@ class HeadlessLogCollectors {
     this.networkCollector = null;
     this.consoleCollector = null;
   }
+  /**
+   * 스크린샷 캡처처럼 **우리가 서드파티 요청을 일으키는** 구간을 감싼다.
+   *
+   * 감싸지 않으면 스크린샷 라이브러리가 인라인하려고 끌어오는 웹폰트·이미지가 최근 50건을
+   * 통째로 채워, 정작 필요한 앱 요청이 링버퍼 밖으로 밀려난다.
+   */
+  async pauseNetworkWhile(task) {
+    const collector = this.networkCollector;
+    return (collector == null ? void 0 : collector.pauseWhile) ? collector.pauseWhile(task) : task();
+  }
   collect() {
     var _a, _b;
-    const networkLogs = filterExcludeServiceRelatedLogs(
-      ((_a = this.networkCollector) == null ? void 0 : _a.getFilteredLogs()) ?? []
-    ).slice(-50);
+    const networkLogs = selectNetworkLogsForSubmit(
+      filterExcludeServiceRelatedLogs(((_a = this.networkCollector) == null ? void 0 : _a.getFilteredLogs()) ?? [])
+    );
     const consoleLogs = filterExcludeServiceRelatedConsoleLogs(
       ((_b = this.consoleCollector) == null ? void 0 : _b.getFilteredLogs()) ?? []
-    ).slice(-50);
+    ).slice(-CONSOLE_LOG_SUBMIT_LIMIT);
     return {
       networkLogs: compactNetworkLogsForTransport(networkLogs) ?? [],
       consoleLogs
@@ -1106,6 +1101,7 @@ function createSessionReplayMeta(snapshot) {
 }
 function createInitialHeadlessSnapshot() {
   return {
+    extensionActive: false,
     phase: "idle",
     auth: {
       mode: "public",
@@ -1242,7 +1238,7 @@ function buildIssueCreatePayload({
   currentUrl,
   userAgent
 }) {
-  return sanitizeString({
+  const base = {
     url: currentUrl,
     title: draft.title.trim(),
     description: draft.description.trim(),
@@ -1253,14 +1249,24 @@ function buildIssueCreatePayload({
       session_replay_upload_id: uploads.replayUpload.uploadId,
       session_replay_meta: uploads.replayUpload.meta
     } : {},
-    network_logs: logs.networkLogs.length > 0 ? logs.networkLogs : void 0,
     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,
     ...buildExternalUserPayload(config.user)
-  });
+  };
+  const { networkLogs, stillOverBudget } = shrinkNetworkLogsToFit(
+    logs.networkLogs,
+    measureJsonBytes(base)
+  );
+  return {
+    payload: sanitizeString({
+      ...base,
+      network_logs: networkLogs.length > 0 ? networkLogs : void 0
+    }),
+    stillOverBudget
+  };
 }
 async function submitHeadlessIssueDraft({
   draft,
@@ -1276,12 +1282,11 @@ async function submitHeadlessIssueDraft({
   userAgent,
   uploadSessionReplaySnapshot
 }) {
-  var _a;
   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 issueData = buildIssueCreatePayload({
+  const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
     draft,
     auth,
     config,
@@ -1291,11 +1296,15 @@ async function submitHeadlessIssueDraft({
     currentUrl,
     userAgent
   });
-  const createdIssue = await issueRepository.createIssue(issueData);
-  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema, {
-    screenshotUrl: (_a = screenshotUploads[0]) == null ? void 0 : _a.url,
-    videoUrl: videoUpload == null ? void 0 : videoUpload.url
-  });
+  if (stillOverBudget) {
+    throw new IssueStickerHeadlessError(
+      "PAYLOAD_TOO_LARGE",
+      "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
+    );
+  }
+  const integrations = await issueRepository.buildIntegrationsPayload(draft, formSchema);
+  const createdIssue = await issueRepository.createIssue({ ...issueData, integrations });
+  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema);
   return createdIssue;
 }
 const HEADLESS_CAPTURE_STYLE_ID = "issue-sticker-headless-capture-style";
@@ -1419,7 +1428,7 @@ class HeadlessClientImpl {
         var _a2;
         return (_a2 = this.config.user) == null ? void 0 : _a2.id;
       },
-      getCurrentUrl: () => typeof window !== "undefined" ? window.location.href : void 0
+      getCurrentUrl: () => getCurrentPageUrl() || void 0
     });
     this.logCollectors = new HeadlessLogCollectors(this.config, getApiBaseUrl);
     this.screenRecordingController = new ScreenRecordingController({
@@ -1627,7 +1636,7 @@ class HeadlessClientImpl {
         config: this.config,
         projectId: this.state.requireProjectId(),
         logs: this.logCollectors.collect(),
-        currentUrl: typeof window !== "undefined" ? window.location.href : "",
+        currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
         uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot()
       });
@@ -1689,6 +1698,10 @@ class HeadlessClientImpl {
     this.state.reset();
   }
   async initializeInternal() {
+    if (isIssueStickerExtensionRuntimeActive()) {
+      this.state.setSnapshot({ extensionActive: true, phase: "idle", error: null });
+      return;
+    }
     this.state.setSnapshot({ phase: "initializing", error: null });
     try {
       const result = await this.request("/api/sdk/auth/public-init", {
@@ -1817,7 +1830,13 @@ class HeadlessClientImpl {
     const token = {};
     this.captureSession = {
       token,
-      screenshots: draft.mediaMode === "screenshot" ? captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() }) : null,
+      screenshots: draft.mediaMode === "screenshot" ? (
+        // 스크린샷은 웹폰트·이미지를 fetch 로 인라인한다. 그 사이 수집을 멈추지 않으면
+        // 최근 50건이 그 요청들로 채워져 진짜 앱 요청이 밀려난다.
+        this.logCollectors.pauseNetworkWhile(
+          () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
+        )
+      ) : null,
       formSchema: this.loadFormSchema({})
     };
     const isCurrentSession = () => {