@popmelt.com/core 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -71,13 +71,20 @@ async function checkBridgeHealth(bridgeUrl = DEFAULT_BRIDGE_URL) {
     return null;
   }
 }
-async function sendToBridge(screenshotBlob, feedbackJson, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model) {
+async function sendToBridge(screenshotBlob, feedbackJson, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model, pastedImages) {
   const formData = new FormData();
   formData.append("screenshot", screenshotBlob, "screenshot.png");
   formData.append("feedback", feedbackJson);
   if (color) formData.append("color", color);
   if (provider) formData.append("provider", provider);
   if (model) formData.append("model", model);
+  if (pastedImages) {
+    for (const [annotationId, blobs] of pastedImages) {
+      for (let i = 0; i < blobs.length; i++) {
+        formData.append(`image-${annotationId}-${i}`, blobs[i], `image-${annotationId}-${i}.png`);
+      }
+    }
+  }
   const res = await fetch(`${bridgeUrl}/send`, {
     method: "POST",
     body: formData
@@ -153,12 +160,94 @@ async function sendPlanExecution(screenshotBlob, planId, tasks, bridgeUrl = DEFA
   }
   return res.json();
 }
-async function sendReplyToBridge(threadId, reply, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model) {
-  const res = await fetch(`${bridgeUrl}/reply`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ threadId, reply, color, provider, model })
-  });
+async function sendReplyToBridge(threadId, reply, bridgeUrl = DEFAULT_BRIDGE_URL, color, provider, model, images) {
+  let res;
+  if (images && images.length > 0) {
+    const formData = new FormData();
+    const placeholder = new Blob([new Uint8Array([
+      137,
+      80,
+      78,
+      71,
+      13,
+      10,
+      26,
+      10,
+      0,
+      0,
+      0,
+      13,
+      73,
+      72,
+      68,
+      82,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      1,
+      8,
+      6,
+      0,
+      0,
+      0,
+      31,
+      21,
+      196,
+      137,
+      0,
+      0,
+      0,
+      10,
+      73,
+      68,
+      65,
+      84,
+      120,
+      156,
+      98,
+      0,
+      0,
+      0,
+      2,
+      0,
+      1,
+      229,
+      39,
+      222,
+      252,
+      0,
+      0,
+      0,
+      0,
+      73,
+      69,
+      78,
+      68,
+      174,
+      66,
+      96,
+      130
+    ])], { type: "image/png" });
+    formData.append("screenshot", placeholder, "screenshot.png");
+    formData.append("feedback", JSON.stringify({ threadId, reply, color, provider, model }));
+    for (let i = 0; i < images.length; i++) {
+      formData.append(`image-reply-${i}`, images[i], `reply-image-${i}.png`);
+    }
+    res = await fetch(`${bridgeUrl}/reply`, {
+      method: "POST",
+      body: formData
+    });
+  } else {
+    res = await fetch(`${bridgeUrl}/reply`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ threadId, reply, color, provider, model })
+    });
+  }
   if (!res.ok) {
     const body = await res.text();
     throw new Error(`Bridge returned ${res.status}: ${body}`);
@@ -526,8 +615,9 @@ function handleFinishPath(state, payload) {
   });
 }
 function handleAddText(state, payload) {
-  const textAnnotation = {
-    id: generateId(),
+  var _a;
+  const textAnnotation = __spreadValues({
+    id: (_a = payload.id) != null ? _a : generateId(),
     type: "text",
     points: [payload.point],
     text: payload.text,
@@ -540,7 +630,7 @@ function handleAddText(state, payload) {
     linkedSelector: payload.linkedSelector,
     linkedAnchor: payload.linkedAnchor,
     elements: payload.elements
-  };
+  }, payload.imageCount ? { imageCount: payload.imageCount } : {});
   const baseState = payload.groupId ? state : pushToUndoStack(state);
   return __spreadProps(__spreadValues({}, baseState), {
     annotations: [...state.annotations, textAnnotation]
@@ -550,7 +640,7 @@ function handleUpdateText(state, payload) {
   const stateWithUndo = pushToUndoStack(state);
   return __spreadProps(__spreadValues({}, stateWithUndo), {
     annotations: state.annotations.map(
-      (a) => a.id === payload.id ? __spreadProps(__spreadValues({}, a), { text: payload.text }) : a
+      (a) => a.id === payload.id ? __spreadValues(__spreadProps(__spreadValues({}, a), { text: payload.text }), payload.imageCount != null ? { imageCount: payload.imageCount } : {}) : a
     )
   });
 }
@@ -884,17 +974,25 @@ function handleSetAnnotationStatus(state, payload) {
 }
 function handleSetAnnotationThread(state, payload) {
   const idSet = new Set(payload.ids);
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const a of state.annotations) {
+    if (idSet.has(a.id) && a.groupId) groupIds.add(a.groupId);
+  }
   return __spreadProps(__spreadValues({}, state), {
     annotations: state.annotations.map(
-      (a) => idSet.has(a.id) ? __spreadProps(__spreadValues({}, a), { threadId: payload.threadId }) : a
+      (a) => idSet.has(a.id) || a.groupId && groupIds.has(a.groupId) ? __spreadProps(__spreadValues({}, a), { threadId: payload.threadId }) : a
     )
   });
 }
 function handleSetAnnotationQuestion(state, payload) {
   const idSet = new Set(payload.ids);
+  const groupIds = /* @__PURE__ */ new Set();
+  for (const a of state.annotations) {
+    if (idSet.has(a.id) && a.groupId) groupIds.add(a.groupId);
+  }
   return __spreadProps(__spreadValues({}, state), {
     annotations: state.annotations.map(
-      (a) => idSet.has(a.id) ? __spreadProps(__spreadValues({}, a), { status: "waiting_input", question: payload.question, threadId: payload.threadId }) : a
+      (a) => idSet.has(a.id) || a.groupId && groupIds.has(a.groupId) ? __spreadProps(__spreadValues({}, a), { status: "waiting_input", question: payload.question, threadId: payload.threadId }) : a
     )
   });
 }
@@ -1917,25 +2015,26 @@ function buildFeedbackData(annotations, styleModifications = [], inspectedElemen
     const text = group.find((a) => a.type === "text");
     if (shape) {
       const linkedSelector = shape.linkedSelector || (text == null ? void 0 : text.linkedSelector);
-      annotationDataList.push(__spreadProps(__spreadValues({
+      const imageCount = (text == null ? void 0 : text.imageCount) || shape.imageCount;
+      annotationDataList.push(__spreadValues(__spreadProps(__spreadValues({
         id: shape.id,
         type: shape.type,
         instruction: text == null ? void 0 : text.text
       }, linkedSelector ? { linkedSelector } : {}), {
         // Use stored elements (captured at creation time) or empty array
         elements: shape.elements || []
-      }));
+      }), imageCount ? { imageCount } : {}));
     }
   }
   for (const annotation of standaloneAnnotations) {
-    annotationDataList.push(__spreadProps(__spreadValues({
+    annotationDataList.push(__spreadValues(__spreadProps(__spreadValues({
       id: annotation.id,
       type: annotation.type,
       instruction: annotation.type === "text" ? annotation.text : void 0
     }, annotation.linkedSelector ? { linkedSelector: annotation.linkedSelector } : {}), {
       // Use stored elements (captured at creation time) or empty array
       elements: annotation.elements || []
-    }));
+    }), annotation.imageCount ? { imageCount: annotation.imageCount } : {}));
   }
   return __spreadValues({
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -2076,7 +2175,8 @@ function drawAnnotationsToCanvas(ctx, annotations, scrollY, dpr) {
         const fontSize = annotation.fontSize || 16;
         ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
         ctx.fillStyle = annotation.color;
-        const lines = annotation.text.split("\n");
+        const displayText = annotation.imageCount && annotation.imageCount > 0 ? `[${annotation.imageCount} image${annotation.imageCount > 1 ? "s" : ""}] ${annotation.text}` : annotation.text;
+        const lines = displayText.split("\n");
         const lineHeight = fontSize * 1.2;
         const padding = 4;
         let maxWidth = 0;
@@ -7025,7 +7125,7 @@ function calculateLinkedPosition(rect, anchor, stackOffset = 0) {
   const y = anchor === "top-left" ? rect.top + window.scrollY - BADGE_HEIGHT - stackOffset * BADGE_HEIGHT + PADDING : rect.bottom + window.scrollY + PADDING - 1 + stackOffset * BADGE_HEIGHT;
   return { x, y };
 }
-function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds, inFlightStyleSelectors, inFlightSelectorColors, onReply, onViewThread, isThreadPanelOpen, activePlan }) {
+function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds, inFlightStyleSelectors, inFlightSelectorColors, onAttachImages, onReply, onViewThread, activePlan }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { canvasRef, redrawAll, resizeCanvas } = useCanvasDrawing();
   const [isDrawing, setIsDrawing] = useState12(false);
@@ -7722,26 +7822,39 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
     return () => window.removeEventListener("mousemove", handleMouseMove);
   }, [activeText, findTextAtPoint]);
   const commitActiveText = useCallback5(() => {
+    var _a2;
     if (!activeText) return;
-    if (activeText.text.trim()) {
+    const imageCount = ((_a2 = activeText.images) == null ? void 0 : _a2.length) || 0;
+    if (activeText.text.trim() || imageCount > 0) {
       if (activeText.isNew) {
+        const annotationId = generateId();
         dispatch({
           type: "ADD_TEXT",
-          payload: {
+          payload: __spreadValues({
             point: activeText.point,
-            text: activeText.text,
+            text: activeText.text || (imageCount > 0 ? `[${imageCount} image${imageCount > 1 ? "s" : ""}]` : ""),
             fontSize: activeText.fontSize,
+            id: annotationId,
             groupId: activeText.groupId,
             linkedSelector: activeText.linkedSelector,
             linkedAnchor: activeText.linkedAnchor,
             elements: activeText.elements
-          }
+          }, imageCount > 0 ? { imageCount } : {})
         });
+        if (imageCount > 0 && activeText.images && onAttachImages) {
+          onAttachImages(annotationId, activeText.images);
+        }
       } else {
         dispatch({
           type: "UPDATE_TEXT",
-          payload: { id: activeText.id, text: activeText.text }
+          payload: __spreadValues({
+            id: activeText.id,
+            text: activeText.text || (imageCount > 0 ? `[${imageCount} image${imageCount > 1 ? "s" : ""}]` : "")
+          }, imageCount > 0 ? { imageCount } : {})
         });
+        if (imageCount > 0 && activeText.images && onAttachImages) {
+          onAttachImages(activeText.id, activeText.images);
+        }
       }
     } else if (!activeText.isNew) {
       dispatch({
@@ -7750,7 +7863,7 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       });
     }
     setActiveText(null);
-  }, [activeText, dispatch]);
+  }, [activeText, dispatch, onAttachImages]);
   const snapPadding = useCallback5((value) => {
     for (let i = 0; i < PADDING_SNAP_STEPS2.length - 1; i++) {
       const lo = PADDING_SNAP_STEPS2[i];
@@ -8841,6 +8954,24 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
       commitActiveText();
     }
   }, [commitActiveText]);
+  const handleTextPaste = useCallback5((e) => {
+    if (!activeText) return;
+    const items = e.clipboardData.items;
+    const imageBlobs = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageBlobs.push(file);
+      }
+    }
+    if (imageBlobs.length > 0) {
+      e.preventDefault();
+      setActiveText((prev) => prev ? __spreadProps(__spreadValues({}, prev), {
+        images: [...prev.images || [], ...imageBlobs]
+      }) : null);
+    }
+  }, [activeText]);
   const handleContextMenu = useCallback5((e) => {
     if (state.activeTool !== "hand" || !state.isAnnotating) return;
     e.preventDefault();
@@ -9030,10 +9161,36 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
           value: activeText.text,
           onChange: handleTextChange,
           onKeyDown: handleTextKeyDown,
+          onPaste: handleTextPaste,
           onBlur: commitActiveText,
           placeholder: "Type here...",
           style: textInputStyle
         }
+      ),
+      activeText.images && activeText.images.length > 0 && /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          "data-devtools": true,
+          style: {
+            position: "fixed",
+            left: activeText.point.x - PADDING - scroll.x,
+            top: activeText.point.y - PADDING - scroll.y - 20,
+            zIndex: 1e4,
+            fontSize: 11,
+            fontFamily: "system-ui, sans-serif",
+            color: "#fff",
+            backgroundColor: "rgba(0,0,0,0.7)",
+            padding: "2px 6px",
+            borderRadius: 3,
+            whiteSpace: "nowrap"
+          },
+          children: [
+            activeText.images.length,
+            " image",
+            activeText.images.length > 1 ? "s" : "",
+            " attached"
+          ]
+        }
       )
     ] }),
     state.isAnnotating && state.activeTool !== "hand" && state.styleModifications.length > 0 && /* @__PURE__ */ jsx10(
@@ -9054,29 +9211,16 @@ function AnnotationCanvas({ state, dispatch, onScreenshot, inFlightAnnotationIds
         accentColor: state.activeColor
       }
     ),
-    state.isAnnotating && inFlightAnnotationIds && inFlightAnnotationIds.size > 0 && /* @__PURE__ */ jsx10(
-      ThinkingSpinners,
-      {
-        annotations: state.annotations,
-        inFlightIds: inFlightAnnotationIds,
-        scrollX: scroll.x,
-        scrollY: scroll.y,
-        annotationGroupMap,
-        onViewThread,
-        onSelectAnnotation: selectAnnotation
-      }
-    ),
     state.isAnnotating && /* @__PURE__ */ jsx10(
-      ResolutionBadges,
+      AnnotationBadges,
       {
         annotations: state.annotations,
         supersededAnnotations,
+        inFlightIds: inFlightAnnotationIds,
         scrollX: scroll.x,
         scrollY: scroll.y,
         annotationGroupMap,
-        onReply,
         onViewThread,
-        isThreadPanelOpen,
         onSelectAnnotation: selectAnnotation
       }
     ),
@@ -9262,8 +9406,9 @@ var THINKING_WORDS2 = [
   "riffing"
 ];
 var WORD_INTERVAL2 = 3e3;
-function ThinkingSpinners({
+function AnnotationBadges({
   annotations,
+  supersededAnnotations,
   inFlightIds,
   scrollX,
   scrollY,
@@ -9271,10 +9416,12 @@ function ThinkingSpinners({
   onViewThread,
   onSelectAnnotation
 }) {
-  var _a;
+  var _a, _b;
   const [charIndex, setCharIndex] = useState12(0);
   const [wordIndex, setWordIndex] = useState12(() => Math.floor(Math.random() * THINKING_WORDS2.length));
+  const hasInFlight = !!(inFlightIds && inFlightIds.size > 0);
   useEffect15(() => {
+    if (!hasInFlight) return;
     const charTimer = setInterval(() => {
       setCharIndex((i) => (i + 1) % SPINNER_FRAME_COUNT2);
     }, SPINNER_INTERVAL2);
@@ -9285,14 +9432,25 @@ function ThinkingSpinners({
       clearInterval(charTimer);
       clearInterval(wordTimer);
     };
-  }, []);
-  const spinnerPositions = [];
+  }, [hasInFlight]);
+  const badges = [];
   for (const annotation of annotations) {
     if (annotation.type !== "text" || !annotation.text || !annotation.points[0]) continue;
-    const isInFlight = inFlightIds.has(annotation.id) || annotation.groupId && annotations.some(
-      (a) => a.groupId === annotation.groupId && inFlightIds.has(a.id)
+    if (supersededAnnotations.has(annotation)) continue;
+    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
+    const isInFlight = !!(inFlightIds && (inFlightIds.has(annotation.id) || groupAnns.some((a) => inFlightIds.has(a.id))));
+    const status = (_a = annotation.status) != null ? _a : "pending";
+    const groupMateResolved = groupAnns.some(
+      (a) => a.status === "resolved" || a.status === "needs_review"
     );
-    if (!isInFlight) continue;
+    const hasThread = groupAnns.some((a) => a.threadId);
+    if (!isInFlight && status !== "resolved" && status !== "needs_review" && !groupMateResolved && !hasThread) continue;
+    const threadId = annotation.threadId || ((_b = groupAnns.find((a) => a.threadId)) == null ? void 0 : _b.threadId);
+    const isNeedsReview = status === "needs_review" || groupAnns.some((a) => a.status === "needs_review");
+    const replyCount = groupAnns.reduce((n, a) => {
+      var _a2;
+      return n + ((_a2 = a.replyCount) != null ? _a2 : 0);
+    }, 0) || 1;
     const point = annotation.points[0];
     const fontSize = annotation.fontSize || 12;
     const lineHeightPx = fontSize * LINE_HEIGHT;
@@ -9305,26 +9463,24 @@ function ThinkingSpinners({
     ctx.font = `${fontSize}px ${FONT_FAMILY}`;
     const maxWidth = Math.min(MAX_DISPLAY_WIDTH, Math.max(...displayLines.map((line) => ctx.measureText(line).width)));
     const totalHeight = displayLines.length * lineHeightPx;
-    const annotationHeight = totalHeight + PADDING * 2;
-    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-    const threadId = annotation.threadId || ((_a = groupAnns.find((a) => a.threadId)) == null ? void 0 : _a.threadId);
-    spinnerPositions.push({
+    badges.push({
       id: annotation.id,
       threadId,
       x: point.x + maxWidth + PADDING,
-      // right edge of text bg
       y: point.y - PADDING,
-      // top of text bg
-      size: annotationHeight,
-      color: annotation.color
+      size: totalHeight + PADDING * 2,
+      color: annotation.color,
+      isInFlight,
+      isNeedsReview,
+      replyCount
     });
   }
-  if (spinnerPositions.length === 0) return null;
+  if (badges.length === 0) return null;
   const clickable = !!onViewThread;
-  return /* @__PURE__ */ jsx10(Fragment6, { children: spinnerPositions.map((pos, i) => /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx10(Fragment6, { children: badges.map((pos) => /* @__PURE__ */ jsx10(
     "div",
     {
-      "data-devtools": true,
+      "data-devtools": "annotation-badge",
       onClick: clickable && pos.threadId ? () => {
         onSelectAnnotation == null ? void 0 : onSelectAnnotation(pos.id);
         onViewThread(pos.threadId);
@@ -9337,7 +9493,7 @@ function ThinkingSpinners({
         display: "flex",
         alignItems: "center",
         pointerEvents: clickable ? "auto" : "none",
-        cursor: clickable ? "pointer" : void 0,
+        cursor: clickable && pos.threadId ? "pointer" : void 0,
         zIndex: 9999,
         backgroundColor: pos.color,
         fontFamily: FONT_FAMILY,
@@ -9348,7 +9504,7 @@ function ThinkingSpinners({
         gap: 4,
         whiteSpace: "nowrap"
       },
-      children: [
+      children: pos.isInFlight ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
         /* @__PURE__ */ jsx10("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", style: { verticalAlign: "middle" }, children: charIndex === 1 ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
           /* @__PURE__ */ jsx10("circle", { cx: "7", cy: "7", r: "2" }),
           /* @__PURE__ */ jsx10("circle", { cx: "17", cy: "7", r: "2" }),
@@ -9361,287 +9517,23 @@ function ThinkingSpinners({
           /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "18", r: "2" })
         ] }) }),
         /* @__PURE__ */ jsx10("span", { style: { opacity: 0.7 }, children: THINKING_WORDS2[wordIndex] })
-      ]
-    },
-    i
-  )) });
-}
-function ResolutionBadges({
-  annotations,
-  supersededAnnotations,
-  scrollX,
-  scrollY,
-  annotationGroupMap,
-  onReply,
-  onViewThread,
-  isThreadPanelOpen,
-  onSelectAnnotation
-}) {
-  var _a;
-  const badgePositions = [];
-  for (const annotation of annotations) {
-    if (annotation.type !== "text" || !annotation.text || !annotation.points[0]) continue;
-    if (supersededAnnotations.has(annotation)) continue;
-    const status = (_a = annotation.status) != null ? _a : "pending";
-    const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-    const groupMateResolved = groupAnns.some(
-      (a) => a.status === "resolved" || a.status === "needs_review"
-    );
-    const hasThread = groupAnns.some((a) => a.threadId);
-    if (status !== "resolved" && status !== "needs_review" && !groupMateResolved && !hasThread) continue;
-    const isNeedsReview = status === "needs_review" || groupAnns.some((a) => a.status === "needs_review");
-    const point = annotation.points[0];
-    const fontSize = annotation.fontSize || 12;
-    const lineHeightPx = fontSize * LINE_HEIGHT;
-    const lines = annotation.text.split("\n");
-    const groupNumber = annotationGroupMap.get(annotation.id);
-    const displayLines = groupNumber !== void 0 ? [groupNumber + ". " + (lines[0] || ""), ...lines.slice(1)] : lines;
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) continue;
-    ctx.font = `${fontSize}px ${FONT_FAMILY}`;
-    const maxWidth = Math.min(MAX_DISPLAY_WIDTH, Math.max(...displayLines.map((line) => ctx.measureText(line).width)));
-    const totalHeight = displayLines.length * lineHeightPx;
-    const annotationHeight = totalHeight + PADDING * 2;
-    badgePositions.push({
-      annotation,
-      x: point.x + maxWidth + PADDING,
-      y: point.y - PADDING,
-      size: annotationHeight,
-      isNeedsReview: !!isNeedsReview,
-      groupNumber
-    });
-  }
-  if (badgePositions.length === 0) return null;
-  return /* @__PURE__ */ jsx10(Fragment6, { children: badgePositions.map(({ annotation, x, y, size, isNeedsReview, groupNumber }) => /* @__PURE__ */ jsx10(
-    ResolutionBadge,
-    {
-      annotation,
-      annotations,
-      x: x - scrollX,
-      y: y - scrollY,
-      size,
-      isNeedsReview: !!isNeedsReview,
-      groupNumber,
-      onReply,
-      onViewThread,
-      isThreadPanelOpen,
-      onSelectAnnotation
+      ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+        pos.isNeedsReview ? /* @__PURE__ */ jsx10("span", { style: { fontWeight: 700 }, children: "?" }) : /* @__PURE__ */ jsxs9("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "3", x2: "12", y2: "9" }),
+          /* @__PURE__ */ jsx10("line", { x1: "12", y1: "15", x2: "12", y2: "21" }),
+          /* @__PURE__ */ jsx10("line", { x1: "3", y1: "12", x2: "9", y2: "12" }),
+          /* @__PURE__ */ jsx10("line", { x1: "15", y1: "12", x2: "21", y2: "12" })
+        ] }),
+        /* @__PURE__ */ jsxs9("span", { style: { opacity: 0.7 }, children: [
+          pos.replyCount,
+          " ",
+          pos.replyCount === 1 ? "reply" : "replies"
+        ] })
+      ] })
     },
-    `resolution-${annotation.id}`
+    pos.id
   )) });
 }
-function ResolutionBadge({
-  annotation,
-  annotations,
-  x,
-  y,
-  size,
-  isNeedsReview,
-  groupNumber,
-  onReply,
-  onViewThread,
-  isThreadPanelOpen,
-  onSelectAnnotation
-}) {
-  var _a, _b;
-  const [expanded, setExpanded] = useState12(false);
-  const [replyText, setReplyText] = useState12("");
-  const textareaRef = useRef5(null);
-  const panelRef = useRef5(null);
-  useEffect15(() => {
-    if (expanded && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [expanded]);
-  useEffect15(() => {
-    if (!expanded) return;
-    const handleClickOutside = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        setExpanded(false);
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") setExpanded(false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [expanded]);
-  const groupAnnotations = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-  const textAnn = groupAnnotations.find((a) => a.type === "text");
-  const userMessage = (textAnn == null ? void 0 : textAnn.text) || "(no text)";
-  const summary = (_a = groupAnnotations.find((a) => a.resolutionSummary)) == null ? void 0 : _a.resolutionSummary;
-  const threadId = (_b = groupAnnotations.find((a) => a.threadId)) == null ? void 0 : _b.threadId;
-  const handleSubmit = useCallback5(() => {
-    if (!replyText.trim() || !threadId || !onReply) return;
-    onReply(threadId, replyText.trim());
-    setReplyText("");
-    setExpanded(false);
-  }, [replyText, threadId, onReply]);
-  const handleKeyDown = useCallback5((e) => {
-    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  }, [handleSubmit]);
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      ref: panelRef,
-      "data-devtools": "resolution-badge",
-      style: {
-        position: "fixed",
-        left: x,
-        top: y,
-        zIndex: expanded ? 10002 : 9999,
-        pointerEvents: "auto"
-      },
-      children: [
-        !expanded && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            onClick: () => {
-              onSelectAnnotation == null ? void 0 : onSelectAnnotation(annotation.id);
-              if (threadId && onViewThread) {
-                onViewThread(threadId);
-              }
-            },
-            style: {
-              height: size,
-              display: "flex",
-              alignItems: "center",
-              cursor: "pointer",
-              backgroundColor: annotation.color,
-              fontFamily: FONT_FAMILY,
-              fontSize: 12,
-              color: "#ffffff",
-              userSelect: "none",
-              padding: `0 ${PADDING}px`,
-              gap: 4,
-              whiteSpace: "nowrap"
-            },
-            children: [
-              isNeedsReview ? /* @__PURE__ */ jsx10("span", { style: { fontWeight: 700 }, children: "?" }) : /* @__PURE__ */ jsxs9("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: [
-                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "3", x2: "12", y2: "9" }),
-                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "15", x2: "12", y2: "21" }),
-                /* @__PURE__ */ jsx10("line", { x1: "3", y1: "12", x2: "9", y2: "12" }),
-                /* @__PURE__ */ jsx10("line", { x1: "15", y1: "12", x2: "21", y2: "12" })
-              ] }),
-              /* @__PURE__ */ jsx10("span", { style: { opacity: 0.7 }, children: (() => {
-                const groupAnns = annotation.groupId ? annotations.filter((a) => a.groupId === annotation.groupId) : [annotation];
-                const count = groupAnns.reduce((n, a) => {
-                  var _a2;
-                  return n + ((_a2 = a.replyCount) != null ? _a2 : 0);
-                }, 0) || 1;
-                return `${count} ${count === 1 ? "reply" : "replies"}`;
-              })() })
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            style: {
-              minWidth: 280,
-              maxWidth: 400,
-              backgroundColor: "#ffffff",
-              fontFamily: FONT_FAMILY,
-              fontSize: 12,
-              color: "#1f2937",
-              border: "1px solid rgba(0, 0, 0, 0.1)"
-            },
-            children: [
-              /* @__PURE__ */ jsx10("div", { style: {
-                padding: `${PADDING + 2}px ${PADDING + 4}px`,
-                backgroundColor: annotation.color,
-                color: "#ffffff",
-                lineHeight: 1.4
-              }, children: userMessage }),
-              summary && /* @__PURE__ */ jsx10("div", { style: {
-                padding: `${PADDING + 2}px ${PADDING + 4}px`,
-                lineHeight: 1.4,
-                borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
-              }, children: summary }),
-              threadId && /* @__PURE__ */ jsxs9("div", { style: { padding: PADDING }, children: [
-                onReply && /* @__PURE__ */ jsxs9(Fragment6, { children: [
-                  /* @__PURE__ */ jsx10(
-                    "textarea",
-                    {
-                      ref: textareaRef,
-                      value: replyText,
-                      onChange: (e) => setReplyText(e.target.value),
-                      onKeyDown: handleKeyDown,
-                      placeholder: "Reply...",
-                      style: {
-                        width: "100%",
-                        minHeight: 40,
-                        padding: PADDING,
-                        fontSize: 12,
-                        fontFamily: FONT_FAMILY,
-                        backgroundColor: "rgba(0, 0, 0, 0.04)",
-                        color: "#1f2937",
-                        border: "1px solid rgba(0, 0, 0, 0.1)",
-                        borderRadius: 0,
-                        outline: "none",
-                        resize: "vertical",
-                        lineHeight: 1.4,
-                        boxSizing: "border-box"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx10("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 4 }, children: /* @__PURE__ */ jsx10(
-                    "button",
-                    {
-                      onClick: handleSubmit,
-                      disabled: !replyText.trim(),
-                      style: {
-                        padding: "4px 12px",
-                        fontSize: 11,
-                        fontFamily: FONT_FAMILY,
-                        fontWeight: 600,
-                        backgroundColor: replyText.trim() ? annotation.color : "rgba(0,0,0,0.1)",
-                        color: replyText.trim() ? "#ffffff" : "rgba(0,0,0,0.3)",
-                        border: "none",
-                        cursor: replyText.trim() ? "pointer" : "default"
-                      },
-                      children: "Send \u2318\u23CE"
-                    }
-                  ) })
-                ] }),
-                onViewThread && /* @__PURE__ */ jsx10(
-                  "button",
-                  {
-                    onClick: () => {
-                      onViewThread(threadId);
-                      setExpanded(false);
-                    },
-                    style: {
-                      width: "100%",
-                      padding: "5px 0",
-                      fontSize: 11,
-                      fontFamily: FONT_FAMILY,
-                      fontWeight: 500,
-                      backgroundColor: "transparent",
-                      color: "#6b7280",
-                      border: "1px solid rgba(0, 0, 0, 0.1)",
-                      cursor: "pointer",
-                      marginTop: onReply ? 8 : 0
-                    },
-                    children: "View conversation \u2192"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 function PlanWaitingBadges({
   annotations,
   supersededAnnotations,
@@ -10952,7 +10844,9 @@ function AnnotationToolbar({
         "div",
         {
           id: "devtools-toolbar",
-          style: __spreadProps(__spreadValues({}, toolbarStyle), { overflow: "visible" }),
+          style: __spreadProps(__spreadValues({}, toolbarStyle), { overflow: "visible", opacity: 0.5, transition: "opacity 150ms ease" }),
+          onMouseEnter: (e) => e.currentTarget.style.opacity = "1",
+          onMouseLeave: (e) => e.currentTarget.style.opacity = "0.5",
           children: /* @__PURE__ */ jsx12(
             "button",
             {
@@ -11837,13 +11731,10 @@ function ThinkingBadge({ color }) {
     /* @__PURE__ */ jsx15("span", { style: { fontSize: 11, color: "#9ca3af", fontStyle: "italic" }, children: THINKING_WORDS3[wordIndex] })
   ] });
 }
-function formatToolStep(events) {
+function formatToolEvent(event) {
   var _a;
-  const toolEvents = events.filter((e) => e.type === "tool_use");
-  if (toolEvents.length === 0) return null;
-  const last = toolEvents[toolEvents.length - 1];
-  const tool = String(last.data.tool || "");
-  const file = last.data.file ? String(last.data.file) : null;
+  const tool = String(event.data.tool || "");
+  const file = event.data.file ? String(event.data.file) : null;
   const basename = file ? (_a = file.split("/").pop()) != null ? _a : file : null;
   switch (tool) {
     case "Read":
@@ -11866,6 +11757,34 @@ function formatToolStep(events) {
       return tool ? `Using ${tool}` : null;
   }
 }
+function buildStreamSegments(events) {
+  const segments = [];
+  for (const e of events) {
+    if (e.type === "tool_use") {
+      const label = formatToolEvent(e);
+      if (label) segments.push({ kind: "tool", label });
+    } else if (e.type === "delta") {
+      const text = String(e.data.text || "");
+      if (!text) continue;
+      const last = segments[segments.length - 1];
+      if (last && last.kind === "text") {
+        last.text += text;
+      } else {
+        segments.push({ kind: "text", text });
+      }
+    } else if (e.type === "thinking") {
+      const text = String(e.data.text || "");
+      if (!text) continue;
+      const last = segments[segments.length - 1];
+      if (last && last.kind === "thinking") {
+        last.text += text;
+      } else {
+        segments.push({ kind: "thinking", text });
+      }
+    }
+  }
+  return segments;
+}
 function ThreadPanel({
   threadId,
   bridgeUrl,
@@ -11887,6 +11806,7 @@ function ThreadPanel({
   const [messages, setMessages] = useState15([]);
   const [loading, setLoading] = useState15(true);
   const [replyText, setReplyText] = useState15("");
+  const [replyImages, setReplyImages] = useState15([]);
   const scrollRef = useRef9(null);
   const panelRef = useRef9(null);
   const prevStreamingRef = useRef9(isStreaming);
@@ -11907,11 +11827,12 @@ function ThreadPanel({
     }
     prevStreamingRef.current = isStreaming;
   }, [isStreaming, fetchThread]);
+  const streamSegments = streamingEvents ? buildStreamSegments(streamingEvents) : [];
   useEffect19(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-  }, [messages, streamingResponse, streamingThinking, isStreaming]);
+  }, [messages, streamSegments.length, isStreaming]);
   useEffect19(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
@@ -11922,24 +11843,38 @@ function ThreadPanel({
   const handleSubmit = useCallback8(() => {
     if (!replyText.trim() || !onReply) return;
     const text = replyText.trim();
+    const images = replyImages.length > 0 ? replyImages : void 0;
     setMessages((prev) => [...prev, {
       role: "human",
       timestamp: Date.now(),
       jobId: "pending",
-      replyToQuestion: text
+      replyToQuestion: images ? `${text} [${images.length} image${images.length > 1 ? "s" : ""}]` : text
     }]);
-    onReply(threadId, text);
+    onReply(threadId, text, images);
     setReplyText("");
-  }, [replyText, threadId, onReply]);
+    setReplyImages([]);
+  }, [replyText, replyImages, threadId, onReply]);
+  const handlePaste = useCallback8((e) => {
+    const items = e.clipboardData.items;
+    const imageBlobs = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) imageBlobs.push(file);
+      }
+    }
+    if (imageBlobs.length > 0) {
+      e.preventDefault();
+      setReplyImages((prev) => [...prev, ...imageBlobs]);
+    }
+  }, []);
   const handleKeyDown = useCallback8((e) => {
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       handleSubmit();
     }
   }, [handleSubmit]);
-  const toolStep = streamingEvents ? formatToolStep(streamingEvents) : null;
-  const thinkingText = streamingThinking || "";
-  const responseText = streamingResponse ? stripInternalTags(streamingResponse) : "";
   return /* @__PURE__ */ jsxs12(Fragment10, { children: [
     /* @__PURE__ */ jsx15(
       "div",
@@ -11987,7 +11922,9 @@ function ThreadPanel({
               const isHuman = msg.role === "human";
               const text = isHuman ? msg.replyToQuestion || msg.feedbackSummary || "(annotation)" : stripInternalTags(msg.responseText || "");
               const questionText = !isHuman ? msg.question : void 0;
-              if (!text && !questionText) return null;
+              const hasResolutions = !isHuman && msg.resolutions && msg.resolutions.length > 0;
+              const hasToolsUsed = !isHuman && msg.toolsUsed && msg.toolsUsed.length > 0;
+              if (!text && !questionText && !hasResolutions) return null;
               const isLatest = i === messages.length - 1;
               return /* @__PURE__ */ jsxs12(
                 "div",
@@ -12020,7 +11957,21 @@ function ThreadPanel({
                       marginTop: text ? 4 : 0,
                       lineHeight: 1.5,
                       wordBreak: "break-word"
-                    }, children: renderMarkdown(questionText) })
+                    }, children: renderMarkdown(questionText) }),
+                    (hasToolsUsed || hasResolutions) && /* @__PURE__ */ jsxs12("div", { style: {
+                      marginTop: text || questionText ? 6 : 0,
+                      padding: "4px 8px",
+                      backgroundColor: "rgba(0, 0, 0, 0.03)",
+                      fontSize: 11,
+                      lineHeight: 1.5,
+                      color: "#6b7280"
+                    }, children: [
+                      hasToolsUsed && /* @__PURE__ */ jsx15("div", { style: { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 10 }, children: msg.toolsUsed.map((t, j) => /* @__PURE__ */ jsx15("div", { children: t }, j)) }),
+                      hasResolutions && msg.resolutions.map((r, j) => /* @__PURE__ */ jsxs12("div", { style: { marginTop: hasToolsUsed ? 4 : 0 }, children: [
+                        /* @__PURE__ */ jsx15("span", { style: { color: r.status === "resolved" ? "#10b981" : "#f59e0b" }, children: r.status === "resolved" ? "Done" : "Needs review" }),
+                        r.summary ? ` \u2014 ${r.summary}` : ""
+                      ] }, j))
+                    ] })
                   ]
                 },
                 `${msg.jobId}-${i}`
@@ -12117,39 +12068,102 @@ function ThreadPanel({
                 /* @__PURE__ */ jsx15("span", { style: { fontWeight: 600, fontSize: 11, color: "#6b7280" }, children: "Claude Code" }),
                 /* @__PURE__ */ jsx15("span", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx15(ThinkingBadge, { color: accentColor }) })
               ] }),
-              toolStep && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                marginBottom: 4,
-                fontSize: 11,
-                color: "#9ca3af",
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-              }, children: toolStep }),
-              thinkingText && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                marginBottom: 4,
-                fontSize: 11,
-                color: "#9ca3af",
-                fontStyle: "italic",
-                lineHeight: 1.4,
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-                maxHeight: 120,
-                overflowY: "auto"
-              }, children: thinkingText }),
-              responseText && /* @__PURE__ */ jsx15("div", { style: {
-                paddingLeft: 12,
-                lineHeight: 1.5,
-                wordBreak: "break-word"
-              }, children: renderMarkdown(responseText) })
+              streamSegments.map((seg, i) => {
+                if (seg.kind === "tool") {
+                  return /* @__PURE__ */ jsx15(
+                    "div",
+                    {
+                      style: {
+                        paddingLeft: 12,
+                        fontSize: 11,
+                        color: "#9ca3af",
+                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                        lineHeight: 1.6
+                      },
+                      children: seg.label
+                    },
+                    i
+                  );
+                }
+                if (seg.kind === "thinking") {
+                  return /* @__PURE__ */ jsx15(
+                    "div",
+                    {
+                      style: {
+                        paddingLeft: 12,
+                        marginTop: 2,
+                        marginBottom: 2,
+                        fontSize: 11,
+                        color: "#9ca3af",
+                        fontStyle: "italic",
+                        lineHeight: 1.4,
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-word",
+                        maxHeight: 80,
+                        overflowY: "auto"
+                      },
+                      children: seg.text
+                    },
+                    i
+                  );
+                }
+                const stripped = stripInternalTags(seg.text);
+                if (!stripped) return null;
+                return /* @__PURE__ */ jsx15(
+                  "div",
+                  {
+                    style: {
+                      paddingLeft: 12,
+                      marginTop: 2,
+                      marginBottom: 2,
+                      lineHeight: 1.5,
+                      wordBreak: "break-word"
+                    },
+                    children: renderMarkdown(stripped)
+                  },
+                  i
+                );
+              })
             ] })
           ] }),
           onReply && /* @__PURE__ */ jsxs12("div", { style: replyAreaStyle, children: [
+            replyImages.length > 0 && /* @__PURE__ */ jsxs12("div", { style: {
+              fontSize: 11,
+              color: "#6b7280",
+              marginBottom: 4,
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            }, children: [
+              /* @__PURE__ */ jsxs12("span", { children: [
+                replyImages.length,
+                " image",
+                replyImages.length > 1 ? "s" : "",
+                " attached"
+              ] }),
+              /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  onClick: () => setReplyImages([]),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: 11,
+                    color: "#9ca3af",
+                    padding: "0 2px"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx15(
               "textarea",
               {
                 value: replyText,
                 onChange: (e) => setReplyText(e.target.value),
                 onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
                 placeholder: "Reply... (Cmd+Enter to send)",
                 style: {
                   width: "100%",
@@ -12223,6 +12237,7 @@ function PopmeltProvider({
   var _a, _b, _c, _d, _e;
   const [state, dispatch] = useAnnotationState();
   const bridge = useBridgeConnection(bridgeUrl);
+  const annotationImagesRef = useRef10(/* @__PURE__ */ new Map());
   const [provider, setProvider] = useState16(() => {
     if (typeof window === "undefined") return "claude";
     return localStorage.getItem(PROVIDER_STORAGE_KEY) || "claude";
@@ -12556,6 +12571,10 @@ function PopmeltProvider({
       }
     }
   }, [activePlan == null ? void 0 : activePlan.planId, state.activeColor, dispatch]);
+  const handleAttachImages = useCallback9((annotationId, images) => {
+    const existing = annotationImagesRef.current.get(annotationId) || [];
+    annotationImagesRef.current.set(annotationId, [...existing, ...images]);
+  }, []);
   const handleSendToClaude = useCallback9(async () => {
     const canvas = document.getElementById("devtools-canvas");
     if (!canvas) return false;
@@ -12572,9 +12591,37 @@ function PopmeltProvider({
     if (!stitchedBlob) return false;
     const feedbackData = buildFeedbackData(activeAnnotations, state.styleModifications);
     const feedbackJson = JSON.stringify(feedbackData);
+    const pastedImages = /* @__PURE__ */ new Map();
+    for (const ann of activeAnnotations) {
+      const blobs2 = annotationImagesRef.current.get(ann.id);
+      if (blobs2 && blobs2.length > 0) {
+        pastedImages.set(ann.id, blobs2);
+      }
+      if (ann.groupId) {
+        for (const mate of activeAnnotations) {
+          if (mate.groupId === ann.groupId && mate.id !== ann.id) {
+            const mateBlobs = annotationImagesRef.current.get(mate.id);
+            if (mateBlobs && mateBlobs.length > 0) {
+              pastedImages.set(mate.id, mateBlobs);
+            }
+          }
+        }
+      }
+    }
     try {
       const hexColor = cssColorToHex(state.activeColor);
-      const { jobId, threadId: assignedThreadId } = await sendToBridge(stitchedBlob, feedbackJson, bridgeUrl, hexColor, provider, currentModel.id);
+      const { jobId, threadId: assignedThreadId } = await sendToBridge(
+        stitchedBlob,
+        feedbackJson,
+        bridgeUrl,
+        hexColor,
+        provider,
+        currentModel.id,
+        pastedImages.size > 0 ? pastedImages : void 0
+      );
+      for (const annId of pastedImages.keys()) {
+        annotationImagesRef.current.delete(annId);
+      }
       const sentAnnotationIds = activeAnnotations.map((a) => a.id);
       const sentStyleSelectors = state.styleModifications.filter((m) => !m.captured).map((m) => m.selector);
       setInFlightJobs((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -12586,6 +12633,9 @@ function PopmeltProvider({
         }
       }));
       dispatch({ type: "MARK_CAPTURED" });
+      if (assignedThreadId && sentAnnotationIds.length > 0) {
+        dispatch({ type: "SET_ANNOTATION_THREAD", payload: { ids: sentAnnotationIds, threadId: assignedThreadId } });
+      }
       const hueMatch = state.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);
       const currentHue = (hueMatch == null ? void 0 : hueMatch[1]) ? parseFloat(hueMatch[1]) : 29;
       const nextHue = (currentHue + 60) % 360;
@@ -12596,10 +12646,10 @@ function PopmeltProvider({
       return false;
     }
   }, [state.annotations, state.styleModifications, state.activeColor, dispatch, bridgeUrl, provider, currentModel.id]);
-  const handleReply = useCallback9(async (threadId, reply) => {
+  const handleReply = useCallback9(async (threadId, reply, images) => {
     try {
       const hexColor = cssColorToHex(state.activeColor);
-      const { jobId } = await sendReplyToBridge(threadId, reply, bridgeUrl, hexColor, provider, currentModel.id);
+      const { jobId } = await sendReplyToBridge(threadId, reply, bridgeUrl, hexColor, provider, currentModel.id, images);
       setInFlightJobs((prev) => __spreadProps(__spreadValues({}, prev), {
         [jobId]: {
           annotationIds: [],
@@ -12856,9 +12906,9 @@ function PopmeltProvider({
         inFlightAnnotationIds,
         inFlightStyleSelectors,
         inFlightSelectorColors,
+        onAttachImages: handleAttachImages,
         onReply: bridge.isConnected ? handleReply : void 0,
         onViewThread: bridge.isConnected ? handleViewThread : void 0,
-        isThreadPanelOpen: openThreadId !== null,
         activePlan
       }
     ),