issue-sticker 0.8.0 → 0.9.0

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

@@ -1,7 +1,8 @@
+import { c as createLucideIcon, u as ungzip_1, C as CANVAS_INTERACTION_TAG, a as cn, R as Replayer, M as MousePointer2 } from "./three-B7nbYqGK.js";
+import { r } from "./three-B7nbYqGK.js";
 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, M as MousePointer2 } from "./mouse-pointer-2-BR00y3ir.js";
-import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-DH02R32-.js";
+import { memo, useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-BBukUPo_.js";
 /**
  * @license lucide-react v0.468.0 - ISC
  *
@@ -60,7 +61,8 @@ async function loadReplayEvents(url) {
 const TYPE_LABEL = {
   click: "클릭",
   input: "입력",
-  nav: "이동"
+  nav: "이동",
+  canvas: "캔버스"
 };
 const NODE_TYPE_ELEMENT = 2;
 const NODE_TYPE_TEXT = 3;
@@ -157,10 +159,22 @@ class NodeIndex {
 const EVENT_TYPE_FULL_SNAPSHOT = 2;
 const EVENT_TYPE_INCREMENTAL = 3;
 const EVENT_TYPE_META = 4;
+const EVENT_TYPE_CUSTOM = 5;
 const SOURCE_MUTATION$1 = 0;
 const SOURCE_MOUSE_INTERACTION = 2;
 const SOURCE_INPUT = 5;
 const MOUSE_CLICK = 2;
+function canvasLabel(payload) {
+  if ((payload == null ? void 0 : payload.kind) === "external") {
+    return "화면 변경";
+  }
+  const isDrag = (payload == null ? void 0 : payload.kind) === "drag";
+  const target = payload == null ? void 0 : payload.target;
+  if (target) {
+    return isDrag ? `${target} 드래그` : target;
+  }
+  return isDrag ? "드래그" : "클릭";
+}
 function deriveTimeline(events) {
   var _a;
   const list = events;
@@ -169,6 +183,7 @@ function deriveTimeline(events) {
   let recordedHeight = 0;
   let seenFirstMeta = false;
   const out = [];
+  const canvasFrames = [];
   const index = new NodeIndex();
   for (const ev of list) {
     const ts = Number((ev == null ? void 0 : ev.timestamp) ?? 0);
@@ -185,6 +200,28 @@ function deriveTimeline(events) {
       out.push({ t, type: "nav", href, label: href || TYPE_LABEL.nav });
       continue;
     }
+    if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_CUSTOM) {
+      if (data.tag !== CANVAS_INTERACTION_TAG) continue;
+      const payload = data.payload;
+      if (payload == null ? void 0 : payload.snapshot) {
+        canvasFrames.push({
+          t,
+          nodeId: typeof payload.nodeId === "number" ? payload.nodeId : null,
+          canvasIndex: typeof payload.canvasIndex === "number" ? payload.canvasIndex : 0,
+          src: payload.snapshot,
+          ...payload.baseline === true ? { baseline: true } : {}
+        });
+      }
+      if ((payload == null ? void 0 : payload.sampled) === true) continue;
+      out.push({
+        t,
+        type: "canvas",
+        label: canvasLabel(payload),
+        ...(payload == null ? void 0 : payload.snapshot) ? { thumbnail: payload.snapshot } : {},
+        ...typeof (payload == null ? void 0 : payload.nodeId) === "number" ? { nodeId: payload.nodeId } : {}
+      });
+      continue;
+    }
     if ((ev == null ? void 0 : ev.type) === EVENT_TYPE_FULL_SNAPSHOT) {
       index.reset(data.node);
       continue;
@@ -204,7 +241,7 @@ function deriveTimeline(events) {
       }
     }
   }
-  return { startTime, recordedWidth, recordedHeight, events: out };
+  return { startTime, recordedWidth, recordedHeight, events: out, canvasFrames };
 }
 const WIDGET_HOST_HTML_ID = "issue-sticker-host";
 const EVENT_FULL_SNAPSHOT = 2;
@@ -368,10 +405,12 @@ const MOUSE_TAIL_CONFIG = {
 };
 const INITIAL_SHOW_TRAIL = true;
 const SKIP_MS = 5e3;
+const PAINT_RETRY_DEADLINE_MS = 5e3;
 const TYPE_DOT = {
   click: "bg-brand",
   input: "bg-success",
-  nav: "bg-text-tertiary"
+  nav: "bg-text-tertiary",
+  canvas: "bg-warning"
 };
 function formatTime(ms) {
   const total = Math.max(0, Math.floor(ms / 1e3));
@@ -387,7 +426,7 @@ const EventLog = memo(function EventLog2({
   onSeek,
   total
 }) {
-  const filtered = filter === "all" ? rows : rows.filter((r) => r.type === filter);
+  const filtered = filter === "all" ? rows : rows.filter((r2) => r2.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: [
       /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-text-primary", children: "이벤트 로그" }),
@@ -396,7 +435,7 @@ const EventLog = memo(function EventLog2({
         total
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 border-b border-line-subtle px-3 py-2", children: ["all", "click", "input", "nav"].map((f) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 border-b border-line-subtle px-3 py-2", children: ["all", "click", "input", "nav", "canvas"].map((f) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -423,6 +462,14 @@ 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]) }),
+            row.thumbnail && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: row.thumbnail,
+                alt: "",
+                className: "h-8 w-12 shrink-0 rounded-sm border border-line-subtle object-cover"
+              }
+            ),
             /* @__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] })
           ]
@@ -432,6 +479,29 @@ const EventLog = memo(function EventLog2({
     }) })
   ] });
 });
+async function waitForReplayCanvas(replayerRef, shot, cancelled) {
+  const deadline = Date.now() + PAINT_RETRY_DEADLINE_MS;
+  for (; ; ) {
+    if (cancelled()) return null;
+    const node = findReplayCanvas(replayerRef.current, shot);
+    if (node) return node;
+    if (Date.now() >= deadline) return null;
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  }
+}
+function findReplayCanvas(replayer, shot) {
+  var _a, _b;
+  const replayDocument = (_a = replayer == null ? void 0 : replayer.iframe) == null ? void 0 : _a.contentDocument;
+  if (shot.nodeId !== null) {
+    const mirror = (_b = replayer == null ? void 0 : replayer.getMirror) == null ? void 0 : _b.call(replayer);
+    const node = mirror == null ? void 0 : mirror.getNode(shot.nodeId);
+    if (node && node.tagName === "CANVAS") {
+      return node;
+    }
+  }
+  const candidate = replayDocument == null ? void 0 : replayDocument.querySelectorAll("canvas")[shot.canvasIndex];
+  return candidate && candidate.tagName === "CANVAS" ? candidate : null;
+}
 function SessionReplayPlayer({ url }) {
   const rootRef = useRef(null);
   const hostRef = useRef(null);
@@ -448,6 +518,9 @@ function SessionReplayPlayer({ url }) {
   const [durationMs, setDurationMs] = useState(0);
   const [currentMs, setCurrentMs] = useState(0);
   const [timeline, setTimeline] = useState([]);
+  const [canvasShots, setCanvasShots] = useState([]);
+  const paintedCanvasRef = useRef(/* @__PURE__ */ new Map());
+  const [rebuildTick, setRebuildTick] = useState(0);
   const [logRows, setLogRows] = useState([]);
   const [filter, setFilter] = useState("all");
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -467,8 +540,8 @@ function SessionReplayPlayer({ url }) {
   const startRaf = useCallback(() => {
     stopRaf();
     const tick = () => {
-      const r = replayerRef.current;
-      if (r) setCurrentMs(Math.min(r.getCurrentTime(), durationRef.current));
+      const r2 = replayerRef.current;
+      if (r2) setCurrentMs(Math.min(r2.getCurrentTime(), durationRef.current));
       rafRef.current = requestAnimationFrame(tick);
     };
     rafRef.current = requestAnimationFrame(tick);
@@ -528,20 +601,31 @@ function SessionReplayPlayer({ url }) {
             mouseTail: INITIAL_SHOW_TRAIL ? MOUSE_TAIL_CONFIG : false
           }
         );
+        replayer.on("fullsnapshot-rebuilded", () => {
+          if (cancelled) return;
+          setRebuildTick((tick) => tick + 1);
+        });
         replayer.on("finish", () => {
           if (cancelled) return;
           applyIsPlaying(false);
           startedRef.current = false;
           stopRaf();
         });
+        try {
+          replayer.pause(0);
+        } catch {
+        }
         replayerRef.current = replayer;
+        paintedCanvasRef.current.clear();
         setTimeline(derived.events);
         const totalTime = replayer.getMetaData().totalTime;
         applyDuration(totalTime);
+        setCanvasShots(derived.canvasFrames);
         const rows = derived.events.map((ev, i) => ({
           t: ev.t,
           type: ev.type,
           label: ev.label,
+          ...ev.thumbnail ? { thumbnail: ev.thumbnail } : {},
           index: i
         }));
         setLogRows(rows);
@@ -567,32 +651,32 @@ function SessionReplayPlayer({ url }) {
     return () => document.removeEventListener("fullscreenchange", onChange);
   }, []);
   const seek = useCallback((ms) => {
-    const r = replayerRef.current;
-    if (!r) return;
+    const r2 = replayerRef.current;
+    if (!r2) return;
     const clamped = Math.max(0, Math.min(ms, durationRef.current));
-    if (isPlayingRef.current) r.play(clamped);
-    else r.pause(clamped);
+    if (isPlayingRef.current) r2.play(clamped);
+    else r2.pause(clamped);
     startedRef.current = true;
     setCurrentMs(clamped);
   }, []);
   const togglePlay = useCallback(() => {
-    const r = replayerRef.current;
-    if (!r) return;
+    const r2 = replayerRef.current;
+    if (!r2) return;
     if (isPlayingRef.current) {
-      r.pause();
+      r2.pause();
       applyIsPlaying(false);
       stopRaf();
     } else {
-      r.play(startedRef.current ? r.getCurrentTime() : 0);
+      r2.play(startedRef.current ? r2.getCurrentTime() : 0);
       startedRef.current = true;
       applyIsPlaying(true);
       startRaf();
     }
   }, [stopRaf, startRaf]);
   const restart = useCallback(() => {
-    const r = replayerRef.current;
-    if (!r) return;
-    r.play(0);
+    const r2 = replayerRef.current;
+    if (!r2) return;
+    r2.play(0);
     startedRef.current = true;
     applyIsPlaying(true);
     startRaf();
@@ -634,6 +718,57 @@ function SessionReplayPlayer({ url }) {
     [togglePlay, seek, currentMs, toggleFullscreen]
   );
   const currentIndex = logRows.reduce((acc, row) => row.t <= currentMs ? row.index : acc, -1);
+  const currentShots = useMemo(() => {
+    const byCanvas = /* @__PURE__ */ new Map();
+    for (const shot of canvasShots) {
+      const applies = shot.t <= currentMs || shot.baseline && !byCanvas.has(shot.canvasIndex);
+      if (applies) {
+        byCanvas.set(shot.canvasIndex, shot);
+      }
+    }
+    return Array.from(byCanvas.values());
+  }, [canvasShots, currentMs]);
+  const shotKey = currentShots.map((shot) => `${shot.canvasIndex}:${shot.t}`).join("|");
+  useEffect(() => {
+    let cancelled = false;
+    const painted = paintedCanvasRef.current;
+    const apply = async () => {
+      for (const shot of currentShots) {
+        const prev = painted.get(shot.canvasIndex);
+        if (prev && prev.src === shot.src && prev.rebuild === rebuildTick && prev.node.isConnected) {
+          continue;
+        }
+        const node = await waitForReplayCanvas(replayerRef, shot, () => cancelled);
+        if (cancelled || !node) {
+          continue;
+        }
+        const image = new Image();
+        image.src = shot.src;
+        try {
+          await image.decode();
+        } catch {
+          continue;
+        }
+        if (cancelled) {
+          return;
+        }
+        node.style.backgroundImage = `url("${shot.src}")`;
+        node.style.backgroundSize = "100% 100%";
+        node.style.backgroundRepeat = "no-repeat";
+        painted.set(shot.canvasIndex, { node, src: shot.src, rebuild: rebuildTick });
+      }
+      for (const [canvasIndex, entry] of Array.from(painted.entries())) {
+        if (!currentShots.some((shot) => shot.canvasIndex === canvasIndex)) {
+          entry.node.style.backgroundImage = "";
+          painted.delete(canvasIndex);
+        }
+      }
+    };
+    void apply();
+    return () => {
+      cancelled = true;
+    };
+  }, [shotKey, rebuildTick]);
   if (state === "error") {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "리플레이를 불러오지 못했습니다." });
   }
@@ -802,5 +937,6 @@ function SessionReplayViewer({ issue }) {
   return /* @__PURE__ */ jsx(SessionReplayPlayer, { url });
 }
 export {
-  SessionReplayViewer
+  SessionReplayViewer,
+  r as registerThree
 };

package/dist/issue-sticker-headless.js

@@ -1,7 +1,7 @@
-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, 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 getCurrentPageUrl, S as ScreenRecordingController, w as SessionReplayCaptureController, x as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX } from "./externalUserPayload-k9LSBeMB.js";
+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-CVp5Hz2L.js";
+import { r } from "./three-B7nbYqGK.js";
 import "react/jsx-runtime";
 import "react";
-import "./mouse-pointer-2-BR00y3ir.js";
 const WINDOW_MS = 6e4;
 const MAX_PER_WINDOW = 5;
 class AutoIssueRateLimit {
@@ -854,7 +854,8 @@ class HeadlessIssueRepository {
 }
 const defaultDeps = {
   createNetworkCollector: (apiBaseUrl) => new NetworkCollector(apiBaseUrl),
-  createConsoleCollector: () => new ConsoleCollector()
+  createConsoleCollector: () => new ConsoleCollector(),
+  createSocketCollector: (apiBaseUrl) => new WebSocketCollector(apiBaseUrl)
 };
 class HeadlessLogCollectors {
   constructor(config, getApiBaseUrl2, deps = defaultDeps) {
@@ -863,9 +864,10 @@ class HeadlessLogCollectors {
     this.deps = deps;
     this.networkCollector = null;
     this.consoleCollector = null;
+    this.socketCollector = null;
   }
   start() {
-    var _a, _b;
+    var _a, _b, _c;
     if (((_a = this.config.capture) == null ? void 0 : _a.networkLogs) !== false && !this.networkCollector) {
       this.networkCollector = this.deps.createNetworkCollector(this.getApiBaseUrl());
       this.networkCollector.start();
@@ -874,13 +876,31 @@ class HeadlessLogCollectors {
       this.consoleCollector = this.deps.createConsoleCollector();
       this.consoleCollector.start();
     }
+    if (((_c = this.config.capture) == null ? void 0 : _c.socketLogs) !== false && !this.socketCollector) {
+      this.socketCollector = this.deps.createSocketCollector(this.getApiBaseUrl());
+      const network = this.networkCollector;
+      if (network) {
+        this.socketCollector.bindNetworkLogSink((log) => {
+          var _a2;
+          return (_a2 = network.ingest) == null ? void 0 : _a2.call(network, log);
+        });
+      }
+      this.socketCollector.start();
+    }
   }
   stop() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.networkCollector) == null ? void 0 : _a.stop();
     (_b = this.consoleCollector) == null ? void 0 : _b.stop();
+    (_c = this.socketCollector) == null ? void 0 : _c.stop();
     this.networkCollector = null;
     this.consoleCollector = null;
+    this.socketCollector = null;
+  }
+  /** 제출 시점에 소켓 전사를 만들 재료. 없으면 빈 배열 — serializeSocketTranscript 가 null 로 걸러낸다. */
+  getSocketConnections() {
+    var _a;
+    return ((_a = this.socketCollector) == null ? void 0 : _a.getConnections()) ?? [];
   }
   /**
    * 스크린샷 캡처처럼 **우리가 서드파티 요청을 일으키는** 구간을 감싼다.
@@ -1107,6 +1127,7 @@ function buildIssueCreatePayload({
       session_replay_upload_id: uploads.replayUpload.uploadId,
       session_replay_meta: uploads.replayUpload.meta
     } : {},
+    ...uploads.socketUpload ? { socket_log_upload_id: uploads.socketUpload.uploadId } : {},
     console_logs: logs.consoleLogs.length > 0 ? logs.consoleLogs : void 0,
     user_agent: userAgent,
     tenant_id: auth.tenantId,
@@ -1138,18 +1159,27 @@ async function submitHeadlessIssueDraft({
   logs,
   currentUrl,
   userAgent,
-  uploadSessionReplaySnapshot
+  uploadSessionReplaySnapshot,
+  getSocketConnections
 }) {
   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 },
+    uploads: { screenshotUploadIds, videoUpload, replayUpload, socketUpload },
     logs,
     currentUrl,
     userAgent
@@ -1499,7 +1529,8 @@ class HeadlessClientImpl {
         logs: this.logCollectors.collect(),
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot()
+        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections()
       });
       this.clearCaptureListeners();
       this.clearPendingMedia();
@@ -1561,7 +1592,8 @@ class HeadlessClientImpl {
         logs,
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot()
+        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections()
       });
       this.state.setSnapshot({
         issues: [createdIssue, ...this.snapshot.issues]
@@ -1858,5 +1890,6 @@ function createIssueStickerHeadless(config) {
 export {
   IssueStickerHeadlessError,
   createIssueStickerHeadless,
-  createIssueStickerHeadless as default
+  createIssueStickerHeadless as default,
+  r as registerThree
 };