1

client/src/App.tsx

@@ -9,6 +9,7 @@ import ResetPassword from './components/Auth/ResetPassword';
 import Dashboard from './components/Dashboard/Dashboard';
 import ProjectEditor from './components/ProjectEditor/ProjectEditor';
 import ErrorBoundary from './components/ErrorBoundary';
+import WebSocketProvider from './components/WebSocketProvider';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
   const { token, initialized } = useAuthStore();
@@ -47,35 +48,37 @@ export default function App() {
   if (!ready) return null;
 
   return (
-    <Routes>
-      <Route path="/" element={<Navigate to="/dashboard" replace />} />
-      <Route path="/login" element={<PublicRoute><LoginForm /></PublicRoute>} />
-      <Route path="/register" element={<PublicRoute><RegisterForm /></PublicRoute>} />
-      <Route path="/forgot-password" element={<PublicRoute><ForgotPassword /></PublicRoute>} />
-      <Route path="/reset-password" element={<PublicRoute><ResetPassword /></PublicRoute>} />
-      <Route
-        path="/dashboard"
-        element={
-          <ProtectedRoute>
-            <ErrorBoundary>
-              <AppLayout>
-                <Dashboard />
-              </AppLayout>
-            </ErrorBoundary>
-          </ProtectedRoute>
-        }
-      />
-      <Route
-        path="/project/:id"
-        element={
-          <ProtectedRoute>
-            <ErrorBoundary>
-              <ProjectEditor />
-            </ErrorBoundary>
-          </ProtectedRoute>
-        }
-      />
-      <Route path="*" element={<Navigate to="/dashboard" replace />} />
-    </Routes>
+    <WebSocketProvider>
+      <Routes>
+        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+        <Route path="/login" element={<PublicRoute><LoginForm /></PublicRoute>} />
+        <Route path="/register" element={<PublicRoute><RegisterForm /></PublicRoute>} />
+        <Route path="/forgot-password" element={<PublicRoute><ForgotPassword /></PublicRoute>} />
+        <Route path="/reset-password" element={<PublicRoute><ResetPassword /></PublicRoute>} />
+        <Route
+          path="/dashboard"
+          element={
+            <ProtectedRoute>
+              <ErrorBoundary>
+                <AppLayout>
+                  <Dashboard />
+                </AppLayout>
+              </ErrorBoundary>
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/project/:id"
+          element={
+            <ProtectedRoute>
+              <ErrorBoundary>
+                <ProjectEditor />
+              </ErrorBoundary>
+            </ProtectedRoute>
+          }
+        />
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
+    </WebSocketProvider>
   );
 }

client/src/components/CodeView/CodeView.tsx

@@ -2,7 +2,7 @@ import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
 import { useEditorStore } from '../../store/editorStore';
 import { useProjectStore } from '../../store/projectStore';
 import { useCollaborationStore, Collaborator } from '../../store/collaborationStore';
-import { useWebSocket } from '../../hooks/useWebSocket';
+import { useProjectSocket } from '../../hooks/useWebSocket';
 import { useParams } from 'react-router-dom';
 import { getBlocksForFramework } from '../../blocks/registry';
 import { compileWeb } from '../../compilers/web';
@@ -23,7 +23,7 @@ export default function CodeView() {
   const { currentProject } = useProjectStore();
   const { activeFileId, fileTree, viewMode, setViewMode, visualElements, activeFileContent, setActiveFileContent } = useEditorStore();
   const collaborators = useCollaborationStore((s) => s.collaborators);
-  const { emitCursorMove, emitFileChanged } = useWebSocket(id);
+  const { emitCursorMove, emitFileChanged } = useProjectSocket(id);
   const editorRef = useRef<HTMLDivElement>(null);
   const [isEditing, setIsEditing] = useState(false);
 

client/src/components/ProjectEditor/ProjectEditor.tsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useProjectStore } from '../../store/projectStore';
 import { useEditorStore } from '../../store/editorStore';
 import { useCollaborationStore } from '../../store/collaborationStore';
-import { useWebSocket, getSocket } from '../../hooks/useWebSocket';
+import { useProjectSocket, getSocket } from '../../hooks/useWebSocket';
 import {
   Blocks, Eye, Code2, FileType, Play,
   Save, ArrowLeft, Grid3X3, Maximize2, Minimize2,
@@ -66,7 +66,7 @@ export default function ProjectEditor() {
   const [showShareModal, setShowShareModal] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
 
-  const { emitFileChanged, emitActiveFileChanged, emitSave, emitCursorMove } = useWebSocket(id);
+  const { emitFileChanged, emitActiveFileChanged, emitSave, emitCursorMove } = useProjectSocket(id);
 
   const connected = useCollaborationStore((s) => s.connected);
 

client/src/components/WebSocketProvider.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { useWebSocket } from '../hooks/useWebSocket';
+
+export default function WebSocketProvider({ children }: { children: ReactNode }) {
+  useWebSocket();
+  return <>{children}</>;
+}

client/src/hooks/useWebSocket.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { useAuthStore } from '../store/authStore';
 import { useCollaborationStore, Collaborator } from '../store/collaborationStore';
@@ -23,42 +23,43 @@ export function useWsEvent(event: string, handler: (...args: any[]) => void) {
   }, [socket, event]);
 }
 
-export function useWebSocket(projectId: string | undefined) {
+// ─── Socket lifecycle: connect on token, reconnect with stored projectId ───
+export function useWebSocket() {
   const token = useAuthStore((s) => s.token);
-  const {
-    setCollaborators,
-    addCollaborator,
-    removeCollaborator,
-    updateActiveFile,
-    updateCursor,
-    updateBlockSelection,
-    updateElementHover,
-    setConnected,
-  } = useCollaborationStore();
-  const { setConnected: setWsConnected, setSocket, pushPending, shiftPending, clearPending, socket } = useWsStore();
-  const socketRef = useRef<Socket | null>(null);
-  const [localSocket, setLocalSocket] = useState<Socket | null>(null);
+  const { setConnected: setCollabConnected } = useCollaborationStore();
+  const { setConnected, setSocket, pushPending, shiftPending } = useWsStore();
 
   useEffect(() => {
-    if (!token || !projectId) return;
-
-    if (globalSocket?.connected) {
-      globalSocket.disconnect();
+    if (!token) {
+      if (globalSocket) {
+        globalSocket.disconnect();
+        globalSocket = null;
+        setSocket(null);
+        setConnected(false);
+        setCollabConnected(false);
+      }
+      return;
     }
 
+    if (globalSocket?.connected) return;
+
     const s = io({
       auth: { token },
       transports: ['websocket', 'polling'],
     });
 
-    socketRef.current = s;
     globalSocket = s;
     setSocket(s);
 
     s.on('connect', () => {
       setConnected(true);
-      setWsConnected(true);
-      s.emit('join_project', { projectId });
+      setCollabConnected(true);
+
+      // Re-join project if we have one stored
+      const pid = useWsStore.getState().currentProjectId;
+      if (pid) {
+        s.emit('join_project', { projectId: pid });
+      }
 
       // Replay pending queue
       let pending = shiftPending();
@@ -70,107 +71,118 @@ export function useWebSocket(projectId: string | undefined) {
 
     s.on('disconnect', () => {
       setConnected(false);
-      setWsConnected(false);
+      setCollabConnected(false);
     });
 
-    // ─── Collab event handlers ───
     s.on('collaborator_list', ({ collaborators }: { collaborators: Collaborator[] }) => {
-      setCollaborators(collaborators);
+      useCollaborationStore.getState().setCollaborators(collaborators);
     });
 
     s.on('collaborator_joined', (collaborator: Collaborator) => {
-      addCollaborator(collaborator);
+      useCollaborationStore.getState().addCollaborator(collaborator);
     });
 
     s.on('collaborator_left', ({ userId }: { userId: string }) => {
-      removeCollaborator(userId);
+      useCollaborationStore.getState().removeCollaborator(userId);
     });
 
     s.on('collaborator_active_file', ({ userId, fileId }: { userId: string; fileId: string | null }) => {
-      updateActiveFile(userId, fileId);
+      useCollaborationStore.getState().updateActiveFile(userId, fileId);
     });
 
     s.on('collaborator_cursor', ({ userId, fileId, cursor }: { userId: string; fileId: string; cursor: { line: number; ch: number } | null }) => {
-      updateCursor(userId, fileId, cursor);
+      useCollaborationStore.getState().updateCursor(userId, fileId, cursor);
     });
 
     s.on('collaborator_block_selected', ({ userId, blockId }: { userId: string; blockId: string | null }) => {
-      updateBlockSelection(userId, blockId);
+      useCollaborationStore.getState().updateBlockSelection(userId, blockId);
     });
 
     s.on('collaborator_element_hover', ({ userId, elementId }: { userId: string; elementId: string | null }) => {
-      updateElementHover(userId, elementId);
+      useCollaborationStore.getState().updateElementHover(userId, elementId);
     });
 
-    // ─── File handlers ───
     s.on('file_updated', ({ fileId, content }: { fileId: string; content: string }) => {
-      const { updateFile } = useCollaborationStore.getState();
-      updateFile(fileId, content);
+      useCollaborationStore.getState().updateFile(fileId, content);
     });
 
     s.on('file_added', ({ file, parentId }: { file: any; parentId?: string }) => {
-      const { addFile } = useEditorStore.getState();
-      addFile(file, parentId);
+      useEditorStore.getState().addFile(file, parentId);
     });
 
     s.on('file_renamed', ({ fileId, name }: { fileId: string; name: string }) => {
-      const { updateFile } = useEditorStore.getState();
-      updateFile(fileId, { name });
+      useEditorStore.getState().updateFile(fileId, { name });
     });
 
     s.on('file_deleted', ({ fileId }: { fileId: string }) => {
-      const { removeFile } = useEditorStore.getState();
-      removeFile(fileId);
+      useEditorStore.getState().removeFile(fileId);
     });
 
-    // ─── Visual element handlers ───
     s.on('visual_element_added', ({ element, parentId }: { element: any; parentId?: string }) => {
-      const { addVisualElement } = useEditorStore.getState();
-      addVisualElement(element, parentId);
+      useEditorStore.getState().addVisualElement(element, parentId);
     });
 
     s.on('visual_element_updated', ({ elementId, updates }: { elementId: string; updates: any }) => {
-      const { updateVisualElement } = useEditorStore.getState();
-      updateVisualElement(elementId, updates);
+      useEditorStore.getState().updateVisualElement(elementId, updates);
     });
 
     s.on('visual_element_removed', ({ elementId }: { elementId: string }) => {
-      const { removeVisualElement } = useEditorStore.getState();
-      removeVisualElement(elementId);
+      useEditorStore.getState().removeVisualElement(elementId);
     });
 
     s.on('visual_elements_reordered', ({ elements }: { elements: any[] }) => {
-      const { setVisualElements } = useEditorStore.getState();
-      setVisualElements(elements);
+      useEditorStore.getState().setVisualElements(elements);
     });
 
-    // ─── Save handler ───
     s.on('project_saved', ({ updatedAt, savedBy }: { updatedAt: number; savedBy: string }) => {
-      const { setLastSaved, setSavedBy } = useCollaborationStore.getState();
-      setLastSaved(updatedAt);
-      setSavedBy(savedBy);
+      useCollaborationStore.getState().setLastSaved(updatedAt);
+      useCollaborationStore.getState().setSavedBy(savedBy);
     });
 
-    setLocalSocket(s);
-
     return () => {
-      s.emit('leave_project', { projectId });
+      const pid = useWsStore.getState().currentProjectId;
+      if (pid) {
+        s.emit('leave_project', { projectId: pid });
+      }
       s.disconnect();
       if (globalSocket === s) globalSocket = null;
       setSocket(null);
       setConnected(false);
-      setWsConnected(false);
-      setLocalSocket(null);
+      setCollabConnected(false);
     };
-  }, [token, projectId, setCollaborators, addCollaborator, removeCollaborator, updateActiveFile, updateCursor, updateBlockSelection, updateElementHover, setConnected, setWsConnected, setSocket, pushPending, shiftPending, clearPending]);
+  }, [token, setCollabConnected, setConnected, setSocket, pushPending, shiftPending]);
+}
+
+// ─── Project-scoped socket: join/leave room + emit functions ───
+export function useProjectSocket(projectId: string | undefined) {
+  const setCurrentProjectId = useWsStore((s) => s.setCurrentProjectId);
+
+  // Join/leave project room when projectId changes
+  useEffect(() => {
+    if (!projectId) {
+      setCurrentProjectId(null);
+      return;
+    }
+
+    setCurrentProjectId(projectId);
+    const s = globalSocket;
+    if (s?.connected) {
+      s.emit('join_project', { projectId });
+    }
+
+    return () => {
+      setCurrentProjectId(null);
+      if (s?.connected) {
+        s.emit('leave_project', { projectId });
+      }
+    };
+  }, [projectId, setCurrentProjectId]);
 
   // ─── Generic emit for project actions ───
   const emitProjectAction = useCallback(<T>(action: string, data: any): Promise<T> => {
     return new Promise((resolve, reject) => {
-      const s = socketRef.current || globalSocket;
+      const s = globalSocket;
       if (!s?.connected || !projectId) {
-        // Queue for later
-        pushPending(action, { projectId, ...data });
         reject(new Error('Not connected'));
         return;
       }
@@ -179,88 +191,87 @@ export function useWebSocket(projectId: string | undefined) {
         else resolve(response as T);
       });
     });
-  }, [projectId, pushPending]);
+  }, [projectId]);
 
-  // ─── Specific emit functions ───
   const emitFileChanged = useCallback((fileId: string, content: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('file_changed', { projectId, fileId, content });
     }
   }, [projectId]);
 
   const emitActiveFileChanged = useCallback((fileId: string | null) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('active_file_changed', { projectId, fileId });
     }
   }, [projectId]);
 
   const emitCursorMove = useCallback((fileId: string, cursor: { line: number; ch: number }) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('cursor_move', { projectId, fileId, cursor });
     }
   }, [projectId]);
 
   const emitBlockSelection = useCallback((blockId: string | null) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('block_selection_changed', { projectId, blockId });
     }
   }, [projectId]);
 
   const emitElementHover = useCallback((elementId: string | null) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('visual_element_hover', { projectId, elementId });
     }
   }, [projectId]);
 
   const emitFileAdded = useCallback((file: any, parentId?: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('file_added', { projectId, file, parentId });
     }
   }, [projectId]);
 
   const emitFileRenamed = useCallback((fileId: string, name: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('file_renamed', { projectId, fileId, name });
     }
   }, [projectId]);
 
   const emitFileDeleted = useCallback((fileId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('file_deleted', { projectId, fileId });
     }
   }, [projectId]);
 
   const emitVisualElementAdded = useCallback((element: any, parentId?: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('visual_element_added', { projectId, element, parentId });
     }
   }, [projectId]);
 
   const emitVisualElementUpdated = useCallback((elementId: string, updates: any) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('visual_element_updated', { projectId, elementId, updates });
     }
   }, [projectId]);
 
   const emitVisualElementRemoved = useCallback((elementId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('visual_element_removed', { projectId, elementId });
     }
   }, [projectId]);
 
   const emitVisualElementsReordered = useCallback((elements: any[]) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('visual_elements_reordered', { projectId, elements });
     }
@@ -268,7 +279,7 @@ export function useWebSocket(projectId: string | undefined) {
 
   const emitSave = useCallback((data: any): Promise<any> => {
     return new Promise((resolve, reject) => {
-      const s = socketRef.current || globalSocket;
+      const s = globalSocket;
       if (!s?.connected || !projectId) {
         reject(new Error('Not connected'));
         return;
@@ -280,114 +291,109 @@ export function useWebSocket(projectId: string | undefined) {
     });
   }, [projectId]);
 
-  // ─── New: Pointer moves (throttled) ───
   const lastPointerEmit = useRef(0);
   const emitPointerMove = useCallback((x: number, y: number) => {
     const now = Date.now();
     if (now - lastPointerEmit.current < 50) return;
     lastPointerEmit.current = now;
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('pointer_move', { projectId, x, y });
     }
   }, [projectId]);
 
-  // ─── New: Block drag ───
   const emitBlockDragStart = useCallback((blockId: string, x: number, y: number) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('block_drag_start', { projectId, blockId, x, y });
     }
   }, [projectId]);
 
   const emitBlockDragMove = useCallback((blockId: string, x: number, y: number) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('block_drag_move', { projectId, blockId, x, y });
     }
   }, [projectId]);
 
   const emitBlockDragEnd = useCallback((blockId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('block_drag_end', { projectId, blockId });
     }
   }, [projectId]);
 
-  // ─── New: Text field cursors ───
   const emitTextFieldFocus = useCallback((fieldId: string, fileId: string, cursorPosition: number) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('text_field_focus', { projectId, fieldId, fileId, cursorPosition });
     }
   }, [projectId]);
 
   const emitTextFieldCursor = useCallback((fieldId: string, cursorPosition: number) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('text_field_cursor', { projectId, fieldId, cursorPosition });
     }
   }, [projectId]);
 
   const emitTextFieldBlur = useCallback((fieldId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('text_field_blur', { projectId, fieldId });
     }
   }, [projectId]);
 
-  // ─── New: CSS rule/property emits ───
   const emitCssRuleAdded = useCallback((rule: any) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_rule_added', { projectId, rule });
     }
   }, [projectId]);
 
   const emitCssRuleUpdated = useCallback((ruleId: string, updates: any) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_rule_updated', { projectId, ruleId, updates });
     }
   }, [projectId]);
 
   const emitCssRuleRemoved = useCallback((ruleId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_rule_removed', { projectId, ruleId });
     }
   }, [projectId]);
 
   const emitCssRuleReordered = useCallback((ruleIds: string[]) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_rule_reordered', { projectId, ruleIds });
     }
   }, [projectId]);
 
   const emitCssPropAdded = useCallback((ruleId: string, property: any) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_prop_added', { projectId, ruleId, property });
     }
   }, [projectId]);
 
   const emitCssPropUpdated = useCallback((ruleId: string, propertyId: string, updates: any) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_prop_updated', { projectId, ruleId, propertyId, updates });
     }
   }, [projectId]);
 
   const emitCssPropRemoved = useCallback((ruleId: string, propertyId: string) => {
-    const s = socketRef.current || globalSocket;
+    const s = globalSocket;
     if (s?.connected && projectId) {
       s.emit('css_prop_removed', { projectId, ruleId, propertyId });
     }
   }, [projectId]);
 
   return {
-    socket: localSocket,
     emitProjectAction,
     emitFileChanged,
     emitActiveFileChanged,
@@ -402,7 +408,6 @@ export function useWebSocket(projectId: string | undefined) {
     emitVisualElementRemoved,
     emitVisualElementsReordered,
     emitSave,
-    // New emits
     emitPointerMove,
     emitBlockDragStart,
     emitBlockDragMove,

client/src/store/projectStore.ts

@@ -18,15 +18,21 @@ interface ProjectStore {
 
 function wsEmit<T>(event: string, data?: any): Promise<T> {
   return new Promise((resolve, reject) => {
-    const socket = getSocket();
-    if (!socket?.connected) {
-      reject(new Error('Not connected to server'));
-      return;
-    }
-    socket.emit(event, data ?? {}, (response: any) => {
-      if (response?.error) reject(new Error(response.error));
-      else resolve(response as T);
-    });
+    // Wait for socket to be connected (with timeout)
+    const attempt = (tries: number) => {
+      const socket = getSocket();
+      if (socket?.connected) {
+        socket.emit(event, data ?? {}, (response: any) => {
+          if (response?.error) reject(new Error(response.error));
+          else resolve(response as T);
+        });
+      } else if (tries < 50) {
+        setTimeout(() => attempt(tries + 1), 100);
+      } else {
+        reject(new Error('Not connected to server'));
+      }
+    };
+    attempt(0);
   });
 }
 

client/src/store/wsStore.ts

@@ -7,6 +7,7 @@ interface WsStore {
   latency: number;
   socket: Socket | null;
   pendingQueue: { action: string; data: any }[];
+  currentProjectId: string | null;
 
   setConnected: (connected: boolean) => void;
   setSocket: (socket: Socket | null) => void;
@@ -17,6 +18,7 @@ interface WsStore {
   clearPending: () => void;
   shiftPending: () => { action: string; data: any } | undefined;
   getSocket: () => Socket | null;
+  setCurrentProjectId: (id: string | null) => void;
 }
 
 export const useWsStore = create<WsStore>((set, get) => ({
@@ -25,6 +27,7 @@ export const useWsStore = create<WsStore>((set, get) => ({
   latency: 0,
   socket: null,
   pendingQueue: [],
+  currentProjectId: null,
 
   setConnected: (connected) => set({ connected }),
   setSocket: (socket) => set({ socket }),
@@ -53,4 +56,5 @@ export const useWsStore = create<WsStore>((set, get) => ({
   },
 
   getSocket: () => get().socket,
+  setCurrentProjectId: (id) => set({ currentProjectId: id }),
 }));

client/vite.config.ts

@@ -17,6 +17,11 @@ export default defineConfig({
         target: 'http://localhost:3000',
         changeOrigin: true,
       },
+      '/socket.io': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        ws: true,
+      },
     },
   },
   build: {

server/src/services/realtime.ts

@@ -652,6 +652,87 @@ export function initRealtime(httpServer: HttpServer): Server {
       }
     });
 
+    // ═══════════════════════════════════════════════
+    //  PROJECT UPDATE
+    // ═══════════════════════════════════════════════
+    socket.on('project_update', (data: { projectId: string; updates: any }, callback?: (response: any) => void) => {
+      try {
+        const db = getDatabase();
+        let project = db.prepare(
+          'SELECT * FROM projects WHERE id = ? AND user_id = ?'
+        ).get(data.projectId, user.userId) as any;
+
+        let permission: string | null = 'admin';
+        if (!project) {
+          const collab = db.prepare(
+            "SELECT p.*, c.permission FROM projects p JOIN project_collaborators c ON p.id = c.project_id WHERE p.id = ? AND c.user_id = ?"
+          ).get(data.projectId, user.userId) as any;
+          if (!collab || collab.permission === 'view') {
+            if (callback) callback({ error: 'Permission denied' });
+            return;
+          }
+          project = collab;
+          permission = collab.permission;
+        }
+
+        const now = Date.now();
+        let encryptedData = project.encrypted_data;
+        let encryptedIv = project.encryption_iv;
+
+        if (data.updates.data) {
+          encryptedData = encryptCombined(JSON.stringify(data.updates.data));
+          encryptedIv = '';
+        }
+
+        db.prepare(`
+          UPDATE projects SET name = ?, description = ?, encrypted_data = ?, encryption_iv = ?, updated_at = ?
+          WHERE id = ?
+        `).run(
+          data.updates.name || project.name,
+          data.updates.description ?? project.description,
+          encryptedData, encryptedIv, now, data.projectId
+        );
+
+        if (callback) callback({ message: 'Project updated', updated_at: now });
+      } catch (error: any) {
+        console.error('Update project error:', error);
+        if (callback) callback({ error: 'Internal server error' });
+      }
+    });
+
+    // ═══════════════════════════════════════════════
+    //  PROJECT SYNC  (upload to HF storage)
+    // ═══════════════════════════════════════════════
+    socket.on('project_sync', async (data: { projectId: string }, callback?: (response: any) => void) => {
+      try {
+        const db = getDatabase();
+        const project = db.prepare(
+          'SELECT * FROM projects WHERE id = ? AND user_id = ?'
+        ).get(data.projectId, user.userId) as any;
+
+        if (!project) {
+          if (callback) callback({ error: 'Project not found' });
+          return;
+        }
+
+        const { uploadToHFStorage } = await import('./hfStorage');
+        const result = await uploadToHFStorage(
+          `projects/${user.userId}/${data.projectId}.enc`,
+          Buffer.from(project.encrypted_data),
+          `Project: ${project.name}`
+        );
+
+        if (result.success) {
+          if (callback) callback({ message: 'Project synced to cloud storage' });
+        } else {
+          if (callback) callback({ error: 'Sync failed', details: result.message });
+        }
+      } catch (error: any) {
+        console.error('Sync project error:', error);
+        if (callback) callback({ error: 'Sync failed' });
+      }
+    });
+
     // ═══════════════════════════════════════════════
     //  VERSION  (stub — Phase G)
     // ═══════════════════════════════════════════════