agent-canvas 0.1.13 → 0.1.15

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,72 +200,113 @@ 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);
   const [leftReady, setLeftReady] = useState(false);
   const [rightReady, setRightReady] = useState(false);
   const [done, setDone] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  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
+  useEffect(() => {
+    if (done || loadError) return;
+    const id = setTimeout(() => {
+      console.warn("[unified-diff] still loading after 10s", {
+        leftReady, rightReady, oldRef: !!oldRef.current, newRef: !!newRef.current,
+      });
+      setSlow(true);
+    }, 10_000);
+    return () => clearTimeout(id);
+  }, [done, loadError, leftReady, rightReady]);
+
   useEffect(() => {
     if (!leftReady || !rightReady || done) return;
     if (!oldRef.current || !newRef.current) return;
 
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        if (!oldRef.current || !newRef.current || !unifiedRef.current) return;
-
-        const oldTree = extractBlockTree(oldRef.current);
-        const newTree = extractBlockTree(newRef.current);
-        const matches = matchBlocks(oldTree, newTree);
-        const { fragment, hasChanges } = buildUnifiedDom(matches);
-
-        unifiedRef.current.innerHTML = "";
-        unifiedRef.current.appendChild(fragment);
-        setDone(true);
-        onDiffResult(true, hasChanges);
+        if (!oldRef.current || !newRef.current || !unifiedRef.current) {
+          console.warn("[unified-diff] refs lost between rAF frames", {
+            old: !!oldRef.current, new: !!newRef.current, unified: !!unifiedRef.current,
+          });
+          return;
+        }
+
+        try {
+          const oldTree = extractBlockTree(oldRef.current);
+          const newTree = extractBlockTree(newRef.current);
+          const matches = matchBlocks(oldTree, newTree);
+          const { fragment, hasChanges } = buildUnifiedDom(matches);
+
+          unifiedRef.current.innerHTML = "";
+          unifiedRef.current.appendChild(fragment);
+          setDone(true);
+          onDiffResult(true, hasChanges);
+        } catch (e) {
+          console.error("[unified-diff] diff computation failed", e);
+          setLoadError(e instanceof Error ? e.message : String(e));
+        }
       });
     });
   }, [leftReady, rightReady, done]);
 
   return (
     <div className="flex-1 min-h-0 overflow-y-auto">
-      {/* Offscreen source panels — unmount after diff is built */}
-      {!done && (
+      {/* 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}`)}
           />
           <ComparePanelRenderer
             ref={newRef}
             sessionId={sessionId}
             revision={rightRev}
+            filename={filename}
             onReady={() => setRightReady(true)}
+            onError={(msg) => setLoadError(`Rev ${rightRev}: ${msg}`)}
           />
         </div>
       )}
 
       {/* Visible output */}
       <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
-        {!done && (
-          <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">
-            Loading...
+        {!done && !loadError && (
+          <div className="flex flex-col items-center justify-center h-64 text-text-tertiary font-body text-body gap-2">
+            <span>Loading...</span>
+            {slow && (
+              <span className="text-[11px]">
+                Taking longer than expected — check Network tab for pending requests
+              </span>
+            )}
+          </div>
+        )}
+        {loadError && (
+          <div className="bg-accent-red-muted rounded-lg p-5 mt-8">
+            <h3 className="font-body font-semibold text-accent-red mb-2">Failed to load revision</h3>
+            <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{loadError}</pre>
           </div>
         )}
         <div ref={unifiedRef} />
@@ -201,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);
@@ -217,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!),
   });
 
@@ -276,6 +393,7 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
             ref={oldRef}
             sessionId={sessionId}
             revision={leftRev}
+            filename={filename}
             onReady={handleLeftReady}
           />
         </div>
@@ -286,6 +404,7 @@ function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProp
             ref={newRef}
             sessionId={sessionId}
             revision={rightRev}
+            filename={filename}
             onReady={handleRightReady}
           />
         </div>
@@ -300,11 +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 }, 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);
@@ -312,16 +433,25 @@ 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";
+            setError(msg);
+            setLoading(false);
+            onError?.(msg);
+            return;
+          }
           setPlanComponent(() => mod.default);
           setLoading(false);
         })
         .catch((e) => {
           setError(e.message);
           setLoading(false);
+          onError?.(e.message);
         });
-    }, [sessionId, revision]);
+    }, [sessionId, revision, filename]);
 
     useEffect(() => {
       if (!PlanComponent) return;

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>
+  );
+}