agent-canvas 0.1.8 → 0.1.10

package/daemon/client/App.tsx

@@ -7,12 +7,16 @@ import { PlanRenderer } from "./PlanRenderer";
 import { AnnotationSidebar } from "./AnnotationSidebar";
 import { ResponsePreview } from "./ResponsePreview";
 import { FileBrowser } from "./FileBrowser";
+import { FileIcon } from "./FileIcon";
 import { FileViewer } from "./FileViewer";
 import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
 import { RevisionSelect } from "./RevisionSelect";
-import { generateAnnotationId } from "./utils";
+import { generateAnnotationId, RESPONSE_ANNOTATION_PATH } from "./utils";
+import { wrapRangeWithMark, restoreMarks, renameMarkId, unwrapMarks, updateAllMarkStates } from "./highlightRange";
+import { extractContext } from "./annotationContext";
+import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 
 export type ActiveView = { type: "plan" } | { type: "file"; path: string };
 
@@ -23,6 +27,7 @@ export interface RevisionInfo {
   createdAt: string;
   hasFeedback: boolean;
   response?: string;
+  diffStats?: { added: number; removed: number };
 }
 
 export const ActiveViewContext = createContext<{
@@ -271,16 +276,14 @@ function App() {
               {/* Left panel — fixed to viewport */}
               <LeftPanel sessionId={sessionId} projectRoot={projectRoot} connected={connected} onMobileSidebar={() => setMobileSidebar(!mobileSidebar)} collapsed={leftCollapsed} onToggle={() => setLeftCollapsed((c) => !c)} />
 
-              {/* Right panel — fixed to viewport, resizable (hidden in compare mode) */}
-              {compareRevision === null && (
-                <ResizableSidebar collapsed={rightCollapsed} onToggle={() => setRightCollapsed((c) => !c)}>
-                  <AnnotationSidebar onPreview={() => setPreviewOpen(true)} onSubmit={handleSubmit} />
-                </ResizableSidebar>
-              )}
+              {/* Right panel — fixed to viewport, resizable */}
+              <ResizableSidebar collapsed={rightCollapsed} onToggle={() => setRightCollapsed((c) => !c)}>
+                <AnnotationSidebar onPreview={() => setPreviewOpen(true)} onSubmit={handleSubmit} />
+              </ResizableSidebar>
 
               {/* Center content — normal document flow, browser scroll */}
               {compareRevision !== null ? (
-                <div className={`${leftCollapsed ? "lg:ml-0" : "lg:ml-60"} transition-[margin] duration-200`}>
+                <div className={`${leftCollapsed ? "lg:ml-0" : "lg:ml-60"} ${rightCollapsed ? "lg:mr-0" : "lg:mr-[var(--sidebar-width,320px)]"} transition-[margin] duration-200`}>
                   <CompareView
                     initialLeft={compareRevision.left}
                     initialRight={compareRevision.right}
@@ -524,12 +527,95 @@ function ResizableSidebar({ children, collapsed, onToggle }: { children: React.R
 function ResponseBanner({ markdown }: { markdown: string }) {
   const [dismissed, setDismissed] = useState(false);
   const html = useMemo(() => marked.parse(markdown, { async: false }) as string, [markdown]);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx: any } | null>(null);
+  const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
+
+  const responseAnnotations = useMemo(() => annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH), [annotations]);
 
   // Reset dismissed state when markdown changes
   useEffect(() => { setDismissed(false); }, [markdown]);
 
+  // Restore marks after content renders
+  useEffect(() => {
+    if (!contentRef.current || responseAnnotations.length === 0) return;
+    const timer = setTimeout(() => {
+      if (contentRef.current) restoreMarks(contentRef.current, responseAnnotations);
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [html, responseAnnotations.length]);
+
+  // Update mark active states
+  const prevActiveRef = useRef<string | null>(null);
+  useEffect(() => {
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
+  }, [activeAnnotationId]);
+
+  // Click/hover handlers on marks
+  useEffect(() => {
+    const container = contentRef.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);
+      }
+    };
+    const handleMouseOver = (e: MouseEvent) => {
+      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
+      if (mark) setActiveAnnotationId(mark.getAttribute("data-annotation-id")!);
+    };
+    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) setActiveAnnotationId(null);
+    };
+    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);
+    };
+  }, [html, activeAnnotationId]);
+
+  // Text selection → annotation
+  useEffect(() => {
+    const handler = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
+      if (!contentRef.current) return;
+      const range = sel.getRangeAt(0);
+      if (!contentRef.current.contains(range.startContainer)) return;
+      if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
+      const snippet = sel.toString().trim();
+      if (snippet.length < 2) return;
+      const savedRange = range.cloneRange();
+      const ctx = extractContext(range, contentRef.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 });
+    };
+    document.addEventListener("mouseup", handler);
+    return () => document.removeEventListener("mouseup", handler);
+  }, []);
+
   if (dismissed) return null;
 
+  const scrollContainer = document.getElementById("plan-scroll-container");
+
   return (
     <div className="mb-6 rounded-lg border border-accent-blue/20 bg-accent-blue/5 relative">
       <button
@@ -545,8 +631,52 @@ function ResponseBanner({ markdown }: { markdown: string }) {
           </svg>
           <span className="text-[11px] font-medium uppercase tracking-widest text-accent-blue font-body">Agent Response</span>
         </div>
-        <div className="prose-canvas text-sm" dangerouslySetInnerHTML={{ __html: html }} />
+        <div ref={contentRef} className="prose-canvas text-sm" dangerouslySetInnerHTML={{ __html: html }} />
       </div>
+
+      {createPopover && (
+        <AnnotationCreatePopover
+          anchorEl={createPopover.anchorEl}
+          scrollContainer={scrollContainer}
+          snippet={createPopover.snippet}
+          truncateAt={80}
+          onAdd={(note, images) => {
+            const id = generateAnnotationId();
+            renameMarkId(createPopover.tempId, id);
+            addAnnotationWithId(id, createPopover.snippet, note, RESPONSE_ANNOTATION_PATH, createPopover.ctx, images);
+            setCreatePopover(null);
+          }}
+          onCancel={() => {
+            unwrapMarks(createPopover.tempId);
+            setCreatePopover(null);
+          }}
+        />
+      )}
+
+      {editPopover && (() => {
+        const ann = annotations.find((a) => a.id === editPopover.annId);
+        if (!ann) return null;
+        return (
+          <AnnotationEditPopover
+            anchorEl={editPopover.anchorEl}
+            scrollContainer={scrollContainer}
+            initialNote={ann.note}
+            initialImages={ann.images}
+            onUpdate={(note, images) => {
+              updateAnnotation(editPopover.annId, note);
+              const current = ann.images || [];
+              for (const img of images) {
+                if (!current.includes(img)) addAnnotationImage(editPopover.annId, img);
+              }
+              for (const img of current) {
+                if (!images.includes(img)) removeAnnotationImage(editPopover.annId, img);
+              }
+            }}
+            onDelete={() => { removeAnnotation(editPopover.annId); setActiveAnnotationId(null); }}
+            onClose={() => setEditPopover(null)}
+          />
+        );
+      })()}
     </div>
   );
 }
@@ -571,10 +701,10 @@ function ContentTabs() {
               : "text-text-tertiary hover:text-text-secondary"
           }`}
         >
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" className="opacity-60">
-            <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="opacity-60">
+            <path d="M12 7L2 12l10 5 10-5-10-5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
-          Plan
+          Canvas
           {activeView.type === "plan" && (
             <span className="absolute bottom-0 left-3 right-3 h-[2px] bg-text-primary rounded-full" />
           )}
@@ -594,12 +724,13 @@ function ContentTabs() {
             <div className="flex items-center">
               <button
                 onClick={() => setActiveView({ type: "file", path })}
-                className={`flex items-center gap-1.5 pl-3 pr-1 py-2.5 text-[13px] font-mono whitespace-nowrap transition-colors relative ${
+                className={`flex items-center gap-1.5 pl-3 pr-1 py-2.5 text-[13px] font-body whitespace-nowrap transition-colors relative ${
                   isActive
                     ? "text-text-primary"
                     : "text-text-tertiary hover:text-text-secondary"
                 }`}
               >
+                <FileIcon name={name} type="file" />
                 {name}
                 {isActive && (
                   <span className="absolute bottom-0 left-3 right-1 h-[2px] bg-text-primary rounded-full" />

package/daemon/client/CompareView.tsx

@@ -1,7 +1,10 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { RevisionSelect } from "./RevisionSelect";
 import { runDomDiff } from "./domDiff";
 import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
+import { useAnnotations } from "./AnnotationProvider";
+import { useTextAnnotation } from "./useTextAnnotation";
+import { extractContext } from "./annotationContext";
 
 interface CompareViewProps {
   initialLeft: number;
@@ -132,6 +135,15 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
   const [rightReady, setRightReady] = useState(false);
   const [done, setDone] = useState(false);
 
+  const { annotations } = useAnnotations();
+  const planAnnotations = annotations.filter(a => !a.filePath);
+  const { popovers } = useTextAnnotation({
+    containerRef: unifiedRef,
+    restoreKey: done,
+    restoreAnnotations: planAnnotations,
+    extractContext: (range) => extractContext(range, unifiedRef.current!),
+  });
+
   useEffect(() => {
     if (!leftReady || !rightReady || done) return;
     if (!oldRef.current || !newRef.current) return;
@@ -155,21 +167,23 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
 
   return (
     <div className="flex-1 min-h-0 overflow-y-auto">
-      {/* Offscreen source panels */}
-      <div style={{ position: "absolute", left: -9999, visibility: "hidden" as const, pointerEvents: "none" as const, width: 720 }}>
-        <ComparePanelRenderer
-          ref={oldRef}
-          sessionId={sessionId}
-          revision={leftRev}
-          onReady={() => setLeftReady(true)}
-        />
-        <ComparePanelRenderer
-          ref={newRef}
-          sessionId={sessionId}
-          revision={rightRev}
-          onReady={() => setRightReady(true)}
-        />
-      </div>
+      {/* Offscreen source panels — unmount after diff is built */}
+      {!done && (
+        <div style={{ position: "absolute", left: -9999, visibility: "hidden" as const, pointerEvents: "none" as const, width: 720 }}>
+          <ComparePanelRenderer
+            ref={oldRef}
+            sessionId={sessionId}
+            revision={leftRev}
+            onReady={() => setLeftReady(true)}
+          />
+          <ComparePanelRenderer
+            ref={newRef}
+            sessionId={sessionId}
+            revision={rightRev}
+            onReady={() => setRightReady(true)}
+          />
+        </div>
+      )}
 
       {/* Visible output */}
       <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
@@ -180,6 +194,7 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
         )}
         <div ref={unifiedRef} />
       </div>
+      {popovers}
     </div>
   );
 }
@@ -193,10 +208,23 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
   const [rightReady, setRightReady] = useState(false);
   const [done, setDone] = useState(false);
 
+  const viewRef = useRef<HTMLDivElement>(null);
   const leftPanelRef = useRef<HTMLDivElement>(null);
   const rightPanelRef = useRef<HTMLDivElement>(null);
   const isSyncing = useRef(false);
 
+  const handleLeftReady = useCallback(() => setLeftReady(true), []);
+  const handleRightReady = useCallback(() => setRightReady(true), []);
+
+  const { annotations } = useAnnotations();
+  const planAnnotations = annotations.filter(a => !a.filePath);
+  const { popovers } = useTextAnnotation({
+    containerRef: viewRef,
+    restoreKey: done,
+    restoreAnnotations: planAnnotations,
+    extractContext: (range) => extractContext(range, viewRef.current!),
+  });
+
   // Run diff
   useEffect(() => {
     if (!leftReady || !rightReady || done) return;
@@ -241,14 +269,14 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
   }, []);
 
   return (
-    <div className="flex flex-1 min-h-0">
+    <div ref={viewRef} className="flex flex-1 min-h-0">
       <div ref={leftPanelRef} className="w-1/2 overflow-y-auto border-r border-border-subtle">
         <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
           <ComparePanelRenderer
             ref={oldRef}
             sessionId={sessionId}
             revision={leftRev}
-            onReady={() => setLeftReady(true)}
+            onReady={handleLeftReady}
           />
         </div>
       </div>
@@ -258,10 +286,11 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
             ref={newRef}
             sessionId={sessionId}
             revision={rightRev}
-            onReady={() => setRightReady(true)}
+            onReady={handleRightReady}
           />
         </div>
       </div>
+      {popovers}
     </div>
   );
 }
@@ -274,7 +303,7 @@ interface ComparePanelRendererProps {
   onReady: () => void;
 }
 
-const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRendererProps>(
+const ComparePanelRenderer = React.memo(React.forwardRef<HTMLDivElement, ComparePanelRendererProps>(
   ({ sessionId, revision, onReady }, ref) => {
     const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
     const [error, setError] = useState<string | null>(null);
@@ -303,6 +332,8 @@ const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRender
       });
     }, [PlanComponent]);
 
+    const planElement = useMemo(() => PlanComponent ? <PlanComponent /> : null, [PlanComponent]);
+
     if (loading) {
       return (
         <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">
@@ -321,13 +352,13 @@ const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRender
     }
 
     if (!PlanComponent) {
-      return <div className="text-text-tertiary text-center py-8 font-body text-body">No plan loaded</div>;
+      return <div className="text-text-tertiary text-center py-8 font-body text-body">No canvas loaded</div>;
     }
 
     return (
       <div ref={ref}>
-        <PlanComponent />
+        {planElement}
       </div>
     );
   }
-);
+));

package/daemon/client/FileBrowser.tsx

@@ -3,6 +3,7 @@ import { SessionContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { ActiveViewContext } from "./App";
 import { FileIcon } from "./FileIcon";
+import { RESPONSE_ANNOTATION_PATH } from "./utils";
 
 interface TreeEntry { name: string; type: "file" | "dir"; }
 interface DirState { entries: TreeEntry[]; expanded: boolean; loaded: boolean; }
@@ -17,7 +18,7 @@ export function FileBrowser({ embedded }: { embedded?: boolean } = {}) {
   const { annCountMap, annotatedFiles } = useMemo(() => {
     const map = new Map<string, number>();
     for (const a of annotations) {
-      if (a.filePath) map.set(a.filePath, (map.get(a.filePath) || 0) + 1);
+      if (a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH) map.set(a.filePath, (map.get(a.filePath) || 0) + 1);
     }
     return { annCountMap: map, annotatedFiles: [...map.keys()] };
   }, [annotations]);

package/daemon/client/FileViewer.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState, useContext, useCallback, useRef, useMemo }
 import { SessionContext } from "#canvas/runtime";
 import type { AnnotationContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
-import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
-import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
+import { wrapRangeWithMark } from "./highlightRange";
 import { LANG_MAP } from "../langMap";
 import { generateAnnotationId } from "./utils";
+import { useTextAnnotation } from "./useTextAnnotation";
 
 /** Walk up from a node to find the parent line div with data-line-num */
 function findLineDiv(node: Node): HTMLElement | null {
@@ -17,22 +17,44 @@ function findLineDiv(node: Node): HTMLElement | null {
   return null;
 }
 
+/** Build AnnotationContext from a text selection Range inside file content */
+function buildFileContext(range: Range): AnnotationContext {
+  const snippet = range.toString().trim();
+  const startLineDiv = findLineDiv(range.startContainer);
+  const endLineDiv = findLineDiv(range.endContainer);
+  const lineStart = startLineDiv ? parseInt(startLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+  const lineEnd = endLineDiv ? parseInt(endLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+
+  let before = "";
+  let after = "";
+  if (snippet.length < 30 && startLineDiv && startLineDiv === endLineDiv) {
+    const code = startLineDiv.querySelector("code");
+    if (code) {
+      const lineText = code.textContent || "";
+      const idx = lineText.indexOf(snippet);
+      if (idx >= 0) {
+        before = lineText.slice(0, idx).trimStart();
+        after = lineText.slice(idx + snippet.length).trimEnd();
+      }
+    }
+  }
+
+  return { before, after, hierarchy: [], lineStart, lineEnd };
+}
+
 interface FileViewerProps {
   path: string;
 }
 
 export function FileViewer({ path }: FileViewerProps) {
   const sessionId = useContext(SessionContext);
-  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const { annotations, addAnnotationWithId, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
   const [content, setContent] = useState<string | null>(null);
   const [language, setLanguage] = useState("text");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const contentRef = useRef<HTMLPreElement>(null);
 
-  const [pendingMarkId, setPendingMarkId] = useState<string | null>(null);
-  const pendingSnippetRef = useRef("");
-
   // Line gutter selection state
   const [lineSelectStart, setLineSelectStart] = useState<number | null>(null);
   const [lineSelectEnd, setLineSelectEnd] = useState<number | null>(null);
@@ -40,12 +62,19 @@ export function FileViewer({ path }: FileViewerProps) {
   const lineSelectEndRef = useRef<number | null>(null);
   const linesRef = useRef<string[]>([]);
 
-  // Popover state
-  const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
-  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx?: AnnotationContext } | null>(null);
-
   const fileAnns = annotations.filter((a) => a.filePath === path);
 
+  const scrollContainer = contentRef.current?.closest("#plan-scroll-container") as HTMLElement | null;
+
+  const { popovers, openCreatePopover } = useTextAnnotation({
+    containerRef: contentRef,
+    restoreKey: `${content}:${path}`,
+    restoreAnnotations: fileAnns,
+    extractContext: buildFileContext,
+    filePath: path,
+    scrollContainer,
+  });
+
   useEffect(() => {
     setLoading(true);
     setError(null);
@@ -58,117 +87,6 @@ export function FileViewer({ path }: FileViewerProps) {
       .catch(() => { setError("Failed to fetch file"); setLoading(false); });
   }, [sessionId, path]);
 
-  // Restore persisted annotation marks after file content renders
-  useEffect(() => {
-    if (!content || !contentRef.current) return;
-    const timer = setTimeout(() => {
-      if (contentRef.current) {
-        restoreMarks(contentRef.current, fileAnns);
-      }
-    }, 50);
-    return () => clearTimeout(timer);
-  }, [content, path]);
-
-  // Update mark active states
-  const prevActiveRef = useRef<string | null>(null);
-  useEffect(() => {
-    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
-    prevActiveRef.current = activeAnnotationId;
-  }, [activeAnnotationId]);
-
-  // Click handler for marks
-  useEffect(() => {
-    const container = contentRef.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);
-      }
-    };
-    const handleMouseOver = (e: MouseEvent) => {
-      const mark = (e.target as HTMLElement).closest("[data-annotation-id]") as HTMLElement | null;
-      if (mark) setActiveAnnotationId(mark.getAttribute("data-annotation-id")!);
-    };
-    const handleMouseOut = (e: MouseEvent) => {
-      const mark = (e.target as HTMLElement).closest("[data-annotation-id]");
-      const related = (e.relatedTarget as HTMLElement | null)?.closest?.("[data-annotation-id]");
-      if (mark && !related && !document.getElementById("ann-inline-popover")) setActiveAnnotationId(null);
-    };
-    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);
-    };
-  }, [content, annotations, activeAnnotationId]);
-
-  useEffect(() => {
-    const handler = () => handleMouseUp();
-    document.addEventListener("mouseup", handler);
-    return () => document.removeEventListener("mouseup", handler);
-  }, []);
-
-  // Use refs so the document-level mouseup always has current values
-  const pathRef = useRef(path);
-  pathRef.current = path;
-  const addAnnotationRef = useRef(addAnnotationWithId);
-  addAnnotationRef.current = addAnnotationWithId;
-
-  const handleMouseUp = useCallback(() => {
-    const sel = window.getSelection();
-    if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
-    if (!contentRef.current) return;
-    const range = sel.getRangeAt(0);
-    if (!contentRef.current.contains(range.startContainer)) return;
-    if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
-    const snippet = sel.toString().trim();
-    if (snippet.length < 2) return;
-
-    // Compute line numbers from DOM
-    const startLineDiv = findLineDiv(range.startContainer);
-    const endLineDiv = findLineDiv(range.endContainer);
-    const lineStart = startLineDiv ? parseInt(startLineDiv.getAttribute("data-line-num")!, 10) : undefined;
-    const lineEnd = endLineDiv ? parseInt(endLineDiv.getAttribute("data-line-num")!, 10) : undefined;
-
-    // Compute before/after context for short snippets on a single line
-    let before = "";
-    let after = "";
-    if (snippet.length < 30 && startLineDiv && startLineDiv === endLineDiv) {
-      const code = startLineDiv.querySelector("code");
-      if (code) {
-        const lineText = code.textContent || "";
-        const idx = lineText.indexOf(snippet);
-        if (idx >= 0) {
-          before = lineText.slice(0, idx).trimStart();
-          after = lineText.slice(idx + snippet.length).trimEnd();
-        }
-      }
-    }
-
-    const ctx: AnnotationContext = { before, after, hierarchy: [], lineStart, lineEnd };
-
-    const tempId = `__pending_${Date.now()}`;
-    const cloned = range.cloneRange();
-    try { wrapRangeWithMark(cloned, tempId); } catch {}
-    sel.removeAllRanges();
-
-    const marks = document.querySelectorAll(`[data-annotation-id="${tempId}"]`);
-    const lastMark = marks[marks.length - 1] as HTMLElement | undefined;
-    if (!lastMark) return;
-
-    pendingSnippetRef.current = snippet;
-    setPendingMarkId(tempId);
-    setCreatePopover({ anchorEl: lastMark, tempId, snippet, ctx });
-  }, []);
-
   // Line gutter: mousedown starts line selection
   const handleGutterMouseDown = useCallback((e: React.MouseEvent, lineNum: number) => {
     e.preventDefault(); // Prevent text selection
@@ -227,9 +145,7 @@ export function FileViewer({ path }: FileViewerProps) {
         }
         const anchorEl = lineDivs[endLine - 1] as HTMLElement;
         if (anchorEl) {
-          pendingSnippetRef.current = snippet;
-          setPendingMarkId(tempId);
-          setCreatePopover({ anchorEl, tempId, snippet, ctx });
+          openCreatePopover(anchorEl, tempId, snippet, ctx);
         }
       }
       setLineSelectStart(null);
@@ -279,8 +195,6 @@ export function FileViewer({ path }: FileViewerProps) {
     setActiveAnnotationId(id);
   };
 
-  const scrollContainer = contentRef.current?.closest("#plan-scroll-container") as HTMLElement | null;
-
   return (
     <div>
       {/* Code */}
@@ -304,41 +218,7 @@ export function FileViewer({ path }: FileViewerProps) {
         })}
       </pre>
 
-      {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}
-          onAdd={(note) => {
-            const id = generateAnnotationId();
-            renameMarkId(createPopover.tempId, id);
-            addAnnotationWithId(id, createPopover.snippet, note, path, createPopover.ctx);
-            setPendingMarkId(null);
-            setCreatePopover(null);
-          }}
-          onCancel={() => {
-            unwrapMarks(createPopover.tempId);
-            setPendingMarkId(null);
-            setCreatePopover(null);
-          }}
-        />
-      )}
+      {popovers}
     </div>
   );
 }
-