fix: improve Yjs reconnect recovery after file rename

lib/yjs.ts

@@ -62,7 +62,21 @@ export function getOrCreateYDoc(roomId: string, token: string) {
         console.log(`[Yjs] Room ${roomId} mapped. Synced:`, isSynced as boolean);
     });
     provider.on('status', (event: unknown) => {
-        console.log(`[Yjs] Room ${roomId} status:`, (event as { status: 'connected' | 'disconnected' | 'connecting' }).status);
+        const status = (event as {
+            status: 'connected' | 'disconnected' | 'connecting'
+        }).status;
+
+        console.log(`[Yjs] Room ${roomId} status:`, status);
+
+        // Attempt recovery after reconnect
+        if (status === "connected") {
+            console.log("[Yjs] Reconnected successfully");
+
+            // Force preview refresh after reconnect
+            window.dispatchEvent(
+                new CustomEvent("yjs-reconnected")
+            );
+        }
     });
 
     return { doc, provider };

modules/dashboard/components/template-selecting-modal.tsx

@@ -13,7 +13,7 @@ import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
 import type { TemplateCategory } from "@/lib/templates/types";
-import { getTemplateSummaries } from "@/lib/templates/actions";
+
 import type { TemplateKey } from "@/lib/template";
 import {
   ChevronRight,

modules/webcontainers/components/webcontainer-preview.tsx

@@ -110,7 +110,10 @@ const WebContainerPreview = ({
   };
 
   /** Register a server-ready listener, unsubscribing any prior one to prevent accumulation. */
-  const bindServerReady = (inst: WebContainer, handler: (port: number, url: string) => void) => {
+  const bindServerReady = (
+    inst: WebContainer,
+    handler: (port: number, url: string) => void,
+  ) => {
     serverReadyCleanupRef.current?.();
     serverReadyCleanupRef.current = inst.on("server-ready", handler);
   };
@@ -370,12 +373,18 @@ const WebContainerPreview = ({
               writeTerminal(
                 `🌐 Server ready at ${url} (port ${port})\r\n`,
               );
+              console.log("SERVER READY EVENT", port, url);
 
               const isCommonFrontendPort = [
                 3000, 5173, 8080, 4200, 8000,
               ].includes(port);
               setPreviewUrl((prevUrl) => {
+                if (prevUrl !== url) {
+                  setRefreshKey((k) => k + 1);
+                }
+
                 if (prevUrl && !isCommonFrontendPort) return prevUrl;
+
                 return url;
               });
 
@@ -776,6 +785,19 @@ const WebContainerPreview = ({
     };
   }, []);
 
+  useEffect(() => {
+    const handler = () => {
+      console.log("FORCING PREVIEW REFRESH AFTER YJS CONNECT");
+
+      setRefreshKey((k) => k + 1);
+    };
+
+    window.addEventListener("yjs-reconnected", handler);
+
+    return () => {
+      window.removeEventListener("yjs-reconnected", handler);
+    };
+  }, []);
 
 
   if (error || setupError) {