Update overwrite mechanism to show diff

1 files changed, 8 insertions, 0 deletions

diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index 037df7e..f398041 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -21,6 +21,7 @@ export default function FilesPage() {
   const [detailLoading, setDetailLoading] = useState(false);
   const [creating, setCreating] = useState(false);
   const [remoteUpdate, setRemoteUpdate] = useState<FileUpdateEvent | null>(null);
+  const [remoteFileData, setRemoteFileData] = useState<FileDetailType | null>(null);
   const [hasLocalChanges, setHasLocalChanges] = useState(false);
   const [isActivelyEditing, setIsActivelyEditing] = useState(false);
   const pendingUpdateRef = useRef(false);
@@ -54,6 +55,9 @@ export default function FilesPage() {
         const detail = await fetchFile(event.fileId);
         setFileDetail(detail);
       } else {
+        // Fetch remote version for diff display
+        const remoteData = await fetchFile(event.fileId);
+        setRemoteFileData(remoteData);
         // Show notification about remote update
         setRemoteUpdate(event);
       }
@@ -218,12 +222,14 @@ export default function FilesPage() {
       const detail = await fetchFile(id);
       setFileDetail(detail);
       setRemoteUpdate(null);
+      setRemoteFileData(null);
       setHasLocalChanges(false);
     }
   }, [id, fetchFile]);
 
   const handleRemoteUpdateDismiss = useCallback(() => {
     setRemoteUpdate(null);
+    setRemoteFileData(null);
   }, []);
 
   return (
@@ -285,6 +291,8 @@ export default function FilesPage() {
       {remoteUpdate && (
         <UpdateNotification
           updatedBy={remoteUpdate.updatedBy}
+          localBody={fileDetail?.body || []}
+          remoteBody={remoteFileData?.body || []}
           onRefresh={handleRemoteUpdateRefresh}
           onDismiss={handleRemoteUpdateDismiss}
         />