adf

client/package.json

@@ -22,6 +22,7 @@
     "clsx": "^2.1.0",
     "prismjs": "^1.29.0",
     "react-syntax-highlighter": "^15.5.0",
+    "socket.io-client": "^4.7.5",
     "uuid": "^9.0.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1"

client/src/api/client.ts

@@ -7,7 +7,7 @@ class ApiClient {
     this.token = token;
   }
 
-  private async request<T>(
+  async request<T>(
     method: string,
     path: string,
     body?: any

client/src/components/CodeView/CodeView.tsx

@@ -1,6 +1,9 @@
-import { useMemo, useCallback } from 'react';
+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 { useParams } from 'react-router-dom';
 import { getBlocksForFramework } from '../../blocks/registry';
 import { compileWeb } from '../../compilers/web';
 import { compileElectron } from '../../compilers/electron';
@@ -13,55 +16,86 @@ import {
 } from 'lucide-react';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
+import { getColor } from '../Collaboration/CollaboratorAvatars';
 
 export default function CodeView() {
+  const { id } = useParams<{ id: string }>();
   const { currentProject } = useProjectStore();
-  const { activeFileId, fileTree, viewMode, setViewMode, visualElements } = useEditorStore();
+  const { activeFileId, fileTree, viewMode, setViewMode, visualElements, activeFileContent, setActiveFileContent } = useEditorStore();
+  const collaborators = useCollaborationStore((s) => s.collaborators);
+  const { emitCursorMove, emitFileChanged } = useWebSocket(id);
+  const editorRef = useRef<HTMLDivElement>(null);
+  const [isEditing, setIsEditing] = useState(false);
 
   const compiledCode = useMemo(() => {
     if (!currentProject) return '';
+    if (isEditing) return activeFileContent;
 
     const activeFile = fileTree.find(f => f.id === activeFileId);
-
     const blocks = getBlocksForFramework(currentProject.framework);
-
     const compilerOptions = {
-      blocks,
-      fileTree,
-      visualElements,
-      activeFile,
+      blocks, fileTree, visualElements, activeFile,
       projectName: currentProject.name,
     };
 
     switch (currentProject.framework) {
-      case 'web':
-        return compileWeb(compilerOptions);
-      case 'electron':
-        return compileElectron(compilerOptions);
-      case 'maui':
-        return compileMaui(compilerOptions);
-      case 'nodejs':
-        return compileNodeJS(compilerOptions);
-      default:
-        return '// Select a framework to generate code';
+      case 'web': return compileWeb(compilerOptions);
+      case 'electron': return compileElectron(compilerOptions);
+      case 'maui': return compileMaui(compilerOptions);
+      case 'nodejs': return compileNodeJS(compilerOptions);
+      default: return '// Select a framework to generate code';
+    }
+  }, [currentProject, activeFileId, fileTree, visualElements, isEditing, activeFileContent]);
+
+  const collaboratorCursors = useMemo(() => {
+    if (!activeFileId) return [];
+    return collaborators.filter((c) => c.activeFileId === activeFileId && c.cursor && c.cursor.line != null);
+  }, [collaborators, activeFileId]);
+
+  const lines = useMemo(() => compiledCode.split('\n'), [compiledCode]);
+
+  const handleEditorClick = useCallback((e: React.MouseEvent) => {
+    const rect = editorRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const lineHeight = 20;
+    const line = Math.floor((e.clientY - rect.top + editorRef.current!.scrollTop) / lineHeight);
+    const ch = Math.min(0, 0);
+    if (activeFileId) {
+      emitCursorMove(activeFileId, { line: Math.max(0, line), ch });
+    }
+  }, [activeFileId, emitCursorMove]);
+
+  const cursorThrottle = useRef<number>();
+  const handleTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const content = e.target.value;
+    setActiveFileContent(content);
+    if (activeFileId) {
+      emitFileChanged(activeFileId, content);
     }
-  }, [currentProject, activeFileId, fileTree, visualElements]);
+    // Track cursor position
+    const textarea = e.target;
+    const pos = textarea.selectionStart;
+    const before = content.substring(0, pos);
+    const line = before.split('\n').length - 1;
+    const ch = before.length - before.lastIndexOf('\n') - 1;
+    clearTimeout(cursorThrottle.current);
+    cursorThrottle.current = window.setTimeout(() => {
+      if (activeFileId) emitCursorMove(activeFileId, { line, ch });
+    }, 100);
+  }, [activeFileId, emitCursorMove, emitFileChanged, setActiveFileContent]);
 
   const handleDownload = useCallback(async () => {
     if (!currentProject) return;
     const zip = new JSZip();
-
     const addFilesToZip = (files: any[], currentPath: string = '') => {
       for (const file of files) {
         if (file.type === 'folder') {
-          const folderPath = currentPath + file.name + '/';
-          if (file.children) addFilesToZip(file.children, folderPath);
+          if (file.children) addFilesToZip(file.children, currentPath + file.name + '/');
         } else {
           zip.file(currentPath + file.name, file.content || '');
         }
       }
     };
-
     addFilesToZip(fileTree);
     const blob = await zip.generateAsync({ type: 'blob' });
     saveAs(blob, `${currentProject.name}.zip`);
@@ -86,20 +120,24 @@ export default function CodeView() {
           <span className="badge-web">{currentProject?.framework || 'web'}</span>
         </div>
         <div className="flex items-center gap-2">
-          <div className="flex bg-surface-800 rounded-lg p-0.5">
-            <button
-              onClick={() => setViewMode('design')}
-              className={`px-2 py-1 rounded-md text-xs ${viewMode === 'design' ? 'bg-primary-600 text-white' : 'text-surface-400'}`}
-            >
-              <Code2 className="w-3.5 h-3.5" />
-            </button>
-            <button
-              onClick={() => setViewMode('split')}
-              className={`px-2 py-1 rounded-md text-xs ${viewMode === 'split' ? 'bg-primary-600 text-white' : 'text-surface-400'}`}
-            >
-              <SplitSquareHorizontal className="w-3.5 h-3.5" />
-            </button>
-          </div>
+          {!isEditing && (
+            <div className="flex bg-surface-800 rounded-lg p-0.5">
+              <button onClick={() => setViewMode('design')}
+                className={`px-2 py-1 rounded-md text-xs ${viewMode === 'design' ? 'bg-primary-600 text-white' : 'text-surface-400'}`}>
+                <Code2 className="w-3.5 h-3.5" />
+              </button>
+              <button onClick={() => setViewMode('split')}
+                className={`px-2 py-1 rounded-md text-xs ${viewMode === 'split' ? 'bg-primary-600 text-white' : 'text-surface-400'}`}>
+                <SplitSquareHorizontal className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )}
+          <button onClick={() => setIsEditing(!isEditing)}
+            className={`btn-ghost px-2 py-1 text-xs ${isEditing ? 'text-primary-400 bg-primary-500/10' : ''}`}
+            title={isEditing ? 'View compiled code' : 'Edit source directly'}>
+            <Code2 className="w-3.5 h-3.5" />
+            {isEditing ? 'Compiled' : 'Edit'}
+          </button>
           <div className="w-px h-4 bg-surface-700" />
           <button onClick={handleCopy} className="btn-ghost p-1.5" title="Copy to clipboard">
             <Copy className="w-3.5 h-3.5" />
@@ -112,14 +150,74 @@ export default function CodeView() {
 
       {/* Code Content */}
       <div className="flex-1 overflow-auto">
-        {compiledCode ? (
-          <SyntaxHighlight code={compiledCode} language={getLanguage(currentProject?.framework || 'web', fileTree.find(f => f.id === activeFileId)?.type)} />
-        ) : (
-          <div className="flex items-center justify-center h-full text-surface-500 text-sm">
-            <div className="text-center">
-              <Code2 className="w-12 h-12 mx-auto mb-3 opacity-30" />
-              <p>Add blocks to see generated code</p>
+        {isEditing ? (
+          <div className="relative h-full">
+            <textarea
+              value={activeFileContent}
+              onChange={handleTextChange}
+              className="w-full h-full bg-transparent text-transparent caret-white resize-none font-mono text-sm leading-5 p-4 absolute inset-0 z-10 outline-none"
+              spellCheck={false}
+            />
+            <div className="pointer-events-none p-4">
+              <SyntaxHighlight code={activeFileContent} language={getLanguage(currentProject?.framework || 'web', fileTree.find(f => f.id === activeFileId)?.type)} />
             </div>
+            {collaboratorCursors.length > 0 && (
+              <div className="absolute inset-0 pointer-events-none z-20">
+                {collaboratorCursors.map((c) => (
+                  <div
+                    key={c.userId}
+                    className="absolute left-0 w-0.5 h-5"
+                    style={{
+                      top: `${c.cursor!.line * 20 + 16}px`,
+                      backgroundColor: getColor(c.userId),
+                    }}
+                  >
+                    <span
+                      className="absolute left-0.5 -top-4 text-[9px] px-1 py-0.5 rounded-r whitespace-nowrap text-white font-bold"
+                      style={{ backgroundColor: getColor(c.userId) }}
+                    >
+                      {c.username}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div ref={editorRef} onClick={handleEditorClick} className="relative">
+            {compiledCode ? (
+              <>
+                <SyntaxHighlight code={compiledCode} language={getLanguage(currentProject?.framework || 'web', fileTree.find(f => f.id === activeFileId)?.type)} />
+                {collaboratorCursors.length > 0 && (
+                  <div className="absolute inset-0 pointer-events-none top-0 left-0">
+                    {collaboratorCursors.map((c) => (
+                      <div
+                        key={c.userId}
+                        className="absolute left-0 w-0.5 h-5"
+                        style={{
+                          top: `${c.cursor!.line * 20 + 16}px`,
+                          backgroundColor: getColor(c.userId),
+                        }}
+                      >
+                        <span
+                          className="absolute left-0.5 -top-4 text-[9px] px-1 py-0.5 rounded-r whitespace-nowrap text-white font-bold"
+                          style={{ backgroundColor: getColor(c.userId) }}
+                        >
+                          {c.username}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex items-center justify-center h-full text-surface-500 text-sm">
+                <div className="text-center">
+                  <Code2 className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                  <p>Add blocks to see generated code</p>
+                </div>
+              </div>
+            )}
           </div>
         )}
       </div>

client/src/components/Collaboration/CollaboratorAvatars.tsx

@@ -0,0 +1,53 @@
+import { useCollaborationStore } from '../../store/collaborationStore';
+
+const AVATAR_COLORS = [
+  '#22d3ee', '#f472b6', '#34d399', '#fbbf24', '#a78bfa',
+  '#fb923c', '#4ade80', '#f87171', '#38bdf8', '#c084fc',
+];
+
+function getColor(userId: string): string {
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = ((hash << 5) - hash) + userId.charCodeAt(i);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+export default function CollaboratorAvatars({ fileId }: { fileId?: string }) {
+  const collaborators = useCollaborationStore((s) => s.collaborators);
+  const connected = useCollaborationStore((s) => s.connected);
+
+  if (!connected || collaborators.length === 0) return null;
+
+  const visible = fileId
+    ? collaborators.filter((c) => c.activeFileId === fileId)
+    : collaborators;
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div className="flex items-center -space-x-1.5">
+      {visible.map((c) => (
+        <div
+          key={c.userId}
+          className="relative group"
+        >
+          <div
+            className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white ring-2 ring-surface-900 cursor-help"
+            style={{ backgroundColor: getColor(c.userId) }}
+          >
+            {c.username.charAt(0).toUpperCase()}
+          </div>
+          <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block z-50">
+            <div className="bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-white whitespace-nowrap shadow-lg">
+              <div className="font-medium">{c.username}</div>
+              <div className="text-surface-400">{c.permission}</div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { getColor };

client/src/components/Collaboration/ShareModal.tsx

@@ -0,0 +1,238 @@
+import { useState, useEffect, useCallback } from 'react';
+import { X, Search, UserPlus, Shield, Trash2, Check } from 'lucide-react';
+import { api } from '../../api/client';
+import { useCollaborationStore } from '../../store/collaborationStore';
+
+interface ShareModalProps {
+  projectId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface UserResult {
+  id: string;
+  username: string;
+}
+
+interface CollaboratorResult {
+  id: string;
+  username: string;
+  permission: string;
+  created_at: number;
+}
+
+export default function ShareModal({ projectId, isOpen, onClose }: ShareModalProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<UserResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [collaborators, setCollaborators] = useState<CollaboratorResult[]>([]);
+  const [owner, setOwner] = useState<{ id: string; username: string } | null>(null);
+  const [addingUser, setAddingUser] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const connected = useCollaborationStore((s) => s.connected);
+
+  const fetchCollaborators = useCallback(async () => {
+    try {
+      const res = await api.request<{ owner: any; collaborators: CollaboratorResult[] }>('GET', `/projects/${projectId}/collaborators`);
+      setOwner(res.owner);
+      setCollaborators(res.collaborators);
+      if (res.owner) {
+        useCollaborationStore.getState().setOwner(res.owner);
+      }
+    } catch {}
+  }, [projectId]);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCollaborators();
+      setSearchQuery('');
+      setSearchResults([]);
+      setError(null);
+    }
+  }, [isOpen, fetchCollaborators]);
+
+  useEffect(() => {
+    if (searchQuery.length < 2) {
+      setSearchResults([]);
+      return;
+    }
+    const timer = setTimeout(async () => {
+      setSearching(true);
+      try {
+        const res = await api.request<{ users: UserResult[] }>('GET', `/projects/collaborators/search?username=${encodeURIComponent(searchQuery)}`);
+        setSearchResults(res.users);
+      } catch {
+        setSearchResults([]);
+      } finally {
+        setSearching(false);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const handleAddCollaborator = async (username: string) => {
+    setAddingUser(username);
+    setError(null);
+    try {
+      await api.request('POST', `/projects/${projectId}/collaborators`, { username, permission: 'edit' });
+      await fetchCollaborators();
+      setSearchQuery('');
+      setSearchResults([]);
+    } catch (err: any) {
+      setError(err.message || 'Failed to add collaborator');
+    } finally {
+      setAddingUser(null);
+    }
+  };
+
+  const handleUpdatePermission = async (userId: string, permission: string) => {
+    try {
+      await api.request('PUT', `/projects/${projectId}/collaborators/${userId}`, { permission });
+      await fetchCollaborators();
+    } catch {}
+  };
+
+  const handleRemoveCollaborator = async (userId: string) => {
+    try {
+      await api.request('DELETE', `/projects/${projectId}/collaborators/${userId}`);
+      await fetchCollaborators();
+    } catch {}
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-surface-900 border border-surface-700 rounded-xl w-full max-w-lg max-h-[80vh] flex flex-col">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-surface-700">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4 text-primary-400" />
+            <h2 className="text-sm font-semibold text-white">Share Project</h2>
+            {connected && (
+              <span className="text-xs text-green-400 bg-green-400/10 px-1.5 py-0.5 rounded-full">
+                Live
+              </span>
+            )}
+          </div>
+          <button onClick={onClose} className="text-surface-400 hover:text-white p-1">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="p-4 border-b border-surface-700">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search users by username..."
+              className="w-full bg-surface-800 border border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-surface-500 focus:outline-none focus:border-primary-500"
+            />
+            {searching && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <div className="animate-spin rounded-full h-3 w-3 border border-primary-500 border-t-transparent" />
+              </div>
+            )}
+          </div>
+
+          {searchResults.length > 0 && (
+            <div className="mt-2 bg-surface-800 border border-surface-700 rounded-lg overflow-hidden">
+              {searchResults.map((user) => (
+                <button
+                  key={user.id}
+                  onClick={() => handleAddCollaborator(user.username)}
+                  disabled={addingUser === user.username}
+                  className="w-full flex items-center justify-between px-3 py-2 hover:bg-surface-700 text-sm disabled:opacity-50"
+                >
+                  <span className="text-white">{user.username}</span>
+                  <span className="flex items-center gap-1 text-primary-400 text-xs">
+                    {addingUser === user.username ? (
+                      <>
+                        <div className="animate-spin rounded-full h-3 w-3 border border-primary-500 border-t-transparent" />
+                        Adding...
+                      </>
+                    ) : (
+                      <>
+                        <UserPlus className="w-3.5 h-3.5" />
+                        Add
+                      </>
+                    )}
+                  </span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {error && (
+          <div className="px-4 py-2 bg-red-500/10 text-red-400 text-xs">{error}</div>
+        )}
+
+        <div className="flex-1 overflow-y-auto p-4 space-y-2">
+          {owner && (
+            <div className="flex items-center justify-between px-3 py-2 bg-surface-800 rounded-lg">
+              <div className="flex items-center gap-2">
+                <div className="w-7 h-7 rounded-full bg-amber-500/20 flex items-center justify-center">
+                  <span className="text-xs font-bold text-amber-400">
+                    {owner.username.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-sm text-white font-medium">{owner.username}</span>
+                  <span className="text-xs text-surface-400 ml-2">Owner</span>
+                </div>
+              </div>
+              <span className="text-xs bg-amber-500/10 text-amber-400 px-2 py-0.5 rounded-full">
+                admin
+              </span>
+            </div>
+          )}
+
+          {collaborators.map((collab) => (
+            <div
+              key={collab.id}
+              className="flex items-center justify-between px-3 py-2 bg-surface-800 rounded-lg"
+            >
+              <div className="flex items-center gap-2">
+                <div className="w-7 h-7 rounded-full bg-primary-500/20 flex items-center justify-center">
+                  <span className="text-xs font-bold text-primary-400">
+                    {collab.username.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <span className="text-sm text-white">{collab.username}</span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <select
+                  value={collab.permission}
+                  onChange={(e) => handleUpdatePermission(collab.id, e.target.value)}
+                  className="bg-surface-700 border border-surface-600 rounded text-xs text-white px-2 py-1 focus:outline-none focus:border-primary-500"
+                >
+                  <option value="view">view</option>
+                  <option value="edit">edit</option>
+                  <option value="admin">admin</option>
+                </select>
+
+                <button
+                  onClick={() => handleRemoveCollaborator(collab.id)}
+                  className="text-surface-400 hover:text-red-400 p-1"
+                  title="Remove collaborator"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          ))}
+
+          {!owner && collaborators.length === 0 && (
+            <p className="text-surface-500 text-xs text-center py-8">
+              No collaborators yet. Search for users to share this project.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/ProjectEditor/FileTree.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useEditorStore } from '../../store/editorStore';
+import { useCollaborationStore } from '../../store/collaborationStore';
 import { ProjectFile } from '../../types/blocks';
 import { FrameworkType } from '../../types';
 import {
@@ -8,6 +9,7 @@ import {
   Link, Unlink, Link2, Globe, X, Copy, PanelRight
 } from 'lucide-react';
 import { v4 as uuidv4 } from 'uuid';
+import { getColor } from '../Collaboration/CollaboratorAvatars';
 
 interface FileTreeProps {
   files: ProjectFile[];
@@ -171,6 +173,9 @@ function FileItem({ file, depth, activeFileId, onSelect, onRename, onDelete, onA
   const isActive = activeFileId === file.id;
   const isFile = file.type !== 'folder';
   const linkedIds = file.linkedFiles || [];
+  const collaborators = useCollaborationStore((s) => s.collaborators);
+  const connected = useCollaborationStore((s) => s.connected);
+  const collabOnFile = useMemo(() => collaborators.filter((c) => c.activeFileId === file.id), [collaborators, file.id]);
 
   // Get linked files
   const linked = linkedIds.map(id => findFile(allFiles, id)).filter(Boolean) as ProjectFile[];
@@ -228,6 +233,20 @@ function FileItem({ file, depth, activeFileId, onSelect, onRename, onDelete, onA
         {hasLinks && isFile && (
           <span className="text-[9px] text-primary-400/60 bg-primary-500/10 px-1 rounded-full flex-shrink-0">{linkedIds.length}</span>
         )}
+        {connected && collabOnFile.length > 0 && (
+          <div className="flex items-center -space-x-1 ml-auto">
+            {collabOnFile.slice(0, 3).map((c) => (
+              <div
+                key={c.userId}
+                className="w-4 h-4 rounded-full flex items-center justify-center text-[7px] font-bold text-white ring-1 ring-surface-900"
+                style={{ backgroundColor: getColor(c.userId) }}
+                title={`${c.username} (${c.permission})`}
+              >
+                {c.username.charAt(0).toUpperCase()}
+              </div>
+            ))}
+          </div>
+        )}
         <div className="ml-auto flex items-center gap-0.5 opacity-0 group-hover:opacity-100">
           {file.type === 'folder' && (
             <>

client/src/components/ProjectEditor/ProjectEditor.tsx

@@ -2,16 +2,20 @@ import { useEffect, useState, useCallback, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useProjectStore } from '../../store/projectStore';
 import { useEditorStore } from '../../store/editorStore';
+import { useCollaborationStore } from '../../store/collaborationStore';
+import { useWebSocket } from '../../hooks/useWebSocket';
 import {
   Blocks, Eye, Code2, FileType,
   Save, ArrowLeft, Grid3X3, Maximize2, Minimize2,
-  PanelLeft, PanelRight
+  PanelLeft, PanelRight, Users
 } from 'lucide-react';
 import FileTree from './FileTree';
 import Toolbar from './Toolbar';
 import BlockEditor from '../BlockEditor/BlockEditor';
 import VisualEditor from '../VisualEditor/VisualEditor';
 import CodeView from '../CodeView/CodeView';
+import ShareModal from '../Collaboration/ShareModal';
+import CollaboratorAvatars from '../Collaboration/CollaboratorAvatars';
 import { ProjectFile } from '../../types/blocks';
 
 type FileCategory = 'markup' | 'script' | 'other';
@@ -58,6 +62,11 @@ export default function ProjectEditor() {
   } = useEditorStore();
   const [showSidebar, setShowSidebar] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
+
+  const { emitFileChanged, emitActiveFileChanged, emitSave, emitCursorMove } = useWebSocket(id);
+
+  const connected = useCollaborationStore((s) => s.connected);
 
   useEffect(() => {
     if (id) loadProject(id);
@@ -147,6 +156,13 @@ export default function ProjectEditor() {
     setViewMode('design');
   }, [activeFileId, availableModes]);
 
+  // Emit active file changes to collaborators
+  useEffect(() => {
+    if (id && activeFileId) {
+      emitActiveFileChanged(activeFileId);
+    }
+  }, [id, activeFileId, emitActiveFileChanged]);
+
   const handleSave = useCallback(async () => {
     if (!currentProject || !id) return;
     setSaving(true);
@@ -162,18 +178,24 @@ export default function ProjectEditor() {
         blocksXml: currentBlocksXml,
         blockCode: currentBlockCode,
       };
-      await updateProject(id, { data });
+
+      // Try WebSocket save first, fall back to REST
+      if (connected) {
+        await emitSave(data);
+      } else {
+        await updateProject(id, { data });
+      }
     } finally {
       setSaving(false);
     }
-  }, [currentProject, id, fileTree, visualElements, activeFileId, updateProject]);
+  }, [currentProject, id, fileTree, visualElements, activeFileId, updateProject, connected, emitSave]);
 
+  // Auto-save via WebSocket when data changes (no more 30s polling)
   useEffect(() => {
-    const interval = setInterval(() => {
-      if (currentProject && id) handleSave();
-    }, 30000);
-    return () => clearInterval(interval);
-  }, [currentProject, id, handleSave]);
+    if (!currentProject || !id || !connected) return;
+    const timer = setTimeout(() => handleSave(), 2000);
+    return () => clearTimeout(timer);
+  }, [currentProject, id, fileTree, visualElements, activeFileId, connected, handleSave]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -253,6 +275,7 @@ export default function ProjectEditor() {
         }
         rightContent={
           <div className="flex items-center gap-2">
+            <CollaboratorAvatars />
             {displayMode === 'visual' && (
               <>
                 <button
@@ -271,6 +294,13 @@ export default function ProjectEditor() {
                 </button>
               </>
             )}
+            <button
+              onClick={() => setShowShareModal(true)}
+              className={`btn-ghost p-1.5 ${connected ? 'text-green-400' : 'text-surface-400'}`}
+              title={connected ? 'Collaborators online' : 'Share project'}
+            >
+              <Users className="w-4 h-4" />
+            </button>
             <button
               onClick={() => setShowSidebar(!showSidebar)}
               className="btn-ghost p-1.5"
@@ -319,6 +349,14 @@ export default function ProjectEditor() {
           )}
         </div>
       </div>
+
+      {id && (
+        <ShareModal
+          projectId={id}
+          isOpen={showShareModal}
+          onClose={() => setShowShareModal(false)}
+        />
+      )}
     </div>
   );
 }

client/src/hooks/useWebSocket.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { io, Socket } from 'socket.io-client';
+import { useAuthStore } from '../store/authStore';
+import { useCollaborationStore, Collaborator } from '../store/collaborationStore';
+
+let globalSocket: Socket | null = null;
+
+export function useWebSocket(projectId: string | undefined) {
+  const token = useAuthStore((s) => s.token);
+  const {
+    setCollaborators,
+    addCollaborator,
+    removeCollaborator,
+    updateActiveFile,
+    updateCursor,
+    setConnected,
+  } = useCollaborationStore();
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!token || !projectId) return;
+
+    if (globalSocket?.connected) {
+      globalSocket.disconnect();
+    }
+
+    const socket = io({
+      auth: { token },
+      transports: ['websocket', 'polling'],
+    });
+
+    socketRef.current = socket;
+    globalSocket = socket;
+
+    socket.on('connect', () => {
+      setConnected(true);
+      socket.emit('join_project', { projectId });
+    });
+
+    socket.on('disconnect', () => {
+      setConnected(false);
+    });
+
+    socket.on('collaborator_list', ({ collaborators }: { collaborators: Collaborator[] }) => {
+      setCollaborators(collaborators);
+    });
+
+    socket.on('collaborator_joined', (collaborator: Collaborator) => {
+      addCollaborator(collaborator);
+    });
+
+    socket.on('collaborator_left', ({ userId }: { userId: string }) => {
+      removeCollaborator(userId);
+    });
+
+    socket.on('collaborator_active_file', ({ userId, fileId }: { userId: string; fileId: string | null }) => {
+      updateActiveFile(userId, fileId);
+    });
+
+    socket.on('collaborator_cursor', ({ userId, fileId, cursor }: { userId: string; fileId: string; cursor: { line: number; ch: number } | null }) => {
+      updateCursor(userId, fileId, cursor);
+    });
+
+    socket.on('file_updated', ({ fileId, content }: { fileId: string; content: string }) => {
+      const { updateFile } = useCollaborationStore.getState();
+      updateFile(fileId, content);
+    });
+
+    socket.on('project_saved', ({ updatedAt, savedBy }: { updatedAt: number; savedBy: string }) => {
+      const { setLastSaved, setSavedBy } = useCollaborationStore.getState();
+      setLastSaved(updatedAt);
+      setSavedBy(savedBy);
+    });
+
+    return () => {
+      socket.emit('leave_project', { projectId });
+      socket.disconnect();
+      if (globalSocket === socket) globalSocket = null;
+      setConnected(false);
+    };
+  }, [token, projectId, setCollaborators, addCollaborator, removeCollaborator, updateActiveFile, updateCursor, setConnected]);
+
+  const emitFileChanged = useCallback((fileId: string, content: string) => {
+    if (socketRef.current?.connected && projectId) {
+      socketRef.current.emit('file_changed', { projectId, fileId, content });
+    }
+  }, [projectId]);
+
+  const emitActiveFileChanged = useCallback((fileId: string | null) => {
+    if (socketRef.current?.connected && projectId) {
+      socketRef.current.emit('active_file_changed', { projectId, fileId });
+    }
+  }, [projectId]);
+
+  const emitCursorMove = useCallback((fileId: string, cursor: { line: number; ch: number }) => {
+    if (socketRef.current?.connected && projectId) {
+      socketRef.current.emit('cursor_move', { projectId, fileId, cursor });
+    }
+  }, [projectId]);
+
+  const emitSave = useCallback((data: any): Promise<any> => {
+    return new Promise((resolve, reject) => {
+      if (!socketRef.current?.connected || !projectId) {
+        reject(new Error('Not connected'));
+        return;
+      }
+      socketRef.current.emit('save_project', { projectId, data }, (response: any) => {
+        if (response?.error) reject(new Error(response.error));
+        else resolve(response);
+      });
+    });
+  }, [projectId]);
+
+  return {
+    socket: socketRef.current,
+    emitFileChanged,
+    emitActiveFileChanged,
+    emitCursorMove,
+    emitSave,
+  };
+}
+
+export function getSocket(): Socket | null {
+  return globalSocket;
+}

client/src/store/collaborationStore.ts

@@ -0,0 +1,98 @@
+import { create } from 'zustand';
+import { useEditorStore } from './editorStore';
+
+export interface Collaborator {
+  userId: string;
+  username: string;
+  permission: 'view' | 'edit' | 'admin';
+  activeFileId: string | null;
+  cursor: { line: number; ch: number } | null;
+  joinedAt: number;
+}
+
+interface CollaboratorOwner {
+  id: string;
+  username: string;
+}
+
+interface CollaborationStore {
+  connected: boolean;
+  collaborators: Collaborator[];
+  owner: CollaboratorOwner | null;
+  lastSaved: number | null;
+  savedBy: string | null;
+  setConnected: (connected: boolean) => void;
+  setCollaborators: (collaborators: Collaborator[]) => void;
+  setOwner: (owner: CollaboratorOwner) => void;
+  addCollaborator: (collaborator: Collaborator) => void;
+  removeCollaborator: (userId: string) => void;
+  updateActiveFile: (userId: string, fileId: string | null) => void;
+  updateCursor: (userId: string, fileId: string, cursor: { line: number; ch: number } | null) => void;
+  updateFile: (fileId: string, content: string) => void;
+  setLastSaved: (timestamp: number) => void;
+  setSavedBy: (username: string) => void;
+  getCollaboratorsOnFile: (fileId: string) => Collaborator[];
+  isViewOnly: () => boolean;
+}
+
+export const useCollaborationStore = create<CollaborationStore>((set, get) => ({
+  connected: false,
+  collaborators: [],
+  owner: null,
+  lastSaved: null,
+  savedBy: null,
+
+  setConnected: (connected) => set({ connected }),
+
+  setCollaborators: (collaborators) => set({ collaborators }),
+
+  setOwner: (owner) => set({ owner }),
+
+  addCollaborator: (collaborator) =>
+    set((state) => {
+      const exists = state.collaborators.find((c) => c.userId === collaborator.userId);
+      if (exists) return state;
+      return { collaborators: [...state.collaborators, collaborator] };
+    }),
+
+  removeCollaborator: (userId) =>
+    set((state) => ({
+      collaborators: state.collaborators.filter((c) => c.userId !== userId),
+    })),
+
+  updateActiveFile: (userId, fileId) =>
+    set((state) => ({
+      collaborators: state.collaborators.map((c) =>
+        c.userId === userId ? { ...c, activeFileId: fileId } : c
+      ),
+    })),
+
+  updateCursor: (userId, fileId, cursor) =>
+    set((state) => ({
+      collaborators: state.collaborators.map((c) =>
+        c.userId === userId ? { ...c, cursor, activeFileId: fileId } : c
+      ),
+    })),
+
+  updateFile: (fileId, content) => {
+    const state = useEditorStore.getState();
+    if (state.activeFileId === fileId) {
+      state.setActiveFileContent(content);
+    }
+    state.updateFile(fileId, { content });
+  },
+
+  setLastSaved: (timestamp) => set({ lastSaved: timestamp }),
+
+  setSavedBy: (username) => set({ savedBy: username }),
+
+  getCollaboratorsOnFile: (fileId) => {
+    return get().collaborators.filter((c) => c.activeFileId === fileId);
+  },
+
+  isViewOnly: () => {
+    const { user } = require('../store/authStore').useAuthStore.getState();
+    const collab = get().collaborators.find((c) => c.userId === user?.id);
+    return collab?.permission === 'view';
+  },
+}));

server/package.json

@@ -20,6 +20,7 @@
     "jsonwebtoken": "^9.0.2",
     "multer": "^1.4.5-lts.1",
     "nodemailer": "^6.9.7",
+    "socket.io": "^4.7.5",
     "uuid": "^9.0.0",
     "zod": "^3.22.4"
   },

server/src/database/index.ts

@@ -131,9 +131,23 @@ function initializeSchema(): void {
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
     );
 
+    CREATE TABLE IF NOT EXISTS project_collaborators (
+      project_id TEXT NOT NULL,
+      user_id TEXT NOT NULL,
+      permission TEXT NOT NULL DEFAULT 'edit' CHECK(permission IN ('view','edit','admin')),
+      added_by TEXT NOT NULL,
+      created_at INTEGER NOT NULL,
+      PRIMARY KEY (project_id, user_id),
+      FOREIGN KEY (project_id) REFERENCES projects(id) ON DELETE CASCADE,
+      FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+      FOREIGN KEY (added_by) REFERENCES users(id) ON DELETE CASCADE
+    );
+
     CREATE INDEX IF NOT EXISTS idx_projects_user_id ON projects(user_id);
     CREATE INDEX IF NOT EXISTS idx_sessions_token ON sessions(token);
     CREATE INDEX IF NOT EXISTS idx_sessions_user_id ON sessions(user_id);
+    CREATE INDEX IF NOT EXISTS idx_collaborators_project ON project_collaborators(project_id);
+    CREATE INDEX IF NOT EXISTS idx_collaborators_user ON project_collaborators(user_id);
   `);
 }
 

server/src/index.ts

@@ -2,9 +2,11 @@ import express from 'express';
 import cors from 'cors';
 import helmet from 'helmet';
 import path from 'path';
+import http from 'http';
 import { config } from './config';
 import { getDatabase, closeDatabase } from './database';
 import { apiLimiter } from './middleware/rateLimiter';
+import { initRealtime } from './services/realtime';
 import authRoutes from './routes/auth';
 import projectRoutes from './routes/projects';
 
@@ -43,7 +45,10 @@ app.use((err: any, _req: express.Request, res: express.Response, _next: express.
 
 getDatabase();
 
-const server = app.listen(config.port, () => {
+const httpServer = http.createServer(app);
+initRealtime(httpServer);
+
+const server = httpServer.listen(config.port, () => {
   console.log(`RealBlocks server running on port ${config.port}`);
   console.log(`Environment: ${config.nodeEnv}`);
 });

server/src/routes/projects.ts

@@ -31,13 +31,19 @@ router.get('/', authenticate, (req: AuthRequest, res: Response) => {
 
 router.get('/:id', authenticate, (req: AuthRequest, res: Response) => {
   const db = getDatabase();
-  const project = db.prepare(
+  let project = db.prepare(
     'SELECT * FROM projects WHERE id = ? AND user_id = ?'
   ).get(req.params.id, req.userId) as any;
 
   if (!project) {
-    res.status(404).json({ error: 'Project not found' });
-    return;
+    const collab = db.prepare(
+      'SELECT p.* FROM projects p JOIN project_collaborators c ON p.id = c.project_id WHERE p.id = ? AND c.user_id = ?'
+    ).get(req.params.id, req.userId) as any;
+    if (!collab) {
+      res.status(404).json({ error: 'Project not found' });
+      return;
+    }
+    project = collab;
   }
 
   try {
@@ -101,13 +107,21 @@ router.put('/:id', authenticate, async (req: AuthRequest, res: Response) => {
     const updates = updateProjectSchema.parse(req.body);
     const db = getDatabase();
 
-    const project = db.prepare(
+    let project = db.prepare(
       'SELECT * FROM projects WHERE id = ? AND user_id = ?'
     ).get(req.params.id, req.userId) as any;
 
+    let permission: string | null = 'admin';
     if (!project) {
-      res.status(404).json({ error: 'Project not found' });
-      return;
+      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(req.params.id, req.userId) as any;
+      if (!collab || collab.permission === 'view') {
+        res.status(403).json({ error: 'Permission denied' });
+        return;
+      }
+      project = collab;
+      permission = collab.permission;
     }
 
     const now = Date.now();
@@ -126,15 +140,14 @@ router.put('/:id', authenticate, async (req: AuthRequest, res: Response) => {
         encrypted_data = ?,
         encryption_iv = ?,
         updated_at = ?
-      WHERE id = ? AND user_id = ?
+      WHERE id = ?
     `).run(
       updates.name || null,
       updates.description !== undefined ? updates.description : null,
       encryptedData,
       encryptedIv,
       now,
-      req.params.id,
-      req.userId
+      req.params.id
     );
 
     res.json({ message: 'Project updated successfully', updated_at: now });
@@ -148,17 +161,23 @@ router.put('/:id', authenticate, async (req: AuthRequest, res: Response) => {
   }
 });
 
-router.delete('/:id', authenticate, async (req: AuthRequest, res: Response) => {
+router.delete('/:id', authenticate, (req: AuthRequest, res: Response) => {
   const db = getDatabase();
-  const result = db.prepare(
-    'DELETE FROM projects WHERE id = ? AND user_id = ?'
-  ).run(req.params.id, req.userId);
+  const project = db.prepare(
+    'SELECT user_id FROM projects WHERE id = ?'
+  ).get(req.params.id) as any;
 
-  if (result.changes === 0) {
+  if (!project) {
     res.status(404).json({ error: 'Project not found' });
     return;
   }
 
+  if (project.user_id !== req.userId) {
+    res.status(403).json({ error: 'Only the owner can delete a project' });
+    return;
+  }
+
+  db.prepare('DELETE FROM projects WHERE id = ?').run(req.params.id);
   res.json({ message: 'Project deleted successfully' });
 });
 
@@ -186,6 +205,229 @@ router.post('/:id/sync', authenticate, async (req: AuthRequest, res: Response) =
   }
 });
 
+// ---- COLLABORATOR ROUTES ----
+
+// Search users by username (for share modal) — must be BEFORE /:id routes
+router.get('/collaborators/search', authenticate, (req: AuthRequest, res: Response) => {
+  const query = req.query.username as string;
+  if (!query || query.length < 2) {
+    res.json({ users: [] });
+    return;
+  }
+  const db = getDatabase();
+  const users = db.prepare(
+    'SELECT id, username FROM users WHERE username LIKE ? AND id != ? LIMIT 20'
+  ).all(`%${query}%`, req.userId);
+  res.json({ users });
+});
+
+// List collaborators for a project
+router.get('/:id/collaborators', authenticate, (req: AuthRequest, res: Response) => {
+  const db = getDatabase();
+  const project = db.prepare(
+    'SELECT user_id FROM projects WHERE id = ? AND user_id = ?'
+  ).get(req.params.id, req.userId) as any;
+
+  let hasAccess = !!project;
+  if (!hasAccess) {
+    const collab = db.prepare(
+      'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+    ).get(req.params.id, req.userId) as any;
+    hasAccess = !!collab;
+  }
+
+  if (!hasAccess) {
+    res.status(404).json({ error: 'Project not found' });
+    return;
+  }
+
+  const owner = db.prepare(
+    'SELECT id, username FROM users WHERE id = (SELECT user_id FROM projects WHERE id = ?)'
+  ).get(req.params.id) as any;
+
+  const collaborators = db.prepare(`
+    SELECT u.id, u.username, c.permission, c.created_at
+    FROM project_collaborators c
+    JOIN users u ON u.id = c.user_id
+    WHERE c.project_id = ?
+    ORDER BY c.created_at ASC
+  `).all(req.params.id);
+
+  res.json({
+    owner: owner ? { id: owner.id, username: owner.username } : null,
+    collaborators,
+  });
+});
+
+// Add collaborator
+router.post('/:id/collaborators', authenticate, async (req: AuthRequest, res: Response) => {
+  try {
+    const schema = z.object({
+      username: z.string().min(1),
+      permission: z.enum(['view', 'edit', 'admin']).default('edit'),
+    });
+    const { username, permission } = schema.parse(req.body);
+    const db = getDatabase();
+
+    const project = db.prepare(
+      'SELECT user_id FROM projects WHERE id = ?'
+    ).get(req.params.id) as any;
+
+    if (!project) {
+      res.status(404).json({ error: 'Project not found' });
+      return;
+    }
+
+    const isOwner = project.user_id === req.userId;
+    let isAdmin = isOwner;
+    if (!isOwner) {
+      const collab = db.prepare(
+        'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+      ).get(req.params.id, req.userId) as any;
+      isAdmin = collab?.permission === 'admin';
+    }
+
+    if (!isAdmin) {
+      res.status(403).json({ error: 'Only the owner or admin can add collaborators' });
+      return;
+    }
+
+    const targetUser = db.prepare(
+      'SELECT id, username FROM users WHERE username = ?'
+    ).get(username) as any;
+
+    if (!targetUser) {
+      res.status(404).json({ error: 'User not found' });
+      return;
+    }
+
+    if (targetUser.id === project.user_id) {
+      res.status(400).json({ error: 'Cannot add the project owner as a collaborator' });
+      return;
+    }
+
+    const existing = db.prepare(
+      'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+    ).get(req.params.id, targetUser.id) as any;
+
+    if (existing) {
+      res.status(400).json({ error: 'User is already a collaborator' });
+      return;
+    }
+
+    db.prepare(`
+      INSERT INTO project_collaborators (project_id, user_id, permission, added_by, created_at)
+      VALUES (?, ?, ?, ?, ?)
+    `).run(req.params.id, targetUser.id, permission, req.userId, Date.now());
+
+    res.status(201).json({
+      collaborator: {
+        id: targetUser.id,
+        username: targetUser.username,
+        permission,
+      },
+    });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      res.status(400).json({ error: 'Invalid input', details: error.errors });
+      return;
+    }
+    console.error('Add collaborator error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Update collaborator permission
+router.put('/:id/collaborators/:userId', authenticate, async (req: AuthRequest, res: Response) => {
+  try {
+    const schema = z.object({
+      permission: z.enum(['view', 'edit', 'admin']),
+    });
+    const { permission } = schema.parse(req.body);
+    const db = getDatabase();
+
+    const project = db.prepare(
+      'SELECT user_id FROM projects WHERE id = ?'
+    ).get(req.params.id) as any;
+
+    if (!project) {
+      res.status(404).json({ error: 'Project not found' });
+      return;
+    }
+
+    const isOwner = project.user_id === req.userId;
+    let isAdmin = isOwner;
+    if (!isOwner) {
+      const collab = db.prepare(
+        'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+      ).get(req.params.id, req.userId) as any;
+      isAdmin = collab?.permission === 'admin';
+    }
+
+    if (!isAdmin) {
+      res.status(403).json({ error: 'Permission denied' });
+      return;
+    }
+
+    const result = db.prepare(`
+      UPDATE project_collaborators SET permission = ? WHERE project_id = ? AND user_id = ?
+    `).run(permission, req.params.id, req.params.userId);
+
+    if (result.changes === 0) {
+      res.status(404).json({ error: 'Collaborator not found' });
+      return;
+    }
+
+    res.json({ message: 'Permission updated', permission });
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      res.status(400).json({ error: 'Invalid input', details: error.errors });
+      return;
+    }
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Remove collaborator
+router.delete('/:id/collaborators/:userId', authenticate, (req: AuthRequest, res: Response) => {
+  const db = getDatabase();
+
+  const project = db.prepare(
+    'SELECT user_id FROM projects WHERE id = ?'
+  ).get(req.params.id) as any;
+
+  if (!project) {
+    res.status(404).json({ error: 'Project not found' });
+    return;
+  }
+
+  const isOwner = project.user_id === req.userId;
+  const isSelf = req.userId === req.params.userId;
+  let isAdmin = isOwner;
+  if (!isOwner && !isSelf) {
+    const collab = db.prepare(
+      'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+    ).get(req.params.id, req.userId) as any;
+    isAdmin = collab?.permission === 'admin';
+  }
+
+  if (!isOwner && !isAdmin && !isSelf) {
+    res.status(403).json({ error: 'Permission denied' });
+    return;
+  }
+
+  const result = db.prepare(
+    'DELETE FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+  ).run(req.params.id, req.params.userId);
+
+  if (result.changes === 0) {
+    res.status(404).json({ error: 'Collaborator not found' });
+    return;
+  }
+
+  res.json({ message: 'Collaborator removed' });
+});
+
 function getDefaultProjectData(framework: string): any {
   const base = {
     files: [] as any[],

server/src/services/realtime.ts

@@ -0,0 +1,240 @@
+import { Server as HttpServer } from 'http';
+import { Server, Socket } from 'socket.io';
+import jwt from 'jsonwebtoken';
+import { config } from '../config';
+import { getDatabase } from '../database';
+import { encryptCombined } from './encryption';
+
+interface AuthPayload {
+  userId: string;
+  username: string;
+  email: string;
+}
+
+interface CollaborationSession {
+  userId: string;
+  username: string;
+  projectId: string;
+  socketId: string;
+  activeFileId: string | null;
+  cursor: { line: number; ch: number } | null;
+  joinedAt: number;
+  permission: 'view' | 'edit' | 'admin';
+}
+
+const sessions = new Map<string, CollaborationSession>(); // socketId -> session
+const projectRooms = new Map<string, Map<string, CollaborationSession[]>>(); // projectId -> { userId -> sessions[] }
+
+let io: Server;
+
+export function initRealtime(httpServer: HttpServer): Server {
+  io = new Server(httpServer, {
+    cors: {
+      origin: config.corsOrigin,
+      credentials: true,
+      methods: ['GET', 'POST'],
+    },
+    pingInterval: 25000,
+    pingTimeout: 20000,
+  });
+
+  // Auth middleware for socket connections
+  io.use((socket, next) => {
+    const token = socket.handshake.auth?.token || socket.handshake.query?.token;
+    if (!token) {
+      return next(new Error('Authentication required'));
+    }
+    try {
+      const decoded = jwt.verify(token as string, config.jwtSecret) as { userId: string; email: string };
+      const db = getDatabase();
+      const user = db.prepare('SELECT id, username, email FROM users WHERE id = ?').get(decoded.userId) as any;
+      if (!user) return next(new Error('User not found'));
+      (socket as any).user = { userId: user.id, username: user.username, email: user.email };
+      next();
+    } catch {
+      next(new Error('Invalid token'));
+    }
+  });
+
+  io.on('connection', (socket: Socket) => {
+    const user = (socket as any).user as AuthPayload;
+
+    // ---- PROJECT ROOM JOINING ----
+    socket.on('join_project', ({ projectId }: { projectId: string }) => {
+      if (!projectId) return;
+
+      // Check permission
+      const db = getDatabase();
+      const project = db.prepare('SELECT user_id FROM projects WHERE id = ?').get(projectId) as any;
+      if (!project) return;
+
+      let permission: 'view' | 'edit' | 'admin' = 'view';
+      if (project.user_id === user.userId) {
+        permission = 'admin';
+      } else {
+        const collab = db.prepare(
+          'SELECT permission FROM project_collaborators WHERE project_id = ? AND user_id = ?'
+        ).get(projectId, user.userId) as any;
+        if (!collab) return; // not a collaborator
+        permission = collab.permission;
+      }
+
+      socket.join(`project:${projectId}`);
+
+      // Track session
+      const session: CollaborationSession = {
+        userId: user.userId,
+        username: user.username,
+        projectId,
+        socketId: socket.id,
+        activeFileId: null,
+        cursor: null,
+        joinedAt: Date.now(),
+        permission,
+      };
+      sessions.set(socket.id, session);
+
+      if (!projectRooms.has(projectId)) {
+        projectRooms.set(projectId, new Map());
+      }
+      const room = projectRooms.get(projectId)!;
+      if (!room.has(user.userId)) {
+        room.set(user.userId, []);
+      }
+      room.get(user.userId)!.push(session);
+
+      // Notify others
+      socket.to(`project:${projectId}`).emit('collaborator_joined', {
+        userId: user.userId,
+        username: user.username,
+        permission,
+        joinedAt: session.joinedAt,
+      });
+
+      // Send current collaborators to the joining user
+      const collaboratorList: any[] = [];
+      for (const [uid, sessions] of room) {
+        for (const s of sessions) {
+          collaboratorList.push({
+            userId: uid,
+            username: s.username,
+            permission: s.permission,
+            activeFileId: s.activeFileId,
+            cursor: s.cursor,
+            joinedAt: s.joinedAt,
+          });
+        }
+      }
+      socket.emit('collaborator_list', { collaborators: collaboratorList });
+    });
+
+    // ---- LEAVE PROJECT ----
+    socket.on('leave_project', ({ projectId }: { projectId: string }) => {
+      leaveProject(socket, projectId);
+    });
+
+    // ---- FILE CHANGE ----
+    socket.on('file_changed', (data: { projectId: string; fileId: string; content: string }) => {
+      const session = sessions.get(socket.id);
+      if (!session || session.permission === 'view') return;
+      socket.to(`project:${data.projectId}`).emit('file_updated', {
+        fileId: data.fileId,
+        content: data.content,
+        updatedBy: user.userId,
+        updatedByUsername: user.username,
+      });
+    });
+
+    // ---- ACTIVE FILE CHANGE ----
+    socket.on('active_file_changed', (data: { projectId: string; fileId: string | null }) => {
+      const session = sessions.get(socket.id);
+      if (session) {
+        session.activeFileId = data.fileId;
+      }
+      socket.to(`project:${data.projectId}`).emit('collaborator_active_file', {
+        userId: user.userId,
+        username: user.username,
+        fileId: data.fileId,
+      });
+    });
+
+    // ---- CURSOR MOVE ----
+    socket.on('cursor_move', (data: { projectId: string; fileId: string; cursor: { line: number; ch: number } }) => {
+      const session = sessions.get(socket.id);
+      if (session) {
+        session.cursor = data.cursor;
+        session.activeFileId = data.fileId;
+      }
+      socket.to(`project:${data.projectId}`).emit('collaborator_cursor', {
+        userId: user.userId,
+        username: user.username,
+        fileId: data.fileId,
+        cursor: data.cursor,
+      });
+    });
+
+    // ---- SAVE PROJECT (via WS instead of REST) ----
+    socket.on('save_project', (data: { projectId: string; data: any }, callback?: (response: any) => void) => {
+      const session = sessions.get(socket.id);
+      if (!session || session.permission === 'view') {
+        if (callback) callback({ error: 'Permission denied' });
+        return;
+      }
+      saveProjectData(session, data.projectId, data.data, callback);
+    });
+
+    // ---- DISCONNECT ----
+    socket.on('disconnect', () => {
+      const session = sessions.get(socket.id);
+      if (session) {
+        leaveProject(socket, session.projectId);
+        sessions.delete(socket.id);
+      }
+    });
+  });
+
+  return io;
+}
+
+function leaveProject(socket: Socket, projectId: string) {
+  const room = projectRooms.get(projectId);
+  if (room) {
+    const userSessions = room.get((socket as any).user?.userId);
+    if (userSessions) {
+      const idx = userSessions.findIndex(s => s.socketId === socket.id);
+      if (idx !== -1) userSessions.splice(idx, 1);
+      if (userSessions.length === 0) room.delete((socket as any).user?.userId);
+    }
+    if (room.size === 0) projectRooms.delete(projectId);
+  }
+  socket.leave(`project:${projectId}`);
+  sessions.delete(socket.id);
+  socket.to(`project:${projectId}`).emit('collaborator_left', {
+    userId: (socket as any).user?.userId,
+  });
+}
+
+function saveProjectData(session: CollaborationSession, projectId: string, data: any, callback?: (response: any) => void) {
+  try {
+    const db = getDatabase();
+    const encryptedData = encryptCombined(JSON.stringify(data));
+    const now = Date.now();
+    db.prepare(
+      'UPDATE projects SET encrypted_data = ?, encryption_iv = ?, updated_at = ? WHERE id = ?'
+    ).run(encryptedData, '', now, projectId);
+
+    io.to(`project:${projectId}`).emit('project_saved', {
+      updatedAt: now,
+      savedBy: session.username,
+    });
+
+    if (callback) callback({ success: true, updatedAt: now });
+  } catch (error: any) {
+    console.error('Save project error:', error);
+    if (callback) callback({ error: 'Save failed' });
+  }
+}
+
+export function getIO(): Server {
+  return io;
+}