agent-canvas 0.1.14 → 0.1.16

package/bin/lib/commands/push.ts

@@ -1,6 +1,6 @@
 import { parseArgs } from "util";
-import { readFileSync, existsSync } from "fs";
-import { resolve } from "path";
+import { existsSync, statSync } from "fs";
+import { resolve, basename } from "path";
 import { BASE_URL } from "../config.ts";
 import { ensureDaemon } from "../daemon-lifecycle.ts";
 import { getSessionId, openBrowser } from "../helpers.ts";
@@ -16,30 +16,40 @@ export async function handlePush(args: string[]) {
     allowPositionals: true,
   });
 
-  const filePath = positionals[0];
-  if (!filePath) {
-    console.error("Error: No file specified. Usage: agent-canvas push <file.jsx>");
+  const target = positionals[0];
+  if (!target) {
+    console.error("Error: No directory specified. Usage: agent-canvas push <directory>");
     process.exit(1);
   }
 
-  const resolvedPath = resolve(filePath);
+  const resolvedPath = resolve(target);
   if (!existsSync(resolvedPath)) {
-    console.error(`Error: File not found: ${resolvedPath}`);
+    console.error(`Error: Path not found: ${resolvedPath}`);
+    process.exit(1);
+  }
+
+  if (statSync(resolvedPath).isFile()) {
+    console.error(`Error: Expected a directory, got a file: ${resolvedPath}`);
+    console.error("Usage: agent-canvas push <directory>");
     process.exit(1);
   }
-  const jsx = readFileSync(resolvedPath, "utf-8");
 
   const sessionId = getSessionId(values.session);
   const projectRoot = process.env.CANVAS_PROJECT_ROOT || process.cwd();
   const label = values.label;
-  const autoLabel = !label ? resolvedPath.split("/").pop()?.replace(/\.jsx$/, "") : undefined;
+  const autoLabel = !label ? basename(resolvedPath) : undefined;
 
   await ensureDaemon();
 
   const response = await fetch(`${BASE_URL}/api/session/${sessionId}/plan`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ jsx, projectRoot, label: label || autoLabel, sourceFile: resolvedPath.split("/").pop(), ...(values.response ? { response: values.response } : {}) }),
+    body: JSON.stringify({
+      directory: resolvedPath,
+      projectRoot,
+      label: label || autoLabel,
+      ...(values.response ? { response: values.response } : {}),
+    }),
   });
 
   const result = await response.json() as any;
@@ -50,6 +60,11 @@ export async function handlePush(args: string[]) {
       console.log(result.unconsumedFeedback);
     } else {
       console.error(`Compilation error:\n${result.error}`);
+      if (result.errors) {
+        for (const [file, err] of Object.entries(result.errors)) {
+          console.error(`  ${file}: ${err}`);
+        }
+      }
     }
     process.exit(1);
   }
@@ -63,5 +78,6 @@ export async function handlePush(args: string[]) {
     browserUrl: result.browserUrl,
     revision: result.revision,
     sessionId,
+    canvasFiles: result.canvasFiles,
   }));
 }

package/bun.lock

@@ -7,6 +7,7 @@
       "dependencies": {
         "marked": "^17.0.4",
         "preact": "^10.25.0",
+        "preact-render-to-string": "^6.6.6",
       },
       "devDependencies": {
         "@tailwindcss/cli": "4",
@@ -151,6 +152,8 @@
 
     "preact": ["preact@10.29.0", "", {}, "sha512-wSAGyk2bYR1c7t3SZ3jHcM6xy0lcBcDel6lODcs9ME6Th++Dx2KU+6D3HD8wMMKGA8Wpw7OMd3/4RGzYRpzwRg=="],
 
+    "preact-render-to-string": ["preact-render-to-string@6.6.6", "", { "peerDependencies": { "preact": ">=10 || >= 11.0.0-0" } }, "sha512-EfqZJytnjJldV+YaaqhthU2oXsEf5e+6rDv957p+zxAvNfFLQOPfvBOTncscQ+akzu6Wrl7s3Pa0LjUQmWJsGQ=="],
+
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
     "tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="],

package/daemon/client/AnnotationProvider.tsx

@@ -82,8 +82,8 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
     return () => { if (persistTimerRef.current) clearTimeout(persistTimerRef.current); };
   }, [annotations, generalNote, responses, feedbackEntries, sessionId, revision, isReadOnly]);
 
-  const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[]) => {
-    setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context, ...(images?.length ? { images } : {}) }]);
+  const addAnnotationWithId = useCallback((id: string, snippet: string, note: string, filePath?: string, context?: AnnotationContext, images?: string[], canvasFile?: string) => {
+    setAnnotations((prev) => [...prev, { id, snippet, note, createdAt: new Date().toISOString(), filePath, context, ...(images?.length ? { images } : {}), ...(canvasFile ? { canvasFile } : {}) }]);
   }, []);
 
   const addAnnotation = useCallback((snippet: string, note: string, filePath?: string) => {

package/daemon/client/App.tsx

@@ -12,22 +12,27 @@ import { FileViewer } from "./FileViewer";
 import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
+import { OverviewView, categorizeChanges, getAffectedFiles } from "./OverviewView";
 import { RevisionSelect } from "./RevisionSelect";
 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 };
+export type ActiveView = { type: "overview" } | { type: "canvas"; filename: string } | { type: "file"; path: string };
+
+export interface CanvasFileInfo {
+  filename: string;
+  diffStats?: { added: number; removed: number };
+}
 
 export interface RevisionInfo {
   revision: number;
   label?: string;
-  sourceFile?: string;
+  canvasFiles: CanvasFileInfo[];
   createdAt: string;
   hasFeedback: boolean;
   response?: string;
-  diffStats?: { added: number; removed: number };
 }
 
 export const ActiveViewContext = createContext<{
@@ -35,11 +40,13 @@ export const ActiveViewContext = createContext<{
   setActiveView: (v: ActiveView) => void;
   openFiles: string[];
   closeFile: (path: string) => void;
+  canvasFiles: string[];
 }>({
-  activeView: { type: "plan" },
+  activeView: { type: "overview" },
   setActiveView: () => {},
   openFiles: [],
   closeFile: () => {},
+  canvasFiles: [],
 });
 
 export const RevisionContext = createContext<{
@@ -146,14 +153,11 @@ function RevisionSelector() {
       />
       <button
         onClick={() => {
-          const current = revisions.find((r) => r.revision === selectedRevision);
-          const sourceFile = current?.sourceFile;
           let left: number;
           if (selectedRevision === currentRevision) {
-            // Find previous revision with same sourceFile
             const prev = [...revisions]
               .reverse()
-              .find((r) => r.revision < currentRevision && (!sourceFile || r.sourceFile === sourceFile));
+              .find((r) => r.revision < currentRevision);
             left = prev?.revision ?? Math.max(1, currentRevision - 1);
           } else {
             left = selectedRevision;
@@ -176,7 +180,8 @@ function App() {
   const [compareRevision, setCompareRevision] = useState<{ left: number; right: number } | null>(null);
   const [connected, setConnected] = useState(false);
   const [previewOpen, setPreviewOpen] = useState(false);
-  const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "plan" });
+  const [canvasFiles, setCanvasFiles] = useState<string[]>([]);
+  const [activeView, setActiveViewRaw] = useState<ActiveView>({ type: "overview" });
   const [openFiles, setOpenFiles] = useState<string[]>([]);
   const wsRef = useRef<WebSocket | null>(null);
 
@@ -196,6 +201,10 @@ function App() {
     }
     if (activeView.type === "file") {
       parts.push(activeView.path.split("/").pop() || activeView.path);
+    } else if (activeView.type === "overview") {
+      parts.push("Overview");
+    } else if (activeView.type === "canvas" && canvasFiles.length > 1 && activeView.filename) {
+      parts.push(activeView.filename.replace(/\.jsx$/, ""));
     } else if (compareRevision) {
       parts.push("Compare");
     }
@@ -210,10 +219,8 @@ function App() {
 
   const setActiveView = useCallback((v: ActiveView) => {
     // Save current scroll position before switching
-    scrollPositions.current.set(
-      activeView.type === "plan" ? "plan" : `file:${activeView.path}`,
-      window.scrollY
-    );
+    const key = activeView.type === "overview" ? "overview" : activeView.type === "canvas" ? `canvas:${activeView.filename}` : `file:${activeView.path}`;
+    scrollPositions.current.set(key, window.scrollY);
     setActiveViewRaw(v);
     if (v.type === "file") {
       setOpenFiles((prev) => prev.includes(v.path) ? prev : [...prev, v.path]);
@@ -225,16 +232,15 @@ function App() {
     setOpenFiles((prev) => prev.filter((p) => p !== path));
     setActiveViewRaw((prev) => {
       if (prev.type === "file" && prev.path === path) {
-        scrollPositions.current.set(`file:${path}`, window.scrollY);
-        return { type: "plan" };
+        return canvasFiles.length > 1 ? { type: "overview" } : { type: "canvas", filename: canvasFiles[0] || "" };
       }
       return prev;
     });
-  }, []);
+  }, [canvasFiles]);
 
   // Restore scroll synchronously after DOM update (before paint)
   useLayoutEffect(() => {
-    const key = activeView.type === "plan" ? "plan" : `file:${activeView.path}`;
+    const key = activeView.type === "overview" ? "overview" : activeView.type === "canvas" ? `canvas:${activeView.filename}` : `file:${activeView.path}`;
     window.scrollTo(0, scrollPositions.current.get(key) || 0);
   }, [activeView]);
 
@@ -249,6 +255,20 @@ function App() {
           setSelectedRevision(data.currentRevision);
           setRevisions(data.revisions || []);
         }
+        if (data.canvasFiles) {
+          const files = (data.canvasFiles as string[]).sort();
+          setCanvasFiles(files);
+          setActiveViewRaw((prev) => {
+            if (prev.type === "overview") {
+              // On initial load: overview if multiple files, direct if single
+              return files.length > 1 ? prev : { type: "canvas", filename: files[0] || "" };
+            }
+            if (prev.type === "canvas" && (!prev.filename || !files.includes(prev.filename))) {
+              return { type: "canvas", filename: files[0] || "" };
+            }
+            return prev;
+          });
+        }
         if (data.projectRoot) setProjectRoot(data.projectRoot);
       })
       .catch(() => {});
@@ -270,7 +290,26 @@ function App() {
             setCurrentRevision(data.currentRevision);
             setSelectedRevision(data.currentRevision);
             setCompareRevision(null);
-            if (data.revisions) setRevisions(data.revisions);
+            if (data.revisions) {
+              const allRevisions = data.revisions as RevisionInfo[];
+              setRevisions(allRevisions);
+              const latest = allRevisions.find((r: RevisionInfo) => r.revision === data.currentRevision);
+              if (latest?.canvasFiles) {
+                const files = latest.canvasFiles.map((cf: CanvasFileInfo) => cf.filename).sort();
+                setCanvasFiles(files);
+                // Determine what changed and auto-navigate
+                const previous = allRevisions.find((r: RevisionInfo) => r.revision === data.currentRevision - 1);
+                const changes = categorizeChanges(latest, previous);
+                const affected = getAffectedFiles(changes);
+                if (affected.length === 1) {
+                  setActiveViewRaw({ type: "canvas", filename: affected[0] });
+                } else if (affected.length > 1 || files.length > 1) {
+                  setActiveViewRaw({ type: "overview" });
+                } else {
+                  setActiveViewRaw({ type: "canvas", filename: files[0] || "" });
+                }
+              }
+            }
           }
           if (data.type === "revision-updated") {
             if (data.revisions) setRevisions(data.revisions);
@@ -299,7 +338,7 @@ function App() {
     <SessionContext.Provider value={sessionId}>
       <RevisionContext.Provider value={{ currentRevision, selectedRevision, revisions, setSelectedRevision, isReadOnly, compareRevision, setCompareRevision }}>
         <AnnotationProvider key={`${sessionId}:${selectedRevision}`} sessionId={sessionId} revision={selectedRevision} isReadOnly={isReadOnly}>
-          <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile }}>
+          <ActiveViewContext.Provider value={{ activeView, setActiveView, openFiles, closeFile, canvasFiles }}>
           <ActiveViewCtx.Provider value={{ setActiveView }}>
             <div className="min-h-screen bg-bg-base">
               {/* Left panel — fixed to viewport */}
@@ -344,12 +383,19 @@ function App() {
                 </div>
 
                 <ContentTabs />
-                {/* All views stay mounted; inactive ones are hidden */}
-                <div style={{ display: activeView.type === "plan" ? undefined : "none" }}>
+                {/* Overview — shows all affected canvases inline */}
+                {activeView.type === "overview" && (
+                  <OverviewView
+                    revision={selectedRevision}
+                    responseBanner={selectedRevInfo?.response ? <ResponseBanner markdown={selectedRevInfo.response} /> : undefined}
+                  />
+                )}
+                {/* Individual canvas view — only mounted when active */}
+                {activeView.type === "canvas" && canvasFiles.includes(activeView.filename) && (
                   <div className="relative max-w-[720px] mx-auto px-6 pt-12 pb-32">
                     <button
                       onClick={() => {
-                        const planContent = document.querySelector(".plan-content");
+                        const planContent = document.querySelector(`[data-canvas-file="${activeView.filename}"] .plan-content`);
                         if (!planContent) return;
                         const md = exportCanvasToMarkdown(planContent as HTMLElement);
                         navigator.clipboard.writeText(md).then(() => {
@@ -372,12 +418,15 @@ function App() {
                         <polyline points="20 6 9 17 4 12"/>
                       </svg>
                     </button>
-                    {selectedRevInfo?.response && (
+                    {/* Show response banner on individual canvas only when there's no overview (single canvas) */}
+                    {canvasFiles.length <= 1 && selectedRevInfo?.response && (
                       <ResponseBanner markdown={selectedRevInfo.response} />
                     )}
-                    <PlanRenderer revision={selectedRevision} />
+                    <div data-canvas-file={activeView.filename}>
+                      <PlanRenderer key={activeView.filename} revision={selectedRevision} filename={activeView.filename} />
+                    </div>
                   </div>
-                </div>
+                )}
                 {openFiles.map((filePath) => (
                   <div key={filePath} style={{ display: activeView.type === "file" && activeView.path === filePath ? undefined : "none" }}>
                     <FileViewer path={filePath} />
@@ -715,37 +764,66 @@ function ResponseBanner({ markdown }: { markdown: string }) {
 }
 
 function ContentTabs() {
-  const { activeView, setActiveView, openFiles, closeFile } = React.useContext(ActiveViewContext);
+  const { activeView, setActiveView, openFiles, closeFile, canvasFiles } = React.useContext(ActiveViewContext);
   const sessionId = React.useContext(SessionContext);
   const { addAnnotationWithId, setActiveAnnotationId } = useAnnotations();
 
-  const showTabs = openFiles.length > 0;
+  const showTabs = canvasFiles.length > 1 || openFiles.length > 0;
   if (!showTabs) return null;
 
   return (
     <div className="flex items-center border-b border-border-medium bg-bg-surface overflow-x-auto sticky top-0 z-10">
-      {/* Plan tab — only show when file tabs exist */}
-      {showTabs && (
-        <button
-          onClick={() => setActiveView({ type: "plan" })}
-          className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-body whitespace-nowrap transition-colors relative ${
-            activeView.type === "plan"
-              ? "text-text-primary"
-              : "text-text-tertiary hover:text-text-secondary"
-          }`}
-        >
-          <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" && (
-            <span className="absolute bottom-0 left-3 right-3 h-[2px] bg-text-primary rounded-full" />
-          )}
-        </button>
+      {/* Overview tab — only when multiple canvases */}
+      {canvasFiles.length > 1 && (
+        <>
+          <button
+            onClick={() => setActiveView({ type: "overview" })}
+            className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-body whitespace-nowrap transition-colors relative ${
+              activeView.type === "overview"
+                ? "text-text-primary"
+                : "text-text-tertiary hover:text-text-secondary"
+            }`}
+          >
+            <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>
+            Overview
+            {activeView.type === "overview" && (
+              <span className="absolute bottom-0 left-3 right-3 h-[2px] bg-text-primary rounded-full" />
+            )}
+          </button>
+          <span className="w-px h-4 bg-border-medium flex-shrink-0" />
+        </>
       )}
 
-      {showTabs && <>
-      {/* Separator */}
+      {/* Canvas tabs */}
+      {canvasFiles.map((filename, i) => {
+        const label = filename.replace(/\.jsx$/, "");
+        const isActive = activeView.type === "canvas" && activeView.filename === filename;
+        return (
+          <React.Fragment key={filename}>
+            <button
+              onClick={() => setActiveView({ type: "canvas", filename })}
+              className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-body whitespace-nowrap transition-colors relative ${
+                isActive
+                  ? "text-text-primary"
+                  : "text-text-tertiary hover:text-text-secondary"
+              }`}
+            >
+              {label}
+              {isActive && (
+                <span className="absolute bottom-0 left-3 right-3 h-[2px] bg-text-primary rounded-full" />
+              )}
+            </button>
+            {i < canvasFiles.length - 1 && (
+              <span className="w-px h-4 bg-border-medium flex-shrink-0" />
+            )}
+          </React.Fragment>
+        );
+      })}
+
+      {openFiles.length > 0 && <>
+      {/* Separator between canvas and file tabs */}
       <span className="w-px h-4 bg-border-medium flex-shrink-0" />
 
       {/* File tabs */}

package/daemon/client/CompareView.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import React, { useEffect, useState, useRef, useCallback, useMemo, useContext } from "react";
 import { RevisionSelect } from "./RevisionSelect";
+import { RevisionContext, type RevisionInfo, type CanvasFileInfo } from "./App";
 import { runDomDiff } from "./domDiff";
 import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
 import { useAnnotations } from "./AnnotationProvider";
@@ -15,12 +16,43 @@ interface CompareViewProps {
 
 type CompareMode = "unified" | "side-by-side";
 
+/** Get union of canvas filenames from two revisions */
+function getCompareFiles(revisions: RevisionInfo[], leftRev: number, rightRev: number): string[] {
+  const left = revisions.find(r => r.revision === leftRev);
+  const right = revisions.find(r => r.revision === rightRev);
+  const files = new Set<string>();
+  for (const cf of left?.canvasFiles || []) files.add(cf.filename);
+  for (const cf of right?.canvasFiles || []) files.add(cf.filename);
+  return [...files].sort();
+}
+
 export function CompareView({ initialLeft, initialRight, sessionId, onExit }: CompareViewProps) {
   const [leftRev, setLeftRev] = useState(initialLeft);
   const [rightRev, setRightRev] = useState(initialRight);
   const [mode, setMode] = useState<CompareMode>("unified");
   const [hasChanges, setHasChanges] = useState(true);
   const [diffDone, setDiffDone] = useState(false);
+  const { revisions } = useContext(RevisionContext);
+
+  const compareFiles = useMemo(() => getCompareFiles(revisions, leftRev, rightRev), [revisions, leftRev, rightRev]);
+  const [selectedFile, setSelectedFile] = useState<string>(() => compareFiles[0] || "plan.jsx");
+
+  // Reset selected file when revisions change
+  useEffect(() => {
+    if (!compareFiles.includes(selectedFile)) {
+      setSelectedFile(compareFiles[0] || "plan.jsx");
+    }
+  }, [compareFiles, selectedFile]);
+
+  // Check if file exists in each revision
+  const leftHasFile = useMemo(() => {
+    const rev = revisions.find(r => r.revision === leftRev);
+    return rev?.canvasFiles.some(cf => cf.filename === selectedFile) ?? false;
+  }, [revisions, leftRev, selectedFile]);
+  const rightHasFile = useMemo(() => {
+    const rev = revisions.find(r => r.revision === rightRev);
+    return rev?.canvasFiles.some(cf => cf.filename === selectedFile) ?? false;
+  }, [revisions, rightRev, selectedFile]);
 
   return (
     <div className="flex flex-col h-screen">
@@ -74,20 +106,65 @@ export function CompareView({ initialLeft, initialRight, sessionId, onExit }: Co
         </div>
       </div>
 
-      {mode === "unified" ? (
+      {/* Canvas file selector — only show when multiple files */}
+      {compareFiles.length > 1 && (
+        <div className="flex items-center gap-1 px-6 py-2 border-b border-border-subtle bg-bg-surface flex-shrink-0 overflow-x-auto">
+          {compareFiles.map(filename => {
+            const label = filename.replace(/\.jsx$/, "");
+            const isSelected = filename === selectedFile;
+            const inLeft = revisions.find(r => r.revision === leftRev)?.canvasFiles.some(cf => cf.filename === filename);
+            const inRight = revisions.find(r => r.revision === rightRev)?.canvasFiles.some(cf => cf.filename === filename);
+            const statusLabel = !inLeft ? " (added)" : !inRight ? " (removed)" : "";
+            return (
+              <button
+                key={filename}
+                onClick={() => setSelectedFile(filename)}
+                className={`text-[12px] font-body px-3 py-1 rounded-md transition-colors whitespace-nowrap ${
+                  isSelected
+                    ? "bg-bg-elevated text-text-primary font-medium"
+                    : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"
+                }`}
+              >
+                {label}
+                {statusLabel && (
+                  <span className={`ml-1 text-[10px] ${!inLeft ? "text-accent-green" : "text-accent-red"}`}>
+                    {statusLabel}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Show placeholder for files that only exist in one revision */}
+      {!leftHasFile || !rightHasFile ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center text-text-tertiary font-body">
+            <div className="text-lg mb-2">
+              {!leftHasFile ? "New file" : "Removed file"}
+            </div>
+            <div className="text-[13px]">
+              {selectedFile.replace(/\.jsx$/, "")} {!leftHasFile ? "was added" : "was removed"} in this revision
+            </div>
+          </div>
+        </div>
+      ) : mode === "unified" ? (
         <UnifiedView
-          key={`unified-${leftRev}-${rightRev}`}
+          key={`unified-${leftRev}-${rightRev}-${selectedFile}`}
           sessionId={sessionId}
           leftRev={leftRev}
           rightRev={rightRev}
+          filename={selectedFile}
           onDiffResult={(done, changes) => { setDiffDone(done); setHasChanges(changes); }}
         />
       ) : (
         <SideBySideView
-          key={`sbs-${leftRev}-${rightRev}`}
+          key={`sbs-${leftRev}-${rightRev}-${selectedFile}`}
           sessionId={sessionId}
           leftRev={leftRev}
           rightRev={rightRev}
+          filename={selectedFile}
           onDiffResult={(done, changes) => { setDiffDone(done); setHasChanges(changes); }}
         />
       )}
@@ -99,7 +176,6 @@ export function CompareView({ initialLeft, initialRight, sessionId, onExit }: Co
 
 function SyncScrollCheckbox() {
   const [checked, setChecked] = useState(true);
-  // Store in a ref accessible to SideBySideView via DOM attribute
   useEffect(() => {
     document.documentElement.dataset.syncScroll = checked ? "1" : "0";
     return () => { delete document.documentElement.dataset.syncScroll; };
@@ -124,10 +200,11 @@ interface ViewProps {
   sessionId: string;
   leftRev: number;
   rightRev: number;
+  filename: string;
   onDiffResult: (done: boolean, hasChanges: boolean) => void;
 }
 
-function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps) {
+function UnifiedView({ sessionId, leftRev, rightRev, filename, onDiffResult }: ViewProps) {
   const oldRef = useRef<HTMLDivElement>(null);
   const newRef = useRef<HTMLDivElement>(null);
   const unifiedRef = useRef<HTMLDivElement>(null);
@@ -139,15 +216,15 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
   const [slow, setSlow] = useState(false);
 
   const { annotations } = useAnnotations();
-  const planAnnotations = annotations.filter(a => !a.filePath);
+  const canvasAnnotations = annotations.filter(a => !a.filePath && (!a.canvasFile || a.canvasFile === filename));
   const { popovers } = useTextAnnotation({
     containerRef: unifiedRef,
     restoreKey: done,
-    restoreAnnotations: planAnnotations,
+    restoreAnnotations: canvasAnnotations,
     extractContext: (range) => extractContext(range, unifiedRef.current!),
   });
 
-  // Detect stuck loading — log diagnostic state after 10s
+  // Detect stuck loading
   useEffect(() => {
     if (done || loadError) return;
     const id = setTimeout(() => {
@@ -192,13 +269,14 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
 
   return (
     <div className="flex-1 min-h-0 overflow-y-auto">
-      {/* Offscreen source panels — unmount after diff is built */}
+      {/* Offscreen source panels */}
       {!done && !loadError && (
         <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) => setLoadError(`Rev ${leftRev}: ${msg}`)}
           />
@@ -206,6 +284,7 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
             ref={newRef}
             sessionId={sessionId}
             revision={rightRev}
+            filename={filename}
             onReady={() => setRightReady(true)}
             onError={(msg) => setLoadError(`Rev ${rightRev}: ${msg}`)}
           />
@@ -239,7 +318,7 @@ function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps)
 
 /* ── Side-by-side view ── */
 
-function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps) {
+function SideBySideView({ sessionId, leftRev, rightRev, filename, onDiffResult }: ViewProps) {
   const oldRef = useRef<HTMLDivElement>(null);
   const newRef = useRef<HTMLDivElement>(null);
   const [leftReady, setLeftReady] = useState(false);
@@ -255,11 +334,11 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
   const handleRightReady = useCallback(() => setRightReady(true), []);
 
   const { annotations } = useAnnotations();
-  const planAnnotations = annotations.filter(a => !a.filePath);
+  const canvasAnnotations = annotations.filter(a => !a.filePath && (!a.canvasFile || a.canvasFile === filename));
   const { popovers } = useTextAnnotation({
     containerRef: viewRef,
     restoreKey: done,
-    restoreAnnotations: planAnnotations,
+    restoreAnnotations: canvasAnnotations,
     extractContext: (range) => extractContext(range, viewRef.current!),
   });
 
@@ -314,6 +393,7 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
             ref={oldRef}
             sessionId={sessionId}
             revision={leftRev}
+            filename={filename}
             onReady={handleLeftReady}
           />
         </div>
@@ -324,6 +404,7 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
             ref={newRef}
             sessionId={sessionId}
             revision={rightRev}
+            filename={filename}
             onReady={handleRightReady}
           />
         </div>
@@ -338,12 +419,13 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
 interface ComparePanelRendererProps {
   sessionId: string;
   revision: number;
+  filename: string;
   onReady: () => void;
   onError?: (message: string) => void;
 }
 
-const ComparePanelRenderer = React.memo(React.forwardRef<HTMLDivElement, ComparePanelRendererProps>(
-  ({ sessionId, revision, onReady, onError }, ref) => {
+export const ComparePanelRenderer = React.memo(React.forwardRef<HTMLDivElement, ComparePanelRendererProps>(
+  ({ sessionId, revision, filename, onReady, onError }, ref) => {
     const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [loading, setLoading] = useState(true);
@@ -351,7 +433,8 @@ const ComparePanelRenderer = React.memo(React.forwardRef<HTMLDivElement, Compare
     useEffect(() => {
       setLoading(true);
       setError(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) => {
           if (!mod.default) {
             const msg = "Module has no default export";
@@ -368,7 +451,7 @@ const ComparePanelRenderer = React.memo(React.forwardRef<HTMLDivElement, Compare
           setLoading(false);
           onError?.(e.message);
         });
-    }, [sessionId, revision]);
+    }, [sessionId, revision, filename]);
 
     useEffect(() => {
       if (!PlanComponent) return;