agent-canvas 0.1.13 → 0.1.15

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 */}