agent-canvas 0.1.14 → 0.1.16

package/daemon/client/OverviewView.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useContext, useMemo, useRef, useEffect, useCallback } from "react";
+import { SessionContext } from "#canvas/runtime";
+import { PlanRenderer } from "./PlanRenderer";
+import { ComparePanelRenderer } from "./CompareView";
+import { ActiveViewContext, RevisionContext, type CanvasFileInfo, type RevisionInfo } from "./App";
+import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
+import { runDomDiff } from "./domDiff";
+
+interface OverviewViewProps {
+  revision: number;
+  responseBanner?: React.ReactNode;
+}
+
+interface FileChange {
+  filename: string;
+  status: "new" | "changed" | "unchanged";
+  diffStats?: { added: number; removed: number };
+}
+
+export function categorizeChanges(
+  currentRev: RevisionInfo | undefined,
+  previousRev: RevisionInfo | undefined,
+): FileChange[] {
+  if (!currentRev) return [];
+
+  return currentRev.canvasFiles.map(cf => {
+    if (!cf.diffStats) {
+      return { filename: cf.filename, status: "new" as const };
+    }
+    if (cf.diffStats.added === 0 && cf.diffStats.removed === 0) {
+      return { filename: cf.filename, status: "unchanged" as const, diffStats: cf.diffStats };
+    }
+    return { filename: cf.filename, status: "changed" as const, diffStats: cf.diffStats };
+  });
+}
+
+export function getAffectedFiles(changes: FileChange[]): string[] {
+  return changes.filter(c => c.status !== "unchanged").map(c => c.filename);
+}
+
+export function OverviewView({ revision, responseBanner }: OverviewViewProps) {
+  const { setActiveView } = useContext(ActiveViewContext);
+  const { revisions } = useContext(RevisionContext);
+
+  const currentRev = revisions.find(r => r.revision === revision);
+  const previousRev = revisions.find(r => r.revision === revision - 1);
+  const changes = useMemo(() => categorizeChanges(currentRev, previousRev), [currentRev, previousRev]);
+
+  const affected = changes.filter(c => c.status !== "unchanged");
+  const unchanged = changes.filter(c => c.status === "unchanged");
+
+  return (
+    <div className="max-w-[720px] mx-auto px-6 pt-12 pb-32">
+      {responseBanner}
+
+      {affected.map(change => (
+        <OverviewFileSection
+          key={change.filename}
+          change={change}
+          revision={revision}
+          previousRevision={previousRev?.revision}
+          onOpenTab={() => setActiveView({ type: "canvas", filename: change.filename })}
+        />
+      ))}
+
+      {unchanged.length > 0 && (
+        <div className="mt-8 border-t border-border-subtle pt-4">
+          <div className="text-[11px] font-body font-medium uppercase tracking-widest text-text-tertiary mb-3">
+            Unchanged
+          </div>
+          {unchanged.map(change => (
+            <UnchangedFileRow
+              key={change.filename}
+              change={change}
+              revision={revision}
+              onOpenTab={() => setActiveView({ type: "canvas", filename: change.filename })}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type ViewMode = "rendered" | "unified" | "side-by-side";
+
+function ViewModeToggle({ mode, onChange, showDiff }: { mode: ViewMode; onChange: (m: ViewMode) => void; showDiff: boolean }) {
+  if (!showDiff) return null;
+  return (
+    <div className="flex items-center bg-bg-elevated rounded-md p-0.5">
+      {(["rendered", "unified", "side-by-side"] as ViewMode[]).map(m => (
+        <button
+          key={m}
+          onClick={() => onChange(m)}
+          className={`text-[10px] font-body px-2 py-0.5 rounded transition-colors ${
+            mode === m
+              ? "bg-bg-surface text-text-primary font-medium shadow-sm"
+              : "text-text-tertiary hover:text-text-secondary"
+          }`}
+        >
+          {m === "rendered" ? "Full" : m === "unified" ? "Unified" : "Split"}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function OverviewFileSection({
+  change,
+  revision,
+  previousRevision,
+  onOpenTab,
+}: {
+  change: FileChange;
+  revision: number;
+  previousRevision?: number;
+  onOpenTab: () => void;
+}) {
+  const label = change.filename.replace(/\.jsx$/, "");
+  const isNew = change.status === "new";
+  const diffStats = change.diffStats;
+  const canDiff = change.status === "changed" && previousRevision != null;
+  const [viewMode, setViewMode] = useState<ViewMode>("rendered");
+
+  return (
+    <div className="mb-8">
+      {/* File header */}
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-border-subtle">
+        <span className={`text-[11px] font-mono px-1.5 py-0.5 rounded ${
+          isNew
+            ? "bg-accent-green/10 text-accent-green border border-accent-green/20"
+            : "bg-accent-amber/10 text-accent-amber border border-accent-amber/20"
+        }`}>
+          {isNew ? "new" : "modified"}
+        </span>
+        <span className="text-[14px] font-body font-medium text-text-primary">{label}</span>
+        {diffStats && (diffStats.added > 0 || diffStats.removed > 0) && (
+          <span className="text-[11px] font-mono text-text-tertiary">
+            <span className="text-accent-green">+{diffStats.added}</span>
+            {" "}
+            <span className="text-accent-red">-{diffStats.removed}</span>
+          </span>
+        )}
+        <ViewModeToggle mode={viewMode} onChange={setViewMode} showDiff={canDiff} />
+        <button
+          onClick={onOpenTab}
+          className={`${canDiff ? "" : "ml-auto"} text-[11px] font-body font-medium text-accent-blue hover:text-accent-blue/80 transition-colors`}
+        >
+          Open in tab
+        </button>
+      </div>
+
+      {/* Content based on view mode */}
+      {viewMode === "rendered" ? (
+        <div data-canvas-file={change.filename}>
+          <PlanRenderer revision={revision} filename={change.filename} />
+        </div>
+      ) : canDiff && previousRevision != null ? (
+        <InlineDiff
+          key={`${viewMode}-${revision}-${previousRevision}`}
+          filename={change.filename}
+          leftRev={previousRevision}
+          rightRev={revision}
+          mode={viewMode}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/* ── Inline diff for overview ── */
+
+function InlineDiff({
+  filename,
+  leftRev,
+  rightRev,
+  mode,
+}: {
+  filename: string;
+  leftRev: number;
+  rightRev: number;
+  mode: "unified" | "side-by-side";
+}) {
+  const sessionId = useContext(SessionContext);
+
+  if (mode === "unified") {
+    return <InlineUnifiedDiff sessionId={sessionId} filename={filename} leftRev={leftRev} rightRev={rightRev} />;
+  }
+  return <InlineSideBySideDiff sessionId={sessionId} filename={filename} leftRev={leftRev} rightRev={rightRev} />;
+}
+
+function InlineUnifiedDiff({ sessionId, filename, leftRev, rightRev }: { sessionId: string; filename: string; leftRev: number; rightRev: number }) {
+  const oldRef = useRef<HTMLDivElement>(null);
+  const newRef = useRef<HTMLDivElement>(null);
+  const unifiedRef = useRef<HTMLDivElement>(null);
+  const [leftReady, setLeftReady] = useState(false);
+  const [rightReady, setRightReady] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!leftReady || !rightReady || done) return;
+    if (!oldRef.current || !newRef.current) return;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!oldRef.current || !newRef.current || !unifiedRef.current) return;
+        try {
+          const oldTree = extractBlockTree(oldRef.current);
+          const newTree = extractBlockTree(newRef.current);
+          const matches = matchBlocks(oldTree, newTree);
+          const { fragment } = buildUnifiedDom(matches);
+          unifiedRef.current.innerHTML = "";
+          unifiedRef.current.appendChild(fragment);
+          setDone(true);
+        } catch (e) {
+          setError(e instanceof Error ? e.message : String(e));
+        }
+      });
+    });
+  }, [leftReady, rightReady, done]);
+
+  return (
+    <div>
+      {/* Offscreen panels for diff computation */}
+      {!done && !error && (
+        <div style={{ position: "absolute", left: -9999, visibility: "hidden" as const, pointerEvents: "none" as const, width: 720 }}>
+          <ComparePanelRenderer ref={oldRef} sessionId={sessionId} revision={leftRev} filename={filename} onReady={() => setLeftReady(true)} onError={(msg) => setError(msg)} />
+          <ComparePanelRenderer ref={newRef} sessionId={sessionId} revision={rightRev} filename={filename} onReady={() => setRightReady(true)} onError={(msg) => setError(msg)} />
+        </div>
+      )}
+      {!done && !error && (
+        <div className="flex items-center justify-center h-24 text-text-tertiary font-body text-[13px]">Computing diff...</div>
+      )}
+      {error && (
+        <div className="text-accent-red text-[13px] font-body p-3 bg-accent-red-muted rounded-lg">{error}</div>
+      )}
+      <div ref={unifiedRef} />
+    </div>
+  );
+}
+
+function InlineSideBySideDiff({ sessionId, filename, leftRev, rightRev }: { sessionId: string; filename: string; leftRev: number; rightRev: number }) {
+  const oldRef = useRef<HTMLDivElement>(null);
+  const newRef = useRef<HTMLDivElement>(null);
+  const [leftReady, setLeftReady] = useState(false);
+  const [rightReady, setRightReady] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const handleLeftReady = useCallback(() => setLeftReady(true), []);
+  const handleRightReady = useCallback(() => setRightReady(true), []);
+
+  useEffect(() => {
+    if (!leftReady || !rightReady || done) return;
+    if (!oldRef.current || !newRef.current) return;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!oldRef.current || !newRef.current) return;
+        runDomDiff(oldRef.current, newRef.current);
+        setDone(true);
+      });
+    });
+  }, [leftReady, rightReady, done]);
+
+  return (
+    <div className="flex gap-0 border-y border-border-subtle overflow-hidden w-screen relative left-1/2 -translate-x-1/2">
+      <div className="w-1/2 border-r border-border-subtle">
+        <div className="px-2 py-1 text-[10px] font-body font-medium text-text-tertiary bg-bg-elevated border-b border-border-subtle">
+          Rev {leftRev}
+        </div>
+        <div className="px-6 py-4 max-w-[600px] mx-auto">
+          <ComparePanelRenderer ref={oldRef} sessionId={sessionId} revision={leftRev} filename={filename} onReady={handleLeftReady} />
+        </div>
+      </div>
+      <div className="w-1/2">
+        <div className="px-2 py-1 text-[10px] font-body font-medium text-text-tertiary bg-bg-elevated border-b border-border-subtle">
+          Rev {rightRev}
+        </div>
+        <div className="px-6 py-4 max-w-[600px] mx-auto">
+          <ComparePanelRenderer ref={newRef} sessionId={sessionId} revision={rightRev} filename={filename} onReady={handleRightReady} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UnchangedFileRow({
+  change,
+  revision,
+  onOpenTab,
+}: {
+  change: FileChange;
+  revision: number;
+  onOpenTab: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const label = change.filename.replace(/\.jsx$/, "");
+
+  return (
+    <div className="mb-2">
+      <div className="flex items-center gap-2 py-1.5">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-text-tertiary hover:text-text-secondary transition-colors"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={`transition-transform duration-150 ${expanded ? "rotate-90" : ""}`}>
+            <path d="M3.5 2L6.5 5L3.5 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </button>
+        <span className="text-[13px] font-body text-text-secondary">{label}</span>
+        <button
+          onClick={onOpenTab}
+          className="ml-auto text-[11px] font-body text-text-tertiary hover:text-accent-blue transition-colors"
+        >
+          Open in tab
+        </button>
+      </div>
+      {expanded && (
+        <div className="ml-5 mt-1 mb-3" data-canvas-file={change.filename}>
+          <PlanRenderer revision={revision} filename={change.filename} />
+        </div>
+      )}
+    </div>
+  );
+}

package/daemon/client/PlanRenderer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useContext, useMemo } from "react";
 import { createPortal } from "react-dom";
-import { SessionContext } from "#canvas/runtime";
+import { SessionContext, CanvasFileCtx } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { extractContext } from "./annotationContext";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
@@ -14,15 +14,18 @@ const ANNOTATABLE_SELECTOR = "[data-md='item'], [data-md='section'], [data-md='t
 
 interface PlanRendererProps {
   revision: number;
+  filename: string;
 }
 
-export function PlanRenderer({ revision }: PlanRendererProps) {
+export function PlanRenderer({ revision, filename }: PlanRendererProps) {
   const sessionId = useContext(SessionContext);
   const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
-  const { annotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const { annotations: allAnnotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  // Filter annotations to this canvas file
+  const annotations = useMemo(() => allAnnotations.filter(a => !a.filePath && (!a.canvasFile || a.canvasFile === filename)), [allAnnotations, filename]);
   const [editingAnn, setEditingAnn] = useState<{ id: string; note: string } | null>(null);
 
   // Block annotation hover state
@@ -37,10 +40,11 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
     setLoading(true);
     setError(null);
     setFocusedBlockIndex(null);
-    import(`/api/session/${sessionId}/plan.js?rev=${revision}&t=${Date.now()}`)
+    const jsName = filename.replace(/\.jsx$/, ".js");
+    import(`/api/session/${sessionId}/canvas/${encodeURIComponent(jsName)}?rev=${revision}&t=${Date.now()}`)
       .then((mod) => { setPlanComponent(() => mod.default); setLoading(false); })
       .catch((e) => { setError(e.message); setLoading(false); });
-  }, [sessionId, revision]);
+  }, [sessionId, revision, filename]);
 
   const scrollContainer = document.getElementById("plan-scroll-container");
 
@@ -49,6 +53,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
     restoreKey: PlanComponent,
     restoreAnnotations: annotations,
     extractContext: (range) => extractContext(range, containerRef.current!),
+    canvasFile: filename,
     scrollContainer,
   });
 
@@ -257,7 +262,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
   }
 
   return (
-    <>
+    <CanvasFileCtx.Provider value={filename}>
       <div ref={containerRef} className="plan-content plan-updated">
         {planElement}
       </div>
@@ -298,7 +303,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
           truncateAt={80}
           onAdd={(note, images) => {
             const id = generateAnnotationId();
-            addAnnotationWithId(id, blockPopover.snippet, note, undefined, undefined, images);
+            addAnnotationWithId(id, blockPopover.snippet, note, undefined, undefined, images, filename);
             setBlockPopover(null);
           }}
           onCancel={() => setBlockPopover(null)}
@@ -328,7 +333,7 @@ export function PlanRenderer({ revision }: PlanRendererProps) {
           />
         );
       })()}
-    </>
+    </CanvasFileCtx.Provider>
   );
 }
 

package/daemon/client/RevisionSelect.tsx

@@ -86,13 +86,22 @@ export function RevisionSelect({ value, onChange, accent = "default", className
                 )}
               </span>
               <span className="text-[10px] text-text-tertiary flex-shrink-0 flex items-center gap-1.5">
-                {r.diffStats && (
-                  <span className="font-mono">
-                    <span className="text-accent-green">+{r.diffStats.added}</span>
-                    {" "}
-                    <span className="text-accent-red">-{r.diffStats.removed}</span>
-                  </span>
-                )}
+                {(() => {
+                  const stats = r.canvasFiles?.reduce((acc, cf) => {
+                    if (cf.diffStats) { acc.added += cf.diffStats.added; acc.removed += cf.diffStats.removed; }
+                    return acc;
+                  }, { added: 0, removed: 0 });
+                  if (stats && (stats.added > 0 || stats.removed > 0)) {
+                    return (
+                      <span className="font-mono">
+                        <span className="text-accent-green">+{stats.added}</span>
+                        {" "}
+                        <span className="text-accent-red">-{stats.removed}</span>
+                      </span>
+                    );
+                  }
+                  return null;
+                })()}
                 {r.revision === currentRevision ? "current" : r.hasFeedback ? "sent" : relativeTime(r.createdAt)}
               </span>
             </button>

package/daemon/client/components/Mermaid.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
 import ReactDOM from "react-dom";
-import { useAnnotations, Annotation } from "#canvas/runtime";
+import { useAnnotations, useCanvasFile, Annotation } from "#canvas/runtime";
 import { AnnotationCreatePopover } from "../Popover";
 
 interface MermaidProps {
@@ -159,6 +159,7 @@ export function Mermaid({ children }: MermaidProps) {
   const [svgHtml, setSvgHtml] = useState("");
   const source = typeof children === "string" ? children : String(children ?? "");
   const { annotations, addAnnotationWithId, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const canvasFile = useCanvasFile();
   const [nodePopover, setNodePopover] = useState<NodePopoverState | null>(null);
   const { zoom, zoomIn, zoomOut, zoomReset, setZoom } = useZoom(1);
 
@@ -278,7 +279,7 @@ export function Mermaid({ children }: MermaidProps) {
           }
           onAdd={(note, images) => {
             const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-            addAnnotationWithId(id, `[Diagram ${nodePopover.prefix.toLowerCase()}] ${nodePopover.snippet}`, note, undefined, undefined, images);
+            addAnnotationWithId(id, `[Diagram ${nodePopover.prefix.toLowerCase()}] ${nodePopover.snippet}`, note, undefined, undefined, images, canvasFile || undefined);
             setNodePopover(null);
           }}
           onCancel={() => setNodePopover(null)}

package/daemon/client/generateMarkdown.ts

@@ -13,7 +13,7 @@ export function generateMarkdown(
 ): string {
   const parts: string[] = [];
   const responseAnns = annotations.filter((a) => a.filePath === RESPONSE_ANNOTATION_PATH);
-  const planAnns = annotations.filter((a) => !a.filePath);
+  const canvasAnns = annotations.filter((a) => !a.filePath);
   const fileAnns = annotations.filter((a) => a.filePath && a.filePath !== RESPONSE_ANNOTATION_PATH);
   const resps = responses ? Array.from(responses.values()).filter((r) => hasValue(r)) : [];
   const fbEntries = feedbackEntries
@@ -43,12 +43,31 @@ export function generateMarkdown(
     }
   }
 
-  // Plan annotations grouped by hierarchy
-  if (planAnns.length > 0) {
+  // Canvas annotations grouped by canvas file, then hierarchy
+  if (canvasAnns.length > 0) {
     parts.push("## Canvas annotations");
     parts.push("");
-    const grouped = groupByHierarchy(planAnns);
-    parts.push(renderHierarchyGroup(grouped));
+
+    // Group by canvasFile
+    const byCanvas = new Map<string, Annotation[]>();
+    for (const ann of canvasAnns) {
+      const key = ann.canvasFile || "";
+      if (!byCanvas.has(key)) byCanvas.set(key, []);
+      byCanvas.get(key)!.push(ann);
+    }
+
+    const canvasKeys = [...byCanvas.keys()].sort();
+    const multipleCanvases = canvasKeys.length > 1 || (canvasKeys.length === 1 && canvasKeys[0] !== "");
+
+    for (const canvasKey of canvasKeys) {
+      const anns = byCanvas.get(canvasKey)!;
+      if (multipleCanvases && canvasKey) {
+        parts.push(`### ${canvasKey.replace(/\.jsx$/, "")}`);
+        parts.push("");
+      }
+      const grouped = groupByHierarchy(anns);
+      parts.push(renderHierarchyGroup(grouped));
+    }
   }
 
   // File annotations grouped by path

package/daemon/client/runtime.ts

@@ -18,6 +18,7 @@ export interface Annotation {
   note: string;
   createdAt: string;
   filePath?: string;
+  canvasFile?: string;
   context?: AnnotationContext;
   images?: string[];
 }
@@ -42,7 +43,7 @@ export interface FeedbackEntry {
 export interface AnnotationContextValue {
   annotations: Annotation[];
   addAnnotation: (snippet: string, note: string, filePath?: string) => void;
-  addAnnotationWithId: (id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[]) => void;
+  addAnnotationWithId: (id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[], canvasFile?: string) => void;
   updateAnnotation: (id: string, note: string) => void;
   removeAnnotation: (id: string) => void;
   addAnnotationImage: (id: string, imagePath: string) => void;
@@ -84,8 +85,14 @@ export function useFeedback(
 
 export { SessionContext } from "./SessionContext";
 
+// CanvasFile context — tells components which canvas file they belong to
+export const CanvasFileCtx = createContext<string>("");
+export function useCanvasFile(): string {
+  return useContext(CanvasFileCtx);
+}
+
 // ActiveView navigation — allows components (e.g. FilePreview) to open files
-export type ActiveView = { type: "plan" } | { type: "file"; path: string };
+export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
 
 export const ActiveViewCtx = createContext<{
   setActiveView: (v: ActiveView) => void;

package/daemon/client/unifiedDiff.ts

@@ -250,7 +250,9 @@ function processBlockWithChildren(
     } else if (cm.kind === "removed") {
       hasChanges = true;
       const ghost = ghostBlock(cm.oldBlock!.element);
-      const insertBefore = findInsertionPoint(childMatches, cm, cloneMap.newMap);
+      const refNode = findInsertionPoint(childMatches, cm, cloneMap.newMap);
+      // refNode may be deeply nested — walk up to find a direct child of the container
+      const insertBefore = refNode ? directChildOf(newContainer, refNode) : null;
       newContainer.insertBefore(ghost, insertBefore);
     } else if (cm.kind === "added") {
       hasChanges = true;
@@ -374,6 +376,15 @@ function findInsertionPoint(
   return null;
 }
 
+/** Walk up from `el` to find the ancestor that is a direct child of `container`. */
+function directChildOf(container: HTMLElement, el: HTMLElement): HTMLElement | null {
+  let node: HTMLElement | null = el;
+  while (node && node.parentElement !== container) {
+    node = node.parentElement;
+  }
+  return node;
+}
+
 /* ── Element-level diff for blocks with rich internal structure (e.g. markdown) ── */
 
 /**

package/daemon/client/useTextAnnotation.tsx

@@ -16,12 +16,14 @@ interface UseTextAnnotationOptions {
   extractContext: (range: Range) => AnnotationContext | undefined;
   /** Optional filePath to associate with created annotations */
   filePath?: string;
+  /** Optional canvasFile to associate with created annotations */
+  canvasFile?: string;
   /** Scroll container for popover positioning */
   scrollContainer?: HTMLElement | null;
 }
 
 export function useTextAnnotation(options: UseTextAnnotationOptions) {
-  const { containerRef, restoreKey, restoreAnnotations, extractContext, filePath, scrollContainer } = options;
+  const { containerRef, restoreKey, restoreAnnotations, extractContext, filePath, canvasFile, scrollContainer } = options;
   const { annotations: allAnnotations, addAnnotationWithId, removeAnnotation, updateAnnotation, addAnnotationImage, removeAnnotationImage, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
 
   const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
@@ -32,6 +34,8 @@ export function useTextAnnotation(options: UseTextAnnotationOptions) {
   extractContextRef.current = extractContext;
   const filePathRef = useRef(filePath);
   filePathRef.current = filePath;
+  const canvasFileRef = useRef(canvasFile);
+  canvasFileRef.current = canvasFile;
   const addAnnotationRef = useRef(addAnnotationWithId);
   addAnnotationRef.current = addAnnotationWithId;
   const activeAnnotationIdRef = useRef(activeAnnotationId);
@@ -167,7 +171,7 @@ export function useTextAnnotation(options: UseTextAnnotationOptions) {
           onAdd={(note, images) => {
             const id = generateAnnotationId();
             renameMarkId(createPopover.tempId, id);
-            addAnnotationRef.current(id, createPopover.snippet, note, filePathRef.current, createPopover.ctx, images);
+            addAnnotationRef.current(id, createPopover.snippet, note, filePathRef.current, createPopover.ctx, images, canvasFileRef.current);
             setCreatePopover(null);
           }}
           onCancel={() => {