agent-canvas 0.1.9 → 0.1.11

package/daemon/client/App.tsx

@@ -7,6 +7,7 @@ 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";
@@ -26,6 +27,7 @@ export interface RevisionInfo {
   createdAt: string;
   hasFeedback: boolean;
   response?: string;
+  diffStats?: { added: number; removed: number };
 }
 
 export const ActiveViewContext = createContext<{
@@ -58,23 +60,56 @@ export const RevisionContext = createContext<{
   setCompareRevision: () => {},
 });
 
+function resolveTheme(pref: string): "light" | "dark" {
+  if (pref === "auto") return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return pref as "light" | "dark";
+}
+
+function applyTheme(pref: string) {
+  document.documentElement.dataset.theme = resolveTheme(pref);
+}
+
 function ThemeSwitcher() {
-  const [theme, setTheme] = useState(() => localStorage.getItem("canvas-theme") || document.documentElement.dataset.theme || "dark");
+  const [pref, setPref] = useState<"auto" | "light" | "dark">(() => {
+    const stored = localStorage.getItem("canvas-theme");
+    if (stored === "light" || stored === "dark" || stored === "auto") return stored;
+    return "auto";
+  });
+
+  useEffect(() => {
+    applyTheme(pref);
+    if (pref !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme("auto");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [pref]);
 
   const toggle = () => {
-    const next = theme === "dark" ? "light" : "dark";
-    document.documentElement.dataset.theme = next;
+    const next = pref === "auto" ? "light" : pref === "light" ? "dark" : "auto";
     localStorage.setItem("canvas-theme", next);
-    setTheme(next);
+    setPref(next);
   };
 
+  const titles = { auto: "Theme: system (click for light)", light: "Theme: light (click for dark)", dark: "Theme: dark (click for system)" };
+
   return (
     <button
       onClick={toggle}
       className="w-7 h-7 flex items-center justify-center rounded-md text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors"
-      title={theme === "dark" ? "Switch to light theme" : "Switch to dark theme"}
+      title={titles[pref]}
     >
-      {theme === "dark" ? (
+      {pref === "auto" ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+          <line x1="8" y1="21" x2="16" y2="21" />
+          <line x1="12" y1="17" x2="12" y2="21" />
+        </svg>
+      ) : pref === "dark" ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      ) : (
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <circle cx="12" cy="12" r="5" />
           <line x1="12" y1="1" x2="12" y2="3" />
@@ -86,10 +121,6 @@ function ThemeSwitcher() {
           <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
           <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
         </svg>
-      ) : (
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-        </svg>
       )}
     </button>
   );
@@ -274,16 +305,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}
@@ -528,7 +557,7 @@ 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, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  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);
 
@@ -640,10 +669,10 @@ function ResponseBanner({ markdown }: { markdown: string }) {
           scrollContainer={scrollContainer}
           snippet={createPopover.snippet}
           truncateAt={80}
-          onAdd={(note) => {
+          onAdd={(note, images) => {
             const id = generateAnnotationId();
             renameMarkId(createPopover.tempId, id);
-            addAnnotationWithId(id, createPopover.snippet, note, RESPONSE_ANNOTATION_PATH, createPopover.ctx);
+            addAnnotationWithId(id, createPopover.snippet, note, RESPONSE_ANNOTATION_PATH, createPopover.ctx, images);
             setCreatePopover(null);
           }}
           onCancel={() => {
@@ -661,7 +690,17 @@ function ResponseBanner({ markdown }: { markdown: string }) {
             anchorEl={editPopover.anchorEl}
             scrollContainer={scrollContainer}
             initialNote={ann.note}
-            onUpdate={(note) => updateAnnotation(editPopover.annId, 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)}
           />
@@ -691,8 +730,8 @@ 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>
           Canvas
           {activeView.type === "plan" && (
@@ -714,12 +753,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">
@@ -326,8 +357,8 @@ const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRender
 
     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>
   );
 }
-