agent-canvas 0.1.9 → 0.1.10

package/daemon/client/PlanRenderer.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState, useRef, useContext, useCallback, useMemo } from "react";
+import React, { useEffect, useState, useRef, useContext, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { SessionContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
-import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
 import { extractContext } from "./annotationContext";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { generateAnnotationId } from "./utils";
+import { useTextAnnotation } from "./useTextAnnotation";
 
 /** All navigable blocks (keyboard arrows) */
 const BLOCK_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='table'] tbody tr, [data-md='callout'], [data-md='note'], [data-md='checklist-item'], [data-md='choice-option'], [data-md='multichoice-option'], [data-md='userinput'], [data-md='rangeinput'], [data-md='image']";
@@ -22,13 +22,9 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
-  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
   const [editingAnn, setEditingAnn] = useState<{ id: string; note: string } | null>(null);
 
-  // Popover state
-  const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
-  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx: any } | null>(null);
-
   // Block annotation hover state
   const [hoveredBlock, setHoveredBlock] = useState<HTMLElement | null>(null);
   const [blockPopover, setBlockPopover] = useState<{ anchorEl: HTMLElement; snippet: string; annId?: string } | null>(null);
@@ -46,71 +42,15 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
       .catch((e) => { setError(e.message); setLoading(false); });
   }, [sessionId, revision]);
 
-  // Restore persisted annotation marks after plan renders
-  useEffect(() => {
-    if (!PlanComponent || !containerRef.current) return;
-    // Small delay to ensure the plan DOM is fully rendered
-    const timer = setTimeout(() => {
-      if (containerRef.current) {
-        restoreMarks(containerRef.current, annotations);
-      }
-    }, 50);
-    return () => clearTimeout(timer);
-  }, [PlanComponent]);
-
-  // Update mark active states when activeAnnotationId changes
-  const prevActiveRef = useRef<string | null>(null);
-  useEffect(() => {
-    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
-    prevActiveRef.current = activeAnnotationId;
-  }, [activeAnnotationId]);
-
-  // Click handler for marks in plan
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleClick = (e: MouseEvent) => {
-      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
-      if (!mark) return;
-      e.stopPropagation();
-      const annId = mark.getAttribute("data-annotation-id")!;
-      if (annId === activeAnnotationId) {
-        setEditPopover({ anchorEl: mark, annId });
-      } else {
-        setActiveAnnotationId(annId);
-      }
-    };
-
-    // Hover on inline marks → highlight sidebar card
-    const handleMouseOver = (e: MouseEvent) => {
-      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
-      if (mark) {
-        const annId = mark.getAttribute("data-annotation-id")!;
-        setActiveAnnotationId(annId);
-      }
-    };
-
-    const handleMouseOut = (e: MouseEvent) => {
-      const mark = (e.target as HTMLElement).closest("[data-annotation-id]");
-      const relatedMark = (e.relatedTarget as HTMLElement | null)?.closest?.("[data-annotation-id]");
-      if (mark && !relatedMark) {
-        // Left a mark without entering another one — only deactivate if popover isn't open
-        if (!document.getElementById("ann-inline-popover")) {
-          setActiveAnnotationId(null);
-        }
-      }
-    };
+  const scrollContainer = document.getElementById("plan-scroll-container");
 
-    container.addEventListener("click", handleClick);
-    container.addEventListener("mouseover", handleMouseOver);
-    container.addEventListener("mouseout", handleMouseOut);
-    return () => {
-      container.removeEventListener("click", handleClick);
-      container.removeEventListener("mouseover", handleMouseOver);
-      container.removeEventListener("mouseout", handleMouseOut);
-    };
-  }, [PlanComponent, annotations, activeAnnotationId]);
+  const { popovers: textAnnotationPopovers, isPopoverOpen: textPopoverOpen } = useTextAnnotation({
+    containerRef,
+    restoreKey: PlanComponent,
+    restoreAnnotations: annotations,
+    extractContext: (range) => extractContext(range, containerRef.current!),
+    scrollContainer,
+  });
 
   // Build a map of block snippets to annotation IDs for quick lookup
   const blockAnnotationMap = useMemo(() => {
@@ -130,7 +70,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
 
     const handleMove = (e: MouseEvent) => {
       // Don't change hover when a popover is open
-      if (blockPopover || createPopover || editPopover) return;
+      if (blockPopover || textPopoverOpen) return;
       const target = e.target as HTMLElement;
       // Ignore events on the block comment button itself
       if (target.closest("[data-block-comment-btn]")) return;
@@ -159,7 +99,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
     };
 
     const handleLeave = (e: MouseEvent) => {
-      if (blockPopover || createPopover || editPopover) return;
+      if (blockPopover || textPopoverOpen) return;
       // Don't clear if moving onto the block comment button
       const related = e.relatedTarget as HTMLElement | null;
       if (related?.closest("[data-block-comment-btn]")) return;
@@ -173,7 +113,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
       container.removeEventListener("mousemove", handleMove);
       container.removeEventListener("mouseleave", handleLeave);
     };
-  }, [PlanComponent, blockPopover, createPopover, editPopover, blockAnnotationMap, activeAnnotationId]);
+  }, [PlanComponent, blockPopover, textPopoverOpen, blockAnnotationMap, activeAnnotationId]);
 
   // Keyboard navigation: document-level key listener
   useEffect(() => {
@@ -181,7 +121,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
       // Guard: skip if input/textarea focused or popover open
       const tag = (e.target as HTMLElement).tagName;
       if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).isContentEditable) return;
-      if (blockPopover || createPopover || editPopover) return;
+      if (blockPopover || textPopoverOpen) return;
 
       const container = containerRef.current;
       if (!container) return;
@@ -268,7 +208,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [focusedBlockIndex, blockPopover, createPopover, editPopover, blockAnnotationMap]);
+  }, [focusedBlockIndex, blockPopover, textPopoverOpen, blockAnnotationMap]);
 
   // Keyboard navigation: visual focus outline + scroll into view + sidebar sync
   useEffect(() => {
@@ -295,39 +235,6 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
     };
   }, [focusedBlockIndex, keyboardNav, blockAnnotationMap]);
 
-  // Use document-level mouseup so selections that end outside the container still work
-  useEffect(() => {
-    const handler = () => handleMouseUp();
-    document.addEventListener("mouseup", handler);
-    return () => document.removeEventListener("mouseup", handler);
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    const sel = window.getSelection();
-    if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
-    if (!containerRef.current) return;
-    const range = sel.getRangeAt(0);
-    // Selection must have started inside the plan container
-    if (!containerRef.current.contains(range.startContainer)) return;
-    // Don't create new annotation if clicking inside existing mark
-    if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
-    const snippet = sel.toString().trim();
-    if (snippet.length < 2) return;
-
-    // Capture context before popover disturbs the DOM
-    const savedRange = range.cloneRange();
-    const ctx = extractContext(range, containerRef.current);
-    const tempId = `__pending_${Date.now()}`;
-    try { wrapRangeWithMark(savedRange, tempId); } catch {}
-    window.getSelection()?.removeAllRanges();
-
-    const marks = document.querySelectorAll(`[data-annotation-id="${tempId}"]`);
-    const lastMark = marks[marks.length - 1] as HTMLElement | undefined;
-    if (!lastMark) return;
-
-    setCreatePopover({ anchorEl: lastMark, tempId, snippet, ctx });
-  }, [addAnnotationWithId]);
-
   // Memoize so context-triggered re-renders of PlanRenderer don't re-render the plan tree.
   // This prevents remounting custom components defined inside the Plan function.
   const planElement = useMemo(() => PlanComponent ? <PlanComponent /> : null, [PlanComponent]);
@@ -349,8 +256,6 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
     return <div className="text-text-tertiary text-center py-8 font-body text-body">No canvas loaded</div>;
   }
 
-  const scrollContainer = document.getElementById("plan-scroll-container");
-
   return (
     <>
       <div ref={containerRef} className="plan-content plan-updated">
@@ -364,39 +269,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
         />
       )}
 
-      {editPopover && (() => {
-        const ann = annotations.find((a) => a.id === editPopover.annId);
-        if (!ann) return null;
-        return (
-          <AnnotationEditPopover
-            anchorEl={editPopover.anchorEl}
-            scrollContainer={scrollContainer}
-            initialNote={ann.note}
-            onUpdate={(note) => updateAnnotation(editPopover.annId, note)}
-            onDelete={() => { removeAnnotation(editPopover.annId); setActiveAnnotationId(null); }}
-            onClose={() => setEditPopover(null)}
-          />
-        );
-      })()}
-
-      {createPopover && (
-        <AnnotationCreatePopover
-          anchorEl={createPopover.anchorEl}
-          scrollContainer={scrollContainer}
-          snippet={createPopover.snippet}
-          truncateAt={80}
-          onAdd={(note) => {
-            const id = generateAnnotationId();
-            renameMarkId(createPopover.tempId, id);
-            addAnnotationWithId(id, createPopover.snippet, note, undefined, createPopover.ctx);
-            setCreatePopover(null);
-          }}
-          onCancel={() => {
-            unwrapMarks(createPopover.tempId);
-            setCreatePopover(null);
-          }}
-        />
-      )}
+      {textAnnotationPopovers}
 
       {/* Block annotation floating buttons */}
       <BlockCommentButtons
@@ -423,9 +296,9 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
           scrollContainer={scrollContainer}
           snippet={blockPopover.snippet}
           truncateAt={80}
-          onAdd={(note) => {
+          onAdd={(note, images) => {
             const id = generateAnnotationId();
-            addAnnotationWithId(id, blockPopover.snippet, note);
+            addAnnotationWithId(id, blockPopover.snippet, note, undefined, undefined, images);
             setBlockPopover(null);
           }}
           onCancel={() => setBlockPopover(null)}
@@ -439,7 +312,17 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
             anchorEl={blockPopover.anchorEl}
             scrollContainer={scrollContainer}
             initialNote={ann.note}
-            onUpdate={(note) => updateAnnotation(blockPopover.annId!, note)}
+            initialImages={ann.images}
+            onUpdate={(note, images) => {
+              updateAnnotation(blockPopover.annId!, note);
+              const current = ann.images || [];
+              for (const img of images) {
+                if (!current.includes(img)) addAnnotationImage(blockPopover.annId!, img);
+              }
+              for (const img of current) {
+                if (!images.includes(img)) removeAnnotationImage(blockPopover.annId!, img);
+              }
+            }}
             onDelete={() => { removeAnnotation(blockPopover.annId!); setActiveAnnotationId(null); setBlockPopover(null); }}
             onClose={() => setBlockPopover(null)}
           />

package/daemon/client/Popover.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import React, { useEffect, useRef, useState, useCallback, useMemo, useContext } from "react";
 import { createPortal } from "react-dom";
 import { getPopoverPosition } from "./popoverPosition";
+import { AnnotationEditor, AttachButton } from "./AnnotationEditor";
+import { SessionContext } from "#canvas/runtime";
 
 interface PopoverProps {
   anchorEl: HTMLElement;
@@ -56,9 +58,9 @@ export function Popover({ anchorEl, scrollContainer, onClose, ignoreSelector, zI
   );
 }
 
-/* ── Create annotation popover ─────────────────────────────── */
+/* ── Create/Edit annotation popover ────────────────────────── */
 
-interface AnnotationCreatePopoverProps {
+interface AnnotationPopoverProps {
   anchorEl: HTMLElement;
   scrollContainer?: HTMLElement | null;
   snippet: string;
@@ -66,8 +68,16 @@ interface AnnotationCreatePopoverProps {
   truncateAt?: number;
   /** Custom header instead of the default quoted snippet */
   header?: React.ReactNode;
-  onAdd: (note: string) => void;
+  /** Initial note text (for edit mode) */
+  initialNote?: string;
+  /** Initial images (for edit mode) */
+  initialImages?: string[];
+  /** Called on confirm — passes note and images */
+  onConfirm: (note: string, images: string[]) => void;
+  /** Called on cancel / close without saving */
   onCancel: () => void;
+  /** Called when annotation should be deleted (edit mode) */
+  onDelete?: () => void;
 }
 
 const SUGGESTION_GROUPS: { label: string; items: string[] }[] = [
@@ -77,36 +87,50 @@ const SUGGESTION_GROUPS: { label: string; items: string[] }[] = [
 ];
 const ALL_SUGGESTIONS = SUGGESTION_GROUPS.flatMap((g) => g.items);
 
-export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, truncateAt = 100, header, onAdd, onCancel }: AnnotationCreatePopoverProps) {
-  const [note, setNote] = useState("");
+export function AnnotationPopover({
+  anchorEl, scrollContainer, snippet, truncateAt = 100, header,
+  initialNote = "", initialImages, onConfirm, onCancel, onDelete,
+}: AnnotationPopoverProps) {
+  const sessionId = useContext(SessionContext);
+  const isEditMode = initialNote !== "" || !!onDelete;
+  const [note, setNote] = useState(initialNote);
+  const [images, setImages] = useState<string[]>(initialImages || []);
   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
-  const [suppressed, setSuppressed] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => { textareaRef.current?.focus(); }, []);
+  const [suppressed, setSuppressed] = useState(isEditMode);
+  const [deleteHover, setDeleteHover] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const openFilePickerRef = useRef<(() => void) | null>(null);
 
   const submit = useCallback(() => {
-    if (note.trim()) onAdd(note.trim());
+    if (note.trim() || images.length > 0) onConfirm(note.trim(), images);
+    else if (isEditMode && onDelete) onDelete();
     else onCancel();
-  }, [note, onAdd, onCancel]);
+  }, [note, images, onConfirm, onCancel, isEditMode, onDelete]);
 
+  const handleClose = useCallback(() => {
+    if (isEditMode) {
+      if (!note.trim() && images.length === 0 && onDelete) { onDelete(); onCancel(); return; }
+      onConfirm(note, images);
+      return;
+    }
+    onCancel();
+  }, [note, images, isEditMode, onConfirm, onCancel, onDelete]);
+
+  // Suggestions (only in create mode)
+  const showSuggestions = !isEditMode;
   const matches = note.trim().length > 0
     ? ALL_SUGGESTIONS.filter((s) => s.toLowerCase().startsWith(note.trim().toLowerCase()))
     : ALL_SUGGESTIONS;
-  // Don't show if the input already exactly matches a suggestion, or if suppressed
-  const filtered = suppressed ? [] : matches.length === 1 && matches[0].toLowerCase() === note.trim().toLowerCase() ? [] : matches;
+  const filtered = !showSuggestions || suppressed ? [] : matches.length === 1 && matches[0].toLowerCase() === note.trim().toLowerCase() ? [] : matches;
   const matchSet = new Set(filtered);
 
-  // Build filtered groups for grouped display
   const filteredGroups = SUGGESTION_GROUPS
     .map((g) => ({ label: g.label, items: g.items.filter((s) => matchSet.has(s)) }))
     .filter((g) => g.items.length > 0);
 
-  // Each group = one column
   const colItems = filteredGroups.map((g) => g.items);
   const flatFiltered = colItems.flat();
 
-  // Navigation state as [col, row]
   const selectedCol = useMemo(() => {
     if (selectedIdx === null) return 0;
     let count = 0;
@@ -129,8 +153,7 @@ export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, tr
     return idx + row;
   };
 
-  // Reset selection and unsuppress when input changes
-  useEffect(() => { setSelectedIdx(null); setSuppressed(false); }, [note]);
+  useEffect(() => { setSelectedIdx(null); setSuppressed(isEditMode); }, [note]);
 
   const applySuggestion = useCallback((s: string) => {
     setNote(s);
@@ -138,55 +161,102 @@ export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, tr
 
   const truncated = snippet.length > truncateAt ? snippet.slice(0, truncateAt) + "..." : snippet;
 
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (flatFiltered.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      e.preventDefault();
+      if (selectedIdx === null) { setSelectedIdx(0); return; }
+      if (e.key === "ArrowDown") {
+        const newRow = Math.min(selectedRow + 1, colItems[selectedCol].length - 1);
+        setSelectedIdx(colRowToFlat(selectedCol, newRow));
+      } else if (e.key === "ArrowUp") {
+        const newRow = Math.max(selectedRow - 1, 0);
+        setSelectedIdx(colRowToFlat(selectedCol, newRow));
+      } else if (e.key === "ArrowRight") {
+        const newCol = Math.min(selectedCol + 1, colItems.length - 1);
+        const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
+        setSelectedIdx(colRowToFlat(newCol, newRow));
+      } else if (e.key === "ArrowLeft") {
+        const newCol = Math.max(selectedCol - 1, 0);
+        const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
+        setSelectedIdx(colRowToFlat(newCol, newRow));
+      }
+      return;
+    }
+    if (selectedIdx !== null && flatFiltered.length > 0) {
+      if (e.key === "Tab") { e.preventDefault(); applySuggestion(flatFiltered[selectedIdx]); return; }
+      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onConfirm(flatFiltered[selectedIdx], images); return; }
+    }
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); return; }
+    if (e.key === "Escape") {
+      if (flatFiltered.length > 0 && !suppressed) { setSuppressed(true); }
+      else if (isEditMode) { handleClose(); }
+      else { onCancel(); }
+    }
+  }, [flatFiltered, selectedIdx, selectedRow, selectedCol, colItems, colRowToFlat, applySuggestion, onConfirm, images, submit, suppressed, isEditMode, handleClose, onCancel]);
+
   return (
-    <Popover anchorEl={anchorEl} scrollContainer={scrollContainer} onClose={onCancel} width="420px">
-      {header ?? (
+    <Popover
+      anchorEl={anchorEl}
+      scrollContainer={scrollContainer}
+      onClose={isEditMode ? handleClose : onCancel}
+      ignoreSelector={isEditMode ? "[data-annotation-id]" : undefined}
+      zIndex={isEditMode ? "60" : "50"}
+      padding={isEditMode ? "10px 12px" : "12px"}
+      width="420px"
+    >
+      {!isEditMode && (header ?? (
         <div style={{ fontSize: "11px", color: "var(--color-text-tertiary)", fontStyle: "italic", marginBottom: "8px", lineHeight: "1.4", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
           &ldquo;{truncated}&rdquo;
         </div>
-      )}
-      <textarea
-        ref={textareaRef}
-        value={note}
-        onChange={(e) => setNote(e.target.value)}
-        onKeyDown={(e) => {
-          if (flatFiltered.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-            e.preventDefault();
-            if (selectedIdx === null) {
-              setSelectedIdx(0);
-              return;
-            }
-            if (e.key === "ArrowDown") {
-              const newRow = Math.min(selectedRow + 1, colItems[selectedCol].length - 1);
-              setSelectedIdx(colRowToFlat(selectedCol, newRow));
-            } else if (e.key === "ArrowUp") {
-              const newRow = Math.max(selectedRow - 1, 0);
-              setSelectedIdx(colRowToFlat(selectedCol, newRow));
-            } else if (e.key === "ArrowRight") {
-              const newCol = Math.min(selectedCol + 1, colItems.length - 1);
-              const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
-              setSelectedIdx(colRowToFlat(newCol, newRow));
-            } else if (e.key === "ArrowLeft") {
-              const newCol = Math.max(selectedCol - 1, 0);
-              const newRow = Math.min(selectedRow, colItems[newCol].length - 1);
-              setSelectedIdx(colRowToFlat(newCol, newRow));
-            }
-            return;
-          }
-          if (selectedIdx !== null && flatFiltered.length > 0) {
-            if (e.key === "Tab") { e.preventDefault(); applySuggestion(flatFiltered[selectedIdx]); return; }
-            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onAdd(flatFiltered[selectedIdx]); return; }
-          }
-          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); return; }
-          if (e.key === "Escape") { if (flatFiltered.length > 0 && !suppressed) { setSuppressed(true); } else { onCancel(); } }
+      ))}
+
+      <AnnotationEditor
+        note={note}
+        onNoteChange={setNote}
+        images={images}
+        onAddImage={(path) => setImages((prev) => [...prev, path])}
+        onRemoveImage={(path) => setImages((prev) => prev.filter((p) => p !== path))}
+        sessionId={sessionId}
+        autoFocus
+        autoResize={isEditMode}
+        textareaRef={textareaRef}
+        onKeyDown={handleKeyDown}
+        attachButton="none"
+        openFilePickerRef={openFilePickerRef}
+        textareaStyle={isEditMode ? {
+          width: "100%", background: "transparent", border: "none",
+          color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
+          fontSize: "13px", lineHeight: "1.5", resize: "none", outline: "none",
+          overflow: "hidden",
+        } : {
+          width: "100%", minHeight: "60px", background: "transparent", border: "none",
+          color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif",
+          fontSize: "13px", lineHeight: "1.5", resize: "vertical", outline: "none",
         }}
-        style={{ width: "100%", minHeight: "60px", background: "transparent", border: "none", color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif", fontSize: "13px", lineHeight: "1.5", resize: "vertical", outline: "none" }}
         placeholder="Add your note..."
       />
-      <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "8px" }}>
-        <button onClick={onCancel} style={{ fontSize: "11px", color: "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "4px 12px", fontFamily: "'Inter', sans-serif" }}>Cancel</button>
-        <button onClick={submit} style={{ fontSize: "11px", fontWeight: 500, padding: "4px 12px", borderRadius: "6px", background: "var(--color-highlight-bg)", color: "var(--color-text-primary)", border: "1px solid var(--color-highlight-border)", cursor: "pointer", fontFamily: "'Inter', sans-serif" }}>Add</button>
+
+      {/* Action buttons */}
+      {/* Action buttons */}
+      <div style={{ display: "flex", alignItems: "center", gap: "8px", marginTop: isEditMode ? "6px" : "8px" }}>
+        <AttachButton onClick={() => openFilePickerRef.current?.()} size={14} />
+        <div style={{ flex: 1 }} />
+        {isEditMode ? (
+          <button
+            onClick={() => { if (onDelete) onDelete(); onCancel(); }}
+            onMouseEnter={() => setDeleteHover(true)}
+            onMouseLeave={() => setDeleteHover(false)}
+            style={{ fontSize: "11px", color: deleteHover ? "var(--color-accent-red)" : "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "2px 0", fontFamily: "'Inter', sans-serif" }}
+          >Delete</button>
+        ) : (
+          <>
+            <button onClick={onCancel} style={{ fontSize: "11px", color: "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "4px 12px", fontFamily: "'Inter', sans-serif" }}>Cancel</button>
+            <button onClick={submit} style={{ fontSize: "11px", fontWeight: 500, padding: "4px 12px", borderRadius: "6px", background: "var(--color-highlight-bg)", color: "var(--color-text-primary)", border: "1px solid var(--color-highlight-border)", cursor: "pointer", fontFamily: "'Inter', sans-serif" }}>Add</button>
+          </>
+        )}
       </div>
+
+      {/* Suggestions (create mode only) */}
       {flatFiltered.length > 0 && (
         <div style={{ marginTop: "6px", borderTop: "1px solid var(--color-border-subtle)", paddingTop: "8px", display: "flex", gap: "4px" }}>
           {filteredGroups.map((group) => (
@@ -223,63 +293,53 @@ export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, tr
   );
 }
 
-/* ── Edit annotation popover ───────────────────────────────── */
+/* ── Legacy exports for backwards compatibility ───────────── */
+
+interface AnnotationCreatePopoverProps {
+  anchorEl: HTMLElement;
+  scrollContainer?: HTMLElement | null;
+  snippet: string;
+  truncateAt?: number;
+  header?: React.ReactNode;
+  onAdd: (note: string, images?: string[]) => void;
+  onCancel: () => void;
+}
+
+export function AnnotationCreatePopover({ anchorEl, scrollContainer, snippet, truncateAt, header, onAdd, onCancel }: AnnotationCreatePopoverProps) {
+  return (
+    <AnnotationPopover
+      anchorEl={anchorEl}
+      scrollContainer={scrollContainer}
+      snippet={snippet}
+      truncateAt={truncateAt}
+      header={header}
+      onConfirm={(note, images) => onAdd(note, images)}
+      onCancel={onCancel}
+    />
+  );
+}
 
 interface AnnotationEditPopoverProps {
   anchorEl: HTMLElement;
   scrollContainer?: HTMLElement | null;
   initialNote: string;
-  onUpdate: (note: string) => void;
+  initialImages?: string[];
+  onUpdate: (note: string, images: string[]) => void;
   onDelete: () => void;
   onClose: () => void;
 }
 
-export function AnnotationEditPopover({ anchorEl, scrollContainer, initialNote, onUpdate, onDelete, onClose }: AnnotationEditPopoverProps) {
-  const [note, setNote] = useState(initialNote);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [deleteHover, setDeleteHover] = useState(false);
-
-  useEffect(() => {
-    const ta = textareaRef.current;
-    if (ta) {
-      ta.style.height = "auto";
-      ta.style.height = ta.scrollHeight + "px";
-      ta.focus();
-      ta.setSelectionRange(ta.value.length, ta.value.length);
-    }
-  }, []);
-
-  const handleClose = useCallback(() => {
-    if (!note.trim()) { onDelete(); onClose(); return; }
-    onUpdate(note);
-    onClose();
-  }, [note, onUpdate, onDelete, onClose]);
-
+export function AnnotationEditPopover({ anchorEl, scrollContainer, initialNote, initialImages, onUpdate, onDelete, onClose }: AnnotationEditPopoverProps) {
   return (
-    <Popover anchorEl={anchorEl} scrollContainer={scrollContainer} onClose={handleClose} ignoreSelector="[data-annotation-id]" zIndex="60" padding="10px 12px">
-      <textarea
-        ref={textareaRef}
-        value={note}
-        onChange={(e) => {
-          setNote(e.target.value);
-          onUpdate(e.target.value);
-          e.target.style.height = "auto";
-          e.target.style.height = e.target.scrollHeight + "px";
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleClose(); }
-          if (e.key === "Escape") handleClose();
-        }}
-        style={{ width: "100%", background: "transparent", border: "none", color: "var(--color-text-primary)", fontFamily: "'Inter', sans-serif", fontSize: "13px", lineHeight: "1.5", resize: "none", outline: "none", overflow: "hidden" }}
-      />
-      <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "6px" }}>
-        <button
-          onClick={() => { onDelete(); onClose(); }}
-          onMouseEnter={() => setDeleteHover(true)}
-          onMouseLeave={() => setDeleteHover(false)}
-          style={{ fontSize: "11px", color: deleteHover ? "var(--color-accent-red)" : "var(--color-text-tertiary)", background: "none", border: "none", cursor: "pointer", padding: "2px 0", fontFamily: "'Inter', sans-serif" }}
-        >Delete</button>
-      </div>
-    </Popover>
+    <AnnotationPopover
+      anchorEl={anchorEl}
+      scrollContainer={scrollContainer}
+      snippet=""
+      initialNote={initialNote}
+      initialImages={initialImages}
+      onConfirm={(note, images) => { onUpdate(note, images); onClose(); }}
+      onDelete={onDelete}
+      onCancel={onClose}
+    />
   );
 }

package/daemon/client/ResponsePreview.tsx

@@ -143,7 +143,13 @@ export function ResponsePreview({ open, onClose, onSubmit }: ResponsePreviewProp
   );
 }
 
+const UPLOADS_PATH_RE = /!\[([^\]]*)\]\((\/tmp\/agent-canvas\/uploads\/([^)]+))\)/g;
+
+function rewriteUploadPaths(md: string): string {
+  return md.replace(UPLOADS_PATH_RE, (_match, alt, _fullPath, filename) => `![${alt}](/api/uploads/${filename})`);
+}
+
 export function MarkdownPreview({ text }: { text: string }) {
-  const html = useMemo(() => marked.parse(text, { async: false }) as string, [text]);
+  const html = useMemo(() => marked.parse(rewriteUploadPaths(text), { async: false }) as string, [text]);
   return <div className="prose-canvas font-body text-body text-text-primary leading-relaxed" dangerouslySetInnerHTML={{ __html: html }} />;
 }