feat: implement real-time collaborative workspace with WebRTC voice, Yjs-backed code editor, and socket-based synchronization

Author: tusquake

client/src/pages/CodeEditor.jsx

@@ -121,7 +121,7 @@ export default function CodeEditor() {
         setCode(BOILERPLATES[lang]);
     };
 
-    // Intercept Tab key for insertion of 4 spaces
+    // Intercept Tab key and Ctrl+Space for AI Autocomplete
     const handleKeyDown = (e) => {
         if (e.key === 'Tab') {
             e.preventDefault();
@@ -136,6 +136,9 @@ export default function CodeEditor() {
                     textareaRef.current.selectionStart = textareaRef.current.selectionEnd = start + 4;
                 }
             }, 0);
+        } else if (e.key === ' ' && e.ctrlKey) {
+            e.preventDefault();
+            triggerInlineCompletion();
         }
     };
 
@@ -298,6 +301,59 @@ Provide instructions and modified code structure to achieve this request.`;
         }
     };
 
+    // Hotkey triggered AI Autocomplete continuation
+    const triggerInlineCompletion = async () => {
+        if (!aiIntellisense || !textareaRef.current) return;
+        
+        const cursor = textareaRef.current.selectionStart;
+        const textBefore = code.substring(0, cursor);
+        const textAfter = code.substring(cursor);
+        
+        setTerminalOutput(prev => [
+            ...prev,
+            { type: 'info', text: 'AI Copilot: Suggesting code completion...' }
+        ]);
+
+        const prompt = `You are an inline code auto-complete assistant.
+Given the code prefix and suffix, return ONLY the direct next few lines of code to continue the logic. Do not write explanations or wrap the code in markdown blocks.
+
+Code Prefix:
+${textBefore}
+
+Code Suffix:
+${textAfter}
+
+Completion:`;
+
+        try {
+            const completion = await callLlm(prompt);
+            // Clean markdown blocks if LLM wrapped it
+            let cleanCompletion = completion.trim();
+            if (cleanCompletion.startsWith('```')) {
+                cleanCompletion = cleanCompletion.replace(/```[a-z]*\n/, '').replace(/```$/, '');
+            }
+            
+            const newVal = textBefore + cleanCompletion + textAfter;
+            setCode(newVal);
+            
+            setTimeout(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursor + cleanCompletion.length;
+                }
+            }, 0);
+
+            setTerminalOutput(prev => [
+                ...prev,
+                { type: 'system', text: 'AI Copilot: Inserted completion successfully.' }
+            ]);
+        } catch (err) {
+            setTerminalOutput(prev => [
+                ...prev,
+                { type: 'stderr', text: `AI Copilot Error: ${err.message}` }
+            ]);
+        }
+    };
+
     // Apply Suggestion from AI Panel to Editor
     const applyAiSuggestion = () => {
         // Extract code block from AI Response
@@ -518,7 +574,7 @@ Provide instructions and modified code structure to achieve this request.`;
                                     onKeyDown={handleKeyDown}
                                     onScroll={handleScroll}
                                     className={`flex-1 py-4 px-4 bg-transparent outline-none border-none resize-none font-mono focus:ring-0 ${styles.textarea} overflow-y-auto`}
-                                    placeholder="Write your code here..."
+                                    placeholder="Write your code here... Press [Ctrl + Space] for AI Autocomplete"
                                     spellCheck={false}
                                 />
                             </div>

client/src/pages/CollaborativeWorkspace.jsx

@@ -224,6 +224,11 @@ export default function CollaborativeWorkspace() {
       setChatMessages((prev) => [...prev, msg]);
     });
 
+    // Delete Chat Message
+    newSocket.on('delete-message', (msgId) => {
+      setChatMessages((prev) => prev.filter((m) => m.id !== msgId));
+    });
+
     // Yjs Update Handling
     newSocket.on('yjs-update', (updateArray) => {
       try {

server/sockets/collaborativeWorkspace.js

@@ -41,6 +41,15 @@ function initCollaborativeWorkspace(io) {
           canvasHistory: [],
           cleanupTimer: null
         };
+        
+        // Add virtual AI partner to room users list
+        workspace.users.set('forgeai', {
+          socketId: 'forgeai',
+          username: 'ForgeAI (AI Partner)',
+          avatarColor: '#8b5cf6',
+          cursor: null
+        });
+
         workspaces.set(roomId, workspace);
       }
 
@@ -50,7 +59,9 @@ function initCollaborativeWorkspace(io) {
         console.log(`Cancelled cleanup timer for room: ${roomId}`);
       }
 
-      if (workspace.users.size >= MAX_USERS_PER_ROOM) {
+      // Count human users (exclude 'forgeai')
+      const humanCount = Array.from(workspace.users.values()).filter(u => u.socketId !== 'forgeai').length;
+      if (humanCount >= MAX_USERS_PER_ROOM) {
         socket.emit('room-error', 'Room is full (Maximum 5 users).');
         return;
       }
@@ -145,6 +156,11 @@ function initCollaborativeWorkspace(io) {
       }
 
       io.to(roomId).emit('new-message', messageObj);
+
+      // Trigger ForgeAI if message targets the agent
+      if (text && text.trim().toLowerCase().startsWith('@forgeai')) {
+        handleForgeAIMessage(roomId, io, text);
+      }
     });
 
     // Live shared AI assistant stream
@@ -341,8 +357,9 @@ Provide a concise, expert answer. If correcting code, explain the bug briefly an
       workspace.users.delete(socket.id);
       io.to(roomId).emit('user-left', socket.id);
 
-      // If room is empty, trigger cleanup grace period
-      if (workspace.users.size === 0) {
+      // If room is empty of human users, trigger cleanup grace period
+      const humanCount = Array.from(workspace.users.values()).filter(u => u.socketId !== 'forgeai').length;
+      if (humanCount === 0) {
         workspace.cleanupTimer = setTimeout(() => {
           workspaces.delete(roomId);
           console.log(`🧹 Room ${roomId} has been deleted from memory (empty and inactive).`);
@@ -352,4 +369,148 @@ Provide a concise, expert answer. If correcting code, explain the bug briefly an
   });
 }
 
+// Helper for parsing JSON safely from LLM response
+function parseJsonResponse(text) {
+  let cleanText = text.trim();
+  if (cleanText.startsWith('```json')) {
+    cleanText = cleanText.substring(7);
+  } else if (cleanText.startsWith('```')) {
+    cleanText = cleanText.substring(3);
+  }
+  if (cleanText.endsWith('```')) {
+    cleanText = cleanText.substring(0, cleanText.length - 3);
+  }
+  cleanText = cleanText.trim();
+  
+  try {
+    return JSON.parse(cleanText);
+  } catch (e) {
+    const firstBrace = cleanText.indexOf('{');
+    const lastBrace = cleanText.lastIndexOf('}');
+    if (firstBrace !== -1 && lastBrace !== -1) {
+      const jsonSubstring = cleanText.substring(firstBrace, lastBrace + 1);
+      return JSON.parse(jsonSubstring);
+    }
+    throw e;
+  }
+}
+
+// Background handler for ForgeAI interaction
+async function handleForgeAIMessage(roomId, io, text) {
+  const workspace = workspaces.get(roomId);
+  if (!workspace) return;
+
+  const promptText = text.replace(/^@forgeai/i, '').trim();
+  if (!promptText) return;
+
+  // 1. Emit a temporary typing message
+  const aiTempMsgId = `msg-forgeai-loading-${Date.now()}`;
+  const tempMessageObj = {
+    id: aiTempMsgId,
+    sender: 'ForgeAI (AI Partner)',
+    avatarColor: '#8b5cf6',
+    text: '🤖 ForgeAI is typing...',
+    timestamp: new Date().toISOString()
+  };
+  io.to(roomId).emit('new-message', tempMessageObj);
+
+  try {
+    const geminiApiKey = process.env.GEMINI_API_KEY;
+    if (!geminiApiKey) {
+      throw new Error("Gemini API key is not configured on the server.");
+    }
+
+    const currentCode = workspace.yDoc ? workspace.yDoc.getText('monaco').toString() : '';
+    
+    const systemPrompt = `You are "ForgeAI", an autonomous AI programming partner participating in a collaborative room.
+You are helping developers with code. You can either just chat/explain, or edit the shared code document directly.
+If they ask you to write, modify, refactor, add, fix, or optimize code, you should perform an "edit". Otherwise, perform a "chat".
+
+Current Code in the Editor:
+${currentCode}
+
+User request: "${promptText}"
+
+You must respond with ONLY a valid JSON object. Do not include markdown code block backticks around the JSON.
+Schema:
+{
+  "action": "chat" | "edit",
+  "message": "Your conversational response/explanation to the developers in the chat.",
+  "code": "If action is 'edit', the COMPLETE modified code content. If action is 'chat', leave this empty."
+}
+`;
+
+    const genAI = new GoogleGenerativeAI(geminiApiKey);
+    const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' });
+    const result = await model.generateContent(systemPrompt);
+    const responseText = result.response.text();
+    
+    // Parse response
+    let parsed;
+    try {
+      parsed = parseJsonResponse(responseText);
+    } catch (err) {
+      console.error("Failed to parse ForgeAI response:", responseText, err);
+      parsed = {
+        action: "chat",
+        message: parsed?.message || responseText,
+        code: ""
+      };
+    }
+
+    // Delete temporary loading message
+    io.to(roomId).emit('delete-message', aiTempMsgId);
+
+    // Send final message to chat
+    const finalMsgObj = {
+      id: `msg-forgeai-${Date.now()}`,
+      sender: 'ForgeAI (AI Partner)',
+      avatarColor: '#8b5cf6',
+      text: parsed.message || 'I have completed your request.',
+      timestamp: new Date().toISOString()
+    };
+    workspace.messages.push(finalMsgObj);
+    if (workspace.messages.length > MAX_MESSAGE_HISTORY) {
+      workspace.messages.shift();
+    }
+    io.to(roomId).emit('new-message', finalMsgObj);
+
+    // If edit action, apply changes to Yjs doc
+    if (parsed.action === 'edit' && parsed.code) {
+      const textType = workspace.yDoc.getText('monaco');
+      workspace.yDoc.transact(() => {
+        textType.delete(0, textType.length);
+        textType.insert(0, parsed.code);
+      });
+
+      const update = Y.encodeStateAsUpdate(workspace.yDoc);
+      io.to(roomId).emit('yjs-update', Array.from(update));
+
+      // Emit a system notification in the chat
+      const sysMsg = {
+        id: `msg-sys-${Date.now()}`,
+        sender: 'System',
+        avatarColor: '#94a3b8',
+        text: `⚙️ ForgeAI has updated the active code buffer.`,
+        timestamp: new Date().toISOString()
+      };
+      workspace.messages.push(sysMsg);
+      if (workspace.messages.length > MAX_MESSAGE_HISTORY) {
+        workspace.messages.shift();
+      }
+      io.to(roomId).emit('new-message', sysMsg);
+    }
+  } catch (error) {
+    console.error("ForgeAI Agent Error:", error);
+    io.to(roomId).emit('delete-message', aiTempMsgId);
+    io.to(roomId).emit('new-message', {
+      id: `msg-forgeai-err-${Date.now()}`,
+      sender: 'ForgeAI (AI Partner)',
+      avatarColor: '#8b5cf6',
+      text: `⚠️ Sorry, I encountered an error: ${error.message}`,
+      timestamp: new Date().toISOString()
+    });
+  }
+}
+
 module.exports = initCollaborativeWorkspace;