@impakers/debug 1.2.1 → 1.3.0

package/dist/react.js

@@ -1843,12 +1843,13 @@ async function fetchComments(endpoint, taskId) {
   setCache(cacheKey, comments);
   return comments;
 }
-async function postComment(endpoint, taskId, content, authorName, authorId) {
+async function postComment(endpoint, taskId, content, authorName, authorId, screenshot) {
   const tempComment = {
     id: `temp-${Date.now()}`,
     content,
     authorName,
     authorId,
+    imageUrl: screenshot ? "loading..." : void 0,
     createdAt: (/* @__PURE__ */ new Date()).toISOString()
   };
   const cacheKey = `comments:${taskId}`;
@@ -1856,7 +1857,7 @@ async function postComment(endpoint, taskId, content, authorName, authorId) {
   setCache(cacheKey, [...existing, tempComment]);
   const res = await apiFetch(`${endpoint}/${taskId}/comments`, {
     method: "POST",
-    body: JSON.stringify({ content, authorName, authorId })
+    body: JSON.stringify({ content, authorName, authorId, screenshot })
   });
   const data = await res.json();
   const serverComment = data.comment;
@@ -1867,6 +1868,13 @@ async function postComment(endpoint, taskId, content, authorName, authorId) {
   invalidateCache("feedbacks:");
   return serverComment;
 }
+async function updateTaskStatus(endpoint, taskId, status) {
+  await apiFetch(`${endpoint}/${taskId}/status`, {
+    method: "PATCH",
+    body: JSON.stringify({ status })
+  });
+  invalidateCache("feedbacks:");
+}
 
 // src/core/sourcemap-resolver.ts
 var import_trace_mapping = require("@jridgewell/trace-mapping");
@@ -2017,8 +2025,8 @@ function PendingMarker({ x, y, accentColor }) {
 var import_react3 = require("react");
 
 // src/components/comment-thread/styles.module.scss
-var css3 = '@keyframes styles-module__threadIn___pBTFZ {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__threadOut___-ccKh {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n}\n.styles-module__thread___ua2EO {\n  position: fixed;\n  width: 340px;\n  max-height: 480px;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  z-index: 100002;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  font-size: 13px;\n  color: #1a1a1a;\n  animation: styles-module__threadIn___pBTFZ 0.15s ease-out;\n  -webkit-font-smoothing: antialiased;\n}\n.styles-module__thread___ua2EO.styles-module__exiting___RIPeX {\n  animation: styles-module__threadOut___-ccKh 0.12s ease-in forwards;\n  pointer-events: none;\n}\n\n.styles-module__header___GiEBq {\n  padding: 14px 16px 10px;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.styles-module__avatar___JElAd {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #16a34a;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.styles-module__headerInfo___E8809 {\n  flex: 1;\n  min-width: 0;\n}\n\n.styles-module__headerTop___eDiCd {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 4px;\n}\n\n.styles-module__authorName___T1BfB {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.styles-module__timestamp___WusBf {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.styles-module__headerActions___8FsMY {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.styles-module__headerAction___Tinmq {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__headerAction___Tinmq:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n.styles-module__headerAction___Tinmq svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__title___qkfqY {\n  font-size: 13px;\n  color: #1a1a1a;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.styles-module__commentsList___kYqAR {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n}\n.styles-module__commentsList___kYqAR::-webkit-scrollbar {\n  width: 4px;\n}\n.styles-module__commentsList___kYqAR::-webkit-scrollbar-thumb {\n  background: #d1d5db;\n  border-radius: 2px;\n}\n\n.styles-module__comment___pW3IO {\n  padding: 10px 16px;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n.styles-module__comment___pW3IO:hover {\n  background: #f9fafb;\n}\n.styles-module__comment___pW3IO:hover .styles-module__commentActions___wO0fs {\n  opacity: 1;\n}\n\n.styles-module__commentHighlight___EiTmx {\n  background: #eff6ff;\n  border-left: 2px solid #3b82f6;\n  padding-left: 14px;\n}\n\n.styles-module__commentContent___RObGr {\n  flex: 1;\n  min-width: 0;\n}\n\n.styles-module__commentTop___BbTF3 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.styles-module__commentAuthor___tBjpl {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.styles-module__commentTime___0OLrz {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.styles-module__commentActions___wO0fs {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.12s;\n}\n\n.styles-module__commentText___ldy2V {\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.5;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.styles-module__screenshot___jUqau {\n  margin-top: 8px;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n  position: relative;\n  max-width: 200px;\n}\n.styles-module__screenshot___jUqau img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n.styles-module__screenshot___jUqau .styles-module__screenshotBadge___roEqY {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n}\n\n.styles-module__divider___kDjxN {\n  height: 1px;\n  background: #f3f4f6;\n  margin: 0;\n}\n\n.styles-module__replyArea___VQn9b {\n  padding: 10px 16px 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.styles-module__replyInput___uZNBW {\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 13px;\n  font-family: inherit;\n  color: #1a1a1a;\n  resize: none;\n  padding: 0;\n  min-height: 20px;\n  max-height: 80px;\n  line-height: 1.5;\n}\n.styles-module__replyInput___uZNBW::placeholder {\n  color: #9ca3af;\n}\n\n.styles-module__replyToolbar___fTFJU {\n  display: flex;\n  align-items: center;\n  padding: 4px 16px 10px;\n  gap: 4px;\n}\n\n.styles-module__replyTool___Ho-Rx {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__replyTool___Ho-Rx:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n.styles-module__replyTool___Ho-Rx svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__replySend___e0VSb {\n  margin-left: auto;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__replySend___e0VSb:hover {\n  color: #3b82f6;\n}\n.styles-module__replySend___e0VSb.styles-module__active___R--Jj {\n  color: #3b82f6;\n}\n.styles-module__replySend___e0VSb svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__empty___XXGiw {\n  padding: 24px 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n}\n\n.styles-module__statusBadge___el8ml {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 10px;\n  margin-left: auto;\n}\n.styles-module__statusBadge___el8ml.styles-module__todo___rUWBr {\n  background: #fef3c7;\n  color: #92400e;\n}\n.styles-module__statusBadge___el8ml.styles-module__inProgress___HEWgU {\n  background: #dbeafe;\n  color: #1e40af;\n}\n.styles-module__statusBadge___el8ml.styles-module__done___zC12n {\n  background: #dcfce7;\n  color: #166534;\n}';
-var classNames3 = { "thread": "styles-module__thread___ua2EO", "threadIn": "styles-module__threadIn___pBTFZ", "exiting": "styles-module__exiting___RIPeX", "threadOut": "styles-module__threadOut___-ccKh", "header": "styles-module__header___GiEBq", "avatar": "styles-module__avatar___JElAd", "headerInfo": "styles-module__headerInfo___E8809", "headerTop": "styles-module__headerTop___eDiCd", "authorName": "styles-module__authorName___T1BfB", "timestamp": "styles-module__timestamp___WusBf", "headerActions": "styles-module__headerActions___8FsMY", "headerAction": "styles-module__headerAction___Tinmq", "title": "styles-module__title___qkfqY", "commentsList": "styles-module__commentsList___kYqAR", "comment": "styles-module__comment___pW3IO", "commentActions": "styles-module__commentActions___wO0fs", "commentHighlight": "styles-module__commentHighlight___EiTmx", "commentContent": "styles-module__commentContent___RObGr", "commentTop": "styles-module__commentTop___BbTF3", "commentAuthor": "styles-module__commentAuthor___tBjpl", "commentTime": "styles-module__commentTime___0OLrz", "commentText": "styles-module__commentText___ldy2V", "screenshot": "styles-module__screenshot___jUqau", "screenshotBadge": "styles-module__screenshotBadge___roEqY", "divider": "styles-module__divider___kDjxN", "replyArea": "styles-module__replyArea___VQn9b", "replyInput": "styles-module__replyInput___uZNBW", "replyToolbar": "styles-module__replyToolbar___fTFJU", "replyTool": "styles-module__replyTool___Ho-Rx", "replySend": "styles-module__replySend___e0VSb", "active": "styles-module__active___R--Jj", "empty": "styles-module__empty___XXGiw", "statusBadge": "styles-module__statusBadge___el8ml", "todo": "styles-module__todo___rUWBr", "inProgress": "styles-module__inProgress___HEWgU", "done": "styles-module__done___zC12n" };
+var css3 = '@keyframes styles-module__threadIn___pBTFZ {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n@keyframes styles-module__threadOut___-ccKh {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n}\n.styles-module__thread___ua2EO {\n  position: fixed;\n  width: 340px;\n  max-height: 480px;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  z-index: 100002;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n  font-size: 13px;\n  color: #1a1a1a;\n  animation: styles-module__threadIn___pBTFZ 0.15s ease-out;\n  -webkit-font-smoothing: antialiased;\n}\n.styles-module__thread___ua2EO.styles-module__exiting___RIPeX {\n  animation: styles-module__threadOut___-ccKh 0.12s ease-in forwards;\n  pointer-events: none;\n}\n\n.styles-module__header___GiEBq {\n  padding: 14px 16px 10px;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.styles-module__avatar___JElAd {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #16a34a;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.styles-module__headerInfo___E8809 {\n  flex: 1;\n  min-width: 0;\n}\n\n.styles-module__headerTop___eDiCd {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 4px;\n}\n\n.styles-module__authorName___T1BfB {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.styles-module__timestamp___WusBf {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.styles-module__headerActions___8FsMY {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.styles-module__headerAction___Tinmq {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__headerAction___Tinmq:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n.styles-module__headerAction___Tinmq svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__title___qkfqY {\n  font-size: 13px;\n  color: #1a1a1a;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.styles-module__commentsList___kYqAR {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n}\n.styles-module__commentsList___kYqAR::-webkit-scrollbar {\n  width: 4px;\n}\n.styles-module__commentsList___kYqAR::-webkit-scrollbar-thumb {\n  background: #d1d5db;\n  border-radius: 2px;\n}\n\n.styles-module__comment___pW3IO {\n  padding: 10px 16px;\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n.styles-module__comment___pW3IO:hover {\n  background: #f9fafb;\n}\n.styles-module__comment___pW3IO:hover .styles-module__commentActions___wO0fs {\n  opacity: 1;\n}\n\n.styles-module__commentHighlight___EiTmx {\n  background: #eff6ff;\n  border-left: 2px solid #3b82f6;\n  padding-left: 14px;\n}\n\n.styles-module__commentContent___RObGr {\n  flex: 1;\n  min-width: 0;\n}\n\n.styles-module__commentTop___BbTF3 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.styles-module__commentAuthor___tBjpl {\n  font-size: 13px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.styles-module__commentTime___0OLrz {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.styles-module__commentActions___wO0fs {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.12s;\n}\n\n.styles-module__commentText___ldy2V {\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.5;\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n\n.styles-module__screenshot___jUqau {\n  margin-top: 8px;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n  position: relative;\n  max-width: 200px;\n}\n.styles-module__screenshot___jUqau img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n.styles-module__screenshot___jUqau .styles-module__screenshotBadge___roEqY {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-weight: 500;\n}\n\n.styles-module__divider___kDjxN {\n  height: 1px;\n  background: #f3f4f6;\n  margin: 0;\n}\n\n.styles-module__pendingImage___gHaF3 {\n  position: relative;\n  margin: 0 16px 8px;\n  border-radius: 8px;\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n  max-height: 120px;\n}\n.styles-module__pendingImage___gHaF3 img {\n  width: 100%;\n  height: auto;\n  display: block;\n  object-fit: cover;\n  max-height: 120px;\n}\n\n.styles-module__pendingRemove___FRL4h {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  line-height: 1;\n  padding: 0;\n}\n.styles-module__pendingRemove___FRL4h:hover {\n  background: rgba(0, 0, 0, 0.8);\n}\n\n.styles-module__replyArea___VQn9b {\n  padding: 10px 16px 8px;\n  border-top: 1px solid #f3f4f6;\n}\n\n.styles-module__replyInput___uZNBW {\n  width: 100%;\n  border: none;\n  outline: none;\n  font-size: 13px;\n  font-family: inherit;\n  color: #1a1a1a;\n  resize: none;\n  padding: 0;\n  min-height: 20px;\n  max-height: 80px;\n  line-height: 1.5;\n}\n.styles-module__replyInput___uZNBW::placeholder {\n  color: #9ca3af;\n}\n\n.styles-module__replyToolbar___fTFJU {\n  display: flex;\n  align-items: center;\n  padding: 4px 16px 10px;\n  gap: 4px;\n}\n\n.styles-module__replyTool___Ho-Rx {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__replyTool___Ho-Rx:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n.styles-module__replyTool___Ho-Rx svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__replySend___e0VSb {\n  margin-left: auto;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  color: #9ca3af;\n  transition: background 0.12s, color 0.12s;\n  padding: 0;\n}\n.styles-module__replySend___e0VSb:hover {\n  color: #3b82f6;\n}\n.styles-module__replySend___e0VSb.styles-module__active___R--Jj {\n  color: #3b82f6;\n}\n.styles-module__replySend___e0VSb svg {\n  width: 16px;\n  height: 16px;\n}\n\n.styles-module__empty___XXGiw {\n  padding: 24px 16px;\n  text-align: center;\n  color: #9ca3af;\n  font-size: 13px;\n}\n\n.styles-module__statusBadge___el8ml {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  padding: 2px 8px;\n  border-radius: 10px;\n  margin-left: auto;\n}\n.styles-module__statusBadge___el8ml.styles-module__todo___rUWBr {\n  background: #fef3c7;\n  color: #92400e;\n}\n.styles-module__statusBadge___el8ml.styles-module__inProgress___HEWgU {\n  background: #dbeafe;\n  color: #1e40af;\n}\n.styles-module__statusBadge___el8ml.styles-module__done___zC12n {\n  background: #dcfce7;\n  color: #166534;\n}';
+var classNames3 = { "thread": "styles-module__thread___ua2EO", "threadIn": "styles-module__threadIn___pBTFZ", "exiting": "styles-module__exiting___RIPeX", "threadOut": "styles-module__threadOut___-ccKh", "header": "styles-module__header___GiEBq", "avatar": "styles-module__avatar___JElAd", "headerInfo": "styles-module__headerInfo___E8809", "headerTop": "styles-module__headerTop___eDiCd", "authorName": "styles-module__authorName___T1BfB", "timestamp": "styles-module__timestamp___WusBf", "headerActions": "styles-module__headerActions___8FsMY", "headerAction": "styles-module__headerAction___Tinmq", "title": "styles-module__title___qkfqY", "commentsList": "styles-module__commentsList___kYqAR", "comment": "styles-module__comment___pW3IO", "commentActions": "styles-module__commentActions___wO0fs", "commentHighlight": "styles-module__commentHighlight___EiTmx", "commentContent": "styles-module__commentContent___RObGr", "commentTop": "styles-module__commentTop___BbTF3", "commentAuthor": "styles-module__commentAuthor___tBjpl", "commentTime": "styles-module__commentTime___0OLrz", "commentText": "styles-module__commentText___ldy2V", "screenshot": "styles-module__screenshot___jUqau", "screenshotBadge": "styles-module__screenshotBadge___roEqY", "divider": "styles-module__divider___kDjxN", "pendingImage": "styles-module__pendingImage___gHaF3", "pendingRemove": "styles-module__pendingRemove___FRL4h", "replyArea": "styles-module__replyArea___VQn9b", "replyInput": "styles-module__replyInput___uZNBW", "replyToolbar": "styles-module__replyToolbar___fTFJU", "replyTool": "styles-module__replyTool___Ho-Rx", "replySend": "styles-module__replySend___e0VSb", "active": "styles-module__active___R--Jj", "empty": "styles-module__empty___XXGiw", "statusBadge": "styles-module__statusBadge___el8ml", "todo": "styles-module__todo___rUWBr", "inProgress": "styles-module__inProgress___HEWgU", "done": "styles-module__done___zC12n" };
 if (typeof document !== "undefined") {
   let style = document.getElementById("impakers-debug-styles-comment-thread-styles");
   if (!style) {
@@ -2033,16 +2041,14 @@ var styles_module_default3 = classNames3;
 // src/components/comment-thread/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function timeAgo(dateStr) {
-  const now = Date.now();
-  const then = new Date(dateStr).getTime();
-  const diff = now - then;
-  const minutes = Math.floor(diff / 6e4);
-  if (minutes < 1) return "just now";
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h`;
-  const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d`;
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const m = Math.floor(diff / 6e4);
+  if (m < 1) return "just now";
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d`;
   return new Date(dateStr).toLocaleDateString("ko-KR", { month: "short", day: "numeric" });
 }
 function getInitials(name) {
@@ -2061,15 +2067,17 @@ function CommentThread({
 }) {
   const [replyText, setReplyText] = (0, import_react3.useState)("");
   const [exiting, setExiting] = (0, import_react3.useState)(false);
+  const [pendingImage, setPendingImage] = (0, import_react3.useState)(null);
+  const [capturingDom, setCapturingDom] = (0, import_react3.useState)(false);
   const textareaRef = (0, import_react3.useRef)(null);
   const listRef = (0, import_react3.useRef)(null);
+  const fileInputRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
-    if (listRef.current) {
-      listRef.current.scrollTop = listRef.current.scrollHeight;
-    }
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
     textareaRef.current?.focus();
   }, [task.comments.length]);
   (0, import_react3.useEffect)(() => {
+    if (capturingDom) return;
     const handler = (e) => {
       const target = e.target;
       if (target.closest(`.${styles_module_default3.thread}`)) return;
@@ -2079,16 +2087,17 @@ function CommentThread({
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, []);
+  }, [capturingDom]);
   const handleClose = (0, import_react3.useCallback)(() => {
     setExiting(true);
     setTimeout(() => onClose(), 120);
   }, [onClose]);
   const handleSend = (0, import_react3.useCallback)(() => {
-    if (!replyText.trim()) return;
-    onReply(task.id, replyText.trim());
+    if (!replyText.trim() && !pendingImage) return;
+    onReply(task.id, replyText.trim(), pendingImage || void 0);
     setReplyText("");
-  }, [replyText, task.id, onReply]);
+    setPendingImage(null);
+  }, [replyText, pendingImage, task.id, onReply]);
   const handleKeyDown = (0, import_react3.useCallback)(
     (e) => {
       e.stopPropagation();
@@ -2097,12 +2106,81 @@ function CommentThread({
         e.preventDefault();
         handleSend();
       }
-      if (e.key === "Escape") {
-        handleClose();
-      }
+      if (e.key === "Escape") handleClose();
     },
     [handleClose, handleSend]
   );
+  const handleCameraClick = (0, import_react3.useCallback)(() => {
+    setCapturingDom(true);
+    const threadEl = document.querySelector(`.${styles_module_default3.thread}`);
+    if (threadEl) threadEl.style.visibility = "hidden";
+    document.documentElement.style.cursor = "crosshair";
+    const allEls = document.querySelectorAll("*");
+    allEls.forEach((el) => el.style.cursor = "crosshair");
+    let hoverBox = null;
+    const showHover = (rect) => {
+      if (!hoverBox) {
+        hoverBox = document.createElement("div");
+        hoverBox.style.cssText = `position:fixed;border:2px solid #3b82f6;background:rgba(59,130,246,0.05);border-radius:4px;pointer-events:none;z-index:999999;transition:all 0.08s ease`;
+        document.body.appendChild(hoverBox);
+      }
+      hoverBox.style.left = `${rect.left}px`;
+      hoverBox.style.top = `${rect.top}px`;
+      hoverBox.style.width = `${rect.width}px`;
+      hoverBox.style.height = `${rect.height}px`;
+    };
+    const handleMove = (e) => {
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || el === hoverBox) return;
+      showHover(el.getBoundingClientRect());
+    };
+    const handleClick = async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("click", handleClick, true);
+      document.documentElement.style.cursor = "";
+      allEls.forEach((el) => el.style.cursor = "");
+      hoverBox?.remove();
+      const targetEl = document.elementFromPoint(e.clientX, e.clientY);
+      if (!targetEl) {
+        if (threadEl) threadEl.style.visibility = "";
+        setCapturingDom(false);
+        return;
+      }
+      try {
+        const html2canvas = (await import("html2canvas")).default;
+        const canvas = await html2canvas(targetEl, {
+          useCORS: true,
+          allowTaint: true,
+          scale: Math.min(window.devicePixelRatio, 2),
+          logging: false
+        });
+        const base64 = canvas.toDataURL("image/jpeg", 0.7);
+        setPendingImage(base64);
+      } catch (err) {
+        console.error("[@impakers/debug] DOM \uC2A4\uD06C\uB9B0\uC0F7 \uC2E4\uD328:", err);
+      }
+      if (threadEl) threadEl.style.visibility = "";
+      setCapturingDom(false);
+      textareaRef.current?.focus();
+    };
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("click", handleClick, true);
+  }, []);
+  const handleAttachClick = (0, import_react3.useCallback)(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = (0, import_react3.useCallback)((e) => {
+    const file = e.target.files?.[0];
+    if (!file || !file.type.startsWith("image/")) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      setPendingImage(reader.result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  }, []);
   const feedbackTitle = task.title.replace(/^\[피드백\]\s*/, "");
   const positionStyle = {
     left,
@@ -2127,30 +2205,8 @@ function CommentThread({
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.title, children: feedbackTitle })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.headerActions, children: [
-            onResolve && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "button",
-              {
-                className: styles_module_default3.headerAction,
-                onClick: () => onResolve(task.id),
-                title: "\uC644\uB8CC \uCC98\uB9AC",
-                type: "button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "button",
-              {
-                className: styles_module_default3.headerAction,
-                onClick: handleClose,
-                title: "\uB2EB\uAE30",
-                type: "button",
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "12", r: "1" })
-                ] })
-              }
-            )
+            onResolve && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.headerAction, onClick: () => onResolve(task.id), title: "\uC644\uB8CC \uCC98\uB9AC", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.headerAction, onClick: handleClose, title: "\uB2EB\uAE30", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
           ] })
         ] }),
         task.comments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
@@ -2162,11 +2218,15 @@ function CommentThread({
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles_module_default3.commentAuthor, children: comment.authorName }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles_module_default3.commentTime, children: timeAgo(comment.createdAt) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.commentText, children: comment.content }),
-              comment.screenshot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.screenshot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: comment.screenshot, alt: "screenshot" }) })
+              comment.content && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.commentText, children: comment.content }),
+              comment.imageUrl && comment.imageUrl !== "loading..." && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.screenshot, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: comment.imageUrl, alt: "screenshot" }) })
             ] })
           ] }, comment.id)) })
         ] }),
+        pendingImage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.pendingImage, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: pendingImage, alt: "pending" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.pendingRemove, onClick: () => setPendingImage(null), type: "button", children: "\xD7" })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles_module_default3.replyArea, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "textarea",
           {
@@ -2180,21 +2240,20 @@ function CommentThread({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles_module_default3.replyToolbar, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.replyTool, type: "button", title: "\uCCA8\uBD80", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.replyTool, onClick: handleAttachClick, type: "button", title: "\uC774\uBBF8\uC9C0 \uCCA8\uBD80", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.replyTool, type: "button", title: "\uC2A4\uD06C\uB9B0\uC0F7", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.replyTool, onClick: handleCameraClick, type: "button", title: "\uC694\uC18C \uC2A4\uD06C\uB9B0\uC0F7", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14.5 4h-5L7 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2h-3l-2.5-3z" }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "13", r: "3" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: styles_module_default3.replyTool, type: "button", title: "\uC11C\uC2DD", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: "4", y: "17", fontSize: "14", fontWeight: "600", fontFamily: "serif", fill: "currentColor", children: "Aa" }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
-              className: `${styles_module_default3.replySend} ${replyText.trim() ? styles_module_default3.active : ""}`,
+              className: `${styles_module_default3.replySend} ${replyText.trim() || pendingImage ? styles_module_default3.active : ""}`,
               onClick: handleSend,
-              disabled: !replyText.trim(),
+              disabled: !replyText.trim() && !pendingImage,
               type: "button",
               title: "\uC804\uC1A1",
               children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -2203,7 +2262,17 @@ function CommentThread({
               ] })
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            style: { display: "none" },
+            onChange: handleFileChange
+          }
+        )
       ]
     }
   );
@@ -2501,12 +2570,15 @@ function InboxPanel({
     }
     if (e.key === "Escape") handleClose();
   }, [handleSendReply, handleClose]);
+  const [statusOverrides, setStatusOverrides] = (0, import_react5.useState)({});
   const handleToggleStatus = (0, import_react5.useCallback)((item, e) => {
     e.stopPropagation();
     const newStatus = item.status === "done" ? "todo" : "done";
+    setStatusOverrides((prev) => ({ ...prev, [item.id]: newStatus }));
     onStatusChange?.(item.id, newStatus);
   }, [onStatusChange]);
-  const items = tab === "page" ? pageItems : allItems;
+  const applyOverrides = (items2) => items2.map((item) => statusOverrides[item.id] ? { ...item, status: statusOverrides[item.id] } : item);
+  const items = applyOverrides(tab === "page" ? pageItems : allItems);
   if (typeof document === "undefined") return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-impakers-debug": "", children: [
@@ -3192,7 +3264,7 @@ ${elementInfo.join("\n")}`);
       return newId;
     });
   }, [endpoint]);
-  const handleThreadReply = (0, import_react7.useCallback)(async (taskId, content) => {
+  const handleThreadReply = (0, import_react7.useCallback)(async (taskId, content, screenshot) => {
     const authorName = getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85";
     const authorId = getUser?.()?.id ? String(getUser().id) : void 0;
     const tempComment = {
@@ -3200,6 +3272,8 @@ ${elementInfo.join("\n")}`);
       content,
       authorName,
       authorId,
+      imageUrl: screenshot ? screenshot : void 0,
+      // 로컬 미리보기
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     setThreadComments((prev) => ({
@@ -3207,7 +3281,7 @@ ${elementInfo.join("\n")}`);
       [taskId]: [...prev[taskId] || [], tempComment]
     }));
     try {
-      const serverComment = await postComment(endpoint, taskId, content, authorName, authorId);
+      const serverComment = await postComment(endpoint, taskId, content, authorName, authorId, screenshot);
       setThreadComments((prev) => ({
         ...prev,
         [taskId]: (prev[taskId] || []).map(
@@ -3345,10 +3419,15 @@ ${elementInfo.join("\n")}`);
           currentUserName: getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85",
           currentUserId: getUser?.()?.id ? String(getUser().id) : void 0,
           onClose: () => setShowInbox(false),
-          onStatusChange: (taskId, status) => {
-            setAnnotations(
-              (prev) => prev.map((a) => a.id === taskId ? { ...a, status } : a)
-            );
+          onStatusChange: async (taskId, status) => {
+            try {
+              await updateTaskStatus(endpoint, taskId, status);
+              const currentPath2 = window.location.pathname;
+              const tasks = await fetchFeedbacks(endpoint, currentPath2);
+              setServerTasks(tasks);
+            } catch (err) {
+              console.error("[@impakers/debug] \uC0C1\uD0DC \uBCC0\uACBD \uC2E4\uD328:", err);
+            }
           }
         }
       ),
@@ -3679,7 +3758,13 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function ImpakersDebugProvider({ endpoint, getUser }) {
   const [authenticated, setAuthenticated] = (0, import_react9.useState)(false);
   const [showAuth, setShowAuth] = (0, import_react9.useState)(false);
-  const [hidden, setHidden] = (0, import_react9.useState)(false);
+  const [hidden, setHidden] = (0, import_react9.useState)(() => {
+    try {
+      return localStorage.getItem("impakers-debug-hidden") === "1";
+    } catch {
+      return false;
+    }
+  });
   (0, import_react9.useEffect)(() => {
     setAuthenticated(isAuthenticated());
   }, []);
@@ -3688,9 +3773,17 @@ function ImpakersDebugProvider({ endpoint, getUser }) {
       ImpakersDebug._on("impakers-debug:show-auth", () => {
         setShowAuth(true);
         setHidden(false);
+        try {
+          localStorage.removeItem("impakers-debug-hidden");
+        } catch {
+        }
       }),
       ImpakersDebug._on("impakers-debug:open", () => {
         setHidden(false);
+        try {
+          localStorage.removeItem("impakers-debug-hidden");
+        } catch {
+        }
       }),
       ImpakersDebug._on("impakers-debug:deactivate", () => {
         setAuthenticated(false);
@@ -3705,6 +3798,10 @@ function ImpakersDebugProvider({ endpoint, getUser }) {
         e.preventDefault();
         if (hidden) {
           setHidden(false);
+          try {
+            localStorage.removeItem("impakers-debug-hidden");
+          } catch {
+          }
           return;
         }
         if (isAuthenticated()) {
@@ -3726,6 +3823,10 @@ function ImpakersDebugProvider({ endpoint, getUser }) {
   }, []);
   const handleHide = (0, import_react9.useCallback)(() => {
     setHidden(true);
+    try {
+      localStorage.setItem("impakers-debug-hidden", "1");
+    } catch {
+    }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     authenticated && !hidden && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DebugWidget, { endpoint, getUser, onHide: handleHide }),